- 전체보기(151)
- TIL(41)
- 백준(40)
- 알고리즘(35)
- 자바스크립트(34)
- 데브코스(32)
- 프로그래머스(31)
- 그래프(30)
- 프론트엔드(25)
- 웹(16)
- React(14)
- 코딩테스트(8)
- 회고(7)
- 클로저(6)
- 자료구조(5)
- 스코프(5)
- KDT(5)
- 비드마켓(4)
- nextjs(4)
- 프로토타입(4)
- 호이스팅(3)
- 객체(3)
- vue.js(3)
- 공식문서(3)
- this(3)
- 그리디(3)
- 스택(3)
- typescript(2)
- 실행 컨텍스트(2)
- 실행컨텍스트(2)
- spa(2)
- Context API(2)
- CSR(2)
- SSR(2)
- 모듈(2)
- async(2)
- MPA(2)
- ref(2)
- 함수형 프로그래밍(2)
- JSX(2)
- 구현(2)
- vanillajs(2)
- 정렬(2)
- REST API(2)
- 이벤트 버블링(2)
- webpack(2)
- 이벤트 위임(2)
- 프로퍼티(2)
- ajax(2)
- babel(1)
- 내일배움카드(1)
- 빌트인 객체(1)
- 해시 테이블(1)
- emotion(1)
- router(1)
- profiler(1)
- 자바스트립트(1)
- 트리(1)
- 디바운스(1)
- render props(1)
- await(1)
- sessionStorage(1)
- storybook(1)
- useEffect(1)
- 덱(1)
- 개인 프로젝트(1)
- reflow(1)
- 비동기(1)
- 성능 최적화(1)
- 스터디(1)
- 이터러블(1)
- 이터레이터(1)
- next/image(1)
- 팀 프로젝트(1)
- call qpply bind(1)
- CI/CD(1)
- 자바스크리브(1)
- next/link(1)
- 명령형 프로그래밍(1)
- redux-toolkit(1)
- const(1)
- let(1)
- var(1)
- ES6(1)
- fragment(1)
- 드래그 앤 드롭(1)
- bundle analyzer(1)
- 에러 경계(1)
- 프로그래밍(1)
- 일급 객체(1)
- 웹 페이지가 보여지기까지 과벙(1)
- context(1)
- BFS(1)
- new(1)
- useMemo(1)
- useRef(1)
- 함수(1)
- go(1)
- 타이머(1)
- DOM(1)
- history(1)
- axios(1)
- pipe(1)
- curry(1)
- 내부 슬록(1)
- 무한 스크롤(1)
- useCallback(1)
- DFS(1)
- repaint()(1)
- 생성자 함수(1)
- 내부 메서드(1)
- localstorage(1)
- 에러(1)
- 화살표 함수(1)
- 클래스(1)
- strict mode(1)
- 접근성(1)
- ㅂ(1)
- 프로젝트(1)
- Fetch(1)
- IIFE(1)
- 재조정(1)
- 이진 탐색(1)
- Defer(1)
- HoC(1)
- code splitting(1)
- IntersectionObserver(1)
- seo(1)
- 큐(1)
- 변수(1)
- 코드분할(1)
- React.memo(1)
- 정규표현식(1)
- next/dynamic(1)
- 고차 컴포넌트(1)
- promise(1)
- HTTP 완벽 가이드(1)
- 동기(1)
- API(1)
- 바닐라js(1)
- Web vitals(1)
- 맵(1)
- 주소에 url을 입력했을 때 과정(1)
- react router(1)
- 브라우저 렌더링(1)
- 자바스크리립트(1)
- 선언형 프로그래밍(1)
- 쿠키(1)
- 프로미스(1)
- 이벤트 캡쳐(1)
- 낙관적 업데이트(1)
- lifecycle(1)
- 이벤트(1)
- BOM(1)
- memoization(1)
- 제너레이터(1)
- 노션 클로닝(1)
💻 Ref, Render Props(feat. 리액트 공식문서)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리애니메이션을 직접적으로 실행할 때서드 파티 DOM 라이브러리를 React와 같이 사용할 때선언적으로 해결될 수 있는 문제에
💻 재조정(feat. 리액트 공식문서)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 동기 React에서 state나 props가 갱신되면 render() 함수는 새로운 React 엘리먼트 트리를 반환한다. 이 때 React는 두 가지 가정을 기반하여 O(n
💻 Profiler API(feat. 리액트 공식문서)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. Profiler는 React 애플리
💻 성능 최적화(feat. 리액트 공식문서)
> ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. ## 프로덕션 빌드를 활용하세요 기본적으로 React에는 유용한 경고가 많이 포함되어 있다. 경고는 React를 더 크고 느리게 만들기 때문에 앱을
💻 JSX 이해하기(feat. 리액트 공식문서)
> ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 근본적으로 JSX는 `React.createElement(component, props, ...children)` 함수에 대한 문법적 설탕을 제공할 뿐
💻 고차 컴포넌트(HOC)(feat. 리액트 공식문서)
> ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 고차 컴포넌트는 React API의 일부가 아니며, React의 구성적 특
💻 Fragments(feat. 리액트 공식문서)
> ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. Fragment Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.
💻 Ref 전달하기(feat. 리액트 공식문서)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. ref 전달은 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법이다. 일반적으로 애플리케이션 대부분의 컴포넌트에 필요하지는 않다. 그렇지만, 재사용 가능한 컴포
💻 @next/bundle-analyzer 적용으로 번들 사이즈 최적화 (feat. next/dynamic)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 먼저 비드마켓 프로젝트를 진행하면서 우리 프로젝트를 빌드했을 때 파일들의 용량이 매우 큰 것을확인할 수 있었다.
💻 Web Vitals(feat. next/Image 적용 경험)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. Web Vitals Web Vitals는 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 Google
💻 Error Boundaries(feat. 리액트 공식문서)
> ⚠️ 정리한 내용은 **오타**나 **잘못된 정보**가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 에러 경계의 소개 UI 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안된다. React16에서 에러 경계라는 새로운 개념
💻 LifeCycle(feat. 리액트 공식문서)
⚠️ 정리한 내용은 **오타**나 **잘못된 정보**가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. ## 📃 LifeCycle 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출하는 메서드이다. 추가적으로 컴포넌트
💻 Context(feat. 리액트 공식문서)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다.아래 코드는 버튼 컴포넌트를 꾸미기 위해 theme pro
💻 코드 분할(feat. 리액트 공식문서)
대부분 앱들은 Webpack, Rollup, Browserify같은 툴을 사용하여 여러 파일을 하나로 병합한 번들된 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다.번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 나누는 것이다.코드 분할은
💻 접근성(feat. 리액트 공식문서)
웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것을 의미한다. React는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있으며, 대부분은 표준 HTML 기술이 사용된다.접근성을 준수하면 보조기기 사용자의 접근성을 향상시킬 수 있으며,
📋 모던 자바스크립트 Deep Dive | 4장 변수 ~ 5장 표현식과 문
모던 자바스크립트 Deep Dive 도서의 4장 변수와 5장 표현식과 문을 정리하였습니다.메모리는 데이터를 저장할 수 있는 메모리 셀의 집합이다. 메모리 셀 하나의 크기는 1바이트이며 컴퓨터는 메모리 셀의 크기, 즉 1바이트 다위로 데이터를 저장하거나 읽어들인다.메모리
💻 주소에 url을 입력했을 때의 과정
이 텍스트가 검색어인지 URL인지 우선적으로 확인한다.검색어 ⇒ 브라우저는 검색 엔진의 URL에 검색어를 포함한 주소로 페이지를 이동시킨다.URL ⇒ 브라우저 엔진에서 네트워크 호출을 수행한다.네이버 서버의 주소를 알기 위해 네임 서버(Name Server)와 통신하기
💻 this(JavaScript)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 📃 오늘 공부한 것 함수 실행에서의 this > 함수 실행에서의 this는 전역 객체다 전역 객체는 실행하는 환경마다 다릅니다. 웹 브라우저에서는 window 객체가
💻 실행컨텍스트(JavaScript)
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.실행 컨텍스트는 자바스크립트 코드를 실행할 때 필요한 정보들을 저장하고 제공하는 환경이다. 즉, 스코프의 정보를 담은 환경을 의미한다.현재 실행되고 있는 컨텍스트에서 이 컨텍스
💻 비드마켓 리팩토링 next/Image 적용기
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 들어가기 전에 next/image 적용하기 전의 코드를 살펴보도록 하자.메인 페이지의 상품 사진들에 적용된 코드이다. 아래와 같이 chakra-ui 를 사용하면서 Image