LG U+ 유레카 프론트엔드 과정을 시작하고, 어느덧 두 번째 프로젝트인 종합 프로젝트에 돌입하게 되었어요~ 첫 번째 미니 프로젝트에서는 주제 선정부터 백엔드, 프론트엔드까지 전 과정을 직접 경험해볼 수 있었고, 그만큼 자유롭고 아기자기하게 만들었답니다ㅎㅎ 하지만 이번 종합 프로젝트는 LG유플러스에서 직접 전달한 주제로 진행된다는 점에서 훨씬 실무에 가깝고, 깊은 고민이 필요한 프로젝트가 될 것 같아요!! ✊ 이번 글에서는 6월에 주제가 발표되기 전, 주제 없이 사전 준비한 초기 세팅과 협업 방식에 대해 정리해보려 합니다. ✔️ 팀 소개팀명: 참깨라면 (참된 개발자 라면) 팀원분께서 지어주신 귀여운 팀명 "참깨라면 🍜"은‘기술을 깊이 이해하고, 항상 사용자 관점에서 개발하는 개발자’라는 뜻을 담고 있..

자바스크립트는변수의 타입을 미리 지정하지 않아도 자유롭게 사용할 수 있는 동적 언어개발 속도를 빠르게 해주는 장점도 있지만,반대로 타입 관련 버그가 런타임에서야 발견될 수 있는 단점이 존재 => 이런 문제를 해결하고자 나온 것이 바로 타입스크립트(TypeScript)1. 타입스크립트정적 타입 시스템을 통해 코드를 실행하기 전에 변수의 타입을 정적으로 결정물론 모든 변수에 타입을 지정해야 해서 유연하지 못하다는 단점타입스크립트는 점진적 타입 시스템을 채택모든 곳에 타입을 강제로 지정하지 않아도, 타입스크립트가 자동으로 타입을 추론=> 이를 통해 유연함과 타입 안정성을 모두 가져갈 수 있게 된다. 브라우저나 Node.js가 .ts 파일을 직접 실행할 수 없음→ 반드시 자바스크립트로 컴파일 후 실행해야 함2..

정보시스템 구성요소정보시스템은 다음 세 가지 핵심 요소로 구성:프로세스: 시스템이 작동하는 규칙과 절차사람정보기술: 하드웨어, 소프트웨어, 네트워크 등의 기술적 요소소프트웨어 개발특징소프트웨어 개발은 물리적 제품 제조와는 다르며, 다음과 같은 특징이 있다:개발과정: 소프트웨어는 ‘제조’가 아닌 ‘개발’이다지속적 변화: 완성 후에도 계속 변경되고 진화오류 발생: 복잡한 로직과 다양한 상호작용으로 오류 발생 → 사전 예방 필요예측 어려움: 개발 일정과 비용을 정확히 예측하기 어렵다분석과 설계의 중요성고객이 요청하는 요건과 개발자, 기획자, 영업 담당자가 이해하는 내용은 완전히 다를 수 있다.→ 정확한 요건 정리가 반드시 필요하다.분석의 정의고객이 요구하는 기능과 성능을 일관성 있게 정리하여 개발 방향을 명확..

- JWT 실제 활용하여 로그인 로그아웃 만들기JWT 기반 인증 흐름 이해JWT(Json Web Token) 인증 흐름사용자가 로그인 요청 (아이디, 비밀번호)서버가 아이디/비밀번호 검증 후 Access Token과 Refresh Token 발급클라이언트는 Access Token을 저장해두고 API 요청 시 Authorization 헤더에 넣어 보냄Access Token이 만료되면, Refresh Token을 이용해 새로운 Access Token을 발급받음로그아웃 시 모든 토큰을 무효화Access Token 빠르게 만료시켜 보안 유지Refresh Token은 서버에서 재검증해서 새로운 Access Token 발급개발 구조 및 흐름 정리Types 정의: 로그인 상태를 명확히 표현Redux Toolkit을 ..

서버가 클라이언트 인증을 확인하는 방식 3가지:쿠키 기반 인증클라이언트의 브라우저에 정보를 저장하고, 서버와의 요청/응답 간에 클라이언트를 식별서버는 쿠키를 통해 클라이언트를 식별하고 인증세션 기반 인증클라이언트의 인증 정보를 서버에 저장하고, 세션 ID를 통해 인증을 유지클라이언트는 세션 ID를 쿠키에 담아 요청토큰 기반 인증 (JWT)서버는 클라이언트에게 인증 토큰을 발급하고, 클라이언트는 요청 시 토큰을 헤더에 담아 보냄서버는 토큰을 통해 클라이언트 인증1. 기존 인증 방식의 한계- 쿠키 기반 인증의 문제점쿠키에 민감 정보(id, pw)가 담기면 노출 위험브라우저마다 쿠키 처리 방식이 달라 호환성 문제쿠키가 클수록 네트워크 부하 증가- 세션 인증의 문제점세션 저장소 장애 시 전체 인증 무력화→ 저장..

