- 전체보기(457)
- error(9)
- 알고리즘(8)
- Algorythm(7)
- git(7)
- DFS(7)
- Two pointers(7)
- BFS(5)
- js(5)
- leetcode(4)
- test(4)
- webpack(4)
- redux(4)
- breadth first search(4)
- React(4)
- ts(4)
- 리액트(4)
- bindActionCreators(3)
- transform(3)
- Binary Search(3)
- 백준(3)
- depth first search(3)
- shallow copy(3)
- offsetX(3)
- recursion(3)
- JS30(3)
- State(3)
- TIL(3)
- rotate(3)
- keydown(3)
- DP(3)
- slice(2)
- offsetTop(2)
- algo(2)
- transform-origin(2)
- hash set(2)
- Bit manipulation(2)
- scrollY(2)
- transitionend(2)
- Sliding Window(2)
- Constructor(2)
- Array.from(2)
- ghost defense(2)
- router(2)
- indexOf(2)
- semantic(2)
- scroll(2)
- async(2)
- connect()(2)
- Map(2)
- repository(2)
- reduce(2)
- dynamic programming(2)
- linked list(2)
- currentTime(2)
- stack(2)
- convention(2)
- 얕은복사(2)
- 프로토타입(2)
- type(2)
- vanilla js(2)
- 프로그래머스(2)
- 입출력과사칙연산(2)
- 절대경로(2)
- Recoil(2)
- Prototype(2)
- login(2)
- pageX(2)
- tsconfig(2)
- mapdispatchtoprops(2)
- refactoring(2)
- jest(2)
- getBoundingClientRect(2)
- path parameter(2)
- unit test(2)
- 자바스크립트(2)
- fromIndex(2)
- innerHeight(2)
- mapstatetoprops(2)
- offsetWidth(2)
- rebase(1)
- 약수(1)
- 평균(1)
- http(1)
- 동적 라우팅(1)
- CRA(1)
- googleid(1)
- next error(1)
- 댓글삭제(1)
- queue(1)
- Absolute Path(1)
- S3(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)
- oAuth(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)
- 라우팅(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)
- cryptowallet(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)
- 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)
- OAuth2.0(1)
- git log(1)
- switch(1)
- Node(1)
- unhandledPromiseRejection(1)
- REST API(1)
- JWT(1)
- find(1)
- pathname(1)
- outerHeight(1)
- concat(1)
- sytaxError(1)
- event.preventDefault()(1)
- 클로저(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)
- blockchain(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)
- Design Pattern(1)
- fork(1)
- data-*(1)
- shift(1)
- 기프티콘 앱(1)
- DevTool(1)
- static method(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)
- 정적 메서드(1)
- transition(1)
- 클래스(1)
- moduleFormat(1)
- KeyboardEvent.shiftkey(1)
- mock(1)
- for...of(1)
- 토큰(1)
- 재귀(1)
- array(1)
- spread operator(1)
- text-align:center(1)
- super(1)
- 프로젝트(1)
- coordinates(1)
- innderHeight(1)
- display(1)
- translate(1)
- useLocation(1)
- aws(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)
- path variable(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)
- provider(1)
- input: color(1)
- .env(1)
- 디자인 패턴(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)
- Singleton(1)
- playbackRate(1)
- deep copy(1)
- closure(1)
- fallback(1)
- rm --cached(1)
- Suspense(1)
- Routes(1)
- NFT(1)
- KeyboardEvent(1)
- 유닛테스트(1)
- 교육과정(1)
- 싱글턴 패턴(1)
- event.isComposing()(1)
- dynamic programing(1)
- cloudfront(1)
- sop(1)
- screenX(1)
- --legacy-peer-deps(1)
- query parameter(1)
- 과반수(1)
- routing(1)
- pick(1)
- keyup(1)
- 정규표현식(1)
- screenHeight(1)
- Maximum call stack size exceeded(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)
vanilla js로 라우팅 구현하기 - 더 많은 pathname을 처리해보자!
vanilla js로 라우팅 기능을 구현하면서, 평소 사용하던 react-router의 모듈도 살펴보았습니다.라우터의 메서드 중 renderPage는 현재 경로에 대응하는 페이지를 루트 요소에 삽입해 렌더링하는 메서드입니다.처음 구현했던 코드는 다음과 같았습니다.win
[ts] constrained mixin pattern - 클래스 참조해 공통메서드 정의하기
vanilla js로 웹페이지를 구현하면서, 컴포넌트를 구현한 각 클래스들의 공통 메서드를 재사용하기 위해 믹스인 패턴을 사용해본 경험을 정리합니다.
Singleton pattern으로 콜스택 터지는 문제 해결 😅: 전역에서 접근 가능한 하나의 인스턴스 생성하기
🤯 Error: Maximum call stack size exceeded vanilla js로 웹페이지를 구성하던 도중 콜스택이 자꾸 터지는(ㅎ) 문제가 발생했습니다. 라우팅 기능을 구현하기 위해 만들어놓은 Router 클래스로 인스턴스를 생성하여 클래스에 정의해
AWS Cloudfront와 S3 연동하기
Storage 서비스로, 모든 종류의 데이터를 원하는 형식으로 저장할 수 있습니다.간단한 Key 기반의 객체 스토리지로, 데이터를 저장 및 검색하는데 사용할 수 있는 고유한 객체 키를 할당합니다.회사에서 진행하고 있는 프로젝트에서,클라이언트에서 S3버킷에 파일을 업로드
NFT, Block-chain
대체 불가능한 토큰이라는 뜻입니다!말 그대로 세상에 딱, 한 개만 존재하는 토큰을 말합니다.이 대체 불가능하다는 특징으로 인해 NFT는 디지털 파일의 권리 증명서 역할을 합니다.디지털 파일은 복제가 무한정 가능하지만, NFT로 소유 권자를 기록하면 원본과 복제본을 구분
Google OAuth2.0 - Google ID Service
이전에 카카오 REST API를 사용한 소셜로그인 기능을 구현해본 적이 있고,구글 로그인은 파이어베이스를 통해서 진행해봤었다.회사 프로젝트에서 구글 로그인을 진행하게 되어 이번 기회에 정리해보았다.자체적으로 로그인/회원가입 서비스를 구현할 경우 사용자로부터 개인정보를
[React.Lazy][Suspense] React에서 코드 스플리팅하기
입사 첫 주차가 지나갔다.앞으로 매주 TWIL과 회고를 진행하려고 하는데, 오늘은 회사의 코드를 파악하면서 익숙하지 않은 새로운 개념들을 하나씩 정리해두려고 한다.회사에서는 Next.js를 별도로 사용하고 있지는 않고 React 자체에서 코드 스플리팅을 사용하고 있다.
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
[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
CRA + TS 절대경로 설정
CRA에서는 기본적인 webpack설정이 숨겨져있는데, 절대경로를 사용하기 위해서는 tsconfig.json과 더불어 webpack의 설정을 변경해주어야 한다.이를 위해서는 eject로 숨겨진 webpack 설정을 바꾸어주어야 한다.eject?해당 프로젝트에 숨겨져 있
Tailwind CSS
지금까지 사용해보았던 CSS, SASS, SCSS, Styled-components 외에 새로운 CSS를 프로젝트에 도입해보기로 했다.tailwindcss는 utility-first를 개념으로 만들어진 CSS Framework이다.utility-first클래스에 유틸리
CI/CD
어플리케이션 개발단계부터 배포까지 자동적으로 진행할 수 있도록 만드는 것버그 수정/새 기능 추가될 경우 메인 레퍼지토리에 주기적으로 자동으로 머지되는 것개발자는 코드 변경사항을 지속적으로 머지해야한다.통합을 위한 단계(빌드, 테스트, 머지)의 자동화코드의 퀄리티 향상,
CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined
웹팩에서 제공하는 플러그인으로, 노드 런타임에서 process.env에 저장되는 환경변수를 전역변수로 등록해준다.appID라는 값을 인자로 넘기면 process.env.appID라는 값이 환경변수로 설정되어 전역 변수에 할당된다.https://hjuu.tist
쿠키, 세션 ,캐시, 웹 스토리지
브라우저의 저장소를 말한다.로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있어 데이터의 영구성이 보장된다.따라서 지속적으로 필요한 데이터를 저장할 때 활용할 수 있다.ID 저장하기 항목 체크시 저장할 아이디, 비회원 카트 정보 등UI 정보: 에
함수형 프로그래밍 vs 객체지향 프로그래밍
정확히 잘 모르겠다! 프로그래밍 패러다임 목표에 따라 적절한 방법과 기법을 활용해 프로그램을 만들게 되는데, 이것을 프로그래밍 패러다임이라고 한다. 함수형 프로그래밍 언어는 객체지향 언어보다도 일찍 탄생했지만, 수학의 원리와 연관되어 있고 다소 난해해 처음에는 사람
배열 평탄화하기 : Array.prototype.flatMap()과 Map.prototype.entries()
기존의 일반 객체는 Object.entries()를 사용했다면. map객체는 내장메서드인 entries()를 사용하면 된다.
[TS][Webpack] 웹팩으로 번들링하기
tsconfig 설정을 고쳐 에러를 해결했더니,또 다른 오류를 만났다.tsconfig.json 설정상의 문제인 것 같아서 계속해서 살펴봤었는데, 여러 스택오버플로우의 문의글 중 하나가 눈에 들어왔다.웹팩에 대해 간단히 알아보긴 했지만, 그래서 정작 어떻게 사용하는지는
tsconfig 설정 항목 정리
어떤 컴파일 설정을 사용할지에 대한 속성어떤 버전의 자바스크립트로 컴파일할지 지정프로그램에서 사용할 모듈 시스템모듈 내보내기/불러오기 코드가 어떠한 방식의 코드로 컴파일 될지 결정비상대적 import의 모듈 해석시 기준이 되는 경로 지정프로젝트 루트 디렉토리에 존재하는
웹팩 모듈 포맷, tscofig 설정
이번 포스팅에서는 웹팩과 모듈시스템에 대해 더 구체적으로 정리해보려 한다.그동안 다른 소스코드를 참고하면서 require 키워드를 많이 봐왔는데, 정확히 어떤 키워드이고 왜 쓰는지, import와 비슷한 역할을 하는 건데 무슨 차이인지, 그냥 Node.js의 문법일 뿐
[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