useReducer는 단일 상태를 관리하는 useState보다 더 복잡한 state를 관리할 때 유용하게 사용할 수 있는 React Hook이다.간단한 카운트 앱으로 useState와 useReducer의 차이를 알아보자.이렇게 useState를 이용하여 카운트 앱을

React Docs Beta API를 보고 학습한 내용입니다.useState는 컴포넌트에 상태 변수를 생성할 수 있는 React Hook이다.React로부터 useState를 가져온 후 컴포넌트의 최상위 레벨에서 선언하여 컴포넌트에 state를 추가한다.useState

React에서 Router를 설정하고 있었는데 에러가 발생했다.Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component잘못된 props인 '

Express 정적 파일 사용하기 Guide정적 파일을 제공한다는 것은 대표적인 예로 클라이언트 요청에 따라 이미지나 CSS나 JavaScript와 같은 파일을 제공하는 것이다.Express에서 정적 Assets 파일을 사용하려면 아래의 express 객체의 메서드를

이 템플릿은 라우터로부터 랜덤한 숫자 Num을 res.render() 메서드의 두번째 인자인 객체의 형태로 전달받고 있다.그 후 <%= 구문으로 HTML에 출력되고 있다.근데 만약 이 랜덤한 값이 짝수일 때 h2태그로 짝수인지 홀수인지 출력하려면 어떻게 해야할까?

EJS 같은 템플레이팅 엔진을 사용하는 이유는 로직을 더하고 데이터를 보충해서 구성하기 위함이다.쉽게 말하자면 템플레이팅 엔진은 반복이나 조건이 있는 여러 값이 들어가는 HTML의 성능을 올리는 것이 목적이다.그러기 위해서 EJS 구문을 확실히 익히는 것 또한 중요하다

EJS 패키지를 설치하고 app.set()으로 Express에게 EJS를 사용할 것이라고 알려줬다.그런데 여기서 views 디렉토리에 문제가 있다.views의 상위 디렉토리 내에서 서버를 실행하고 요청을 하면 정상적으로 페이지가 렌더링이 된다.하지만 views의 상위

템플레이팅을 위해 EJS를 사용하는데 Express에게 알려줘야한다.EJS란?Embedded JavaScript먼저 EJS를 설치를 하고,app.set() 메서드로 view engine을 ejs로 설정을 한다.이 설정을 마치고 나면 새 Express 앱을 만들고 vie

Express를 공부하면서 가장 불편했던 것이 파일을 수정하면 실행한 서버를 종료했다가 다시 실행시키고 '수동'으로 계속 반복해야했던 것이다.이것을 자동으로 서버를 재시작해주는 방법이 있는데 그것이 'Nodemon'이라는 패키지이다.\-g를 빼고 전역으로 설치하지 않아

URL의 일부로 물음표 뒤에 위치하며 쿼리 문자열의 한 부분으로 key-value 쌍으로 정보를 담는 문자열이다.쿼리 문자열을 파싱하고 Express 앱에서 액세스하는 것은 매우 중요하다.req.params처럼 req.query 프로퍼티로 액세스가 가능하다.쿼리 문자열

라우트를 생성해서 그 안에 경로 문자열에 콜론을 이용해서 변수나 경로 변수로 지정하게 끔 하는 것이다.Path의 매개변수를 설정해서 경로에 맞춰서 입력을 해보면 아래와 같은 결과가 나온다.:뒤에 아무거나 입력을 해도 설정한 텍스트가 똑같이 출력되고 있다.여기서 :par

Express Guide - Routing요청과 요청된 경로를 가져와서 응답을 갖는 어떠한 코드에 맞추는 것을 말한다.예를 들어 경로가 /about이라면 그 경로에 맞는 응답할 콘텐츠를 출력한다.Express Docs - app.get()(https://exp

npm init 후 package.json 파일이 생성된 상태에서 npm install express 명령어를 실행해서 express를 설치한다.새로 js파일을 생성하고 express를 사용하기 위해 require로 불러온다.그 후에 express를 실행한다.liste

DB에 사용자가 입력한 정보를 아래와 같이 POST했었다.근데 저장된 DB를 보면 아래처럼 저장되어 있다.누가봐도 보안에 매우 취약해보인다.특히 password는 관리자조차도 알 수 없게 해야하는데 사용자가 입력한 그대로 입력되어있다.그래서 password를 관리자도

오늘도 강의를 따라하다 에러를 마주쳤다.Github에 commit할 경우 mongoose와 연결할 때 사용하는 URI가 아이디와 패스워드를 담고 있어 보안이 취약하다.그래서 비밀 정보를 보호하기 위해 개발 로컬 환경과 배포 환경마다 해당되는 부분을 따로 받을 수 있게

John ahn님의 강의를 보고 node를 처음 배우기도 하고 mongoDB나 mongoos의 기초도 모르기 때문에 어느정도 스스로 이해해보고자 게시물을 쓴다.강의에서 Mongoose의 model과 schema를 다루는데 model이란 schema가 무엇인지 몰라서 강

John-Ahn님 강의인 '따라하며 배우는 노드, 리액트 시리즈' 기본 강의를 들으면서 발생했던 에러이다. 파일에 아래의 코드처럼 작성하였다. 발생상황 몽고DB 세팅을 마치고 mongoose에 연결하기 위해 위의 코드를 작성했으나 아래의 에러 발생 에러문을 보면

지금은 자바스크립트의 마지막 알고리즘과 자료구조에 대해 배우고 있지만, 내가 이해가 안되는 부분이 많아서 가장 주춤했던 부분이 Prototype이 다가왔을 때 부터 인 것 같다. 그래서 시간이 있을 때 꼭 Prototype을 조금이라도 이해하도록 해보자라는 마인드로 오

오늘은 배열의 메서드 중 가장 핵심적으로 자주 사용하게 될 메서드 3개인 forEach, filter, map을 다룰 것이다.강사님께서도 가장 많이 사용하는 메서드니 다른 메서드는 검색해서 사용하더라도 이 메서드들은 꼭 알아두라고 당부하셨다.이 게시물도 마찬가지로 원본

함수로 넘어갔는데 함수를 제대로 이해하려면 '객체'를 제대로 알아야한다고 해서 이번 Deep Dive 공부를 "객체"로 선정했다.자바스크립트는 객체(Object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체이다.number, string,