본문 바로가기

전체 글

 (106)
TIL - 네트워킹 프로토콜 TCP와 UDP의 차이 TCP와 UDP의 차이연결 방식:TCP: 연결 지향적 (3-way 핸드셰이크 사용)UDP: 비연결 지향적 (바로 데이터 전송)신뢰성:TCP: 높음 (데이터 손실 시 재전송)UDP: 낮음 (데이터 손실 가능성 있음)데이터 전송:TCP: 패킷으로 분할하여 전송, 순서 보장UDP: 데이터그램 단위로 전송, 순서 보장 안 함속도:TCP: 상대적으로 느림UDP: 상대적으로 빠름사용 사례:TCP: 웹 브라우징, 이메일, 파일 전송UDP: 실시간 스트리밍, 온라인 게임, DNS"TCP와 UDP의 차이점을 설명해주세요."TCP와 UDP는 인터넷 프로토콜 스위트의 전송 계층에서 사용되는 두 가지 주요 프로토콜로, 연결 방식, 신뢰성, 속도 면에서 주요 차이가 있습니다.TCP는 연결 지향적 프로토콜로, 3-way 핸드셰이..
TIL - Next.js에서 Blockly 라이브러리를 사용해 블록 코딩 구현하기 공모전에서 Blockly 라이브러리를 활용해야 해서 해당 라이브러리를 활용해서 블록 코딩을 구현하는 방법을 정리해보았다. 그 과정에서 필수 개념과 주의사항을 이해하게 되었다.주요 발견1. Blockly란?시각적 블록 코딩 라이브러리: Blockly는 구글에서 개발한 시각적 프로그래밍 라이브러리로, 사용자가 블록을 조합하여 코드를 생성할 수 있게 도와준다.활용 분야: 교육용 프로그래밍 도구나 노코드(No-Code) 플랫폼에서 주로 사용된다.언어 변환 가능: 생성된 블록은 JavaScript, Python 등 다양한 프로그래밍 언어로 변환될 수 있다.커스텀 블록 정의: 개발자가 직접 블록을 정의하여 원하는 기능을 추가할 수 있다.2. Next.js에서 Blockly 사용하기클라이언트 컴포넌트로 선언: Nex..
TIL - Context API는 정말로 상태 관리 라이브러리일까? 오늘 React의 Context API에 대해 전 팀원과 이야기하면서, 이것이 실제로 상태 관리 라이브러리인지에 대한 궁금증이 생겼다. 이에 대해 조사한 결과, 중요한 사실들을 발견하게 되었다.주요 발견1. Context API는 상태 관리 라이브러리가 아니다데이터 전달 메커니즘: Context API는 컴포넌트 트리에서 데이터를 효율적으로 전달하기 위한 도구이다.상태 관리의 실제 주체: 상태 관리는 useState, useReducer와 같은 Hook을 통해 이루어진다.비교 대상: Redux나 MobX 같은 상태 관리 라이브러리와는 목적과 기능이 다르다.2. Context API의 역할"데이터 전달 파이프": Context는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 파이프 역할을 한다.Pro..
HTTP/HTTPS와 REST/GraphQL 개념 정리 HTTP와 HTTPS 개념 정리HTTP (Hypertext Transfer Protocol): 데이터를 암호화하지 않고 평문으로 주고받는 프로토콜. 공격자가 데이터 전송을 도청하거나 수정할 위험이 있음.HTTPS (Hypertext Transfer Protocol Secure): 데이터를 SSL/TLS 암호화 방식으로 보호하며, 인증서를 통해 서버의 신뢰성을 검증함. 이를 통해 데이터의 무결성과 기밀성을 보장. 예상 질문  HTTP와 HTTPS의 차이점은 무엇인가요?모범 답안: HTTP는 데이터를 암호화하지 않고 전송하는 반면, HTTPS는 SSL/TLS 암호화를 통해 데이터를 보호합니다. HTTPS는 인증서를 사용해 서버의 신뢰성을 검증하고, 클라이언트와 서버 간 데이터의 무결성과 기밀성을 보장합니다...
TIL - 트러블 슈팅: 커뮤니티 리스트 최적화 - 2 TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 1 TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 1이 포스트의 일부 결론은 후속 테스트에서 재평가되었습니다. 업데이트된 정보는 여기를 참조해주세요.1. 문제 상황커뮤니티 리스트 페이지의 초기 로딩 시간이 너무 길어 사용자 경험 저하팀fe-jogha.tistory.com이전 접근의 문제점개발 환경(dev)과 프로덕션 환경(Vercel)의 성능 차이를 고려하지 않았음환경 차이로 인해 최적화 효과가 과대 평가되었을 가능성그러나 Promise.all을 통한 병렬 처리 최적화는 여전히 유효한 개선 사항  새로운 문제 상황1. 렌더링 시간 증가 및 웹 바이탈 성능 저하문제 상황렌더링 시간이 급격히 증가Lighthouse 성능 점수가 크..
최종 팀 프로젝트 OOSIE KPT 회고 주요 논점Next.js 프레임워크를 사용하면서 서버 상태 관리로 로그인 상태를 관리하는 것의 적절성Keep (유지할 점)필수 구현 사항 완료: 로그인/회원가입, 커뮤니티 CRUD, 텍스트 에디터 활용 등 모든 필수 기능을 구현했습니다.Problem (문제점)로그인 상태 관리:일반적으로 클라이언트 사이드에서 관리되는 로그인 상태를 서버 사이드에서 관리Next.js를 통해 Supabase의 auth 관련 클라이언트를 서버 사이드로 결정Tanstack Query를 사용하여 상태 관리로딩 시간 지연:커뮤니티 페이지 이동 시 초기 로딩 상태가 상당히 길었음Try (시도할 점)로딩 시간 개선:getUser 대신 세션 활용초기 데이터를 제공하지 않는 방식 시도프리 패칭 등 다양한 방법 시도서버 홉의 문제임을 파악보안..
TIL - 트러블 슈팅: 커뮤니티 리스트 최적화 - 1 이 포스트의 일부 결론은 후속 테스트에서 재평가되었습니다. 업데이트된 정보는 여기를 참조해주세요. TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 2TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 1fe-jogha.tistory.com 1. 문제 상황커뮤니티 리스트 페이지의 초기 로딩 시간이 너무 길어 사용자 경험 저하팀원이 자신의 인터넷 연결 문제로 오해할 정도로 느린 로딩 속도2. 분석 과정MVP 우선으로 작성된 코드 전체 리뷰각 카테고리별 데이터를 UX 이유로 미리 불러오는데 동기로 불러오는 것을 발견불필요한 리렌더링 발생 확인 (콘솔 로그 활용)3. 최적화 전략 및 구현3.1 데이터 페칭 최적화최적화 전 코드:const fetchCategoryData = async (..
TIL - Z-index 스태킹 컨텍스트 문제 트러블슈팅 스태킹 컨텍스트 정의스태킹 컨텍스트(Stacking Context)는 HTML 요소의 3차원 개념적 레이어링을 정의하는 방식입니다. 이는 요소들이 z축을 따라 어떻게 쌓이는지를 결정합니다. 새로운 스태킹 컨텍스트는 다음과 같은 조건에서 생성됩니다:root 요소 (HTML)position: absolute 또는 relative이며 z-index가 auto가 아닌 요소position: fixed 또는 sticky인 요소flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소opacity가 1보다 작은 요소transform, filter, perspective, clip-path, mask 등의 특정 CSS 속성을 가진 요소스태킹 컨텍스트는 부모-자식 관계를 형성하며, 각 컨텍스트 내에서 z-i..

티스토리툴바