디노문경

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 13장 리액트 라우터로 SPA 개발하기 13장 리액트 라우터로 SPA 개발하기 13.1 SPA란? 단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다. link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 11장 컴포넌트 성능 최적화 12장 immer를 사용하여 더 쉽게 불변성 유지하기 11장 컴포넌트 성능 최적화 10장에서 멋진 일정 관리 애플리케이션을 만들어보았습니다. 현재까지는 사용할 때 불편하지 않지만 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다 흐름 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 import React, { useCallback, useRef, us..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 9장 컴포넌트 스타일링 10장 일정관리 웹 애플리케이션 만들기 9장 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방법을 사용할 수 있다. 이 장에서 알아볼 스타일링 방식들 일반 CSS Sass CSS Module styled-components 가장 흔한 방식, 일반 CSS 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것. 중복되는 것을 방지하기 위해서 규칙을 사용하거나 CSS Selector를 활용하면 됨. 규칙 사용: 컴포넌트 이름-클래스 형태로 짓거나 BEM 네이밍 등등.. CSS Selector: ex) .App .logo Sass 사용하기 Sass(Syntactically Awesome..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 7장 컴포넌트 라이프사이클 메서드 8장 Hooks 7장 컴포넌트 라이프사이클 메서드 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지 마운트, 업데이트, 언마운트의 세 가지 카테고리로 나눌 수 있음 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 의미함. 호출되는 메서드 constructor getDerivedStateFromProps render componentDidMount 업데이트 컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 호출되는 메서드 ge..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 5장 ref: DOM에 이름달기 6장 컴포넌트 반복 5장 ref: DOM에 이름 달기 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 스타일을 적용하거나 자바스크립트에서도 작업할 수 있습니다. 이렇게 요소에 id를 사용해 이름을 다는 것처럼 리액트에서는 ref(reference)를 사용해 DOM에 이름을 달 수 있습니다. 하지만 대체 '어떤' 작업을 할 때 ref를 사용해야 할까요? 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 다음과 같이 state만으로는 해결할 수 없는 기능에서는 어쩔 수 없이 ref를 사용해 DOM에 직접적으로 접근해야 합니다. 특..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 3장 컴포넌트 4장 이벤트 핸들링 3장 컴포넌트 이 장에서는 먼저 클래스형 컴포넌트에 대해 살펴본 뒤, 컴포넌트를 새로 만들고 사용하는 방법을 알아보겠습니다. 그리고 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법도 알아보겠습니다. - 84p 컴포넌트를 선언하는 방식 함수형 클래스형 // 함수형 컴포넌트 import React from 'react'; const App = () => { return ( ); } export default App; // 클래스형 컴포넌트 import React, { Component } from 'react' class App extends Compon..

패스트캠퍼스 강의(프런트엔드 개발 올인원 - 처음 배우는 Git & GitHub)를 듣고 요약한 글입니다. 소개 왜 Git과 GitHub을 익혀야 하나요? 팀 프로젝트에서 버전관리와 클라우드 저장소는 필수 불가결한 기술입니다. 버전 관리의 1등인 Git과 클라우드 저장소의 1등인 GitHub을 익히면 팀 프로젝트와 회사에서 효율적인 개발 협업을 할 수 있습니다. 사전 조사 버전 관리가 무엇인지 모른다. 버전 관리가 무엇인지 들어보기만 했다. Git 기본 기능을 써봤다. (commit, push, pull, merge, branch) Git의 동작 원리를 알고 있다. (로컬 저장소, 스테이지, diff... ) Git 심화 기능을 써봤다. (rebase, cherry-pick, reset, revert, ..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 1장 리액트 시작 2장 JSX 1장 리액트 시작 1.1 왜 리액트인가? Hello Hello World velopert 1 만약 위의 코드에서 likes 값을 2로 업데이트한다면 post-1에서 likes 요소를 찾아 수정해야합니다. 하지만 애플리케이션의 규모가 커지면 커질 수록 찾아서 수정하는 과정이 상당히 복잡해지고 성능도 떨어집니다. 페이스북 개발 팀은 이를 해결하려고 하나의 아이디어를 고안해 냈는데, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식입니다. 페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경..

목차 개요 디자인 개발 스택 페이지, 화면별 개요와 기능 소개 어려웠던 점과 해결 방법 결론 개요 어느새 4학년이 되어 졸업작품을 완성하고 이렇게 졸업작품에 대한 포스팅을 하고 있다. (아래는 Life Calendar 프로젝트 링크) Life Calendar life-calendar-mk.netlify.app Life Calendar는 사람의 인생을 여러 개의 사각형으로 나누어서 나타낸 종이라 할 수 있는 데, 사각형 하나는 1주를 의미한다. 한 주가 지날 때마다 색칠을 하면서 내가 현재 어느 정도 살았는지 그리고 얼마나 더 살 수 있는지 확인할 수 있다. (90년을 살고 자연사한다고 가정했을 때) Life Calendar를 알게된 영상 유튜브 알고리즘 덕분에 우연히 알게 되었는데 보자마자 웹사이트로 만..

공통점: 편하게 개발을 하기 위해 누군가 만든 코드를 가져와 쓰는 것 차이점: 누가 누구를 부르느냐. (내가 라이브러리를 불러서 쓰는 것, 프레임워크가 나를 부르는 것(규칙을 따라야함)) 예시) 라이브러리: JQuery 프레임워크: 장고, express 여담) React는 공식문서에서는 라이브러리라고 나와있지만, 프레임워크라고 볼 수도 있다. (명확히 구분되지 않는다.) www.youtube.com/watch?v=t9ccIykXTCM