odada

Next.js 블로그 앱 만들기Next.js를 사용하여 블로그 애플리케이션을 만들어보겠습니다. 블로그 애플리케이션은 다음과 같은 기능을 구현할 수 있습니다.Next.js 기초 및 설정 포스트를 참고하여 Next.js 프로젝트를 생성합니다.next.js 블로그 앱 만들기 github 바로가기1. 프로젝트 개요1.1. 프로젝트 목표Next를 사용하여 블로그 앱을 만들어보자.Firebase로 사용자 인증을 구현하고 로그인, 회원가입, 로그아웃 기능을 구현한다.Firebase의 기본 개념을 익히고 데이터 조회, 추가, 수정, 삭제를 구현한다.1.2. 프로젝트 환경Next.js(create-next-app) 프로젝트 생성Firebase (Firestore, Authentication)를 이용한 데이터 관리 및 사..

Next.js 기초 및 설정1. Next.js 란?Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 파일 생성 등을 지원하여 개발자가 보다 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 이 프레임워크는 React의 기능을 확장하여 더욱 강력한 기능을 제공하며, SSR(Server-Side Rendering), CSR(Client-Side Rendering), Static Site Generation 등의 다양한 렌더링 방식을 지원합니다.2. Next.js 특징서버 사이드 렌더링(SSR): Next.js는 서버 사이드 렌더링을 지원하여 초기 로딩 시에 페이지를 서버에서 렌더링하여 사용자에게 보여줍니다. 이를 통해 SEO(Search Engine Optimizatio..

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목차[js] React ES6 기본 문법https://odada.me/322[js] 함수https://odada.me/236  리액트란 무엇인가?https://odada.me/250리액트 패키지 설치, 필수 라이브러리https://odada.me/251JSX란 무엇인가?https://odada.me/252리액트 컴포넌트(Component)https://odada.me/254리액트 속성(Props, Properties)https://odada.me/271리액트 이벤트(Event)htt..

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": "in..