개발일지

시간 복잡도와 공간 복잡도복잡도란?알고리즘의 성능과 효율성을 나타내는 척도로 시간 복잡도와 공간 복잡도로 나뉜다알고리즘이 주어진 크기의 입력을 기준으로 수행시간과 사용공간이 얼마나 되는지 객관적으로 비교할 수 있는 기준을 제시한다복잡도를 나타내는 방법은 점근 표기법으로 O(빅오), Ω(오메가), Θ(세타) 등이 있고, 주로 빅오와 세타 표기법이 많이 사용된다.정리하면 복잡도란 알고리즘의 효율성을 판단하는 척도이다 시간 복잡도연산에 걸리는 시간이 아닌 연산의 횟수를 나타낸다왜 시간이 아닌 횟수를 측정하는가? 환경에 따라 결과가 다르게 나오기 때문단순히 특정 입력에 대해 실행되는 연산의 횟수만 보는 게 아닌, 입력의 크기가 증가함에 따라 실행되는 연산의 횟수가 얼마나 증가하는지를 나타낸 것.시간복잡도를 표기..

var , let , const this 클로저 Rest API Rest Ful API Axios, Fetch, Promise, TanStack Query(React Query) Axios, React Query 차이 브라우저 렌더링 과정 주소창에 naver.com입력 시 어떤 일이 일어나는가 쿠키랑 세션 차이 토큰이란 쓰로틀링 디바운싱 var , let , constvarvar는 es6 이전 버전에서 변수 선언 시 사용되었다전역 또는 함수 스코프를 가지며 TDZ(Temporal Dead Zone)의 영향을 받지 않는다함수 내부에 선언된 var는 함수 스코프(지역변수)를 가지기 때문에 함수 내부에서만 사용 가능하지만 if, for 내부에 선언된 변수는 블록을 무시하고 함수 또는 전역 스코프를 가지게 된다..

ECMAScript ES6와 이전 버전과의 가장 가장 큰 차이에 대해 세 가지 정도 이야기해 주세요.기존 var => let과 const 생김.화살표함수의 등장으로 간결한 함수작성 가능. 자동으로 선언시점의 상위 스코프가 this로 바인딩 됨. 화살표함수에는 this라는 변수 자체가 없기 때문에 상위환경 this를 참조.비동기를 처리하는 Promise의 등장으로 then과 catch 메서드를 통해 콜백지옥을 해결.JS와 TS의 차이점에 대해 설명해 주세요.JavaScript동적언어데이터타입이 런타임때 결정 TypeScript정적언어컴파일단계에서 타입검사 후 JS로 변환하여 실행실행 이전단계에서 타입 검사를 하기 때문에 다른 타입이 할당되는 실수를 캐치할 수 있고 때문에 코드 안정성이 높아짐.Semanti..

React란SPA , MPA 차이Next.js란RESTful API 란HTTP메서드 종류 React란SPA웹 애플리케이션을 개발하기 위한 라이브러리UI를 여러 독립적인 컴포넌트 구조로 나누어 개발하기 때문에 재사용성에 용이하다메모리에 저장된 가상 DOM을 이용해 배치 업데이트로 여러 변경사항을 하나로 묶어 실제 DOM에 반영하여 효율적인 업데이트가 가능하다 SPA , MPA 차이SPA (Single Page Application)하나의 HTML 페이지 기반으로 동적으로 콘텐츠를 변경하며 사용자와 상호작용하는 웹 애플리케이션특징초기에 필요한 모든 자원(HTML, CSS, JavaScript)을 로드한 후, 페이지 전환 또는 수정 시 필요한 데이터만 동적으로 로드하여 콘텐츠를 업데이트한다.페이지 새로고침 없..

