개발/Front-end (5) 썸네일형 리스트형 react-router-dom v6 무엇이 바뀌었는가? React-router-dom에 많은 변경사항이 생겼다 해서 찾아보았다. 차이점을 알아보고 마지막에는 hashRouter와 browserRouter의 차이점까지 알아보자. 그전에 react-router에 대해 간단히 알아보면 React에서 브라우저 라우팅을 관리하기 위해 사용하는 라이브러리로 spa의 약점을 보완하기 위해 나왔다. 말 그대로 라우팅을 다루며 다른 주소에 다른 화면을 보여주는 역할을 한다. React 프로젝트를 하면 필수적으로 사용하는 라이브러리이다. 일단 이 포스팅은 react-router에 대해 알아보는 것이 아닌 v5 → v6로 업데이트로 변경된 점을 알아보기 위한 글이므로 여기까지만 정리하고 넘어가자. Switch대신 Routes 기존에는 Switch를 사용하여 복수개의 route를.. React 톺아보기를 보고 정리하기_1 1. Preview 이 글은 리액트 사용법에 대한 글이 아니다. 리액트를 통해 프로젝트를 진행한 경험이 있고 동작 방식을 어렴풋이 이해하기는 하지만 여전히 리액트가 마법처럼 느껴지고 응용 에러 디버깅 등에 어려움을 겪는 사람들을 위해 작성되었다. 시리즈의 내용은 사용자의 상호 작용으로부터 훅을 통해 컴포넌트가 업데이트되고 DOM에 마운트되기 까지의 일련의 과정을 실제 코드를 통해 분석해 나가게 될 것이다. 코드에 변형을 가하지 않고 코드 그대로 변수 하나하나 뭣을 위해 선언되었는지 A-Z 까지 알아보자. 시리즈 끝에는 아래 질문들의 답을 파악하도록 하자. Virtual DOM이 무엇인지 컴포넌트 상태가 바뀌었을 때 리액트는 어떻게 해당 컴포넌트를 리-렌더링시키는지 어떻게 변경된 부분만 DOM에 마운트 되.. TypeScript 하기 전에 이정도는 알아야지! TypeScript 알아보기 갑작스런 셰어킴 면접이 잡힘으로써 타입스크립트에 대해 공부를 하게 되었다. 빠르고 정확하게 짚어가며 공부를 해보자. 타입스크립트의 특징 컴파일 언어, 정적 타입언어이다. JS는 인터프리터 언어지만, TypeScript는 컴파일 언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크해냄. 단 전통적인 컴파일 언어와는 다르게, 링킹 과정이 생략되어 있음. 타입 기반 언어로써 타입스크립트 = 자바스크립트 + 타입 컴파일 단계에서 타입 오류를 잡아낼 수 있고, 코드 어시스트 기능도 지원받을 수 있다. 이것을 통해 암묵적 형변환, 호이스팅, 복잡성 문제를 해결할 수 있다. 컴파일러와 인터프리터의 차이점 ## 컴파일러 - 컴파일러는 고급언어로 작성된 프로그램 전체를 목적 프로그램으로 변.. Event Loop에 대하여 일단 자바스크립트는 싱글스레드이다. 그렇기에 단 하나의 호출 스택(Call Stack)을 가지며 모든 함수들은 실행될 때 이 Call Stack을 거쳐서 호출된다. 하지만 자바스크립트가 동작함에 있어서 속도를 더 증가시키기 위해 비동기 함수가 존재한다. 대표적으로 setTimeOut, setInterval등이 있는데 이들은 비동기 함수로써 브라우저에서 웹 API로 동작하여 실행시킨 뒤 콜백을 event queue 에 등록시킨다. 그 이후 Call Stack이 비게되면 이를 event queue에서 Call Stack으로 밀어주게 되는데 이를 eventloop라고 부른다. Call Stack JS는 단 하나의 호출 스택을 사용한다. 이러한 특징 때문에 JS의 함수가 실행되는 방식을 "Run to Compl.. Npm vs Yarn Package manager를 선택을 고민하시는 분들은 한번 읽어보시면 좋을 것 같습니다. Yarn과 npm 비교한 글로 ryan이라는 ryadel에 많은 글을 보유한 웹 개발자가 쓴 글을 토대로 적어보겠습니다. 10.6K 정도의 사람들이 읽었습니다. ( 댓글 수나 Like, Star, Clap은 높진 않네요) 다른 글도 많지만 19년 7월 가장 최근 글이라 택하였습니다. 저의 경험으로 미루어보면 처음 시작할 때는 npm으로 시작하였습니다. 하지만 많은 사람들의 Yarn을 사용하였고 왜 쓰는지 물어보면 "Cool하다" 라고 애기를 하였습니다. 그 "Cool"을 알아보기 위해 사용해보았는데 성능상의 차이는 크게 나지 않았습니다. 하지만 "Cool" 함의 체감은 어느 정도 체험했습니다. 굳이 비유를 하자면 .. 이전 1 다음