1. Context API란?Context API는 React에서 제공하는 전역 상태 관리 도구입니다.컴포넌트 트리 전체에서 props를 일일이 넘기지 않고도 데이터를 공유할 수 있도록 도와줍니다. 언제 사용할까?여러 컴포넌트에서 동일한 상태나 함수를 사용할 때상위 컴포넌트에서 하위 컴포넌트로 깊게 상태를 전달해야 할 때 (prop drilling 문제가 발생할 경우)Context는 우리가 직접 "세션처럼" 저장해줘야 한다!Context는 브라우저 메모리에만 존재즉, 새로고침 시 모든 값이 초기화되기 때문에 상태를 유지하려면우리가 직접 로컬 스토리지에 저장하고 불러오는 로직을 구현Context는 세션처럼 동작하지 않기 때문에 세션의 역할을 직접 코딩Context에 저장된 데이터를 브라우저 저장소에 수동으..

Context란?Context는여러 컴포넌트가 공통으로 사용하는 값을컴포넌트 트리 어디서든 쉽게 접근할 수 있도록 만들어주는 전역 데이터 저장소왜 Context를 써야 할까?리액트 애플리케이션에서는 데이터 전달이 기본적으로 부모 → 자식 props 방식여러 컴포넌트에서 공통으로 필요한 데이터를 매번 props로 전달하면 코드가 지저분해지는 props drilling 발생!!Context 패턴 정석 구성store에서 context 선언 Provider로 컴포넌트 트리를 감싸서 전역 값 전달 커스텀 훅으로 context 값 가져오기Next.js + TypeScript 이용한 Context 정리타입(interface) 선언하기=> 컨텍스트로 관리할 상태와 그 상태를 변경할 함수의 타입을 정의interface ..

TanStack Query (React Query)웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해주는 API.기존에는 해당하는 데이터의 로딩, 에러, 캐싱, 갱신을 직접 관리했어야 했지만, React Query가 알아서 해준다. 서버로부터 데이터를 가져오는 건 useQuery데이터 생성, 수정, 삭제 같은 작업은 useMutation쿼리의 결과를 자동으로 캐싱, 관리QueryClientProvider를 앱 루트에 적용해줘야 캐싱 가능설치npm i @tanstack/react-query queryClientprovider을 붙여주어야지 캐싱 가능 import { QueryClient, QueryClientProvider } from '@tanstack..

Axios와 async/await를 활용한 비동기 통신 정리 Axios란?Axios는 Node.js와 브라우저 모두에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트동일한 코드로 브라우저와 Node.js 환경에서 모두 작동할 수 있는 동형(isomorphic) 라이브러리서버 사이드에서는 Node.js의 http 모듈을 사용클라이언트(브라우저)에서는 XMLHttpRequest를 이용해 요청설치 방법npm install axios동기(Synchronous) vs 비동기(Asynchronous)프로그래밍에서는 작업이 실행되는 방식에 따라 **동기(Sync)**와 **비동기(Async)**로 나눌 수 있습니다. 동기(Synchronous)순차적으로 작업이 실행이전 작업이 끝나야 다음 작업이 실행set..

SPA란?SPA (Single Page Application)말 그대로 한 개의 페이지로 구성된 애플리케이션✅ 기존 방식 (MPA: Multi Page Application)페이지 이동 시마다 새 HTML을 서버로부터 받아옴페이지마다 서버가 새로 해석 후 렌더링느리고, 화면 전환 시 깜빡임 발생✅ CSR 기반 SPA 방식처음에 한 번만 HTML과 JS를 받아옴이후에는 브라우저에서 필요한 부분만 업데이트서버는 데이터를 제공하고, 뷰 렌더링은 클라이언트(브라우저)에서 처리React와 CSR (Client-Side Rendering)React는 SPA 구현을 위한 대표적인 라이브러리✅ CSR 특징초기 HTML은 거의 비어 있음브라우저에서 JS가 실행되며 React가 컴포넌트를 렌더링**가상 돔(Virtual ..