profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
태그 목록
전체보기 (465)error(9)알고리즘(8)DFS(7)Algorythm(7)Two pointers(7)git(7)js(6)BFS(5)webpack(5)React(5)redux(5)leetcode(4)breadth first search(4)ts(4)test(4)리액트(4)State(3)백준(3)shallow copy(3)DP(3)depth first search(3)offsetX(3)TIL(3)keydown(3)Binary Search(3)rotate(3)recursion(3)transform(3)bindActionCreators(3)JS30(3)getBoundingClientRect(2)자바스크립트(2)프로그래머스(2)hash set(2)mapstatetoprops(2)next.js(2)slice(2)Node(2)transform-origin(2)innerHeight(2)절대경로(2)Bit manipulation(2)offsetTop(2)scrollY(2)Constructor(2)Array.from(2)ghost defense(2)pageX(2)transitionend(2)semantic(2)scroll(2)async(2)Sliding Window(2)mapdispatchtoprops(2)Map(2)repository(2)reduce(2)algo(2)currentTime(2)router(2)얕은복사(2)fromIndex(2)refactoring(2)connect()(2)type(2)convention(2)프로토타입(2)vanilla js(2)modal(2)Suspense(2)Next.js 13(2)입출력과사칙연산(2)indexOf(2)linked list(2)stack(2)unit test(2)Recoil(2)login(2)컴포넌트(2)Prototype(2)tsconfig(2)path parameter(2)dynamic programming(2)jest(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)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)Rollup(1)라우팅(1)MVC(1)reference(1)행렬(1)@compound component(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)react-modal(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)Web3(1)Depth-first searach(1)classList(1)테스트(1)OAuth2.0(1)git log(1)switch(1)bundler(1)unhandledPromiseRejection(1)REST API(1)JWT(1)find(1)pathname(1)토큰(1)next(1)concat(1)sytaxError(1)event.preventDefault()(1)클로저(1)(1)라우터(1)textContent(1)CS(1)원티드 프리온보딩(1)offsetLeft(1)filter(1)소셜 로그인(1)module format(1)eth(1)input event(1)data binding(1)for...in(1)regex(1)온보딩(1)댓글추가(1)npm error(1)build(1)복사(1)base64(1)clientHeight(1)blockchain(1)commit(1)context(1)소셜로그인(1)연결리스트(1)local storage(1)entries(1)mouseleave(1)코드스플리팅(1)Sort(1)vite(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)Context API(1)기프티콘 앱(1)DevTool(1)SSR(1)static method(1)line height(1)dependency(1)React18(1)innerText(1)handleActions(1)transform:rotate(1)--force(1)좋은 컴포넌트(1)execution context(1)시멘틱(1)state 끌어올리기(1)git reset(1)InnerHTML(1)정적 메서드(1)METAMASK(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)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)재사용성(1)HTMLCollection(1)object.keys(1)Database(1)yield(1)outerHeight(1)input: color(1).env(1)디자인 패턴(1)(1)again(1)hash(1)streaming SSR(1)duration(1)race condition(1)origin(1)object.values(1)니콘내콘(1)radix-ui(1)SDK(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)Routes(1)NFT(1)KeyboardEvent(1)유닛테스트(1)교육과정(1)싱글턴 패턴(1)event.isComposing()(1)dynamic programing(1)headless(1)cloudfront(1)sop(1)screenX(1)--legacy-peer-deps(1)query parameter(1)과반수(1)routing(1)pick(1)keyup(1)정규표현식(1)nextjs(1)screenHeight(1)Maximum call stack size exceeded(1)인증(1)배열(1)cors(1)인가(1)asynchronous(1)스테이메모리(1)유닛 테스트(1)Flux(1)position(1)ListNode(1)headless ui(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)esbuild(1)parsing(1)timeupdate(1)localeCompare(1)testingLibraryElementError(1)배열 요소의 모든 위치 찾기(1)setProperty()(1)stopPropagation(1)merge(1)
post-thumbnail

Vite와 번들링의 역사

