728x90 반응형 Learn to Code58 [Next.js] 브라우저 캐싱 문제 해결 방법 next.config에 generateBuildId를 추가한다 // next.config.js module.exports = { generateBuildId: async () => { return new Date().toISOString(); }, }; 프로젝트를 빌드할 때, 빌드 날짜와 시간을 기반으로 새로운 build ID가 생성된다. 새로 업데이트된 웹앱을 배포할 때, Next.js에 의해서 이 새로운 build ID가 에셋들(eg. JS, CSS 파일 등의 URL)에 사용된다. 유저가 웹사이트를 방문하면, 유저의 브라우저가 에셋 URL의 일부로써 새로운 build ID를 전달받게 된다. 이 브라우저는 새로운 build ID와 함께 에셋들을 받게 된다. 미래에 웹앱이 업데이트되면, 새로운 build.. 2023. 10. 20. [Next.js] 버전 13+으로 업데이트하기 요즘 pages 디렉토리를 사용한 Next.js 이전 버전의 프로젝트에서 Next.js 13+@ 버전으로 이동하는 작업을 하고 있다. 사실 이전 작업 방법에 대해선 Next.js Docs에 잘써있는데, 그래도 한번 쓱 번역하면서 직접 처음부터 끝까지 글을 한번 쭉 보면 머리에 더 쏙쏙 박히는 것 같아서 한글로 대충 번역을 했다. 근데 이걸 또 공유해달라는 친구가 있어서 정말 러프하게 내가 보려고 대충 쓴 글이지만 블로그에 기록으로 남기려고 한다. 업데이트하는 방법은, 페이지 단위로 아래 글에 적힌 번호 순서대로 쓱쓱 따라가면 된다. 1. npm install next@latest ㄱㄱㄱ 2. src/안에 app 디렉토리를 만든다. 3. Root Layout 폴더를 만든다 - app/layout.tsx e.. 2023. 10. 7. Custom Hook Custom hook이란? React의 커스텀 훅(custom hook)은 리액트의 함수형 컴포넌트에서 상태 또는 사이드 이펙트가 있는 로직을 재사용하기 위해 캡슐화할 수 있는 특정 네이밍 규칙을 따르는 함수이다. 커스텀훅을 사용하면 복잡한 로직을 재사용가능한 함수로 만들어버릴 수 있는데, 이렇게 할 경우 코드가 깰끔해지고 컴포넌트 내 관심사 분리를 유지하기 쉬워진다. 일반 함수 vs. 커스텀훅 커스텀훅 또한 함수라고 했는데, 그렇다면 일반 함수와 커스텀 훅의 차이는 무엇일까? 1. 네이밍 규칙 커스텀훅들은 "use"라는 이름으로 시작해야 한다(예: useFetchData). 이를 통해 리액트가 이 친구가 커스텀훅이라는걸 알 수 있게 되고, 리액트 내부에서 진행되는 특정 최적화 작업의 대상이 될 수 있다.. 2023. 8. 16. TCP와 UDP TCP(Transmission Control Protocol) UDP(User Datagram Protocol) TCP와 UDP는 OSI 모델 4계층인 전송 계층에 속하는 프로토콜들이다. 같은 transport protocol이지만 이 두 프로토콜엔 차이가 존재한다. OSI 4계층, Transport Layer 4계층은 목적지 단말 안에서 동작하는 여러 애플리케이션 프로세스 중 통신해야 할 목적지 프로세스를 정확히 찾아가고, 패킷 순서가 바뀌지 않도록 잘 조합해 원래 데이터를 잘 만들어내기 위한 역할을 한다. TCP(Transmission Control Protocol) TCP는 네트워크상으로 데이터를 전송할 때 사용되는 신뢰성있는(reliable) 연결 기반(connection-oriented) 프로토.. 2023. 8. 15. 클라이언트 사이드 렌더링 vs. 서버 사이드 렌더링 (CSR vs. SSR) CSR과 SSR이란 CSR과 SSR은 클라이언트-서버 아키텍처 상 웹페이지를 렌더링할 수 있는 두가지 다른 방법을 뜻한다. CSR의 경우, 페이지 렌더링의 대다수는 클라이언트 쪽에서 React, Angular, Vue.js와 같은 자바스크립트 프레임워크를 사용해 진행된다. 클라이언트의 브라우저는 자바스크립트 코드를 다운로드 하고, 그 이후 브라우저에 컨텐츠를 동적으로 렌더링하기 위해 API 호출 등을 한다. 이러한 접근법은 더욱 인터렉티브하고 다이나믹한 유저 경험을 만들 수 있다는 장점이 있으며, 페이지 전체를 로딩할 필요 없이 특정 부분만 업데이트 된다는 장점이 있다. 반면, SSR의 경우엔 서버가 HTML 컨텐츠의 렌더링을 완성하여 클라이언트의 브라우저로 보낸다. 브라우저는 완전히 렌더링된 HTML을.. 2023. 8. 3. 이벤트 버블링(Event Bubbling)이란? 이벤트 버블링(event bubbling)은 웹 개발에서 사용되는 필수 개념 중 하나다. 이벤트가 발생했을 때, 해당 이벤트가 DOM 구조를 통해 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 특정 요소에서 버튼 클릭과 같은 이벤트가 발생하면, 그 이벤트는 그 특정 엘리먼트에서만 트리거되는게 아니라 이벤트가 발생한 요소의 부모 요소들과 document의 루트까지 트리거된다. 이벤트 버블링에 대한 이해는 효과적이면서 유지하기 쉬운 프론트엔드 앱을 개발하는데 필수적이다. 특히나 유저 인터페이스가 복잡하고 인터렉션 가능한 요소가 많은 프로젝트일 수록 그 효과가 더 커지기 때문에 미리미리 공부해두면 좋다. 이벤트 전파(Propagation)의 3단계 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3.. 2023. 7. 27. 레이지로딩(lazy loading)이란? 레이지로딩 (lazy loading)이란? 레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술을 의미한다. 레이지 로딩의 목적은 (1) 최초 페이지 로딩 시간을 개선하고 당장 화면에 표시되지 않는 이미지, 영상 등의 리소스를 나중에 로딩하면서 (2) 최초 데이터 전달 양을 감소시키는 것이다. 웹페이지를 로딩하는 기존 방식은 모든 리소스들을 한번에 받는 것이다. 이렇게하면 최초 로딩 시간이 더 커지게 되는데, 이러한 로딩 시간 증가는 인터넷 연결 속도가 느린 지역이나 디바이스를 사용할 때 특히 더 두드러지게 체감된다. 이러한 문제를 해결하기 위해 사용할 수 있는 테크닉이 레이지 로딩인 것이다. 레이지 로딩을 적용.. 2023. 7. 27. [JS] 이벤트룹 (Event loop), 힙(Heap), 콜 스텍(Call stack) * 본 포스팅은 이벤트 룹이 무엇인지 공부하고 정리한 내용을 재작성한 것입니다. 자바스크립트 런타임 환경의 동작 원리를 이해할 때 빼놓을 수 없는 주제가 바로 이벤트룹(event loop)이다. 이 이벤트룹의 존재로 인하여 자바스크립트 엔진이 싱글 스레드(single-thread)임에도 불구하고 브라우저 또는 Node.js와 같은 환경에서 마치 멀티 스레드로 동작하는 것과 같은 효과를 낼 수 있게 되는 것이다. 이벤트룹(Event loop)이란? 이벤트룹(Event loop)은 자바스크립트 런타임 환경에 포함되어 있는 기능 중 하나로, (1) 자바스크립트 엔진 내 콜 스택(Call stack)이 비어있고(2) 런타임 환경 내 이벤트큐(Event queue(task queue 또는 message queue.. 2021. 11. 18. HTTP/1.1 vs. HTTP/2 이전 포스팅에 HTTP에 관한 전반적인 개요를 공부하고 정리하였으나, HTTP의 발전 중 큰 변화가 있었던 HTTP/2가 이전 버전과 어떻게 다른지에 대하여선 공부하지 않았었다. 그래서 이번 포스팅엔 HTTP/2가 HTTP/1.1과 비교해서 어떤 점들이 다른지 돌아보고 정리한 내용을 담으려고 한다. 이전글: 2021.10.01 - [Learn to Code] - HTTP란? HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생 seo-tory.tistory.com 개요 HTTP/1.1은 90년대에 나온 버전으로, 20년도 더 된 아주 .. 2021. 10. 24. [JS] apply, call, bind apply(), call(), 그리고 bind()는 모두 함수의 프로토타입 메소드이다. apply, call, 그리고 bind... 함수 프로토타입 메소드로 존재한다는 것은 알고 있었지만 실상 많이 써보지 못해서 사용법을 숙지하지 못하고 있던 함수들이었다. 그나마 bind 같은 경우엔 리액트의 class component에서 필수로 사용해줘야 하는 메소드라서 몇 번 사용해봤지만, 그 리액트에서 마저도 class component가 아닌 function component만 계속 사용해왔기에 사용법을 잊고 있었다. 🥲 그렇게 어느덧 이 셋은 나의 기억 속에서 잊혀진 메소드들이 되어버렸다... 하지만 최근 이 셋을 다시 돌아봐야겠다는 굳은 결심(!!!)이 들었고, 다시 한번 이들을 활용할 수 있는 능력을 각성.. 2021. 10. 21. [JS] 클래스(class): 정적 메소드(static method)와 프로토타입 메소드(prototype method)의 차이 클래스(Class)는 ES6에서 도입된 기능이다. class 키워드를 사용하여 정의하며, 내부 몸체에 3가지 종류의 메소드를 사용할 수 있다. 이 세가지 종류가 바로 생성자, 프로토타입 메소드, 그리고 정적 메소드이다. class Character { // 1. 생성자 constructor(name) { this.name = name this.level = 1 this.job = "adventurer" } // 2. 프로토타입 메소드 introduce() { return `Hello, I'm ${this.name} and my level is ${this.level}.` } // 3. 정적 메소드 static complain() { return `Oh man! What is that smell?` } }.. 2021. 10. 4. [TIL] 갑자기 달력이 만들고 싶어졌다 (바닐라JS) 오늘도 Pinterest에서 예쁜 UI가 없나 찾아보다가 캘린더를 봤다. 그리고 갑자기 달력이 만들고 싶어졌다! 그래서 바닐라 자바스크립트로 달력을 만들었다. 🌱 Github Vanilla Javascript Calendar 위 핀터레스트 이미지와 비슷하게 아래와 같이 만들었다: 회색과 핑크의 조합은 진리이기 때문에 오늘의 날짜는 핑크색으로 표시되도록 했다. 날짜 위에 마우스를 올리면 핑크색으로 표시가 된다. prev와 next를 클릭하면 이전 달 또는 다음 달의 캘린더를 볼 수 있다. 추가하고 싶은 사항들 - 달별 컬러 적용 - 투두리스트와 합치기 2021. 10. 3. 이전 1 2 3 4 5 다음 728x90 반응형
