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

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

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

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

npm install --force vs --legacy-peer-deps 차이점

react-testing-library를 설치하려 했더니 이런 에러가 발생했다.npm ERR! Could not resolve dependency:npm ERR! peer react@"^18.0.0" from @testing-library/react@13.1.1npm

2022년 4월 27일
·
0개의 댓글
post-thumbnail

[React18] ReactDOM.render => createRoot 변경된 점

새로 리액트앱을 만들다 보니 이런 에러가 발생했다.Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your

2022년 4월 24일
·
0개의 댓글
post-thumbnail

CRA + TS 절대경로 설정

CRA에서는 기본적인 webpack설정이 숨겨져있는데, 절대경로를 사용하기 위해서는 tsconfig.json과 더불어 webpack의 설정을 변경해주어야 한다.이를 위해서는 eject로 숨겨진 webpack 설정을 바꾸어주어야 한다.eject?해당 프로젝트에 숨겨져 있

2022년 4월 24일
·
0개의 댓글
post-thumbnail

Tailwind CSS

지금까지 사용해보았던 CSS, SASS, SCSS, Styled-components 외에 새로운 CSS를 프로젝트에 도입해보기로 했다.tailwindcss는 utility-first를 개념으로 만들어진 CSS Framework이다.utility-first클래스에 유틸리

2022년 4월 24일
·
0개의 댓글
post-thumbnail

CI/CD

어플리케이션 개발단계부터 배포까지 자동적으로 진행할 수 있도록 만드는 것버그 수정/새 기능 추가될 경우 메인 레퍼지토리에 주기적으로 자동으로 머지되는 것개발자는 코드 변경사항을 지속적으로 머지해야한다.통합을 위한 단계(빌드, 테스트, 머지)의 자동화코드의 퀄리티 향상,

2022년 4월 16일
·
0개의 댓글
post-thumbnail

CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined

웹팩에서 제공하는 플러그인으로, 노드 런타임에서 process.env에 저장되는 환경변수를 전역변수로 등록해준다.appID라는 값을 인자로 넘기면 process.env.appID라는 값이 환경변수로 설정되어 전역 변수에 할당된다.https://hjuu.tist

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

쿠키, 세션 ,캐시, 웹 스토리지

브라우저의 저장소를 말한다.로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있어 데이터의 영구성이 보장된다.따라서 지속적으로 필요한 데이터를 저장할 때 활용할 수 있다.ID 저장하기 항목 체크시 저장할 아이디, 비회원 카트 정보 등UI 정보: 에

2022년 4월 10일
·
0개의 댓글
post-thumbnail

함수형 프로그래밍 vs 객체지향 프로그래밍

정확히 잘 모르겠다! 프로그래밍 패러다임 목표에 따라 적절한 방법과 기법을 활용해 프로그램을 만들게 되는데, 이것을 프로그래밍 패러다임이라고 한다. 함수형 프로그래밍 언어는 객체지향 언어보다도 일찍 탄생했지만, 수학의 원리와 연관되어 있고 다소 난해해 처음에는 사람

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

배열 평탄화하기 : Array.prototype.flatMap()과 Map.prototype.entries()

기존의 일반 객체는 Object.entries()를 사용했다면. map객체는 내장메서드인 entries()를 사용하면 된다.

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

[TS][Webpack] 웹팩으로 번들링하기

tsconfig 설정을 고쳐 에러를 해결했더니,또 다른 오류를 만났다.tsconfig.json 설정상의 문제인 것 같아서 계속해서 살펴봤었는데, 여러 스택오버플로우의 문의글 중 하나가 눈에 들어왔다.웹팩에 대해 간단히 알아보긴 했지만, 그래서 정작 어떻게 사용하는지는

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

tsconfig 설정 항목 정리

어떤 컴파일 설정을 사용할지에 대한 속성어떤 버전의 자바스크립트로 컴파일할지 지정프로그램에서 사용할 모듈 시스템모듈 내보내기/불러오기 코드가 어떠한 방식의 코드로 컴파일 될지 결정비상대적 import의 모듈 해석시 기준이 되는 경로 지정프로젝트 루트 디렉토리에 존재하는

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

웹팩 모듈 포맷, tscofig 설정

이번 포스팅에서는 웹팩과 모듈시스템에 대해 더 구체적으로 정리해보려 한다.그동안 다른 소스코드를 참고하면서 require 키워드를 많이 봐왔는데, 정확히 어떤 키워드이고 왜 쓰는지, import와 비슷한 역할을 하는 건데 무슨 차이인지, 그냥 Node.js의 문법일 뿐

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

[Node.js][Express] 간단한 API 구현하기

https://kitty-geno.tistory.com/62https://donghunee.github.io/study/2019/11/15/heroku/https://ksmfou98.github.io/ETC/Nodejs%20+%20expres

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

[CORS] CORS란? CORS 에러 해결하기

Node.js와 Express를 공부했던 적은 없었지만, 이번 토이 프로젝트를 진행하면서 api를 구축해야했기 때문에 공부하면서 진행하고 있었는데, CORS 이슈에 맞닥뜨리게 되었다.Access to fetch at 'urlA' from origin 'urlB' has

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

[알고리즘[BFS][JS] 송아지 찾기

현수는 송아지를 잃어버렸다. 다행히 송아지에는 위치추적기가 달려 있다. 현수의 위치와 송아 지의 위치가 수직선상의 좌표 점으로 주어지면 현수는 현재 위치에서 송아지의 위치까지 다음 과 같은 방법으로 이동한다. 송아지는 움직이지 않고 제자리에 있다.현수는 스카이 콩콩을

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

[ME-FEED] 새 토이 프로젝트 - 깃허브 프로필 꾸미기

하고 싶은 것은 다음과 같다.타입스크립트로 OOP를 구현한다.텍스트와 웹페이지 링크디자인 시스템을 참고한다.깃허브 api를 사용하여 리드미 프로필에 넣을 수 있도록 한다.내용은 2가지로 구성한다. \- 요즘 관심있는 포스트내가 쓴 글

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

숙박플랫폼 리팩토링 - 커스텀 훅 테스트,useQueryString 관심사 분리

커스텀 훅에 핵심 로직이 포함되어 있었으므로 꼭 테스트 코드를 작성해둘 필요를 느꼈다.E2E테스트로 잘 작동하는지 사용성 테스트는 완료했지만,코드의 유지보수 측면에서 작동여부 뿐 아니라 로직 자체를 테스트할 수 있는 코드를 꼭 작성해두는 것이 좋을 것 같았다.여기에 더

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

커스텀 훅 테스트? 좋은 테스트란 무엇일까

아래 부분은 커스텀 훅을 테스트 SyntaxError: Cannot use import statement outside a module 이 에러가 발생했는데, 노드에서 import문을 해석하고 실행할 수 없기 때문이므로 바벨을 사용해주어야 한다.필요한 바벨 패키지

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

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

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

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