오늘의 학습 내용 리액트 입문 강의 수강 리액트 관련 개념 공부 간단한 로그인 페이지 실습 리액트로 간단한 TODO 서비스 구현 새로운 배움 리액트 개념 (jsx, props, state) JSX 문법 hook은 비동기로 동작한다! 협업을 위한 확장자 .jsx 문제 상황과 시도, 해결 실제로 배운 개념과 내용들을 바탕으로 우선 로그인 페이지를 실습하였다. Input 태그를 두개 만들고 하나는 타입을 text, 하나는 password로 두었다. 또 label 태그를 두어서 input 태그의 아이디와 for 속성으로 연결하였다.이렇게 코드를 작성하니 총 두개의 오류가 발생했다. 코드는 정상적으로 실행되는데 브라우저 콘솔에 에러가 발생했다. 에러의 내용이 찝찝해서 검색하니 하나는 password로 인풋 태그의..

리액트 컴포넌트 컴포넌트란 무엇인가 w3school에 따르면 컴포넌트는 독립적이고 재사용 가능한 코드 조각이다. JavaScript의 함수(input, ouput)와 동일한 목적을 수행하지만 독립적으로 작동하고 HTML을 반환한다. 컴포넌트는 Props를 인풋으로, react엘리먼트를 아웃풋으로 반환한다. 컴포넌트 명칭은 반드시 대문자로 시작한다. 클래스형 컴포넌트 VS 함수형 컴포넌트 클래스형 컴포넌트 class Car extends React.Component { render() { return Hi, I am a Car! I was made by {this.props.company}; } } extends React.Component 구문과 rander 함수를 포함한다. 상태관리와 라이프사이클 기능..

CRA(Create React App) 이란 공식 사이트를 빌려 표현하자면 Set up a modern web app by running one command. 이라고 한다. 명령어 한줄로 프로젝트를 구성할 수 있다. 프로젝트 구성은 환경설정과의 싸움이다. Webpack, vite 등 모듈 번들...바벨...각종 설정파일... 처음 CRA를 보고 가장 먼저 생각난건 Spring Initializr 였다. 환경설정 싫어하는건 다들 비슷하다... CRA를 사용하면 리액트를 실행하기위해 필요한 모듈들을 설치해서 환경을 구성해주고 설치된 모듈들은 생성된 프로젝트 내의 node_modules 폴더 안에 저장된다. yarn 명령어, CRA로 리액트 프로젝트 생성하기 프로젝트 생성할 디렉토리로 이동한다. cd 디렉토..

공통점 자바스크립트 런타임 환경 노트(Node.js)의 패키지 관리자 다른점 NPM node.js를 설치할 때 자동 생성된다 Node Package Manager YARN 2016년에 페이스북에서 개발한 패키지 관리자 npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm 보다 좋다는 평. 요즘은 NPM도 많이 업데이트가 되고 있어서 차이가 거의 없다고 하니 각자 편한거 사용하시면 될 것 같습니다! 주요 명령어 NPM 설치 npm install ~ 제거 npm uninstall ~ 업데이트 npm update YANR 설치 yarn add ~ 제거 yarn remove ~ 업데이트 yarn upgrade

설치 전 확인 node -v yarn -v npm -v brew -v yanr 을 설치하기 앞서 터미널에서 node와 yarn의 버전을 확인함으로 설치가 되어있는지 확인한다. 그리고 설치를 도와줄(homebrew) 녀석이 설치되어 있는지도 확인하자! 이미 node가 설치되어있다면 yarn 설치 시 충돌이 발생할 수 있다. yarn 설치 노드가 설치되어 있다면 이미 설치되어 있는 패키지들은 무시하고 설치하게 됩니다. npm 이용 yarn 설치 npm install -g yarn brew 이용 yarn 설치 brew install yarn --ignore-dependencies 설치 후 확인 yarn -v 다시 버전 명렁어로 설치가 정상적으로 되었는지 확인한다.

React 리액트공식문서에서는 React를 사용자 인터페이스를 만들기 위한 JavaScript라이브러리 라고 소개하고 있다. SPA 기반 프른트앤드 개발 프레임워크 컴포넌트 단위를 가진다. Angular, Vue 보다 인기가 많다. SPA(Single Page Appliction) 하나의 페이지로 이루어진 어플리케이션. 화면에 내용이 변경될 때 계속해서 새로운 페이지를 호출하거나 새로고침해서 사용자한테 내용이 변경된 것을 제공하기 보다 하나의 페이지를 여러 부분적 단위로 나누고 각 부분별로 변경된 값을 가져옴으로서 하나의 페이지로 어플리케이션이 돌아가도록 하는 개념. 기존의 개념인 MPA(Mutil Page Application)과 반대 되는 개념이며, 리액트 프레임워크의 생명주기와도 관련이 깊다. SP..