- 전체보기(118)
- 개발자로 살아남기(1)
- details open(1)
- 아이폰12 클론(1)
- 정규표현식(1)
- react testing(1)
- unit test(1)
- promise(1)
- vercel proxy(1)
- webpack 설정하는법(1)
- 애니메이션(1)
- ESlint Prettier husky lint-staged(1)
- setTimeout setInterval(1)
- wepback 폴더채 번들링(1)
- async await(1)
- 코드 컨벤션(1)
- context menu(1)
- createDocumentFragment()(1)
- webpack(1)
- CreatePortal, forwardRef(1)
- css 자기진단 체크리스트(1)
- BFS(1)
- socket.io(1)
- Testing-library/react(1)
- zoom clone(1)
- 박종천(1)
- 개발자 조언(1)
- jest(1)
- youtubeapi webpack(1)
- scroll spy(1)
- DFS(1)
커밋, 코딩 컨벤션
\[type] : commit의 타입\[subject] : commit의 제목\`\[Issue \[body] : commit의 내용제목과 본문은 한 줄을 띄워 분리합니다제목은 간략하게 간추립니다 (기왕이면 50자이내)제목 첫 글자는 대문자제목 끝에 .금지|type| 종
Vercel에서 proxy 설정하기
문제상황 로컬 환경에서 공공 api에서 발생시키는 CORS 에러를 핸들링 하고 난뒤... 완성된 프로젝트를 vercel에서 배포하는데 다음과 같은 에러가 발생 하였습니다. 에러 메시지에 따르면, vite.config.ts 파일에서 path라는 모듈을 타입스크립트가 해석, 인지하지 못하였다는 것입니다. 👉 vite.config.ts 파일에서 path...
쿠키와 세션
HTTP의 특징은 다음과 같다.connectionless : 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어버린다.HTTP1.1에서는 keep-alive옵션등이 있다.stateless : 통신이 끝나면 상태를 유지하지 않는다.HTTP의 위와 같은 특성을 보완하
TIL 8/8
클린코드 자바스크립트 section 5 수강 및 정리안전해 프로젝트 쭈욱 잠깐 놓아던 트위터 클론코딩 댓글 캐싱처리 및 프로필 내댓글 보기 기능구현FEED
TIL 8/5
날씨 api 데이터 파싱클린코드 자바스크립트 섹션 4 수강 및 노션 정리노션에 next.js proxy 설정 및 공공 api 데이터 불러오면서 겪었던 에러와 해결과정 정리
TIL 8/3
클린코드 자바스크립트 노션 정리 트위터 댓글 및 마이페이지 내 댓글 보기 구현 짭팡 랜딩페이지 클론 공공 api 받아오고 에러 핸들링 까지 FEED
TIL 8/2
트위터 프로필 페이지 기능구현 최대로시원해 프로젝트 스택 최종 결정 및 세팅 Push시원해 프로젝트에 쓰일 카카오맵 api 기능, 리액트 + 타스에 적용해보기짭팡 프로젝트 레이아웃 페이지, 2페이지 클로닝
TIL 8/1
트위터 기능구현 깃허브 알고리즘 2문제 제출시원해 프로젝트 피그마 작성짭팡 프로젝트 프론트 역할 분배 및 레이아웃 페이지 1개 클론
7월 4주차 TIL
스터디리액트 스터디 : 진행중 개인 블로그 만들기 스터디: 이번주 종료제로베이스 js인강 스터디: 이번주 종료개인공부리덕스 툴킷 및 청크 공부중30개 프로젝트로 배우는 프론트엔드 with React 수강중노마드코더 캐럿마켓 챌린지 완료
해시 함수
해당원소의 해시값을 해시함수를 이용하여 계산해시값을 주소로 하는 위치에 원소를 저장저장후에 검색을 할때도 원소의 해시값을 계산해 바로 해당 위치로 이동해시 테이블은 원소를 저장할 위치를 상수시간에 계산할 수 있다.해시 과정이 복잡해서는 안된다해시값이 골고루 저장되어야
Virtual Dom
DOM 트리 생성 : 렌더엔진이 html을 파싱하여 dom 노드로 이루어진 트리 생성RENDER 트리 생성 : css파일과 inline 스타일을 파싱DOM + CSSOM = 렌더트리를 생성Layout (reflow) : 각 노드들의 스크린에서의 좌표에 따라 위치 결정P
7월 2주차 TIL
스터디 자바스크립트 알고리즘 스터디: 이번주 종료 리액트 공식 문서 정리 스터디: 이번주 종료 개인 블로그 만들기 스터디: 진행중 제로베이스 js인강 스터디: 진행중 개인공부 박영웅 강사님 강의 복습 리덕스 툴킷 및 청크 공부중 30개 프로젝트로 배우는 프론트엔드 with React 수강중 노마드코더 타입스크립트 챌린지 이번주 종료 노...
재조정(Reconciliation)
O(n) 복잡도의 휴리스틱 알고리즘를 사용.두개의 트리를 비교할 때, 두개의 루트 엘리먼트부터 비교.완전히 새로운 트리를 구축ex) a => img, Button => div생애주기componentWillUnmount() 실행UNSAFE_componentWillMoun
성능 최적화
리액트로 성능문제를 겪고 있고, 리액트의 경고 메시지들이 본인의 앱을 느리게 만들고 있다면 Brunch, Browserify, Rollup등과 같은 production build 라이브러리를 사용해야 합니다. 하지만, 대부분이 webpack 개발환경 아래에 놓여있기 때문에 Webpack v4이상에서 아래와 같이 terser plugin을 사용하는게 좋습니...
JSX 이해하기
컴파일 후jsx는 React.createElement를 호출하는 컴파일 되어서 import React from 'react';를 작성해야 합니다.import React from 'react';import CustomButton from './CustomButton';f
다른 라이브러리와 통합하기
DOM 조작 플러그인과 통합하기 리액트는 DOM에서 일어나는 변화를 인식하지 못하므로, 리액트 컴포넌트가 업데이트 되지 않게 막아야 한다. 업데이트할 필요가 없는 `` 같은 요소를 렌더링 하자. jquery 플러그인은 DOM에 이벤트리스너를 등록하므로 componentWillUnmount메소드 내에서 리스너를 해제 해주어야 한다. 웬만하면 jquery...
고차 컴포넌트
고차 컴포넌트는 컴포넌트를 매개변수로 받고 새 컴포넌트를 반환하는 함수이다 Redux의 connect와 Relay의 createFragmentContainer와 같은 서드 파티 React 라이브러리에서 흔하게 볼 수 있는 패턴이다. 횡단 관심사 (Cross-Cutt
카카오 지도 api 리액트에 적용
카카오 map api 적용 순서 키발급 , javascript 키 개발환경의 로컬 주소를 카카오 api 페이지내의 플랫폼 => web 플랫폼 => 사이트 도메인에 등록 kakao 객체를 window 객체의 interface로 추가 주의사항 카카오 지도가 그려질 요소는 반드시 id가 map인 요소이어야 한다. script가 실행코드 보다 먼저 선언...