Archive: 2019

2019
0
Back-endNode.js

커스텀 미들웨어 만들기

조현영님의 Node.js 교과서의 내용을 공부하여 정리한 내용입니다. 6.3.1 커스텀 미들웨어 만들기 직접 미들웨어를 만들어보면서 미들웨어의 원리를 이해보자. 요청이 들어올 때 콘솔에 메시지를 찍는 단순한 미들웨어이다. logger보다 위에 다음 코드를 적어준다. 1234567891011// app.js// ...app.set("views",

0
Back-endNode.js

미들웨어(Middleware)

조현영님의 Node.js 교과서의 내용을 공부하여 정리한 내용입니다. 6.3 미들웨어 미들웨어는 익스프레스의 핵심요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어라고 부른다. 뒤에 나오는 라우터와 에러 핸들러 또한 미들웨어의 일종이므로 미들웨어가 익스프레스의 전부라고 해도 과언이 아니다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하

0
Front-endReact

React 12일차

BEM(Block, Element, Module)클래스 이름에 _나 -로 계층 구조를 나눈다.영역이름__ element이름 ModifiersModifier은 block 또는 element의 상태이다 어디에 밑줄, 오디에 하이픈 써야 하는지 알면 됨 React에서 BEM을 사용할 때는 컴포넌트가 블록이기 때문에 ex) PostListtitle, Post

0
Front-endReact

React 11일차

고차 컴포넌트 (Higher-Order Components) 컴포넌트를 받아서 컴포넌트를 반환하는 그저 함수일 뿐이다 컴포넌트x. 함수가 컴포넌트가 되려면, 컴포넌트가 아니라 엘리먼트를 반환해야 한다. 횡단 관심사(Cross-Cutting Concerns)를 위해 HOC 사용하기코드는 자세히 읽지 x 12345678const CommentListWithS

0
Front-endReact

React 10일차

합성 (composition) vs 상속 (inheritance)다른 컴포넌트를 담기게시판에 적용 헤더의 메뉴바에 하이라이트를 주는 등 페이지별로 달라야하는 부분이 있기 때문에App.js에 레이아웃을 두지 x -> Layout.js를 따로 만들면 확장성이 좋음 헤더, 푸터 뭔가를 감싸는 컴포넌트 만들고 싶을 때 레이아웃 뿐만이 아니라 뭔가 빈칸이

0
Front-endReact

React 9일차

제어되지 않는 컴포넌트제어되지 않는 컴포넌트는 진리의 원천(유일한 진리의 원천x)을 DOM에 두기 때문에,React를 사용한 코드와 사용하지 않은 코드를 통합하는 작업을 좀 더 쉽게 만들어줄 수 있습니다. 기본값 지정하기 value 속성을 이용하면, 제어되는 컴포넌트가 됨 defaultValue를 이용하면, 기본값을 주면서도 사용자가 편집 가능 (기본값도

0
Back-endNode.js

익스프레스(Express)로 시간 절약

익스프레스(Express)로 시간 절약 앞서 노드만을 사용해 단순한 웹 서버를 만드는 방법을 배웠다. 이 장에서는 익스프레스(Express)를 사용해 그 서버를 다시 만든다. 익스프레스의 기본에 대해 이해해 보자. 스캐폴딩(Scaffolding) 프로젝트는 대개 템플릿 코드가 일정량 필요하다. 프로젝트의 엉성한 뼈대(템플릿)를 만들어놓고,새 프로젝트를 시

0
Back-endNode.js

노드로 만드는 단순한 웹 서버

노드로 만드는 단순한 웹 서버 지금 만드는 앱이 곧 서버이다.노드는 웹 서버를 만드는 작업을 아주 단순하게, 코드 몇 줄로도 가능하게 만들었다. Hello World 노드가 어떻게 동작하며, 프로그래머가 그 과정을 얼마나 컨트롤할 수 있는지 예제로 알아보자. 1234567891011121314151617// hello-world.jsconst http

0
Front-endReact

React 8일차

JSX 더 알아보기 문법 설탕(syntatic sugar): 무언가를 문법적으로 쉽게 만든 것 .createElement()의 반환값은 객체다.가 중요 React 엘리먼트의 타입 지정하기<div/><Div/>는 리액트에서 다르게 동작대문자로 시작하는 타입은 해당 JSX 태그가 React 컴포넌트임을 가리킨다. 그러니까, <

0
Front-endReact

React 7일차

리스트와 키 React element가 들어있지 않은 배열로부터 React element가 들어있는 배열을 만들 수 있다.-> 화면에 바로 그릴 수 있다. 기본적인 목록 컴포넌트 Warning: 에러는 아니지만, 코드에 문제가 있으니 확인해야 한다. map 메소드를 사용할 때는 key를 써줘야 한다. 키 키를 지정해주면 어떤 아이템이 바뀌었는지