JavaScript53 [220127] 상수와 리터럴의 차이, 객체리터럴, 템플릿리터럴 목록 1. 상수와 리터럴의 차이 2. 객체 리터럴 3. 템플릿 리터럴 리터럴이 뭐냐고 물어본다면 엄.. 몰라요? 근데 쓰긴 썼었던거 같은데?하는것도 한두번이지, 자꾸 찾기도 귀찮아서 수업을 들을때마다 은은하게 지나가며 들었던 리터럴에 대해 찾아보았다. 말 그대로 제공하는 변수가 아니라 고정값 검색할때 언제나 먼저 찾게되는 MDN이 리터럴에 대해 설명한 글이다. 고정값은 상수가 아닌가? 상수랑은 뭐가 다른걸까? 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. '상수의 값'을 재할당할 수 없다는 것과 상수에는 숫자뿐만이 아니라 객체도 넣을 수 있다는 것에 집중해야한다. 상수 : 배열과 변수의 차이 const b = {} b.box1 = 10 console.log(b.box1) b.box1 = 2.. 2022. 2. 10. [220127] 변수와 프로퍼티의 차이, 구조 분해 할당 목록 1. 프로퍼티 2. 변수와 프로퍼티의 차이점 3. 구조 분해 할당 자바스크립트는 객체지향언어 제일 먼저 알아야할 개념이다. 간단하게, 객체로 이루어진 프로그램이라고 생각하면 되겠다. 그 안에서 객체끼리 상호작용을 하고, 만들어지고, 사라지며 서로 관계를 맺으며 만들어지는 생태계다. 그러므로 앞으로 설명할 단어들의 간단한 기준은 무조건 객체로 나뉘어진다. 한마디로, 객체 내부에 있느냐 vs 없느냐. (기억 안나서 이 게시물을 찾아온 바쁜 나를 위해 메모 : 맨 밑에 2줄 정리 해놨다.) 구분의 기준점 : 객체 객체는 프로퍼티로 구성되어 있고, 프로퍼티 값이 함수일 경우는 일반함수와 구분하기 위해 메서드라고 부른다. 일반함수와 메서드가 뭐가 다르길래 구분을 하는거지?했는데, class가 존재하는 다른 .. 2022. 2. 10. [220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수 목록 1. 라우터와 미들웨어 2. 미들웨어 매개변수 next 3) 라우터 매개변수 미들웨어와 라우터의 정의 미들웨어는 양쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어다. 라우터는 클라이언트의 요청경로를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해 주는 역할을 한다. 이러한 역할을 라우팅이라고 하는데, URI(통합 자원 식별자, 인터넷에 있는 자원을 나타내는 주소)의 정의와 URI가 클라이언트 요청에 응답하는 방식을 의미한다. express에선 라우터를 미들웨어로 다음과 같은 기능을 제공하고 있다. 1) 라우터 객체 참조 2) 라우팅 함수 등록 3) 라우터 객체를 app객체에 등록 해당 라우터가 실행되면 첫번째 인자값인 '/'을 충족한 후에, 두번째 인자값인 미.. 2022. 2. 9. [220207] 로그인 페이지 만들기 목록 1. 청사진 그리기 2. login 페이지 3. logout 페이지 4. profile 페이지 청사진 그리기 login페이지 정보를 입력할 창 만들기 & 입력한 정보가 터미널에 찍히도록 만들기. 브라우저에서 입력한 정보와 user라는 객체에 있는 정보가 서로 일치하는지 확인하기 오류해결 [ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client at new NodeError 해결하기 코드를 잘못 적어서 에러가 났는데, if문이나 반복문에서 중복된 값이 호출될때 생기는거라고하더라. 보니까 사이트를 2번 호출하게 잘못 적어서 해결함. 로그인이 성공했을때, 쿠키 만들어주기 res.setHeader(`Set-Cookie`,`lo.. 2022. 2. 8. [220207] 쿠키 / http 요청, 응답, 브라우저, 특징 [목록] 사전지식 : 응답헤더에 임의로 값을 추가하기 브라우저의 저장소 중 하나인 쿠키 사용자마다 다른 정보를 브라우저에 저장하는 쿠키값 쿠키 사용 설명서 코드의 실행흐름 쿠키에 저장한 내용을 다루기 쿠기의 유효기간, 접근권한 사전지식 : 응답헤더에 임의로 값을 추가하기 이전수업까지는 body 내용만 작성해서 보냈지 header부분은 작성해서 보낸적이 없다. express가 header부분을 작성해주던 긴 텍스트. 오늘은 express가 만들어주는 헤더에다가 우리가 임의로 추가해서 넣을것이다. 응답을 줄때 헤더에 내용을 추가할거니까 다음 코드를 작성한다. res.Header('headerKey','headerValue') : 둘다 string인 인자값을 가짐 app.get('/',(req,res)=>{ .. 2022. 2. 7. [220204] 서버로 이루어진 게시판 만들기(CRUD 구현 : 생성,작성,수정,삭제) 목록 1. 홈 만들기 2. 리스트 게시판 만들기 3. 글쓰기 게시판 만들기 4. 글보기 게시판 만들기 5. 글삭제 기능 만들기 6. 글수정 기능 만들기 여태까지 배웠던 내용을 총 정리하면서 게시판을 만들어보자. 웹템플릿 express, 템플릿엔진 nunjucks를 사용하기 위한 전제코드는 밑에 적어놓고, 앞으로 설명할때는 생략하겠다. //express를 쓰기 위한 세팅 const express=require('express') const app=express() //nunjucks를 쓰기 위한 세팅 const nunjucks=require('nunjucks') app.set('view engine','html') nunjucks.configure('views',{ express:app }) //heade.. 2022. 2. 4. [220127] 콜백함수를 활용한 자동차 레이싱 게임 [ 목표 ] 세 대의 차를 아반떼>소나타>제네시스 순서대로 출발시킨다. 출발할때 GO!라는 텍스트를 표시한다. 도착할때 END!라는 텍스트를 표시한다. 한대의 차가 출발하고 도착하고나서 다음 차가 출발하게 한다. 3대의 차가 도착하고나면 경기끝!이란 텍스트를 표시한다. 시도 1) 우선 콜백함수를 차례대로 생성해서 출력값을 만들어서 결과값을 보자. const 아반떼 = () => { console.log('아반떼 GO!') setTimeout(()=>console.log('아반떼 END!'),1000) } const 소나타 = () => { console.log('소나타 GO!') setTimeout(()=>console.log('소나타 END!'),1000) } const 제네시스 = () => { c.. 2022. 2. 2. [220105] 콜스택과 메모리힙, 스택과 힙, 메모리 할당 순서 목록 1. 스택구조 2. 큐구조 3. 콜스택 4. 메모리힙 간단한 자료구조를 배웁시다 : 스택 구조, 큐 구조 알고 있던것 같더라도 막상 설명하려고하면 어 뭐더라..?하고 생각하게 되는 스택과 큐 구조의 차이점을 알아보자 스택구조(LIFO) Last in , First Out / 후입선출 프링글스통에 들어가있는 과자를 생각하면 편함. 가져오기 O(n) -> 시간복잡도 여러번 반복할때 실행하는 횟수 for문처럼 저장하기 O(1) -> 한번 실행할때 삭제하기 O(1) -> 위에서부터 삭제(추가도 마찬가지. 한 방향으로만 가능한 스택) 큐구조 (FIFO) First in, First Out / 선입선출 편의점 냉장고를 생각하자. 뒤에서 순서대로 채우지만 꺼낼때는 앞에서 꺼냄. 가져오기 O(n) 저장하기 O(.. 2022. 2. 2. [220127] promise, then, resolve 목록 1. promise의 목적 2. promise의 매개변수 2가지 3. then 사용법 4. promise의 상태 3가지 5. resolve 사용하는 법 promise를 사용하기 위한 선수지식 : 객체와 this 간단 정리! this에 관한 자세한 설명은 아래 블로그 게시글에 --> https://hancoco.tistory.com/36 [220107] this와 new 그리고 arrow function 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체란 붕어빵을 만드는 붕어빵 틀, this !주의! 우선, 가볍게만 알자. 깊게 들어가면 내용이 상 hancoco.tistory.com promise의 목적 콜백 기능은 그대로! 하지만 코드는 좀 더 깔끔.. 2022. 2. 2. [220128] 콜백 함수와 익명함수의 차이점, 콜백지옥 익명함수와 콜백함수의 차이점 익명함수 이름 없이 생성된 함수라고 생각하면 된다. 함수명 대신 변수명에 저장되고, 호출할때 변수명을 사용하면 된다. function을 생략하고 =>을 가진 모양으로도 나타낼 수 있으며, 화살표를 달고있다고해서 애로우 함수라고도 한다. 익명 함수에 대한 자세한 설명글은 아래 게시글에 적어놓음. let abc = function() { console.log('익명함수') } let abc2 = () => { console.log('익명함수') } https://hancoco.tistory.com/75 [220107] 익명함수, arrow함수, 함수가 생성되고 호출되는 순서 목록 1. 함수를 선언하는 여러가지 방법 2. 함수가 생성되는 순서 3. 익명함수 4. 호출되는 순서 함수.. 2022. 1. 28. 이전 1 2 3 4 5 6 다음
