분류 전체보기83 브라우저 동작 원리 일단 브라우저 주소 창에 웹사이트의 주소를 입력하는 것부터 살펴보자. 사이트에 접속을 하려면 해당 사이트의 웹 서버에 연결을 해야 하고,우리가 입력한 주소의 IP 주소를 알아야 웹 서버에 연결을 할 수 있다.IP 주소를 알려면?1. 캐시 확인브라우저나 OS, 네트워크 라우터 또는 ISP의 DNS 캐시를 먼저 확인하여 IP 주소를 확인한다. (있으면 웹 서버 연결)2. DNS 탐색 (캐시에 없는 경우 실행)로컬 DNS와 ISP의 DNS 서버를 순차적으로 확인하며 캐시된 IP 주소가 있는지 한 번 더 확인한다. (있으면 웹 서버 연결)3. 루트 DNS 서버로 요청2번의 두 서버에도 캐시가 없는 경우에 루트 DNS 서버로 요청을 전달한다.루트 DNS에서는 입력된 주소에 따라 TLD 서버에 요청을 보내고,TLD.. 2025. 3. 6. 오즈코딩스쿨 6기 프론트엔드 과정 수료를 하루 남겨두고 쓰는 회고 오즈코딩스쿨을 통해...이렇게 혼자였던 제가...저랑 닮은 공부 친구들이 생겼어요...부트캠프 신청 계기부트캠프를 해야겠다! 라고 결심하게 된 이유는,비전공자로서 무언가를 배운 이력을 남기면서 팀 프로젝트 경험과 더불어 취업 컨설팅을 받아보고 싶어 부트캠프를 알아보고 있었다.그러던 와중에 오즈코딩스쿨이 노트북 대여도 되고 집에서 들을 수 있어 편할 것 같아 냉큼 신청했다. 또 이전에 밤낮이 바뀐 생활을 하던 터라, 오즈코딩스쿨을 통해 아침형인간이 되보자! 하고 신청했지만,결과적으로 자는 시간은 여전히 늦고 일어나는 시간만 당겨져 피곤한인간이 되었다.오즈코딩스쿨 커리큘럼8월 말부터 2월 마지막날까지 알차게 꽉채워 진행된 일정HTML/CSS - JavaScript - 계산기 프로젝트 - Git/GitHub .. 2025. 2. 27. 텍스트 에디터 Tiptap 커스터마이징 이번 프로젝트 때 텍스트 에디터를 사용해볼 기회가 생겼당!처음엔 quill을 쓰려고 했지만 next.js 15버전과의 호환성 때문인지 내가 못하는 건지 @.@ quill, quill-react, quill-react-new를 다 시도해 보았지만 커스터마이징에 실패 다른 팀에서 TipTap을 사용한다고 해서 나도 Tiptap으로 갈아탔당 🚌🔎 미리보기Tiptap은 next.js 15버전에서 아래와 같이 아주 잘 작동하였당.아이콘은 lucide 라이브러리를 사용했당.컬러팔레트까지 커스터마이징이 가능해서 컬러팔레트까지 이번 프로젝트 주요 색상을 이용해 만들었당.사진도 잘 들어간당. 모바일일 땐 undo와 redo 버튼을 없애고, 헤딩 옵션을 하나의 아이콘으로 합쳐 선택지가 드롭다운처럼 뜨도록 만들었다.?.. 2025. 1. 19. #4. 다수 컴포넌트에서의 useWebSocket 훅 사용 useWebSocket으로 웹소켓 구현하기이번 프로젝트에서 웹소켓을 통해 게시물의 좋아요 수 및 댓글의 실시간 업데이트 기능을 구현하였다.프론트엔드에서는 웹소켓을 통해 전송하는 데이터의 형태를 정확히 설정하고,웹소켓을 통seyoonagain.tistory.com 😎 useWebSocket으로 웹소켓을 구현하기이~이번 프로젝트에서 웹소켓을 통해 여행 후기의 좋아요 수 및 댓글의 실시간 업데이트 기능을 구현했당.그런데 문제점 발견! 🚨 다중 컴포넌트에서의 연결좋아요 관련 컴포넌트와 댓글 관련 컴포넌트들에서 각각 useWebSocket 훅을 호출하다보니,하나의 연결이 아닌 사용하는 컴포넌트 개수만큼 연결이 생성된 것!이렇게 불필요한 연결이 많아지게 되면 성능 저하가 발생할 수 있어 수정이 필요하다고 생각했.. 2025. 1. 17. useWebSocket으로 웹소켓 구현하기 이번 프로젝트에서 웹소켓을 통해 게시물의 좋아요 수 및 댓글의 실시간 업데이트 기능을 구현하였다.프론트엔드에서는 웹소켓을 통해 전송하는 데이터의 형태를 정확히 설정하고,웹소켓을 통해 전송받은 데이터를 필요에 맞게 처리만 해주면 어려운 것은 딱히 없다.조건useWebSocket은 react 16.8 이상에서 사용 가능하고,리액트 훅을 사용할 수 있는 함수형 컴포넌트에서 사용해야 한다. 이번 프로젝트 개발환경 세팅은 아래와 같았당.next: 15.1.0react: 19.0.0useWebSocket 설치하기pnpm add react-use-websocketnpm install react-use-websocketyarn add react-use-websocket프론트엔드에서 필요한 것은 useWebSocket.. 2025. 1. 14. #3. useRouter() from next/router vs. next/navigation 오류 발생 상황 useRouter() 입력 시 자동완성으로 뜨는 import 가능 패키지 중 가장 상단의 next/router로부터의 패키지를 선택하였더니 아래와 같은 오류가 발생했다. 자동완성으로 뜨는 두 가지 import 가능한 패키지1. next/router2. next/navigation 오류 발생 원인 두 패키지 간 차이에 의해 오류가 발생한 것 공통점- 두 패키지 모두 라우팅에 관련된 기능을 제공 차이점next/router- 더 이전에 나온 라우팅 관련 패키지로, 기본적인 라우팅 작업을 위해 만들어진 좀 더 가벼운 패키지이다.- 라우팅을 pages 폴더 기반으로 하던 next.js 13버전 이전에서 사용했던 패키지이다. next/navigation- 라우팅을 app 폴더 기반으로 하는 next.. 2024. 12. 28. 이전 1 2 3 4 ··· 14 다음