이번 포스팅에서는... 실무에서 Vite migration을 진행하면서 알아본 내용을 간략히 정리합니다. 간략한 번들링의 역사 Vite가 등장한 배경 Vite의 장점 Vite와 번들링의 역사 자바스크립트는 모듈이 없었다 태초의 자바스크립트는 웹 애플리케이션을 만들기 위한 목적으로 만들어지지 않았기 때문에 파일을 여러 개로 분리해 개발할 수조차 없었습니다. 그 말은 즉, 대규모 프로젝트를 진행할 수 없다는 의미이기도 합니다. 하나의 파일에서 동시에 여러 개발자가 여러 기능을 위한 코드를 추가하며 깃으로 협업할 수는 없으니까요..! Node의 탄생으로 모듈을 사용하기 시작 node가 탄생하면서 서버에서 자바스크립트를 사용할 수 있게 되었죠. 이 떄 commonJS방식의 'module'이 만들어집니다. 또한 npm의 등장으로 만들어진 모듈을 모두가 공유할 수 있었고, 이 때부터 자바스크립트에서 본격적으로 모듈이 활용되기 시작합니다. 브라우

2023년 5월 6일
·
0개의 댓글
·
post-thumbnail

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

CRA에서는 간단하게 .env파일을 생성한 다음 필요한 환경변수를 설정해주면 됐는데, CRA를 사용하지 않고 타입스크립트+웹팩으로 프로젝트를 하다보니 별도로 설정이 더 필요했다. 환경변수? 운영체제의 입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수이다. .env(dotenv)? dotenv는 환경변수를 .env파일에 저장해 관리할 수 있게 해주는 Node.js 패키지이다. 보안을 고려해 관리해야하는 변수들은 dotenv패키지를 이용해 환경변수 파일을 외부에 만들어 접근하도록 만들 수 있다. dotenv 설치 .env 파일 생성 필요한 변수 정보들을 다음과 같은 형태로 넣어준다. webpack.config.js 설정 > DefinePlugin? 웹팩에서 제공하는

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

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

tsconfig 설정을 고쳐 에러를 해결했더니, 또 다른 오류를 만났다. tsconfig.json 설정상의 문제인 것 같아서 계속해서 살펴봤었는데, 여러 스택오버플로우의 문의글 중 하나가 눈에 들어왔다. 아마도 번들링의 문제일 수 있을 것

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

웹팩 모듈 포맷, tscofig 설정

이번 포스팅에서는 웹팩과 모듈시스템에 대해 더 구체적으로 정리해보려 한다. require? 그동안 다른 소스코드를 참고하면서 require 키워드를 많이 봐왔는데, 정확히 어떤 키워드이고 왜 쓰는지, import와 비슷한 역할을 하는 건데 무슨 차이인지, 그냥 Node.js의 문법일 뿐인지 잘 모르고 있었다. Webpack 마찬가지로 웹팩이 무엇인지 큰 개념만 알고 있을 뿐 어떻게 사용해야 하는지에 대해서는 아는 바가 없었는데, 이번에 새로운 프로젝트를 하면서 이 이슈와 직접적으로 맞닥뜨리게 되었는데, 이 기회에 평소 궁금하던 부분을 짚고 넘어가기로 했다. > CORS 이슈부터 웹팩 모듈 포맷 까지... 여러모로 시작을 고민했던 프로젝트였는데, 평소 궁금했거나 꼭 공부해야지 싶었던 부분을 직접 겪으며 공부할 수 있는 기회를 예상외로 많이 만나게 되어서, 시도 자체만으로 내겐 가치가 있는 프로젝트인 것 같다. ts에서 파이어베이스 사용하기 ts

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

[Error][Recoil] recoil__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

갑자기 이 에러가 떠서 무슨 문제인지 에러메시지를 읽는 것만으로는 이해하기 어려웠는데, stackoverflow에서 찾아보니 간단히 해결할수 있었다. recoil을 사용하면서 useRecoilState를 잘못 import했기 때문이었다. import useRecoilState from "recoil" 이렇게 import문을 작성했는데, import {useRecoilState} from "recoil" 이렇게 올바르게 수정해주니 해결되었다. Reference https://stackoverflow.com/questions/63990313/recoil-webpack-imported-module-0-default-is-not-a-function/63991006#63991006

2022년 1월 15일
·
0개의 댓글
·