우당탕탕 개발일지

Dart Setting 깃허브에서 플러터 프로젝트를 새로 클론했는데 SDK가 존재하지 않는다는 오류가 발생했다. 플러터는 Dart에서 제공되는 SDK가 존재해야 하는데, 경로를 인식하지 못해서 발생하는 오류이다. Dart 설정에서 SDK 경로를 지정해주고, 적용시킬 프로젝트 모듈을 선택해서 해결하였다. Device Manager 플러터 프로그램을 실행시키기 위해서는 실행할 디바이스가 필요하다. 에뮬레이터라는 가상 기기로 프로그램을 실행시켜 볼 수 있다. Lint Setting analysis_options.yaml에서 rules: 부분에 추가 (analysis_options.yaml) rules: prefer_const_constructors: false avoid_print: false prefer_t..

React Query란 React Query는 클라이언트에서 서버 데이터 캐시를 관리한다. 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용한다. React 코드에서 서버 데이터가 필요할 때 axios를 통해 서버로 바로 이동하지 않고 React Query 캐시를 요청한다. 데이터 관리뿐만 아니라 React Query는 서버 상태를 관리 한다. 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지하기에 수동으로 관리할 필요가 없다. 데이터의 페이지 매김(Pagination)을 제공하며, 무한 스크롤이 가능하다. 캐시에서 해당 데이터를 가져오기 때문에 서버에 연결할 때까지 기다릴 필요가 없다. 서버에서 데이터 변이나 업데이트를 관리할 수 있다. ..

리액트를 사용하여 작업을 할 때 수많은 파일들과 기능, 컴포넌트를 관리하는 것은 정말 복잡한 일이다. 그렇기에 폴더 구조를 미리 정해두는 것은 코드의 유지 및 보수에 큰 도움이 된다. 최초 생성 디렉토리 node_modules CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더 package.json CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일 모든 프로젝트마다 package.json이 하나씩 존재 [ dependencies ] 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능. 실제 코드는 node.modules 폴더에 존재한다. [ scripts ] start : 프로젝트 development mode(개발 모드) 실행을 위한 명령어. ..

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는 클라이언트와 서버 간의 정보를 안전하게 전송하기 위해 사용되는 인증 방식으로 헤더,..