odada

Next.js 블로그 앱 만들기

Next.js 블로그 앱 만들기Next.js를 사용하여 블로그 애플리케이션을 만들어보겠습니다. 블로그 애플리케이션은 다음과 같은 기능을 구현할 수 있습니다.- 블로그 앱 구조블로그 애플리케이션은 다음과 같은 구조로 구성됩니다.next-blog/├── components/│ ├── Layout/│ │ └── Layout│ │ └── Header│ │ └── Footer│ ├── Post/│ │ └── PostList│ │ └── PostItem│ │ └── PostDetail│ │ └── PostEdit│ │ └── PostNew├── pages/│ ├── index│ ├── post│ │ ├── index│ │ ├── ..

Next.js 기초 및 설정

Next.jsNext.js 란?Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 파일 생성 등을 지원하여 개발자가 보다 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 이 프레임워크는 React의 기능을 확장하여 더욱 강력한 기능을 제공하며, SSR(Server-Side Rendering), CSR(Client-Side Rendering), Static Site Generation 등의 다양한 렌더링 방식을 지원합니다.서버사이드 렌더링: 서버에서 HTML 을 생성하여 클라이언트에 전달하는 방식으로, 초기 로딩 속도를 개선할 수 있습니다.정적 파일 생성: 미리 HTML 파일을 생성하여 클라이언트에 전달하는 방식으로, 빌드 시간에 미리 페이지를 생성할 수 있습니다.Ne..

Rudux로 전역 상태 관리하기

Redux로 전역 상태 관리하기Redux 소개Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.- Redux 특징Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.State is Read-Only: 상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.Changes are Made with Pure Functions: 상태를 변경하는 함수인 리듀서는 순수 함수여야 합니다.- Redux 구조Actions: 상태 변경을 위한 객체Reducers: 상태를 변경하는 함수Store: 애플리케이션의 상태를 저장하는 객체store/|-- acti..

Chakra-ui로 스타일링하기 0. Tailwind CSS vs Chakra UI - Tailwind CSS Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다. - Chakra UI Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. - Tailwind CSS와 Chakra UI를 함께 사용 Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리..

1. styled-reset styled-reset은 CSS 초기화 라이브러리로, 브라우저별 기본 스타일을 초기화할 수 있습니다. styled-reset 사이트 - 설치 npm install styled-reset yarn add styled-reset - 사용법 // src/App.js import React from 'react' import Routers from './components/Routers' import { Reset } from 'styled-reset' const App = () => { return ( {/* 초기화 */} ) } export default App 2. styled-components styled-components는 CS..

리액트 ES6 문법 정리 리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다. 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. 변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다. const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다. var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로..

github url수업내용 url : https://github.com/oddoddo/react-edu-0323.git웹사이트 만들기 : https://github.com/oddoddo/-react-router-tailwind커리큘럼회차세부내용비고1수업소개, 실습 환경 구축, js기본, 컴포넌트 만들기, Props 2Event, State 3React Router DOM, styled-reset, styled-component, tailwind 4Create, Update, Delete 5Context API, useReducer 6React-redux, 리덕스 툴킷, Next.js 7감정 일기장 앱 만들기 8감정 일기장 앱 배포  목차[js] React ES6 기본 문법https://odada.me/..

React Context리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달React Context API를 사용해서 컴포넌트 간에 데이터를 전달Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용Context API란React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법입니다.Context는 전역 상태를 관리하기 위한 간단한 방법입니다.Context 문법React.createContext 함수를 사용하여 Context를 생성합니다.Context.Provider 컴포넌트를 만나면, ..

타입스크립트란? 2012년 마이크로소프트에서 발표한 오픈소스 프로그래밍 언어로, 자바스크립트의 기반의 정적 타입 문법을 추가한 프로그래밍 언어! 타입스크립트의 특징 정적 타입의 컴파일 언어 자바스크립트(동적 타입) : 변수의 타입 오류를 런타임(동작) 시점에 확인 타입스크립트(정적 타입) : 변수의 타입 오류를 컴파일 시점에 확인 자바스크립트로 변환(컴파일) 후 브라우저에나 Node.js 환경에서 동작 개발환경 구성 ts-test 디렉토리 생성 프로젝트 생성 npm init -y 패키지 설치 parcel : 웹 애플리케이션 번들러 npm i -D parcel typescript { "name": "ts-test", "version": "1.0.0", "description": "", // "main": ..