Home

2019
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를 써줘야 한다. 키 키를 지정해주면 어떤 아이템이 바뀌었는지

0
Front-endReact

React 6일차

조건부 렌더링&& 논리 연산자를 사용해 if를 인라인으로 넣기 React는 문자열, 숫자는 잘 그려주는데, true, false, null 등은 화면에 안 그려준다. &&는 앞의 코드가 falsy이면 앞의 걸 반환하고, 앞의 코드가 true이면 뒤의 걸 반환한다. 12345678910111213141516171819202122

0
Front-endReact

React 5일차

이벤트 제어하기 함수 안에서 함수를 정의할 수 있다. onClick={handleClick}의 {}안에 함수를 정의해도 되고, 밖에서 정의하고 안에 함수 이름을 써줘도 됨 123456789101112function ActionLink() { function handleClick(e) { e.preventDefault(); c