본문 바로가기

TIL

 (95)
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 성능 점수가 크..
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..
TIL - 까다로운 공공 데이터 API 데이터 페칭 트러블 슈팅 서론오늘은 예전 팀 프로젝트에서 함께 일했던 가현님이 공공 데이터 API와 관련된 문제로 도움을 요청하셨습니다. API 변경으로 인해 데이터 구조가 크게 바뀌었고, 이에 따라 데이터를 효과적으로 페칭하는 데 어려움을 겪고 있었던 상황이었습니다.문제 상황이미지 데이터 부재: 공공 데이터 API에서 이미지가 제거되어, 주제와 관련된 이미지를 가져오는 데 큰 어려움이 있었습니다. 이로 인해 네이버 검색 API를 이용해 이미지를 찾아야 했고, 전체 1300개 데이터 항목에서 이미지를 4개씩 찾아야 하다 보니 5200개의 이미지를 받아오는 작업이 필요했습니다. 네이버 API는 초당 10건 제한이 있어 전체 데이터를 받아오는 데 이론상 8~10분이 소요될 것으로 예상했고, 실제로는 10분 이상 걸렸습니다.API 엔..

티스토리툴바