hehehe

node.js & npm 설치확인 명령어를 통해 설치가 되어있는지 확인한다. $ node -v $ npm -v 프로젝트 생성 $ npm i create-react-app $ npx create-react-app [프로젝트명] 프로젝트 시작 $ cd [프로젝트명] $ npm start

useState useState는 현재의 state값과 이 값을 업데이트하는 함수를 쌍으로 제공하며, 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수 있다. function Example() { const [count,setCount]=useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useEffect useEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해준다. React는 DOM을 바꾼 후 effect 함수를 실행하고, 기본적으로 매 렌더링 이후 effect를 실행한다. Effect는 컴포넌트 안에 선언되..

getServerSideProps sever-side rendering 함수를 내보내면 next.js는 반환된 데이터를 사용하여 각 요청에서 페이지를 미리 렌더링할 수 있다. export async function getServerSideProps(context){ return { props:{}, } } 렌더링 유형에 관계없이 props 모두 페이지 구성요소로 전달되며 초기 HTML로 볼 수 있다. 서버 측에서만 실행되고 브라우저에서는 실행되지 않으며, JSON을 반환한다. 데이터 가져오기 아래 코드는 데이터를 가져와서 결과를 미리 렌더링하는 형태이다. function Page({data}){ // rendering data } export async function getServerSideProps..

rendering 서버로부터 요청해서 받은 내용을 브라우저 화면에 보여주는 것이다. Client Side Rendering(CSR) 클라이언트인 브라우저가 자바스크립트 코드를 요청하여 사용자가 보는 UI를 만든다. HTML 문서를 요청하는 것이 아니라 자바스크립트가 모든 UI를 생성한다. 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다. ex) React Pre-rendering 서버에서 필요한 모든 데이터를 가져와 HTML 파일을 생성한다. 사용자가 페이지를 요청하면 완성된 HTML을 얻게 된다. ex) Nextjs

next/link client-side 전환은 link 컴포넌트를 이용해 가능하다. - pages/index.js - pages/about.js a 태그를 사용하면 브라우저가 다른 페이지로 보내기 위해 전체 페이지를 새로고침 한다. link 컴포넌트를 사용하면 속도가 빠르며, 웹사이트를 새로고침 할 필요가 없다. import Link from 'next/link'; function Home(){ return ( Home About ) } next/image img 태그를 대신하며, 내부, 외부 경로를 가져올 수 있다. width, height 속성을 설정해주어야 한다. import Image from 'next/image'; function Home(){ return ( ) } next/script im..

location 객체 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. window 객체의 location property와 document 객체의 property에 같이 연결되어 있다. window.location==document.location 현재 문서의 URL 주소 location 객체의 href property는 현재 문서의 전체 URL 주소를 문자열로 반환한다. document.write("현재 문서의 주소 : "+location.href); 현재 문서의 파일 경로명 location 객체의 pathname property는 현재 문서의 파일 경로명을 반환한다. document.write("현재 문서 파일 경로명 : "+location.p..

자바스크립트(JavaScript) 프론트엔드에서 사용할 수 있는 유일한 프로그래밍 언어 백엔드에서도 사용할 수 있다. 모든 브라우저에 내장되어 있다. vanilla JS : 외부 라이브러리나 프레임워크를 쓰지 않는 순수 자바스크립트 three.js : 3D 구현 라이브러리 ml5.js : 머신러닝 모델 react native : android, ios app 브라우저 브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져온다. - index.html - script.js - style.css Variable 기본적으로 const 사용하고, 필요한 경우에 따라 let 사용한다. const : constant(상수), 값을 업데이트 할 수 없다. let : 업데이트 가능 var : 과거 방식, ..

npx create-react-app . react 다운로드 시 오류가 아래와 같이 발생한다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a new app can be..

next.js 프로젝트 초기화 npx create-next-app@latest [프로젝트명] cd [프로젝트명] npm run dev http://localhost:3000 접속 시, 다음과 같은 화면을 볼 수 있다.