본문 바로가기

분류 전체보기

 (231)
SSR과 CSR의 차이 CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척 관계에 있는 방식인만큼 장단점이 서로 엇갈려 있다. 따라서 서로의 장단을 정확하게 알고, 적재적소에 필요한 방식으로 구현하는 것이 중요하다. 이 글의 순서는 다음과 같다. 순서 1. SSR의 정의와 설명 2. CSR의 정의와 설명 3. 각각의 차이 4. 사용 예시 1. SSR의 정의와 설명 Server Side Rendering의 약자. 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 위의 사진은 SSR의 단계를 설명한다. User가 Website 요청을 보냄. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. (리소스 ..
JavaScript - Map() map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다. 1. [].map(callback, thisArg) 기본적인 map의 사용법은 아래와 같습니다. const arr = [0,1,2,3]; let squaredArr = arr.map(function(element){ return element * element; }); // 혹은 arrow 함수 가능 squaredArr = arr.map(element => element * element); console.log(squaredArr); // [ 0, 1, 4, 9 ] 위 코드를 보면 배열 속 숫자들이 제곱되어 새로운 배열이 생성되는..
React - Cocktails
리액트 리덕스 (Redux) 튜토리얼 https://youtu.be/wSbjROmXTaY
codecademy - HTML, CSS, JavaScript 코스 HTML, CSS ,JavaScript 이해도를 높이기위해 Codecademy코스를 시작했다 학원, 유튜브로 공부를 했지만 다시한번 반복하고 확실히 이해하기위해 수업을 듣기시작했다 가장 기본적인 HTML, CSS, JavaScript를 잘 다룰수 있어야 진정한 프론트엔드 개발자라는 많은 사람들의 조언이 있었다 아직은 클론코딩으로 웹사이트를 만드는 수준이지만 계속 실력을 쌓아서 스스로 모든 사이트를 만들 수 있도록 노력해야겠다.
MBTI 유형검사
React Life Cycle 정리 React Life Cycle 정리 리액트 라이프 사이클이란? 리액트의 각 컴포넌트는 라이프사이클을 가진다. 리액트를 사용해 화면에 뷰가 그려지는 과정은 단순히 보았을때 컴포넌트를 작성한다. 컴포넌트를 ReactDOM.render()를 이용해 그려낸다. const App = () => { return ( Hello World ); }; ReactDOM.render(, document.querySelector("#root")); App이라는 컴포넌트가 DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 리액트에선 이 과정 중 하고싶은 일을 정의 하게 해 줄 수 있다. 어떻게? LifeCycle Methods를 이용해서 Source: https://github.com/wojtekmaj/reac..
Webpack이란? 프론트엔드 개발자라면 꼭 알아야 하는 기술 중 하나라고 생각한다. Webpack이란 ? Webpack = 모듈 번들링이라고 한다. html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다. 그럼 Webpack을 왜 사용해야 할까 ? 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시..

티스토리툴바