React4 VSCode에 React + ESLint + Prettier 설정하기 ESLint는 javascript 코드의 문법 검사 및 코딩 스타일 검사를 해주는 도구입니다. Prettier는 코드를 정해진 스타일대로 포매팅해주는 도구입니다. 이 두 가지 도구를 같이 사용하면 여러 명이서 개발을 하더라도 하나의 코딩 스타일을 유지해나갈 수 있습니다. 이번 글에서는 VSCode 환경에서 React 프로젝트에 ESLint와 Prettier 설정하는 과정을 정리해보겠습니다. React 프로젝트 생성하기 먼저 create-react-app 으로 React 프로젝트를 생성합니다. npx create-react-app react-eslint-prettier ESLint 설정하기 프로젝트가 생성되었으면 이제 이 프로젝트에 ESLint 설정을 해보겠습니다. 아래 명령어로 ESLint 설정을 간편하.. 2021. 11. 1. JSX와 React Virtual DOM 지난번 글에서 JSX가 HTML로 보이지만 사실은 javascript 코드라고 했습니다. 그리고 ReactDOM.render 함수가 첫 번째 파라미터로 넘어온 JSX를 HTML로 바꾸어 두 번째로 넘어온 HTML element에 넣어준다고 했습니다. 그럼 JSX가 왜 HTML이 아닌 javascript인지 살펴보겠습니다. JSX 먼저, 다음과 같은 JSX 코드가 있습니다. What is JSX JSX is ... React는 Babel이라는 도구를 통해 JSX를 다음과 같이 바꿔줍니다. 원래는 Babel 설정을 따로 해줘야 하지만 create-react-app으로 React 프로젝트를 만들면 Babel 설정을 할 따로 할 필요없이 그냥 사용할 수 있습니다. 여기에 가면 온라인으로 바벨을 사용해 볼 수 있.. 2020. 12. 6. React 시작하기 지난번 글에서 React가 뭔지에 대해서 적었으니 이번에는 React 개발환경을 어떻게 세팅하고 시작하는지에 대해 적어보려고 합니다. create-react-app React를 사용하려면 웹팩, 바벨 등의 설정을 해야합니다.(웹팩, 바벨이 뭔지 지금은 몰라도 됩니다.) React만 공부하기도 힘든데 웹팩, 바벨에 대해서도 공부하고 설정까지 다 직접 해야한다면 React를 시작하기도 전에 이미 지쳐버려서 공부하기를 포기해버릴지도 모릅니다. 다행히 페이스북에서 만들어준 create-react-app 을 통해 쉽게 React 프로젝트를 만들 수 있습니다. create-react-app을 사용하는 방법은 두 가지가 있습니다. npm에서 create-react-app을 global로 설치하고 실행하기 npx로 설.. 2020. 8. 8. React는 무엇이고 왜 사용하는가? 올해 3월에 웹 백엔드 엔지니어로 스타트업에 입사해서 어느덧 입사 3개월 차에 접어들었습니다. 백엔드 엔지니어로 입사했지만 어쩌다 보니 풀스택으로 일하고 있는데 3개월 동안 가장 많은 시간을 투자해서 공부한 react에 대해서 적어보며 지금까지 공부한 내용들을 정리해보려고 합니다. 입사했을 당시 react를 사용해 본 적이 없어서 처음 접했을 때 너무 낯설고 잘 이해가 되지 않았었습니다. 그래서 그 때 당시를 떠올리며 react에 대해서 잘 모르는 죠니에게 설명한다는 느낌으로 처음부터 하나씩 하나씩 적어보겠습니다. 먼저 react는 무엇인가? react 공식 홈페이지(https://ko.reactjs.org/) 에 가보니 react를 이렇게 설명합니다. 사용자 인터페이스 즉, UI를 만들기 위한 java.. 2020. 6. 28. 이전 1 다음