프로젝트 성능 최적화 방법CI / CD클라우드 서비스자바스크립트 특징타입스크립트 특징프로젝트 성능 최적화 방법next.js의 렌더링 방식을 활용하여 초기 로딩 속도 개선next.js Image 컴포넌트를 사용해 이미지 크기를 최적화하고, 필요한 크기의 이미지를 동적으로 로드레이지 로딩을 사용해 용량이 큰 데이터의 로딩 속도 개선 리액트 쿼리를 이용해 데이터를 캐싱하여 로딩 속도 개선공통으로 사용되는 코드나 기능을 별도의 모듈로 분리하여 중복을 줄임버셀( Vercel )정적 웹사이트 호스팅 및 서버리스 함수 호스팅을 주로 지원하는 플랫폼React, Vue, Angular 등의 프론트엔드 프레임워크 및 정적 사이트를 배포하고 호스팅 하는 데에 사용된다서버리스 함수를 통해 백엔드 기능을 구현할 수 있다.(로그..

바벨원시 타입바벨 (Babel)자바스크립트 코드를 여러 환경에서 동작할 수 있도록 변환해 주는 도구자바스크립트 레거시 코드를 최신 JavaScript 문법으로 변환하여 최신 문법을 사용하면서 구형 브라우저 호환성을 유지하기 위해 사용된다원시 타입 (Primitive Types)자바스크립트에서 기본적으로 제공하는 데이터 타입.불변성을 유지하며, 객체와 다르게 참조가 아닌 값을 직접 저장한다.string : 문자열number : 숫자boolean : 논리형 (참, 거짓)null : 존재하지 않는 값undefined : 값이 할당되지 않음symbol : 유일하고, 변경 불가능한 데이터(ID)bigint : 엄청 큰 정수

메모이제이션레이지로딩모듈 번들러*모듈번들러는 실제로 사용해 보고 다시 정리할 것(아직 이해 못함*)메모이제이션(리액트) 데이터 캐싱을 통한 성능 최적화 기법  React.memo컴포넌트를 캐싱해 불필요한 리렌더링을 방지한다부모컴포넌트가 리렌더링 될 경우, 자식 컴포넌트의 props가 변경되지 않으면 리렌더링을 방지한다 useCallback함수를 캐싱해 의존성 배열이 변경되지 않으면 동일한 함수를 반환한다리액트 메모로 리렌더링을 방지할 자식 컴포넌트를 캐싱해도 부모 컴포넌트가 리렌더링 될 경우 자식 컴포넌트로 전달되는 함수도 재생성되므로 자식 컴포넌트의 리렌더링 방지를 위해 사용된다  useMemo값의 계산을 메모이제이션해 의존성 배열이 변경되지 않는 한 동일한 값을 반환한다큰 계산식 등의 함수를 리렌더링..

프레임워크와 라이브러리의 차이점CSS, SASS,SCSS이벤트 버블링, 캡쳐링, 위임CORS프레임워크와 라이브러리의 차이점프레임워크애플리케이션의 특정 영역이나 전체 구조를 제공하는 틀개발자는 프레임워크가 제공하는 규칙과 구조에 따라 코드를 작성해야 한다제어의 역전을 제공하며, 프레임워크가 실행 흐름을 제어하고 필요한 기능을 호출한다라이브러리개발자가 필요한 기능을 사용할 수 있는 도구 모음라이브러리 함수 또는 클래스를 호출해 사용할 수 있다개발자가 직접 코드 흐름을 제어할 수 있다 정리 프레임워크는 애플리케이션의 구조와 흐름을 제어하여 특정 기능을 제공한다예를 들어 next.js같이 앱 라우터를 사용함으로 app폴더 내부 page에 자동 라우팅을 사용할 수 있게 하는 것이 구조와 흐름을 제어해 주는 것라이..

실제돔과 가상돔의 차이자바스크립트 호이스팅변수의 호이스팅이벤트 루프동기와 비동기의 차이, 비동기프로그래밍의 필요성실제돔과 가상 돔의 차이 실제돔(Real DOM)HTML 문서 구조를 표현하는 객체 모델브라우저 웹 페이지의 실제 요소들을 나타낸다.특징즉각적인 렌더링 : 개발자 도구 사용으로 직접 변경 가능하며, 즉각 반영된다.비효율성 : 한 번에 많은 변경이 발생하거나 복잡한 구조의 DOM을 자주 업데이트할 경우, 성능이 저하될 수 있다(느린 로딩, 브라우저 과부하 등) 모든 변경마다 브라우저가 레이아웃과 페인팅 과정을 반복해야 하기 때문API: document.getElementById, document.createElement와 같은 브라우저 API를 통해 직접 조작할 수 있다.동작 예시DOM 요소를 ..

프론트엔드 개발자가 되려는 이유웹, 앱 서비스의 핵심인 정보 전달을 렌더링 속도 최적화 등을 고려하여 사용자가 보다 더 빠르게 접할 수 있도록 사용자 측면의 서비스를 만들고 싶기 때문입니다저는 반려인으로 로열캐닌이라는 사료 회사의 사이트를 접한 적이 있습니다견종과 몸무게에 맞춰 적합한 사료를 추천하고 있었지만, 렌더속도가 많이 늦다 보니 사용에 불편함을 느끼게 되었습니다이것을 계기로 좋은 서비스란 제공되는 정보의 품질뿐 아니라 사용자와의 상호작용 속도에 중요성을 알게 되었습니다. 이러한 경험을 토대로 사용자 친화적인 서비스를 제공하고자 프론트엔드 개발자를 꿈꾸게 되었습니다  부트캠프에서 공부하며 매일 무엇을 배웠는지 기록하는 습관이 생겼습니다. 프로젝트마다 무엇을 배웠고, 어떤 시행착오를 겪었는지 기록한..