본문 바로가기

전체 글70

나만의 React App 만들기 진행하며 체크할 부분상태관리 ( 유지 / 초기화 ) 가 잘 되어있는지각 컴포넌트의 재사용성이 높은지예외처리가 미흡한 부분은 없는지 요구사항필수 요구 사항UI/UX게시물 조회 / 추가 / 삭제 / 수정 기능상태관리 라이브러리 활용ex) Redux, Recoil, Redux toolkit, Mobx 등동적 라우팅유효성 검증ex) 제목을 10글자 이상 기입하지 않으면, 글을 추가할 수 없도록 제한(Alert 안내)ex) Form에서 모든 input 값을 입력하지 않으면, 버튼 비활성화배포된 결과물에서는 console.log()가 보이지 않도록 처리추가 요구 사항 (선택)로그인 / 회원가입 기능1개 이상의 Custom Hook버튼 컴포넌트 1개로 모든 버튼을 구현. 모든 스타일과 기능을 적용할 수 있는 만능 버 2024. 11. 2.
REST, JSON REST API 란?REpresentional State Transfer의 약자로서, 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP Method(GET, POST, PUT, DELETE)를 사용하여 요청을 보내는 것.이 때, 요청을 위한 자원은 특정한 형태로 표현된다.# CRUD - Create, Read, Update, Delete 를 처리하는 동작 간단하게 : "URI를 통해 정보의 자원을(only 자원만을) 표현하고, 자원의 행위는 HTTP Method로 명시한다. # 규칙http://example.com/posts (O)http://example.com/posts/ (X)http://example.com/post (X)http://example.com/get-posts.. 2024. 11. 2.
비동기 프로그래밍 비(not) + 동기적 프로그래밍.동기(synchronous)적 방식이란? 1. 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식비동기(asynchronous)적 방식이란? 1. setTimeout, addEventListner 등2. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드3. 대표적으로 서버 통신과 관련된 로직들 포함 콜백지옥1. 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우2. 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생3. 가독성, 수정 어려움- 이를 해결하기 위해 Promise 객체가 소개되었다.# 비동기 프로그래밍을 다룬다는 것은 Promise 객체를 다룬다는 의미와 일치. Promise .. 2024. 11. 2.
react-router-dom 여러 페이지를 가진 웹을 만들 수 있게 된다. 그 다음 src안에 shared라는 폴더 생성, Router.js 파일 생성import React from "react";// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.import { BrowserRouter, Route, Routes } from "react-router-dom";// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.//BrowserRouter를 Router로 감싸는 이유는, //SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!const Router = () => { return ( );};export de.. 2024. 11. 2.
why React UI 개발의 효율성을 높이고, 유지보수와 성능을 최적화 할 수 있기 때문 특히컴포넌트 기반 아키텍쳐컴포넌트 : UI를 구성하는 독립적이고 재사용 가능한 코드의 조각함수형 컴포넌트 (Functional Component)JS 함수로 작성되는 컴포넌트로, return문을 통해 JSX를 반환useState, useEffect와 같은 React Hook을 사용해 상태와 생명주기를 관리클래스형 컴포넌트 (Class Component)ES6 클래스 문법으로 작성, render 메서드를 통해 JSX를 반환this.state를 사용해 상태를 관리, componentDidMount, componentWillUnmount 같은생명주기 메서드를 통해 특정 시점에 로직을 수행할 수 있다재사용성 : 중복을 줄이고, 유사한 기능.. 2024. 11. 2.
Redux Redux 란?중앙 state 관리소 를 사용할 수 있게 도와주는 패키지- 전역상태 관리 라이브러리 폴더 구조 1. redux : 리덕스와 관련된 코드를 모아 놓는 폴더 2. config : 리덕스 설정과 관련된 파일들을 모아 놓을 폴더 3. configStore : "중앙 state 관리소" 인 Store를     만드는 설정 코드들이 있는 파일 4. modules : State들의 그룹.    ex) 투두리스트를 만든다고 하면, state들이 모두 모여있을    todos.js를 생성하게 될텐데, 이 totos.js 파일이 곧 하나의 모듈      src/configStore.jsimport { createStore } from "redux";import { combineReducers } from .. 2024. 11. 1.

티스토리툴바