Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

공식 문서 시작하기 전 node.js를 설치해줘야한다! 1. 설치하기 폴더를 생성 후 터미널에 아래 명령어를 입력 npx create-next-app@latest . 명령어 입력 후 몇가지 옵션에 대해서 사용할건지 묻는데 필자는 TypeScript를 사용할 것이기 때문에 Yes로 하고 나머지는 필요한 것만 설정하면 된다. 2. 실행하기 npm run dev npm run dev 명령어 입력하면 localhost 3000번으로 실행이 된다. 3. 폴더 구조 app폴더 안에 있는 page.tsx 또는 js가 메인 페이지이기 때문에 안에 내용은 위 처럼 다 지워서 필요한 내용만 작성하면 되고, 위에 layout.tsx가 page.tsx를 감싸는 파일. layout.tsx안에 page.tsx가 있다고 생각하면 ..

2023. 8. 17.

React, Next

이제 React보다 더 많이 뜨고 있는 Next를 알아보자! 1. Next.js 란? React 프레임워크로 SSR(Server Side Rendering) 와 SSG(Server Side Generation)를 지원하며 검색 엔진 최적화(SEO)를 향상시킨다. 여기서 React와 비교하자면, React는 CSR(Client Side Rendering)을 지원하는데 초기 로딩 성능과 검색 엔진 최적화에 취약하다는 단점이 있다. 렌더 과정을 더 자세히 알고 싶다면? 👉 SPA 렌더링 전략과 렌더 과정(CSR, SSR, SSG)👈 2. Next.js 또 다른 기능 1) 라우팅 Next는 내장된 라우팅 시스템을 제공해서 클라이언트 사이드 라우팅을 간단하게 구현할 수 있다. 2) API 라우팅 내부적으로 서버리..

2023. 8. 16.

React, Next

Redux Toolkit으로 로그인 상태를 전역 상태관리 해줬는데 새로고침하니까 날아가버렸다. 이럴 때 로컬스토리지나 세션스토리지에 저장해야 하는 데 Redux-Persist를 사용하면 필요할 때 꺼내 쓸 수 있다. 공식문서 먼저 npm i redux-persist 설치해준다. //store.js import { configureStore } from '@reduxjs/toolkit' import { persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' import rootReducer from './reducers' const persistConfig = { key: 'root', storage, } c..

2023. 8. 5.

React, Next

1. Redux Tookit이란? 상태관리를 할 수 있는 라이브러리인 Redux에서 공식적으로 추천하는 라이브러리로 기존에 만들어야하는 수많은 보일러 플레이트를 제거하여 Redux 코드를 쉽게 작성할 수 있다. 2. Redux 언제 써야할까? 앱 전체의 상태관리가 필요할 때 복잡한 비동기 처리가 있는 상태관리가 필요할 때 앱의 상태가 복잡하고 이를 체계적으로 관리하고 싶을 때 사용하면 좋다. 3. Redux Toolkit 사용하기 공식문서 확인 사용하기 전 npm install @reduxjs/toolkit react-redux 으로 리덕스와 리덕스 툴킷 설치하기 1) createSlice Reducer의 초기상태, 이름, Reducers를 편하게 만들어주도록 도와주는 역할 // counterSlice...

2023. 8. 4.

React, Next

사실 부트스트랩 같은 CSS 프레임워크를 사용하면 인라인 스타일을 적용하기 때문에 코드 가독성이 떨어져서 많이 사용하는 편은 아니지만, 나 혼자 프로젝트를 만들 때 쉽게 커스텀하기에는 너무 좋은 프레임워크 같아서 리액트에서 사용해보려고 한다. 먼저 리액트 설치 방법 자세한 건 공식 문서 확인! https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com ..

2023. 7. 23.

React, Next

Cloudinary는 클라우드 기반의 이미지, 동영상 관리서비스로 서버에 저장하지 않고 클라우드에 저장하기 위해서 사용하려고 한다. 1. Cloudinary API 사용하기 https://cloudinary.com/ Image and Video Upload, Storage, Optimization and CDN Streamline media management and improve user experience by automatically delivering images and videos, enhanced and optimized for every user. cloudinary.com 위 링크로 들어가서 회원가입을 해준다. 계정 생성 후 Settings - Account에서 클라우드 이름을 변경할 수 ..

2023. 7. 4.