본문 바로가기

전체 글

 (74)
[10주차] 위클리 페이퍼 - 경험을 바탕으로 React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명해주세요. 특히 로그아웃 구현 로직에 대해 설명해주세요. JWT와 React 인증 구현1. JWT 개념 및 작동 원리JWT(JSON Web Token)*는 서버와 클라이언트 간의 안전한 사용자 인증을 위해 사용되는 암호화된 토큰입니다.사용자가 로그인하면 서버는 사용자의 정보를 기반으로 JWT를 생성하고 클라이언트에 전달합니다.이후 클라이언트는 서버로 요청을 보낼 때 이 JWT를 HTTP 헤더에 포함시켜 인증을 수행합니다.JWT 구조: Header.Payload.SignatureHeader: 토큰 유형(JWT) 및 서명 알고리즘(HMAC SHA256, RSA 등) 정보Payload: 사용자 정보 및 토큰 만료 시간 등 Claims 데이터Signature: 토큰 위변조 방지를 위한 서명 값작동 흐름사용자가 로그인 요청서버가 사용자 정보를 검증 후 JWT 발급클라이..
[10주차] 위클리페이퍼 - 세션 기반 인증과 토큰 기반 인증의 차이점을 설명하세요. 어떤 상황에서 각각을 사용하면 좋을지 예를 들어 설명해 주세요. 세션 vs 토큰 기반 인증세션 기반 인증서버가 사용자의 로그인 상태를 세션에 저장합니다. 이 때, 서버는 각 세션에 대한 식별자(세션 ID)를 발급하고, 이 ID는 사용자의 브라우저 쿠키에 저장됩니다. 사용자가 서버에 요청을 보낼 때마다 이 쿠키를 통해 세션 ID가 서버로 전송(Cookie)되어 사용자를 식별하게 됩니다.이 방식의 주요 장점은 서버가 사용자의 상태를 계속 추적할 수 있다는 것입니다. 그러나 이로 인해 서버의 자원을 많이 사용하며, 서버의 확장성이 제한될 수 있습니다.따라서 금융 서비스나 내부 관리 시스템 같이 높은 보안과 세밀한 사용자 상태 관리가 필요한 환경에서 적합합니다.토큰 기반 인증서버가 사용자 인증 후 토큰을 발급하고, 이 토큰에 사용자 식별 정보를 포함시킵니다. 사용자는 이 토..
[9주차] 위클리페이퍼 - 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. Next.js를 사용하는 이유 (기본)리액트의 SPA 및 CSR의 한계리액트의 렌더링 방식리액트는 단일 웹페이지 애플리케이션(SPA)와 클라이언트 사이드 렌더링 방식을 사용리액트 렌더링 방식의 한계초기 로딩 시간 지연: 모든 자바스크립트 파일과 컴포넌트를 클라이언트 측에서 로드해야 하므로, 초기 로딩 시간이 길어질 수 있음SEO 문제: 검색 엔진이 콘텐츠를 제대로 인덱싱하지 못해 SEO에 불리Next.js의 프리렌더링 기능과 이점프리렌더링의 방식서버 사이드 렌더링(SSR): 각 요청마다 서버에서 HTML을 생성하여 브라우저에 전달 → SEO와 초기 로딩 시간을 크게 개선정적 사이트 생성(SSG): 빌드 시 모든 페이지를 미리 생성하여 정적 파일로 저장 → 매우 빠른 로딩 속도와 보안성을 제공프리렌더링의 ..
[8주차] 위클리 페이퍼 - 관계형 데이터베이스를 사용하는 이유를 설명해주세요. 관계형 데이터베이스를 사용하는 이유데이터 무결성과 일관성 유지ACID 속성을 통해 데이터 무결성과 일관성을 유지원자성 (Atomicity): 모든 트랜잭션이 완전히 수행되거나 전혀 수행되지 않아야 함을 보장일관성 (Consistency): 트랜잭션이 데이터베이스를 일관된 상태로 유지하도록 보장고립성 (Isolation): 동시에 실행되는 트랜잭션이 서로 간섭하지 않도록 보장지속성 (Durability): 트랜잭션이 성공적으로 완료되면 결과가 영구적으로 저장됨을 보장동시성 제어: MVCC(Multi-Version Concurrency Control)나 잠금(Locking) 메커니즘을 통해 다수의 사용자가 동시에 안전하게 데이터에 접근 가능데이터 중복 최소화데이터베이스의 저장 공간을 절약하고 데이터 일관성을..
[8주차] 위클리 페이퍼 - 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. CSR (Client-Side Rendering)정의클라이언트 사이드에서 페이지 렌더링 작업을 수행하는 방식초기 로딩 시 HTML 파일과 JavaScript 파일을 받아 브라우저에서 실행 이후, 모든 렌더링과 업데이트는 클라이언트 측에서 이루어짐특징 (장/단점)장점빠른 사용자 상호작용: 한 번 로드 되면 페이지 전환이 빠름동적 콘텐츠: 사용자 상호작용에 따라 동적으로 컨텐츠 업데이트단점초기 로딩 속도: 초기 로딩 속도가 느릴 수 있음SEO 문제: 초기 로딩 시, 빈 HTML 문서를 받아, SEO가 어려울 수 있음보완 사항Prerendering, Dynamic Rendering, Server Components(React 18+) 등을 통해 보완 가능사용 상황대시보드 및 웹 애플리케이션사용자와의 동적인 상..
[7주차] 위클리 페이퍼 - 데이터베이스 정규화에 대해 설명해주세요. 데이터베이스 정규화정규화의 목표데이터를 구조적으로 정리하여 중복을 최소화데이터의 무결성을 유지정규화의 효과데이터베이스 관리가 효율적으로 이루어짐데이터의 일관성이 높아짐장점데이터 중복 최소화: 불필요한 중복을 제거하여 저장 공간을 절약하고 데이터의 일관성을 보장데이터 무결성 보장: 데이터의 일관성을 유지해 오류 발생 가능성을 줄임성능 향상: 데이터 검색 및 수정 작업의 성능을 최적화단점구조의 복잡성: 데이터베이스 구조가 복잡해질 수 있으며, 이를 이해하고 관리하는 데 어려움이 있음Join 연산의 증가: 데이터를 조회할 때 여러 테이블을 Join 연산 수행, 성능이 저하될 가능성 존재정규화 단계제1정규형 (1NF)테이블의 모든 열이 원자값(더 이상 나눌 수 없는 값)을 가져야 한다는 규칙하나의 열에 여러 값..
[7주차] 위클리 페이퍼 - 리액트 생명주기(life cycle)에 대해 설명해 주세요. 컴포넌트 생명주기컴포넌트가 생성되어 화면에 마운트 되는 순간부터, 업데이트, 언마운트 되는 순간까지의 과정을 의미여러 생명주기 메소드를 통해, 각 생명주기의 동작을 정의 및 호출됨주요 생명주기 메서드클래스 컴포넌트constructor()컴포넌트의 생성 시 실행초기 상태를 설정하고, 메서드를 바인딩할 때 사용componentDidMount()컴포넌트가 처음 DOM에 마운트된 직후 호출사이드 이펙트를 발생시킬 때 사용componentDidUpdate()컴포넌트가 업데이트된 후에 호출DOM을 업데이트하거나 새로운 데이터에 반응할 때 사용componentWillUnmount()컴포넌트가 DOM에서 제거될 때 호출정리 작업을 수행할 때 사용함수 컴포넌트useEffect() 를 통해, 생명주기를 통합적으로 관리할 ..
[7주차] 위클리 페이퍼 - React에서 배열을 렌더링할 때 key를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명하세요. Key의 필요성렌더링 과정에서 요소를 식별하는 방법을 제공하며, 배열의 요소가 재정렬되거나 업데이트 될 때 중요Key를 통해 React가 어떤 항목이 변경/추가/제거 되었는지 파악할 수 있음불필요한 요소의 생성과 파괴를 방지, 변경된 요소만을 갱신할 수 있음Key의 역할key는 React의 렌더링 성능 최적화에 크게 기여key를 사용하면 React는 이전 상태와 새로운 상태를 비교하여 변경된 부분만 업데이트DOM 조작을 최소화하여, 성능을 향상 시킬 수 있음Key 설정 주의사항고유한 Key 값 사용Key 값이 중복되면, 어떤 요소를 변경했는지 판단할 수 없어, 의도치 않은 동작이 발생할 수 있음인덱스 값 Key 사용 금지인덱스 값은 변할 수 있는 값이므로, 1번 규칙에 위배 되는 결과를 초래함단, 리스트..

티스토리툴바