석이의 개발일지

첫 문제부터 틀려버리기 ㅋㅋㅋㅋㅋ 그래도 다행히 한 문제만 틀려서 다행 후~

전 게시물에 기능들을 나열해 봤는데 따로 만드는 게 나을 거 같아서 게시물을 써봅니다. pages pages 폴더 안에 있는 파일명에 따라 route가 결정된다. pages/about.js 생성 -> localhost:3000/about ✅ 다만 예외사항으로 index.js의 경우에는 앱이 시작하는 파일이라고 보면 된다. localhost:3000 그 자체다 뒤에 /index로 붙이면 안 된다.❌ routing import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); console.log(router); return ( Ho..

Next.js Getting Started npx create-next-app@latest # or yarn create next-app # or pnpm create next-app npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript Next.js란 무엇인가? Next.js는 vercel에서 만든 React 라이브러리의 프레임워크이다. 클라이언트 사이드 기술과 서버 사이드 기술을 모두 가지고 있는 올인원 솔루션이다. 궁금점 1. 라이브러리와 프레임워크의 정의 및 차이점은 뭘까? 라이브러리 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한 것을 ..

설치 yarn add react-router-dom 사용법 import { createBrowserRouter, RouterProvider } from "react-router-dom"; 먼저 createBrowserRouter, RouterProvider import 한다. const router = createBrowserRouter([ { path: "/", element: , errorElement: , children: [ { index: true, element: , }, { path: "/videos", element: , }, { path: "/videos/:videoId", element: , }, ], }, ]); path는 경로를 설정하는 것 element는 이동할 곳 errorEle..

Create React App npx npx create-react-app 파일이름 npm npm init react-app 파일이름 yarn yarn create react-app 파일이름 총 3가지 방법으로 리액트를 손쉽게 만들 수 있다. Setting React 파일을 만들고 자기가 하고 싶은 초반 셋팅을 한 후에 셋팅한 React파일을 냅두고 명령어 "cp -R 셋팅파일 파일이름" 생성하면 셋팅한 파일을 복사해서 새로운 파일을 만들어 시작한다. Tool create react app으로 만들었을 때 간단한 Tool 설명입니다. Node ⇒ 브라우저 밖에서 자바스크립트를 실행 할 수 있게 해주는 자바스크립트 실행환경 npm ⇒ 패키지 매니저 외부라이브러리를 쉽게 설치하고 버전을 관리해주는 툴 npx..

React Hook? 함수형 컴포넌트 이전에는 클래스형 컴포넌트를 사용 클래스 컴포넌트들의 단점으로 클래스 어렵다 this 바인딩이슈 로직들을 재사용하기 어려움 손쉽게 로직들을 재사용하면서 클래스로 정의하지 않아 간편하게 컴포넌트들을 정의할 수 있는 함수형 컴포넌트 등장 React Hooks를 이용해 로직들을 재사용 가능 사용자가 직접 툴을 만들어 커스텀 훅도 가능 ★Hooks는 값의 재사용이 아니라 로직의 재사용을 위한 것★

React 란? 웹, 모바일 앱을 손쉽게 만들 수 있게 해 준다. 심플한 정적 사이트부터 복잡한 규모까지 React로 구현이 가능하다. may 2013 (오픈소스 공개) → may 2013 (React Native) → Feb 2019 (함수형(Hooks) 컴포넌트) → mar 2022 (SSR+) 가장 많이 쓰이는 웹 프레임워크 1위 React를 배워두면 React Native를 통해서 모바일 어플도 가능하고, React + Electron과 조합하면 데스크톱 애플리케이션도 만들 수 있어 1석 3조 React 철학 React는 UI를 components 단위로 보여주고 이벤트에 반응하도록 만든 라이브러리. 독립적이고, 고립적이면서 재사용성이 뛰어나다. 구조는 단 하나의 Root 요소가 있다. Root ..