Dev/[React.js] 썸네일형 리스트형 [React] CRA의 숨겨진 설정들 INTRO 일반적으로 리액트 기반 프로젝트를 세팅할 때 CRA(Create React App)를 자주 사용할 것이다. CRA에는 개발에 조금 더 빠르게 집중할 수 있도록 Webpack이나 Babel과 같은 설정들이 포함되어있는데, 이 설정들이 어떻게 숨겨져있는지에 대해 포스팅해본다. 1. CRA의 숨겨진 설정들 - React v18 기준, CRA로 프로젝트를 생성했으면, package.json -> scripts 에 다음과 같이 eject라는 스크립트가 있는 것을 볼 수 있는데, 이 스크립트는 CRA 의 숨겨진 설정들을 본인의 프로젝트로 꺼내오는 동작을 수행한다. - 우선 어떻게 숨겨놓았는지부터 알아보자. - 아래는 eject 를 수행한 뒤 새로 추가되거나 변경 된 파일들이다. - CRA와 함께 설치되는.. 더보기 [Next.js] husky와 lint-staged를 사용하여 버그를 줄여보자. INTRO 여러 사람들이 하나의 프로젝트에서 작업하다보면, coding convention이 지켜지지 않은 코드가 push 된다거나, 테스트에 실패했음에도 push를 한다던가.. ... 생각보다 많은 문제들이 발생한다. 이러한 문제들을 git 명령어를 작성할 때 미리 검토할 수 있게 도와주는 도구를 소개해보고자 한다. 1. Husky란? - git hook을 관리해주는 라이브러리이다. - git add, git commit, git push 와 같은 flow에 중간중간 등장하여 특정 동작을 수행하게 도와준다. - 이 과정을 통해 commit 할 때 코드 스타일을 자동으로 검사하거나 테스트를 실행하는 훅을 추가할 수 있어 일관된 코드 품질을 유지하고 버그를 사전에 탐지할 수 있다. 2. lint-stage.. 더보기 [React] JSX(TSX) 를 사용하는 방법 INTRO React로 화면을 개발할 때 사용되는 JSX 에 대해 정리한다. 1. JSX(TSX) 란? - JSX는 Facebook에서 React 프레임워크를 개발하면서, React를 더 쉽게 사용할 수 있게 하기 위해 2013년에 개발되었다. - React의 컨셉은 UI를 Javascript코드로 개발하는것. - 기존 Javascript로 우리는 코드를 작성하는 방법을 알고있다.(DOM API를 사용) // body 요소 가져오기 const body = document.querySelector('body'); // 새로운 div 요소 생성 const newDiv = document.createElement('div'); // div에 새로운 텍스트 노드 추가 const newContent = docum.. 더보기 이전 1 다음
