SSR과 CSR 분석 및 비교1. SSR (서버 측 렌더링, Server-Side Rendering)SSR은 웹 애플리케이션의 페이지를 서버에서 렌더링하여 클라이언트에게 전달하는 방식입니다. 클라이언트는 서버에서 렌더링된 HTML을 받게 되고, 페이지를 요청할 때마다 서버는 해당 페이지를 다시 렌더링합니다. 이 방식은 웹 페이지가 처음 로드될 때 클라이언트 측에서 별도의 렌더링 없이 즉시 콘텐츠를 볼 수 있게 해줍니다.장점:1, 빠른 초기 페이지 로딩: 서버에서 HTML을 미리 렌더링하여 전달하므로, 사용자는 페이지를 요청하자마자 콘텐츠를 빠르게 볼 수 있습니다.2, SEO에 유리: 서버에서 페이지를 렌더링하여 검색 엔진이 페이지의 콘텐츠를 쉽게 인덱싱할 수 있습니다. 이는 SEO 최적화에 큰 도움이 됩..

JWT와 Session 인증 방식 비교 정리 1, JWT란?JWT는 JSON Web Token의 약자로 JSON 형식으로 정보를 저장하고, 서명(Signature)을 통해 무결성을 보장하느 토큰 기반 인증 방식입니다. 주로 헤더(Header), 페이로드(Payload), 서명(Signature)으로 구성됩니다. 2. JWT을 활용한 사용자 인증1, 로그인 요청:- 사용자가 ID/PW를 통해 로그인 요청을 보냄- 서버는 사용자 정보를 검증한 후 JWT를 생성하여 클라이언트에 전달2, JWT 전달:- 클라이언트는 JWT를 저장(로컬스토리지, 쿠키 등)하고, 이후 요청 시 HTTP 헤더( Authorization: Bearer )에 포함하여 전송3, 서버 검증:- 서버는 클라이언트가 보낸 JWT의 서명을 검..

MongoDB와 Python을 활용한 친구 목록 관리 1, MongoDB란?MongoDB는 NoSQL 데이터베이스로, 데이터를 JSON과 유사한 BSON(Binary JSON) 형식으로 저장합니다. 관계형 데이터베이스와달리 스키마가 고정되지 않아 구조가 유연하며, 대규모 데이터 처리와 확장성에서 강점을 가집니다. 특히, 문서(Document) 단위로 데이터를 관리하며, 컬렉션(Collection) 안에 여러 문서를 저장하는 방식으로 구성됩니다.주요 특징:NoSQL: 비관계형 데이터베이스로, 정형화된 테이블이 아닌 문서 기반 데이터 저장 방식.유연한 스키마: 구조를 변경할 때 전체 데이터베이스를 변경하지 않아도 됨.확장성: 샤딩과 복제 기능을 통해 대규모 데이터를 효과적으로 처리.다양한 언어 지원: Pyt..

오늘의 배운점REST API란?REST API는 REST(REpresentational State Transfer) 아키텍쳐 스타일의 설계 원칙을 준수하는 API(애플리케이션 프로그래밍 인터페이스)입니다. REST API는 애플리케이션을 통합하고 마이크로서비스 아키텍쳐의 구성 요소를 연결하는 유연하고 가벼운 방법을 제공합니다.REST API의 설계원칙REST API는 다음 6가지 설계 원칙을 기반으로 동작합니다: 1. 균일한 인터페이스 (Uniform Interface)리소스는 고유한 URI(Uniform Resource Identifier)를 통해 식별됩니다.동일한 리소스는 항상 동일한 URI를 통해 접근 가능.예: 사용자 데이터를 조회하려면 /users/{id}와 같은 URI를 사용.2. 클라이언트-..

오늘의 과제문제①: 단어 정답 판단 방법정답 단어를 처음 게임 시작 시 프론트엔드에서 저장해 처리하는 방법을 제안했습니다. 서버 통신 지연을 줄여 더 나은 사용자 경험을 제공합니다. 문제②: setTimeout으로 1초마다 함수 호출setTimeout을 재귀적으로 호출해 1초마다 현재 시간을 출력하는 프로그램을 작성했습니다. 유연한 반복 실행이 가능한 방식입니다. 과제코드 function PrintCurrentTime(){ const currentTime = new Date(); const formated = ${currentTime.getHours()}:${currentTime.getMinutes()}:${currentTime.getSeconds()}; console.log(format..

오늘의 과제오늘은 알림 이미지 HTML 구현 과제를 진행했습니다. 벨 모양 이미지를 사용하고 그 위에 빨간색 원으로 알림 배지를 추가해 숫자를 표시하는 작업이었습니다. HTML 구조와 CSS를 사용해 디자인을 구현했고, 특히 position: absolute 속성을 활용하여 위치를 조정하는 데 집중했습니다.과제 코드 1 학습범위11강 HTML로 간단한 회원가입 페이지 만들기 ~ 15강 CSS 선택자와 상태 일일 보고 양식부족한 점 : position: absolute 속성 사용 시 부모 요소의 relative 설정을 놓쳤던 점.스스로 시도해본 것들 : CSS 속성 실험으로 position의 동작..