profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
태그 목록
전체보기 (451)error(9)알고리즘(8)git(7)DFS(7)Algorythm(7)Two pointers(7)js(5)BFS(5)leetcode(4)webpack(4)리액트(4)breadth first search(4)test(4)React(4)ts(4)redux(4)transform(3)recursion(3)State(3)rotate(3)bindActionCreators(3)JS30(3)DP(3)depth first search(3)TIL(3)shallow copy(3)keydown(3)백준(3)Binary Search(3)offsetX(3)transform-origin(2)path parameter(2)Bit manipulation(2)scrollY(2)transitionend(2)Array.from(2)offsetTop(2)Sliding Window(2)ghost defense(2)repository(2)unit test(2)semantic(2)scroll(2)async(2)algo(2)Map(2)Constructor(2)fromIndex(2)reduce(2)dynamic programming(2)currentTime(2)connect()(2)얕은복사(2)type(2)indexOf(2)convention(2)프로토타입(2)offsetWidth(2)linked list(2)stack(2)절대경로(2)입출력과사칙연산(2)hash set(2)Recoil(2)tsconfig(2)Prototype(2)jest(2)프로그래머스(2)mapdispatchtoprops(2)getBoundingClientRect(2)pageX(2)refactoring(2)자바스크립트(2)mapstatetoprops(2)slice(2)innerHeight(2)동적 라우팅(1)CRA(1)next error(1)댓글삭제(1)queue(1)Absolute Path(1)TWIL(1)git revert(1)unit(1)해시(1)serialize(1)성능개선(1)REST(1)얕은복사 전개연산자(1)iteration(1)가운데정렬(1)serializes(1)atom(1)once(1)카카오(1)reword(1)absolutepath(1)premitive(1)findIndex(1)iterable(1)iterator(1)소수찾기(1)컴포넌트(1)toEqual(1)cypress(1)path(1)flatmap(1)mouseenter(1)FileReader(1)forinloop(1)callback(1)shiftKey(1)useSetRecoilState(1)blur(1)Module(1)실행컨텍스트(1)legacy-peer-deps(1)arguments(1)MVC(1)reference(1)행렬(1)hamming weight(1)매개변수(1)콜라츠(1)capturing(1)끝까지 스크롤했는지 판별(1)Object.assign(1)dotenv(1)input: range(1)await(1)naming convention(1)functionComponent(1)원시값(1)useEffect(1)event loop(1)유사배열객체(1)짝수(1)환경변수(1)scrollLeft(1)교육과정 설계(1)margin:auto(1)revert(1)참조값(1)(1)leeetCode(1)react-icon(1)node.js(1)hasOwnProperty(1)class(1)while(1)for(1)textShadow(1)in(1)&&(1)useParams(1)pagination(1)useRecoilValue(1)mouseenter event(1)cubic-bezier(1)ESLint(1)paddingTop(1)ts error(1)nodeList(1)return-type(1)charCodeAt(1)Flexbox(1)login(1)offset(1)pointer-events(1)생성자함수(1)query(1)env(1)DROP(1)selector(1)인터넷(1)SOME(1)배열 안 모든 요소 인덱스 찾기(1)Depth-first searach(1)classList(1)테스트(1)git log(1)switch(1)Node(1)unhandledPromiseRejection(1)REST API(1)JWT(1)토큰(1)outerHeight(1)concat(1)sytaxError(1)event.preventDefault()(1)클로저(1)(1)textContent(1)CS(1)원티드 프리온보딩(1)offsetLeft(1)filter(1)소셜 로그인(1)module format(1)input event(1)data binding(1)for...in(1)regex(1)온보딩(1)댓글추가(1)npm error(1)복사(1)base64(1)clientHeight(1)commit(1)소셜로그인(1)연결리스트(1)local storage(1)entries(1)mouseleave(1)코드스플리팅(1)Sort(1)keyCode(1)this(1)challenge(1)preonboarding(1)DOM(1)transition-timing-function(1)tofixed(1)toBe(1)테스트코드(1)offsetHeight(1)예외처리(1)E2ETest(1)CSS(1)함수선언(1)중복값제거(1)소수(1)Sementic web(1)reset(1)object.entries(1)arrayLike(1)fork(1)data-*(1)shift(1)기프티콘 앱(1)DevTool(1)line height(1)dependency(1)innerText(1)handleActions(1)transform:rotate(1)--force(1)execution context(1)시멘틱(1)state 끌어올리기(1)git reset(1)InnerHTML(1)transition(1)클래스(1)moduleFormat(1)KeyboardEvent.shiftkey(1)mock(1)for...of(1)provider(1)재귀(1)array(1)spread operator(1)text-align:center(1)super(1)프로젝트(1)coordinates(1)innderHeight(1)display(1)translate(1)useLocation(1)github(1)IntersectionObserver(1)icon(1)RenderTree(1)bundle(1)lazy(1)cornify_add()(1)evendigits(1)JSX(1)express(1)semantic web(1)CSSOM(1)git push -f origin(1)setAttribute(1)LIMIT(1)원티드 프리온보딩 프론트엔드(1)squash(1)비트연산(1)redux-devtools-extension(1)event delegation(1)rendering(1)immutability(1)createAction(1)HTMLCollection(1)object.keys(1)Database(1)yield(1)find(1)input: color(1).env(1)(1)again(1)hash(1)duration(1)race condition(1)origin(1)object.values(1)니콘내콘(1)bubbling(1)code_splitting(1)drag(1)array replace(1)playbackRate(1)deep copy(1)closure(1)fallback(1)rm --cached(1)Suspense(1)Routes(1)KeyboardEvent(1)유닛테스트(1)교육과정(1)event.isComposing()(1)dynamic programing(1)sop(1)screenX(1)--legacy-peer-deps(1)query parameter(1)과반수(1)pick(1)keyup(1)정규표현식(1)screenHeight(1)인증(1)배열(1)cors(1)인가(1)asynchronous(1)스테이메모리(1)유닛 테스트(1)Flux(1)position(1)ListNode(1)semantic tag(1)숙박플랫폼(1)promise(1)formData(1)clientX(1)import(1)video(1)every(1)useRecoilState(1)ScrollIntoView(1)깊은복사(1)자료구조(1)Center(1)social-login(1)dynamic routing(1)API(1)npm(1)URI(1)parsing(1)timeupdate(1)localeCompare(1)testingLibraryElementError(1)배열 요소의 모든 위치 찾기(1)setProperty()(1)stopPropagation(1)merge(1)rebase(1)약수(1)평균(1)http(1)
post-thumbnail

