우당탕탕 개발일지

1. 리액트 리덕스 설치npm install redux react-redux 2. Provider로 감싸기 [ src/main.tsx ]import React from "react";import ReactDOM from "react-dom/client";import App from "./App";import { legacy_createStore } from "redux";import { Provider } from "react-redux";import rootReducer from "./redux/rootReducer";const store = legacy_createStore(rootReducer);ReactDOM.createRoot(document.getElementById("root") as HTM..

리액트는 사용자 인터페이스를 구축하기 위한 JS 라이브러리이다. 리액트에서 컴포넌트(Component)는 UI를 재사용 가능한 작은 단위로 분리하는 방법을 제공한다. 컴포넌트는 독립적으로 작동하며, 특정 기능을 수행하거나 화면의 특정 부분을 표현하는 역할을 한다. 컴포넌트 역할 UI 요소의 표현 HTML 요소를 렌더링하거나, 다른 리액트 컴포넌트를 조합하여 UI를 구성할 수 있다. 상태 관리 컴포넌트는 자체적으로 상태(state)를 가질 수 있다. 컴포넌트의 상태가 변경되면 리액트는 자동으로 UI를 갱신하여 변경된 상태를 반영한다. 이벤트 처리 컴포넌트는 사용자의 동작에 대한 이벤트를 처리할 수 있다. 재사용성 컴포넌트는 독립적으로 존재하며, 다른 컴포넌트와 조합하여 재사용할 수 있다. 이는 코드의 재사..

스프링 부트의 웹 애플리케이션은 'MVC 아키텍처'라고 하는 개념을 기반으로 설계돼 있다. 애플리케이션을 Model, View, Controller라는 역할로 나누어 구축해가는 방식이다. Model(모델) - 애플리케이션에서 사용할 데이터를 관리한다. View(뷰) - 실제로 사용자가 보는 화면을 만든다. Controller(컨트롤러) - 전체 처리를 제어한다. Model 템플릿에서 사용할 데이터들을 일괄해서 관리한다. 데이터 관리가 주 목적이기에 뷰 관련 정보는 가지고 있지 않다. 따라서 Model을 반환값으로 사용할 수는 없다. @ModelAttribute 애노테이션은 컨트롤러 메서드의 매개변수에 사용하여 요청의 데이터를 객체로 바인딩하는 역할을 한다. 요청한 파라미..

변수 선언 파이썬은 JS와는 달리, var, const, let과 같은 변수선언문이 없다. 따라서 변수에 값을 할당할 때, 변수 이름만 적고 값을 할당해주면 된다. 기본 자료형 JS 자료형 - number, string, boolean, undefined, null, Symbol, Object 파이썬 자료형 - 숫자형(integer, float), 문자열 자료형(String), 리스트 자료형(Array), 튜플 자료형, 딕셔너리 자료형, 집합 자료형(Object), 불 자료형(boolean) 입력 JS는 stdin을 불러오거나 readline 모듈을 불러와서 처리해줘야 하지만, 파이썬에서는 input 함수를 사용한다. input()은 한 줄 단위로 문자열을 입력을 받는다. input().split()를 ..

인증은 사용자의 신원을 확인하고, 인가는 인증된 사용자에 대한 권한에 따라 시스템에 접근하도록 허용한다. 인증은 인가 이전에 수행되고, 인증된 사용자에 대해서만 인가 절차가 진행된다. 인증 사용자가 자신의 신분을 확인하고 시스템에 대한 신뢰성을 보장하는 과정 인가 인증된 사용자가 시스템의 특정 자원에 접근하고 특정 작업을 수행할 수 있는지 여부를 결정하는 과정 인증은 일반적으로 아이디와 비밀번호를 제공함으로써 로그인을 통해 수행된다. 그러나 작업 수행마다 아이디와 비밀번호를 보내는 방법은 매번 서버에서 확인을 해야할 뿐만 아니라 보안에 있어서도 취약하다는 문제가 있었고, 이를 위해 JWT가 나오게 되었다. JWT JWT는 클라이언트와 서버 간의 정보를 안전하게 전송하기 위해 사용되는 인증 방식으로 헤더,..

재사용 가능 컴포넌트는 코드 중복을 방지하기 위해 애플리케이션의 여러 영역에서 공유할 수 있다. 깔끔한 인터페이스를 사용하는 작은 컴포넌트를 조합해 복잡한 애플리케이션을 만드는 방식은 유지관리하기도 쉽다. 컴포넌트를 조합할 때는 프로퍼티를 사용해 컴포넌트 사이에 데이터를 공유한다. 소유자가 render 메소드 안에 정의된 컴포넌트로 전달하는 children이라는 특수한 프로퍼티가 있다. 이 프로퍼티는 포함하는 값에 대한 정보를 전혀 제공하지 않기 때문에 리액트 설명서에서는 이를 불투명하다고 설명하고 있다. 부모 컴포넌트의 render 메소드에 정의된 하위 컴포넌트는 보통 JSX에서 컴포넌트 자체의 속성으로서 전달되거나, createElement 함수의 두 번째 매개변수로 전달된 ..

컴포넌트가 렌더링 될 때마다 side-effect를 처리하는 작업을 해주는 Hook으로 최초에 한번은 무조건 동작한다. useEffect는 실행 시 두 가지 인자를 받는다. 첫 번째 인자 'useEffect'가 호출될 때마다 side-effect를 정의하는 함수 의존성 배열 side-effect의 상태 변화를 감지 해당 배열에 포함된 요소의 상태가 변화되어야 side-effect를 실행시킨다. 빈 배열이라면 최초에 한 번만 실행된다. import React, { useEffect } from "react"; function Example(){ useEffect (() => { //side-effect를 실행하는 함수 console.log('컴포넌트가 화면에 나타남'); return() => { //cle..

Fetch와 Axios 차이점 fetch는 Promise 기반으로 만들어졌으며, 내장 라이브러리이기 때문에 별도의 import가 필요없기에 편리하다. 그러나 많은 사람들이 axios를 사용하는 것을 더 선호한다. 그 이유는 다음과 같다. fetch는 네트워킹에 오류가 있는 상황에서만 Promise를 reject 시키기 때문에 모든 fetch 호출에 오류를 처리하는 함수를 작성해야 한다. axios는 모든 HTTP 에러를 reject하는 Promise를 반환하기에, 모든 에러를 catch에서 처리할 수 있어서 편리하다. 또한, 인터셉터, 요청 설정 등 fetch보다 다양한 기능을 지원한다. Axios 사용 방법 - axios 설치 $ npm install axios - HTTP 요청 전송 import ax..