1. Server Side Rendering 01. SSR 소개 SSR REact, Vue, Angular 등 JS 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드 클라이언트는 별도의 처리 없이 웹 페이지 노출 CSR Ajax등의 기술, JS

React 테스팅 01. React 테스팅 코드 테스트가 필요한 경우 코드를 작성하고나면 원하는 대로 동작하는지 알기 위해 테스트 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 함 코드를 리팩토링하면 원래대로 동작하는지 테스트 리액트 앱의

앱 전체 상태를 '쉽게' 관리하기 위한 라이브러리Redux의 많은 개념들이 Flux pattern에서 차용됨.주로 React 앱과 같이 사용redux.js.org에서 수많은 문서를 참고할 수 있고 웹상에 Redux를 활용한 앱 구축 사례가 많음.앱 전체의 상태 관리가

상태관리 기술이란 앱 상에서 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것.한 컴포넌트 안에서 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함MPA 에서는 서버의 데이터를 이용해 페이지 렌더링. 클라이언트 데이터와 서버

하나의 페이지 요청으로 전체 웹앱을 사용하는 방식유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌.MPA는 서버에 미리 여러 페이지를 두고 유저가 네비게이션 요청시 적합한 페이지를 전달미리 서버에서 전체 페이지를 빌드해 브라우저로 전송서버에 라우팅을 처리하는 기능

1. 리액트 스타일링 01. React 스타일링 overview 좋은 앱을 만드려면? 번들 사이즈에 대한 고려 CSS 코드가 차지하는 사이즈는 무척 중요한 요소 앱 성능에 대한 고려 animation, transition 등 유저와의 상호작용에서 스타일 코드의 성

컴포넌트에서 데이터를 관리하고 데이터가 변경될 때 상호작용 하기 위해 사용함. useState가 바로 State Hook.기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 Class Component를 사용하였어야 함.그러나 클래스컴포넌트는 다소

최근 며칠간 잠이 잘 오지 않았고 고민이 자꾸 생겼다.듣고있는 부트캠프에서 1차프로젝트를 끝내고 취업을 위해 이력서 준비를 한다는 사람들이 여럿 보였다. 1차 프로젝트에서 구현하지 못한 기능과 버그들도 고쳐야하고, 2차 스터디도 골라야하고, 취업지원?서비스도 받아야할

1. Props와 State 01. Props(Properties) Props 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수,함수,객체,배열 등 JavaScript의 요소라면 제한이 없음. 주로 Component의 '재사용'

유저, 카테고리, 주문, 상품 API 명세서 (가안) 구성Data Schema 가안 작성bcrypt, jwt토큰을 이용한 유저 로그인 API 기능 구현유저 삭제, 유저 조회, 유저 정보 수정주문 api (주문 추가, 주문 상세 조회, 주문 수정, 주문 취소) async

1. React 기초 (1) 01. React란? SPA (Single Page Application) 전통적인 페이지 vs SPA 사진 출처 : 엘리스SW엔지니어 4기 트랙 React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Componen

🍃 엘리스 1차 팀프로젝트 (1) 말하는 감자가 어느새 트랙에 참여한지 8주차에 접어들었고, 대망의 1차 프로젝트를 시작했다. 7주차까지도 아니 이런 내 실력으로 프로젝트를 어떻게 하고 뭘 만든다는거지..? 싶었는데 진짜 닥치니까 그냥 뭐라도 만들고 있는게 신기하다.

01. JWT 의 이해 JSON Web Token 인증을 위한 정보를 특별한 저장소를 사용하지 않고 전자서명을 이용하여 확인하는 방법 header : 토큰의 타입(jwt : Web Token, 즉 웹에서 사용하기 위한 스펙이므로 웹에서 문제 없이 사용할 수 있는 문자

이메일, 이름, 패스워드이메일 형식 확인비밀번호 최소 길이 확인패스워드와 패스워드 확인 문자가 일치하는지 확인 \-> 관리자가 회원의 비밀번호를 모르게 저장하는 방법은? \-> Hash 문자열을 되돌릴 수 없는 방식으로 암호화 하는 방법\-> hash 출력값을

서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장.동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공 EJS - html과 유사한 문법의 템플릿 엔진Mus

오늘 Node.js Express 활용 실습을 하다가, pm2라는 매우 유용한 프로세스 관리 도구를 설치해서 사용해보았다. 나는 Node.js를 수정했을 때, 잘 적용되었는지 로컬에서 확인할 때마다 수정된 파일을 저장하고, ctrl + c를 눌러 서버를 종료한 뒤 다시

01. MongoDB와 Mongoose MongoDB MongoDB란? 대표적인 NoSQL, Document DB Hyumongous에서 따온 말로, 엄청나게 큰 DB라는 의미 => 대용량 데이터를 처리하기 좋게 만들어짐 NoSQL vs RDB |RDB|NoSQL|

01. Express.js의 Middleware Middleware : Express.js동작의 핵심, HTTP요청과 응답 사이에서 단계별 동작을 수행해주는 함수. 미들웨어는 HTTP요청이 들어온 순간부터 시작이 됨 미들웨어는 HTTP요청과 응답 객체를 처리하거나, 다

Node Package Manager : Node.js프로젝트를 관리하는 필수적인 도구온라인 저장소 + 커맨드라인 도구수많은 오픈소스 라이브러리와 도구들이 업로드됨필요한 라이브러리 도구 손쉽게 검색 가능거대한 생태계프로젝트 관리를 위한 다양한 명령어 제공저장소에서 라이

일반적으로 변수, 함수, 클래스에 타입 체크를 위해 사용직접 인스턴스 생성 불가, 모든 메소드가 추상 메소드abstract키워드는 사용하지 않음. ES6는 인터페이스 지원 X , TypeScript는 지원함. 타입의 이름을 짓고 코드 안의 계약을 정의객체의 스펙(속성,