전체 글

Map이란? map은 key-value를 한쌍으로 가지는 객체입니다. 이때 key값은 고유해야 하며 값은 변경이 가능합니다. Map 시작하기 const db = new Map(); Map 생성은 아주 간단합니다. new Map()을 통해 새로운 객체를 생성하면 되는데요. 생성을 했으니 Map에 데이터를 넣어봅시다. Map 데이터 삽입 // db.set(키, 벨류) db.set('lang','javascript') // value값이 객체일때 db.set('lang',{a : 'javascript', b : 'node'}) // key값이 객체일때 db.set({key : a}, {lang : 'javascript'}) // 여러개를 삽입할때 - 체이닝 db.set('name':'kim').set('age..

폴더, 파일, 변수, 함수, 클래스명과 같은 이름을 정할 때 아무렇게 짓는 게 아니라 그들만의 규칙이 존재합니다. [snake_case], [kebab-case], [camelCase], [PascalsCase]가 존재하는데요. [kebab-case]와 [snake_case] ex. object-api-demo.js, demo-api 폴더나 파일에 자주 쓰이는 kebab-case와 snake_case, 이 둘은 알파벳 소문자를 사용하며 두 개이상의 단어를 합칠 때 단어 사이에 kebab-case의 경우는 하이픈('-'), snake_case의 경우에는 언더바('_')를 사용을 해줍니다. 둘 중에 하나를 사용하시되 꼭 통일해야 한다는 점 잊으시면 안 됩니다. [camelCase] ex. productNam..

express에서 제공하는 request 객체에는 우리가 사용하는 body, query, params라는 속성이 존재합니다. 각각 어떤 걸 내포하는지 어떤 의미인지 알아봅시다. req.params 라우터의 매개변수로 /:nickname/:num이라는 경로가 존재할 때 각각의 nickname과 num이라는 속성을 req.params.nickname, req.params.num으로 받아올 수 있습니다. 예시 : https://www.youtube.com/@tvNDENT 이런 주소가 존재할 때 https://www.youtube.com/:계정명으로 로 경로를 받고 req.params.계정명으로 값을 받아올 수 있습니다. req.query 주소의 뒤에 /:prams?name=이름데이터&age=나이데이터로 작성된..

데이터 타입의 종류로는 number, string, object, boolean, bigint 등이 있는데요 라우터 매개변수를 가져올수 있는 params는 데이터를 무조건 문자열로 받아옵니다. app.get('products/:n', (요청, 응답)=>{ 응답.json({ num : 요청.params.n }) }) http://localhost:8080/products/10 {"num" : "10"} 이렇게 params를 통해 데이터를 받으면 문자열로 들어오는데요. string으로 들어왔지만 number 타입과 계산이 가능합니다. 바로 자바스크립트이기 때문인데요. app.get('products/:n', (요청, 응답)=>{ 응답.json({ num : 요청.params.n - 10 }) }) http:..

비구조화 할당이란? 다른 말로 구조 분해 할당이라 하며 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 개별 변수에 각각 담아 사용하는 자바스크립트 표현식을 말합니다. 배열의 비구조화 할당 // 기존 배열의 변수 할당 const array = [1,2,3,4,5] const num1 = array[0] const num5 = array[4] console.log (num1, num5) // 1, 5 // 비구조화 할당 const [num1, num5] = [1,2,3,4,5] console.log(num1,num5) // 1, 2 // 비구조화 할당 시 새로운데이터 추가 const [num1, num5, num6 = 6] = [1,5] console.log(num1, num5, num6) // 1,5,..

오늘 수업 내용📚 express express를 이용하여 REST API 실습 객체와 json 멘토링 정리내용📑 객체란? 오늘은 express의 전반적인 작동원리에 대해서 공부를 했는데, 정확하게 express가 무엇인지 찾아보고 정리를 해보는 시간을 가졌던 것 같습니다. 이론을 익히기보다 그냥 맨땅에 헤딩하는 것처럼 항상 코드를 짰었는데 이렇게 원리를 배우면서 코드를 작성하니 새롭고 부족한 자신을 돌아보는 시간을 가졌던 것 같습니다. 그리고 데브코스 처음으로 멘토링을 진행했는데 그동안 궁금했던 점이나 취업할 때 어떻게 준비를 해야 하는지를 많이 물어봤던 것 같습니다. 그리고 어떻게 공부를 하면 좋을지에 대해서도 얘기해 주셨는데 야생학습 방식으로 해보는 걸 추천받아서 자세히 알아보고 공부하는데 참고할 생..

서버에서 데이터 전달하기 express를 통해서 서버를 구동하는 것까지 배웠다면 response 즉 응답을 통해 데이터를 전달하는 방법에 대해서 이야기해 보려고 합니다. app.get('/products/1',(요청, 응답)=>{ 응답.send('상품이름') }) 데이터를 전송하는걸 우리는 이렇게 배웠는데요. 보통 우리가 데이터를 전송을 할 때 데이터는 하나의 값만 가지는 경우가 많이 없습니다. 예를 들어서 이런 티켓예매 사이트를 운영한다고 가정하면 공연제목, 장소, 기간, 시간, 연령, 가격, 포스터 등등 다양한 정보를 받습니다. 이런 경우에는 어떻게 데이터 정보를 넘겨야 할까요? app.get('/products/1',(요청, 응답)=>{ 응답.send('공연명') 응답.send('공연장소') 응답...

express 란? express는 node에서 지원하는 백엔드 어플리케이션 프레임워크입니다. 현재 express는 가장 사용자가 많은데요 그만큼 만족도가 높다는 뜻이겠죠? npm express 바로가기 | express 바로가기 express 시작하기 express는 npm을 통해 터미널에서 설치를 해야 합니다. npm install express express 설치 후, js파일을 열어 아래와 같은 코드를 작성해 주면 기본적인 express 서버 구동이 끝이 나게 됩니다. //server.js const express = require('express') const app = express() app.get('/', function (req, res) { res.send('Hello World') }..

하나 손해 보험 클론코딩 프로젝트 팀원 변성은🐇 작업파트 - 즐겨찾기 ~ NOTICE + RECRUIT 이성은 🐢 작업파트 - event slide ~ footer 전다해 🐣 작업파트 - header ~ visual 프로젝트 정보 - project github 프로젝트 목적 git branch를 생성하여 따로 작업후 최종적으로 merge까지 완성 - 충돌에 대응할 수 있는가? 프로젝트 구현 팀 밸런스를 맞춰 동적기능을 넣기 보다 수업시간에 배운 마크업과 css만으로 클론코딩을 진행 단, header의 경우는 동적기능을 넣어서 메뉴바 구현 프로젝트 기간 2023.11. 20 ~ 2023.11. 23 프로젝트 구조 ├─ index.html - 하나손해보험 마크업 ├─ css │ └─ index.css - r..