타닥타닥 개발자의 일상

페이지의 기본 구조 1. 전체 댓글을 볼수 있는 목록 페이지 2. 전체 댓글목록에서 detail 클릭 클릭하면 넘어가는 특정 댓글 페이지 (댓글 수정 및 삭제 가능) 3. 특정 댓글 수정페이지 4.새로운 댓글 작성 페이지 이 페이지는 서버를 구동하기 위해서 express 패키지를 사용하였으며 템플릿으로는 ejs를 사용했다. 또한 유니크한 아이디를 만들기 위해서 uuid 패키지, 특정조건에서 Restful 명령어를 실행하기 위한 method-overide 패키지도 사용했다. package.json 파일 { "name": "reststudy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Erro..

함수를 사용할때는 보통 함수에 대입할 파라미터(매개변)를 넣는다. 파라미터를 넣어야지 본인이 얻고 싶은 값이 나오기 때문이다. 하지만 파라미터를 대입하지 않아도 기본적으로 출력되는 값을 설정할수 있다. 바로 함수의 default 값 설정을사용하면 된다. 아래의 createBooking 이란 함수를 보자, 'use strict'; const bookings = []; const createBooking = function ( flightNum, numPassengers = 1, price = 199 * numPassengers ) { const booking = { flightNum, numPassengers, price, }; console.log(booking); bookings.push(booking..

처음부터 정보를 형식에 맞춰서 받으면 정말 좋겠지만, 현실은 그렇지 않다. 보통은 어지럽게 혼합된 정보를 본인이 필터링하고 다듬어서 형식을 갖추게 한다음 고객에게 전달하곤한다. 예를 들어 항공편의 정보가 아래와 같이 전달되었다고 해보자 const flights = '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30'; 지연 비행기와 도착시간등이 어지럽게 정보안에 섞여 있어서 한번에 알아보기 쉽지 않다. 해당 정보로 서비스를 하기 ..

언더바 표기법으로 작성된 변수의 이름을 카멜표기법으로 변환하는 프로그램을 만들어라 textarea에 입력된 내용은 버튼이 클릭되면 변환된다. 아래의 테스트 데이터를 textarea에 붙여넣고 한번에 변환한다. underscore_case first_name Some_Variable calculate_AGE delayed_departure 버튼을 누를시 아래처럼 변환 되어야한다. textarea에 입력된 내용, 클릭하는 버튼은 아래의 DOM 언어를 통해서 삽입된다. document.body.append(document.createElement('textarea')); document.body.append(document.createElement('button')); index.html Make Functi..

문자열을 활용할 수 있는 다양한 자바스크립트 메서드를 알아보자. 문자열을 기준문자 단위로 나눠주는 split 메서드 //split and join console.log('a+very+nice+string'.split('+')); //['a', 'very', 'nice', 'string'] console.log('Nomad Haven Heaven'.split(' '));//(3) ['Nomad', 'Haven', 'Heaven'] const [firstName, lastName] = 'Nomad Havenheaven'.split(' '); const newName =['Miss.',firstName, lastName.toUpperCase()].join(' ') console.log(newName); //M..

자바스크립트는 문자열을 편집하는 다양한 메서드를 제공한다. 해당 메서드는 무척 유용한 게 많아서 잘 알아두면 나중에 큰 도움이 될 것이다. 그렇다면 문자열 string 을 편집하는 메서드는 무엇이있는지 알아보자. 문자열을 대소문자로 변환하는 기능 const airline = 'TAP Air Portugal'; console.log(airline.toLowerCase()); //tap air portugal console.log(airline.toUpperCase()); //TAP AIR PORTUGAL console.log('nomad'.toUpperCase()); .toLowerCase() 메서드를 이용하면 문자열을 한번에 소문자로 바꾸는 게 가능하다 .toUpperCase() 메서드를 이용하면 문자열..

gameEnvets 라는 이름의 Map은 축구 경기동안 발생한 사건과 시간의 자료를 담은 자료구조이다. 첫번재 key 값은 경기 시작 이후 사건이 발생한 시간이며 두번재 value 값은 해당 시간에 발생한 사건이다. const gameEvents = new Map([ [17, '⚽ GOAL'], [36, '🔛 Substitution'], [47, '⚽ GOAL'], [61, '🔛 Substitution'], [64, '🟨 Yellow card'], [69, '🟥 Red card'], [70, '🔛 Substitution'], [72, '🔛 Substitution'], [76, '⚽ GOAL'], [80, '⚽ GOAL'], [92, '🟨 Yellow card'], ]); 해당 사항을 참고하여 아래의 문제..

데이터의 출처는 세가지 종류가 있다. 1. 프로그램 그 자체 : 데이터가 소스 코드 자체에 적혀있는 경우 (status messages) 2. UI를 통해서 : 유저의 input이나 DOM으로 쓰여진 데이터(tasks in todo app) 3. 외부의 출처를 통해 : Web API 통해서 불러오는 데이터들 (recipe obejct) 이러한 데이터들은 collection of data 데이터의 집합이며 Data structure 자료 구조체를 가진다. 만약 데이터가 단순한 리스트에 대한 값이라면 👉 Arrays or Set 이 적절하다. 만약 데이터가 key,value 값이 필요하다면👉 Object or Map 이 적절하다. key는 vlaue를 설명하는 역할을 한다. 따라서 value에 추가적 설명이..

이전의 글을 통해서 Map이라는 자료 구조를 배워봤다. 그렇다면 Map을 어떻게 활용할수 있을까? 아래 코드와 같이 question이라는 이름을 가지는 Map 형태의 자료 구조가 있다고 하자. const question = new Map([ ['question', 'What is the best programming language in the world?'], [1, 'C'], [2, 'Java'], [3, 'JavaScript'], ['correct', 3], [true, 'Correct 😜'], [false, 'Try again'], ]); 우리가 만들고 싶은 앱은 1. prompt창에서 "What is the best progamming language in the world?' 라는 질문이 뜨고..

자바스크립트에는 다양한 형태의 구조체가 있다. array는 element별로 인덱스가 있고 인덱스 별로 요소를 구분, 외부에서 요소를 호출도 가능하다. 단점은 요소별로 중복된 값이 있을때 중복 값을 제거하거나 중복된 인수의 값을 구하기가 번거롭다는 점이다. Set는 중복된 element를 여러번 추가해도 고유한 element 하나만 요소로 가지는 특징이 있다. 따라서 배열내의 중복값을 제거하거나 고유한 요소의 수를 파악할때 좋은 구조체이다. 단점은 Set에는 인덱스가 없다. 따라서 외부에서 Set내의 element를 key값을 통해서 호출하지 못한다. array와 Set의 아쉬운 점을 보완하는 구조체가 바로 Map이다. 그렇다면 Map의 사용 사례를 알아보자. const rest = new Map(); ..