목차 1. Next.js 란? - SSR ↔ CSR 이란 2. Nex.js의 주요 기능 3. 기본 설정 및 실행 결과 Next.js 란? React를 기반으로 기존의 CSR(Client Side Rendering)아 아닌 SSR(Server Side Rendering)을 간편하게 사용할 수 있게 해주는 프레임 워크 SSR이란? (Server Side Rendering) ↔ CSR (Client Side Rendering) 웹 애플리케이션 랜더링 방식으로 사용자가 웹페이지에 접근할 때, 요청받은 서버는 완전하게 만들어진 HTML(CSS가 적용된)과 JS코드를 브라우저에게 응답해준다 이후 브라우저는 HTML을 띄워줌에 이어서 JS코드를 다운하고 실행한다. 이에 CSR보다 빠른 초기 로딩이라는 장점이 있다. ..

최근에 작성한 이전 게시물에서 Truffle을 이용하여 MetaMask와 React 환경의 Front를 연결했다 이번에는 거기에 Express 환경까지 연결하여 Axios 통신을 이용해 보도록 한다 먼저 Express환경을 설치할 폴더를 만들어서 다음 명령어를 실행한다 npm init -y 이후 필요한 라이브러리를 설치해 준다 npm i express cors truffle web3 truffle 라이브러리가 설치되었다면, 그 환경에 맞게 다음 명령어로 기본 설정을 해줘야 한다 npx truffle init 이 명령어가 정상적으로 작동했다면 3개의 폴더 1개의 js 파일이 생성된다 contracts Smart Contract 코드 작성 폴더이다. Solidity언어로 작성한 코드를 여기에 작성하면 된다고..

React를 열심히 하다가... 또 어느덧 끝날 무렵 TeamProject가 잡혔다 (기간 : 22.12.09 ~ 22.12.30) 저번 Nodejs에 이어서 또한 나는.. 팀장을 하게 되었고, 저번과는 다르게 이번에는 많은 준비를 해놓아야겠다는 생각이 들었다 그래서 미리 공지사항 같은 것도 적어보고 GitHub repository도 만들어 놓고 기본적인 틀 마저 잡아 놓고 팀원들을 초대해서 편히 이용할 수 있게 했다 ( 사실 나중에 통합할 때 편할려고 .. ㅋㅋㅋㅋㅋ) 팀명은 어떻게 할까 ? 라고 한마디 했는데 금방 정해졌다 저희 4명다 J 들어가는데 빨리 발음하면 JJJJ geegeegee 소녀시대 가시죠! 뭐지?? ㅋㅋㅋㅋ 오케이 그래 가자! 그리곤 각자 구현 하고자 하는 부분을 정리하려고 했는데 ..

React Component React로 만들어진 웹을 구성하는 최소한 단위 기존의 웹 프레임워크는 MVC 방식으로 각 요소의 의존성이 높다, 재활용이 어렵다 Component는 MVC의 View를 독립적으로 구성이 가능하며 쉽게 만들 수 있다 Component의 이름은 항상 대문자로 시작 UI를 재사용이 가능한 개별적인, 독립적인 여러 조각(Components)으로 나누고, 각 조각(Component)을 개별적으로 나누어 코딩한다 Javascript 함수와 유사하다 임의의 props 데이터를 받은 후 화면에 어떻게 표시되는지를 기술하는 React 객체를 반환 종류 함수형 컴포넌트 (Functional Component) 함수형에서는 함수 자체가 return 생명주기가 클래스형 컴포넌트와 다르다, 리랜더..

Hook 함수형 component에서 클래스형 component의 기능을 할 수 있도록 제공하는 기능 React v16.8에 추가된 라이브러리 class component에서의 state, life cycle처럼 사용 가능 중첩되는 함수 등에서 호출을 할 수 없다 React 내에서만 Hook을 호출 해야 한다 Custom Hook에서는 호출 가능하지만 일반적인 JS 파일, 함수에서는 호출을 할 수 없다 Hook을 생성할 때에는 앞에 use를 붙여서 생성해야 한다 Hook 규칙이 적용되는지 파악 할 수 있기 때문 React Hook은 호출 되는 순서에 의존 하나의 컴포넌트에서 여러개의 Hook이 사용되는 경우 Hook은 위에서 아래로 순서대로 동작 Hook의 장점 쉽고 직관적으로 같은 기능으로 만들 수 있..

Props 속성을 나타내는 데이터 component에서 component로 전달하는 데이터 부모 component에서 자식 component로 전달 ( 위에서 아래 component로 ) 받는 component에서는 데이터를 변경할 수 없고 최상위 부모 component에서 props를 변경할 수 있다 자식(받는) component 입장에서는 읽기 전용 // App.jsx import React from "react"; import Child from "./Child"; function App() { return ; } export default App; App componet에서 Child component로 각각 id, name의 이름으로 props를 넘겨준다 하위(자식) Component에서 pro..