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

Next.js 13, 뭐가 달라?

React 18에서는 여러 업데이트가 이루어졌습니다. Concurrency 개념도 포함이 되었고... 서버측 렌더링 기능에 대한 내용도 있고요. 이러한 리액트 18 업데이트와 연관된 Next.js 13의 변경사항들도 눈에 띄는데, 리액트 18과 Next.js 13은 어떤 연관성이 있는지, 어떤 방향성을 가지고 무엇이 바뀌었는지 이해해보고 싶었습니다. Next.js, 뭐가 그렇게 좋은데? 그거 SSR 원툴 프레임워크 아냐? 예전엔 그런 느낌이 있었던 것 같기도… 처음 Next.js를 공부해서 사용할 때만 해도, 몇년 전까지만 해도 Next.js는 주로 리액트만으로 만든 애플리케이션의 한계인 SEO 최적화와 초기 페이지 로드속도 향상을 위한 SSR을 위해 사용하는 것이 가

2023년 9월 2일
·
0개의 댓글
·
post-thumbnail

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

입사 첫 주차가 지나갔다. 앞으로 매주 TWIL과 회고를 진행하려고 하는데, 오늘은 회사의 코드를 파악하면서 익숙하지 않은 새로운 개념들을 하나씩 정리해두려고 한다. 회사에서는 Next.js를 별도로 사용하고 있지는 않고 React 자체에서 코드 스플리팅을 사용하고 있다. 이 부분에 대해 정리해보자. 코드 스플리팅 SPA에서는 모든 코드를 처음 접속했을 때 서버에서 클라이언트로 요청해 받아온다. 즉, 사용자가 접속하지 않은 페이지에 관련된 코드도 함께 전송 받기 때문에, 프로젝트의 규모가 크다면 다운받는 코드의 용량이 커진다는 단점이 있다. 이 때 사용할 수 있는 것이 코드 스플리팅으로, 접속한 페이지에서 당장 필요한 코드만 받고, 나머지는 필요할 때만 요청해서 새로 받아 사용하는 기법을 말한다. >CRA에서 제공하는 Split Chunks로도 코드 스플리팅이 기본적으로 되기는 하나, 이러한 용도로 사용하기는 어렵다. Split Chunks? CRA에서는 기본 설

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

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

지난 프로젝트까지는 상대경로를 사용했더니, 단점이 있었다. import문이 지저분해진다. 파일의 위치를 파악하기 어렵다. 파일의 위치를 변경했을 때 import문을 수정하기 어렵다. 그래서 대체할 방법을 찾아보니, 절대경로를 사용하는 방법이 있었다. 1. jsonconfig.json 프로젝트 루트에 jsonconfig.json 파일을 만들고 아래 코드를 추가해준다. > 그러나... 다른 문제가 있었다. 윈도우를 사용하는 팀원분의 노트북에서는 에러가 발생했다. 다른 방법을 찾아보자. 2. cross-env를 이용한 NODE_ENV 주입 🔸 cross-env 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입하는 방법 🔸 사용법 사용할 명령어 앞에 cross-env [=, ...]를 붙여 작성해준다. 🔸 예시 🔸 적

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} 이 아닌 {}과 같은 방식으로 표기해주어야 한다. Reference https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom?rq=1

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

react에서 icon 쓰는 법

자바스크립트로 프로젝트할 때는 fontawsome을 사용해 아이콘을 넣었는데, 리액트로 진행할 때는 어려움이 있었다. fontawesome은 html에 kit script를 심어준 다음 사용해야 하는데 리액트에 적용하기는 어려웠다. 이를 해결하기 위해서는 여러 복잡한 과정을 거쳐야 했었는데, react-icons로 간단하게 아이콘을 삽입할 수 있다는 걸 알게 됐다. 설치 yarn add react-icons --save 필요한 아이콘을 검색하면 된다. 원하는 아이콘의 이름을 써주고, import할 때는 react-icons/뒤에 아이콘 이름의 앞 두 알파벳을 소문자로 써준다. FaUserCircle의 앞 두자리 알파벳 Fa를 소문자로 써서 react-icons/fa로 import 해주면 된다

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