리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다. 그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다. 이런 코드를 본 적 있을 것입니다. document.getElementById('test1').innerHTML = 'Hello!'; 위 코드가 의미하는 바는 무엇일까요? 간단하게 말하면 DOM에 접근해 값을 바꾸라는 말입니다. 렌더링이 뭐죠? 브라우저에 내용이 써지는 과정 (feat. DOM,Repain,Reflow) 위 글을 꼭 읽고 DOM을 이해한 후 아래내용을 읽어주세요. 그렇다면 왜 JavaScript기반 프레임워크인 React에선 저런 코드를 본 적이 없을까요? 그 이유는 React에선 VirtualDom을 사용해 변경된 값을 바로 DOM에 적용하..
유튜브를 보거나 누군가 개발하는 것을 보면 저장함과 동시에 자동정렬이 되는 모습을 본적이 있을 것입니다. 이쁘게 정렬된 코드를 보면 남이 쓴 코드라도 가독성이 높아지며 생산성이 높아지고 오류를 빨리 찾을 수 있게 됩니다. 개발하면서 가장 필요한 세팅 중 하나라고 생각하는데요. 이런 세팅을 하지 않고 개발을 진행하고 있다면 지금당장 설정해보세요. vscode에선 prettier를 이용해 코드스타일을 통일할 수 있습니다. Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io prettier란 파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 Node.js 패키지입니다. 적용방법 vscode Ext..
안녕하세요 이번엔 React+typescript를 이용한 todolist 프로젝트를 공유하려고 합니다. 개발 진행과정은 이렇습니다. cra를 통해 리액트 프로젝트를 만든다. type을 담을 파일을 만든다.(type.tsx) 2개의 컴포넌트 구성을 생각하고 파일을 만든다.(InsertItme.tsx,ItemList.tsx) InsertItem.tsx를 개발한다. ItemList.tsx를 개발한다. style.css를 통해 디자인한다. localStorage를 이용해 브라우저에 데이터를 저장한다.(새로고침해도 데이터가 지워지지 않음) 깃허브 : https://github.com/jdy0120/frontendproject 유튜브 영상 : https://youtu.be/Ipc8NzFF9kE 위 영상을 따라하면 ..
자바스크립트 기반 라이브러리 리액트에 대해 알아봅시다. 이번 글에선 제가 프로젝트를 할 때 자주 사용하는 리액트에 대해 알아보겠습니다. 리액트는 자바스크립트 기반 라이브러리로서 컴포넌트로 나눠 개발할 수 있는 장점이 있습니다. 더보기 리액 blog.doyeonism.com 저번 시간에 리액트가 무엇인지 간단하게 알아봤습니다. 이번엔 간단한 프로젝트를 만들고 리액트에 대한 이점을 알아가보겠습니다. 리액트를 시작하기 전 소스코드 편집기인 vscode를 먼저 다운로드 하도록 하겠습니다. https://code.visualstudio.com/ 위 홈페이지에서 간단하게 설치할 수 있습니다. vscode는 소스코드 편집 프로그램입니다. 리액트 작업 뿐만 아니라 패키지만 설치한다면 다른 언어도 컴파일할 수 있는 프로..
