리액트(React)

1. React > React.js 는 JavaScript의 라이브러리 위의 문법은 JSX라고 불리는 JavaScript 확장 버전이다. (syntax extension for JavaScript) 그러나.. JSX는 원래의 JavaScript 문법이 아니기 때문에

$sudo apt-get install -y nodejs우분투에 NodeJS 설치하는 방법node를 설치하면 npm도 함께 설치된다.$npm install -g create-react-appnpm으로 리액트 앱을 만들어 준다.CRA (Create React App)터미

개발 목표 jsonplaceholder 사이트를 활용하여, id카드에 생성에 필요한 가상의 id number, 이름, email 정보 가져오기. 컴포넌트 생성하기 부모 컴포넌트의 data를 자식 컴포넌트에게 전달하기. user의 이름 검색시, 해당 id카드가 나올

create-react-app 으로 리액트 프로젝트를 쉽게 만들 수 있도록 해준다.리액트를 공부하는 초반에 CRA를 활용하는 이유는, "React" 공식 홈페이지에 나와있기 때문이다!나는 리액트를 공부하는 동시에, 싱글 페이지 앱을 만들고 싶었기 때문에 CRA의 목적과

지금까지 공부했던 React의 컴포넌트는 Class형 컴포넌트 였다.본죽 클론 프로젝트에서 사용했던, Class형 컴포넌트 \-. class Nav 로 선언 되어있는 것을 볼 수 있다.React에는 Class형 컴포넌트와, 함수형 컴포넌트가 있다.먼저 Class형 컴포

이제 부모 컴포넌트에서 자식 컴포넌트로 props를 넘기는 일은 너무 자연스럽다. 그러나, 프로젝트를 진행하면서 자식의 데이터가 변했음을 부모가 알아야 하는 경우들이 생겼다. 이번에는 자식 컴포넌트의 data변화를 부모 컴포넌트가 감지할 수 있도록 해주는 방법을 알

레이아아웃의 요소들을 개별의 컴포넌트로 나누고, 조합하며 디자인해가는 과정이다.UI 재사용의 효율을 높인다.Atoms: 하나의 구성 요소. (ex. input, button 창 하나씩)Molecules: Atoms가 두개 이상 조합되었을 때, (ex. input 과 b

인턴으로 진행 중인 프로젝트는 React 셋팅과 Docker로 배포되어 있었다. 초기셋팅이 진행된 프로젝트를 Clone 받은 후, Docker로 실행 될 수 있도록 환경설정을 한 순서와 방법을 적어보려고 한다. >만약에 개발을 진행하는 노트북에 아무런 개발환경이 구

하나의 페이지로 동작하는 SPA(Single-Page Application)는 현재의 페이지를 동적으로 다시 작성하는 방식의 웹 어플리케이션 이나 웹사이트를 말한다.큰 단점이 있다면, 주소가 없어 특정 페이지에 접속하기 어려웠다.이 단점을 해결하는 SPA 방식의 프레임