개발 여행

렌더링 시점의 비교 SPA와 SSR, SSG, ISR 간의 렌더링 시점에 어떤 일이 벌어지는지 작성합니다. SPA(Single Page Application) 초기 요청에서는 빈 HTML을 불러온 뒤, JavaScript를 통해 동적으로 렌더링합니다. 즉, 사용자의 인터렉션에 의해 화면이 동적으로 변화합니다. 렌더링 시점 클라이언트 장점 빠른 페이지 간 전환 필요한 부분만 동적으로 변화 훌륭한 UX 단점 상대적으로 느린 초기 로딩 어려운 SEO 클라이언트 성능 고려 필요 SSR(Server Side Rendering) 서버에서 페이지를 렌더링한 결과를 클라이언트로 전송합니다. 이후 동적인 부분은 클라이언트에서 처리됩니다. SEO나 초기 로딩 속도 개선에 유리합니다. 렌더링 시점 서버 장점 빠른 초기 로딩..

동글이란? 블로그 글 관리의 새로운 해결책 노션 같은 텍스트 에디터 에서 작성한 글을 블로그에 올린 적이 있으신가요? 직접 글을 블로그로 올리다보면 그 과정이 귀찮아지고 어떤 글을 옮겼는지 헷갈릴 때가 많습니다. 이 문제를 해결하기 위해 우리는 동글 서비스를 만들었습니다. 주요 기능 노션 글 업로드: 노션에 작성한 글을 간편하게 동글에 업로드할 수 있습니다. (마크다운 파일 업로드도 지원) 카테고리 분류: 동글은 업로드한 글을 카테고리로 분류하여 모아볼 수 있는 기능을 제공합니다. 다양한 블로그 플랫폼 지원: 작성한 글을 Tistory나 Medium와 같은 블로그 플랫폼에 발행할 수 있습니다. 발행 정보 투명화: 글의 작성 일자와 발행된 블로그 정보를 통해 글을 효율적으로 관리할 수 있습니다. 다양한 곳..

많은 인터렉션이 일어나는 웹 환경에서 필수적인 비동기에 대한 학습 비동기란? 비동기는 동기의 반대 개념으로, 순차적으로 진행되는 것이 아닌 동시다발적으로 진행되는 것을 말한다. 동기적 일처리 방식 순차적으로 일이 처리되는 방식 비동기적 일처리 방식 동시다발적으로 일이 처리되는 방식 자바스크립트의 비동기 동작을 이해하기 위해 다음의 예시를 작성해봤다. console.log('1'); setTimeout(() => console.log('2'), 5000); // 1000은 ms 단위, 즉 1초를 뜻한다. console.log('3'); MDN에서는 setTimeout 을 다음과 같이 설명한다. 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. 위의 코..

버블링이란? 이벤트가 제일 깊은 곳에 있는 요소부터 시작해, 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품과 닮았다고 붙여진 이름이다. 한 요소에 이벤트가 발생하면, 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복된다. 즉 각각의 요소에 할당된 모든 핸들러들이 동작한다. 아래 코드는 FORM > DIV > P 형태로 중첩된 구조다. 각각의 요소에 핸들러가 할당되어 있다. FORM DIV P 아래는 위의 코드에서 동작 과정이다. 클릭 → onclick 동작 → onclick 동작 → onclick 동작 → document 객체 만나고 종료(몇몇 이벤트는 window 객체를 만나기도 함) 💡 **대부분의 이벤..

우테코 Lotto 미션을 진행하면서 named export와 default export에 대한 의문이 생겼습니다. 어떤 기준으로 때에 맞게 named/default export를 써야하는지 궁금해, 리뷰어에게 이것에 대해 학습할 수 있는 키워드를 요청했습니다. 리뷰어가 제시한 키워드는 ‘tree shaking’, ‘webpack 번들’ ‘번들 사이즈가 커졌을 때 성능에 끼치는 영향’ 이었습니다. 우선 tree shaking을 알아보기 전에 webpack 번들과 번들 사이즈가 커졌을 때 성능에 끼치는 영향에 대해 알아보는게 좋다고 하여 두 개를 먼저 알아보겠습니다. webpack 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러 webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에..