클로저 클로저란 함수가 선언될 때의 환경을 기억하여 접근할 수 있게 하는 기능자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프를 따른다는 특성에 의한 개념일급객체이기 위한 조건1. 파라미터로 전달 가능2. 리턴 값으로 사용 가능3. 변수나 데이터에 담을 수 있어야 함 자바스크립트 예시function outerFunc (value) { function innerFunc () { console.log(value); } return innerFunc; } const func = outerFunc(2); func(); // 2 outerFunc가 innerFunc를 return하고 종료 되었음에도 innerFunc에서는 value에 접근할 수 있다.func()를 호출할 때 inne..

들어가기 전 `vite-bundle-analyzer`로 시각화한 현재 번들 사이즈다.현재 페이지 별로 필요한 부분들을 코드 스플리팅해 지연 로딩 해놓은 상태다. (Dynamic Import)(페이지/컴포넌트 별로 지연로딩한 포스팅 참고 ➡️ https://hyemmimi.tistory.com/28 ) 초기 로딩 속도 (네트워크 Slow 4G 기준) 초기 로딩 시 하나로 뭉쳐진 청크를 다운로드하며, Finish 시간은 10.88초이다. 이제 이 하나로 뭉쳐진 무거운 번들을 분리해보고자 한다.분리하고자 하는 이유를 아래와 같이 정리해보았다. 라이브러리를 청크로 분리하고자 하는 이유1. 초기 로딩 속도 개선브라우저는 필요한 앱 코드만 먼저 로딩하고, 무거운 라이브러리는 캐시된 청크에서 비동기 로딩할..

Lazy loading이란?필요한 시점에만 리소스를 로딩하는 기법이다.특히나 React를 사용해 클라이언트 사이드 렌더링을 하는 어플리케이션의 경우, 초기 접근 시 모든 리소스(js, css, html, 이미지 등)를 한 번에 다운로드 하는데, 네트워크 환경이 좋지 않을 경우 사용자는 빈 페이지를 오래 보게 된다.그렇기 때문에 lazy loading으로 초기에 다운 받는 리소스의 양을 줄이는 것이 목적이다.초기에 번들에서 제외 시켰다가 정말 필요할 때 (페이지 이동으로 접근할 때 등) 해당 리소스를 다운 받는 것이다. Code Splitting과의 관계code splitting은 전체 JS 코드를 여러 개의 작은 chunk로 나누는 작업이다.이렇게 나뉘어진 chunk 단위로 필요한 시점에만 불러오는 la..

열심히 기술 블로그를 작성하고 있었는데 (게시글도 25개)내 게시글이 구글에 검색하니 절대 나오지 않는거다 ..    통계를 보니 아예 검색이 안되는 것 같아서 알아본 결과 “Google Search Console”에 URL을 등록하고, 사이트 인증을 한 다음에 Sitemap과 Rss 파일을 제출해야 크롤링 봇이 크롤링할 확률이 높아진다고 한다.프론트엔드 개발하면서 전혀 몰랐던 사실이었다.. https://doona-diary.tistory.com/7 티스토리 수익형 블로그 필수 세팅 - 구글 검색 설정안녕하세요! 일상과 일을 스스로 정의하고 실행하는 삶을 위해 노력하는 행복그림 기획자 로나입니다 :) 티스토리 블로그 개설을 완료하셨다면, 내 블로그와 블로그 글들이 다른 검색엔즌인 구doona-diary..

벌써 카카오테크 부트캠프를 시작한지도 반절이 지나갔다.🥲🥲온라인 과정이 끝나고 오프라인 과정 동안 꽤나 즐거웠는데 그때 찍었던 사진들을 정리하고 회고할겸 포스팅을 써본다! 📖 지원 서적 도착 드디어! 기다리고 기다리던 도서가 배송됐다.나는 풀스택 과정이기 때문에 클린코드, 리팩토링, SQL, 자바, 애자일 개발론, 클라우드, 피그마, 타입스크립트 등등의 책들을 받았다.이번주부터 이제 나도 주말에 프리하기 때문에!! 개인 공부 열심히 해봐야지 ^_^ 🌙 해커톤 아직도 기억난다. 해커톤 팀 구성은 운영진에서 짜주는 게 아니라 개인 PR을 통해 따로 조장들에 연락을 해서 짜는 것이었는데이때 당시 풀스택 같은 조 분들이랑 '우리 아직 배운 게 많이 없는데 해커톤 어떡해~~!' 하며 걱정했었던 기억 ..

라이브러리와 프레임워크의 차이“Next.js는 React 라이브러리를 기반으로 하는 프레임워크” 라이브러리: 주도권이 개발자에게 있다React자유도가 높다기본 기능 외 제공 X → 직접 다 만들어서 써야 함프레임워크: 주도권이 개발자에게 없다Next.js자유도가 낮다. 프레임워크가 정해 놓은 범위 내에서 코드 작성거의 모든 기능을 제공함. page routing, optimizations, server pre rendering React 렌더링 방식“Client Side Rendering ”React는 클라이언트에서 렌더링하는 방식이다. Next.js는 React의 렌더링 방식의 장점을 채택하고 단점을 보완하는 프레임워크다.React의 확장판!React와 Next의 렌더링 방식을 초기 로딩과 후속 로딩으..

1. 이벤트 리스너 등록 (위임) React는 이벤트를 다루기 위해 이벤트 리스너를 React 루트 요소에 붙이고 있다. (17부터 root, 16까지는 Document)이벤트를 "위임"했다고 할 수 있다.이벤트가 발생하면 이벤트가 버블링(하위 요소에서 상위 요소로 전달)되어 루트 요소까지 올라가고, 루트 요소에 등록된 이벤트 리스너가 이를 가로챈다. React 16 → 17 변경사항 및 변경 이유 (이벤트 위임 주체 변경)이전에는 React가 이벤트를 document에 등록했기 때문에, React 앱 바깥의 다른 JS코드가 등록한 이벤트와 충돌이 발생할 수 있었다.그렇기 때문에 17버전부터 이벤트 리스너를 Root element에 등록해, React 앱 외부와 내부의 이벤트 시스템을 분리했다. 2. R..

3월까지 수업과 개인 프로젝트에 집중하며, 이후 팀 프로젝트에 활용하기 위한 지식을 열심히 쌓는 중이다.프론트엔드 파트에서는 수월하게 마무리를 했지만, 백엔드 파트에서는 더 많은 시간 투자가 필요했다. 그중에서도 ERD는 백엔드 개발을 시작하기 전 청사진 같은 느낌이라, 확실히 해두어야할 것 같았다.하지만 나는 변수명과 데이터 타입 등에서도 아는 바가 거의 없어 막막했다. 그렇게 스스로의 힘으로 ERD를 완성했고 피드백을 받았다. ERD는 생각해야할 것들이 정말 많았고, 수동으로 모든 사항들을 체크하고 작성하기 때문에 다른 개발자의 검수가 꼭 필요한 과정이라고 생각되었다.툴은 ERD CLOUD를 사용했다.  1. 과제 진행 (피드백 전)📌 TEXT? VARCHAR?이미지 url의 도메인을 결정할 때 V..

최근 코딩테스트의 중요성을 깨닫고 백준/프로그래머스 문제를 푸는데, 아무래도 혼자 하면 조금 해이해지는 것이었다. 동기 부여가 필요했다. (사실 나를 위한 스터디였다..ㅎ)그렇게 다른 사람들과 함께하는 “알고리즘 스터디”를 열기로 결심했고, 내가 속해 있는 GDSC 경희대학교 프론트엔드 과정 내에서 열고자 했다.그러다 어떻게 “누군가가 알고리즘 스터디를 연대!” 라는 소문이 나서 경희대학교 내 다른 IT동아리와 연합 스터디를 진행하게 되었다. 8명이서 진행할 스터디가 조금씩 커져서 18명이 되었다. (어라라..) 🤔 스터디 방식에 대한 고민나는 많은 교내 스터디에 참여해왔다. 이러한 경험들을 바탕으로 어떤 방식이 좋을지 고민했다.1) 온라인 발표식 스터디저학년일때는 선배들이 진행했던 온라인 발표 스터디..

오늘은 카테부의 1차 “네트워킹데이” 였다.오전에는 코딩테스트/ 오후에는 강사들의 세션 + 사원증 프로필 사진 촬영 /그리고 저녁에는 과정별 회식이었다.그 중 코딩테스트가 생각보다 유익하고 문제와 풀이에 대해 기록해두면 좋을 것 같아, 회고해보려고 한다.😶‍🌫️ 플랫폼은 구름!역시 플랫폼은 구름이었다. 근데 생각보다 프로그래머스와 똑같아서 놀랐다.대신 다른 점은 UI가 조금.. 아쉬웠다.의도한 건지 모르겠지만 종료 버튼이 없어서 제출 시간이 끝날 때까지 나갈 수 없고, (사실 나갈 수 있지만 공식적으로 끝내는 버튼이 없다.) 나중에 보니 시간이 흘러갈 때까지 시험은 진행중인 시스템인 것 같은데 시험볼 때 당시 그런 안내가 없어서.. 몰랐다.기다리다 새로고침해서 나왔다. 내 구름 edu 페이지로 가보니..