코드사냥꾼의 전리품

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 본문에 들어가기 앞서, 리액트를 사용하지 않는다면 우리는 아래와 같은 코드를 작성한다. 나쁘지 않지만 코드가 100줄, 1000줄이 넘어가면 한눈에 들어오지 않는다. 이를 해결하기 위해 리액트를 사용한다. [목표] 위의 코드를 리액트를 사용하여 전환해보자 첫 번째, 태그를 이름의 사용자 정의 태그로 변경해볼 것이다. 이때, 왼쪽과 같이 return 안에 Subject 이름의 태그로 사용할 html 코드를 넣어주면 된다. 이후, 적용 시 App 컴포넌트에 생성한 Subject 컴포넌트를 넣으면 된다. * 컴포넌트를 생성할 때 해당 컴포넌트는 와 처럼 하나의 최상위 태그로 시작해야 한다. 위의 코드를 간단하게 설명하자..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트 앱을 배포하기 전에 파일의 용량을 줄여주는 작업(빌드)을 수행한다. 실제 서비스할 때 파일이 용량이 무거우면 사용자 관점에서는 불편함이 생기기 때문이다. 우선, 관리자 도구의 네트워크 탭을 주목해보자 빈 캐시 및 하드 새로 고침 (=캐시 비우기 및 강력 새로고침) 버튼 클릭 후 네트워크 탭을 보면 단순 텍스트가 적힌 웹 페이지임에도 불구하고 1.7MB의 용량을 차지하고 있다. 그 이유는 create-react-app으로 개발 환경을 구축할 때 개발의 편의성을 위해 여러 가지 기능을 자동으로 추가하기 때문이다. 그래서 위와 같이 불필요한 용량을 줄이기 위해 빌드를 하는 것이다. 리액트 앱 빌드하기 npm ru..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 웹 애플리케이션을 만들기 위해서 개발환경 세팅이 필요하다. 리액트는 npm(node package manager)으로 설치되기 때문에 사전 작업으로 Node.js와 VSCode(필수 X)를 설치하도록 한다. Node.js 설치하기 본인 운영체제 환경에 맞게 설치하면 된다. 최신 버전을 다운받아도 되지만, 안정화 등의 이유로 LTS 사용을 권장한다. 설치 후 윈도우의 cmd창을 열어 npm 설치를 확인한다. npm -v 6.5.0 위와 같이 버전 정보가 출력된다면 성공적으로 설치가 된 것이다. 이후 create-react-app을 활용하여 리액트를 설치해보자 리액트 설치하기 리액트를 설치하는 방법은 두 가지..