[React.Lazy][Suspense] React에서 코드 스플리팅하기

입사 첫 주차가 지나갔다.앞으로 매주 TWIL과 회고를 진행하려고 하는데, 오늘은 회사의 코드를 파악하면서 익숙하지 않은 새로운 개념들을 하나씩 정리해두려고 한다.회사에서는 Next.js를 별도로 사용하고 있지는 않고 React 자체에서 코드 스플리팅을 사용하고 있다.

2022년 5월 15일
·
0개의 댓글
post-thumbnail

[Jest][유닛 테스트] (2) 테스트 코드로 디버깅해보자! 예약 날짜 비활성화 오류, 테스트 코드로 해결하기

이렇게 체크인 날짜를 선택했을 때, 예약 불가 날짜가 있다면 해당 날짜 전까지만 체크아웃날짜를 선택할 수 있도록 블락 처리를 해야 한다. .gif) 그런데 이렇게 안되는 경우가 발생했다. .gif) 내가 만들었지만... 내가 봐도 희한하다..🥲 명확한 테스트

2022년 3월 23일
·
0개의 댓글
post-thumbnail

[React] 리액트에서 절대경로 사용하기 (src)

https://imkh.dev/react-absolute-path/

2022년 1월 29일
·
0개의 댓글
post-thumbnail

[error] Attempted import error: 'Switch' is not exported from 'react-router-dom'

원래는 Switch를 사용해 이렇게 작성했었지만, Switch가 export되지 않아 사용할 수 없었기 때문에Switch 대신 Routes를 사용해 감싸주었다. 대신 component가 아닌 element를, {Home} 이 아닌 {<Home/>}과 같은 방식으로

2021년 11월 11일
·
0개의 댓글
post-thumbnail

react에서 icon 쓰는 법

자바스크립트로 프로젝트할 때는 fontawsome을 사용해 아이콘을 넣었는데,리액트로 진행할 때는 어려움이 있었다.fontawesome은 html에 kit script를 심어준 다음 사용해야 하는데 리액트에 적용하기는 어려웠다. 이를 해결하기 위해서는 여러 복잡한 과정

2021년 11월 10일
·
0개의 댓글
post-thumbnail

state를 직접 수정하면 안되는 이유

동시에 여러 setState를 효율적으로 처리할 수 있기 위함이다.state 값이 변경이 되면 setState는 리액트에 업데이트 요청을 한 뒤 다음 코드를 실행시킨다. State를 직접 수정하면서 여러번 상태를 업데이트 하는 경우 이전 업데이트 내용이 다음 업데이트

2021년 9월 24일
·
0개의 댓글
post-thumbnail

리액트 컴포넌트와 훅

웹어플리케이션, 웹페이지에서 독립적이고 재사용이 가능한 단위로(박스 단위로) 나뉘어진 블럭리액트에서 컴포넌트를 만들기 위해서는1\. React.Component 클래스를 상속한다.2\. this.state에 데이터를 담는다.3\. render() 함수에 JSX 문법으로

2021년 9월 24일
·
0개의 댓글