원티드 프리온보딩 프론트엔드

e.target 은 클릭한 자식 요소를 반환하지만, e.currentTarget 은 이벤트가 부착된 부모 핸들러를 반환한다. 후자를 쓰는 것이 좋다. 공식 문서에도 나와 있다.

aria-hidden 속성 https://yceffort.kr/2021/03/hiding-contents-with-html-and-css > Static HTML elements with event handlers require a role. 에러 aria-hidden

JSON placeholder 무료 더미 데이터를 받을 수 있는 사이트

Git pull 과 clone 의 차이 pull 은 로컬 저장소에 있는 내 코드와 원격 저장소의 코드를 merge 하는 것, clone 은 내 코드에 상관 없이 원격 저장소의 코드를 그대로 복사해오는 것 VSC svg viewr extension svg 파일을 확인할

React react-router 의 Link와 NavLink >NavLink 는 특정 Link에 스타일을 적용해줄 수 있다. activeStyle과 activeClassName 속성을 활용하는데, 리액트 웹의 현재 URL과 to가 가리키는 링크가 일치할 때,

Recoil atom 은 useState() 와 비슷하게 사용할 수 있다. 컴포넌트끼리 상태를 공유할 수 있다는 점에서, state 와 다르다. Typescript 함수 인터페이스 정의하기 Javascript trim() 문자열 양 끝의 공백(연속된 공백 포함) 제

React router 에서 path='favorite' 으로 명시하더라도, useLocation 으로 불러올 땐 '/favorite' 이라 적어줘야 한다 useSuspense 아주 간단하게 로딩창 구현! 공식 문서 Javascript 👍 Intersection

Tips API 가 구리게 와도 코드가 구려지면 안됨! API 명세와 데이터 타입이 맞지 않는 경우는 매우 흔한 일이다 폴더 구조는 팀 마다, 회사 마다 기준이 다름. 현재는 본인의 기준을 세울 수 있으면 된다. import 정렬 기준 >맨 위: node_modules

참고 1 / 참고 2 / 참고 영상useQuery 훅의 파라미터를 통해 API 데이터의 만료 시간, 리프레시 간격, 캐싱된 데이터의 유지 기간, 브라우저 포커스시 데이터 리프레시 여부, 성공 or 에러 콜백 등 다양한 기능을 제어할 수 있다.stale외부 요청으로 서

라이브러리를 뜯어보는 공부가 정말 많이 도움 된다.디자인을 단순히 보기만 하지 말고, 어떤 색이 메인이고, 몇 개의 색이 쓰였고, 어떤 식으로 컴포넌트를 나눴구나, 생각하면서 보면 감각을 익히기에 좋을 것.Emotion 이 SSR 지원 측면에서 Styled-Compon

Tips 변수명은 아주 아주 중요하다. 하지만 그보다 기능 구현이 더 중요하다. 변수명 짓기가 어렵다면 임시로 지은 이름으로 기능 구현 확인 후, 변수명을 신중히 고려해서 바꾸는 방법도 있다. Git gitmoji https://gitmoji.dev/ React 로

VSC codesnap extension 코드를 깔-끔하게 캡처할 수 있음 사용법 참고 Redux 공식 문서 Redux 기본 원리 redux의 데이터 흐름은 동일하게 단방향으로 진행된다. Action ➡️ Dispatch ➡️ Store ➡️ View >view(컴

Victory.js 참고 블로그 bug mac 에서 Chrome 에서 keyDown 이벤트 발생 시 입력이 두 번 되는 버그가 있었다. 기기 문제라 치부하기엔 문제가 너무 명확했다. >1. Chrome 에서는 문제가 발생하나, Safari 에서는 문제 없이 동작함 >

dayjs 사용법 참고 블로그 날짜 더하기 예시 ( 7일 후의 값 ) >dayjs().add(7, 'd') react date picker https://reactdatepicker.com/#example-date-range https://www.npmjs.com/p

Tips 폴더 depth 는 깊어져도 된다. 쓰는 곳, 횟수에 따라 구조를 잘 짜는 게 더 중요. 웹팩은 사이즈를 줄이기 위해 함수 이름을 임의로 변경한다. js 에서 1000000 을 1000_000 으로 적어도 같다고 인식함. HTML onClick 이벤트 적용된

javascript 숫자 천 단위 콤마 표시 >Number.toLocaleString() 참고 - MDN Number.prototype.toLocaleString() switch문 대체 코드

CSS 글자 색상에 black 사용은 지양해라 브랜드 컬러코드 조합 참고해서 써라(좋은 예, 애플) https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/ Adobe

React react 에서 pagenation 하기 참고 블로그

제대로 답변하지 못할 기술은 이력서에 쓰지 않는 게 오히려 좋다리액트는 클로저와 인덱스로 동작한다 상위에서 use..들의 인덱스를 매겨두고 순서를 정함. state 를 인덱스로 비교, 가상 돔이 달라졌는지 비교하여 랜더링가상 DOM 은 언제 그리지?useCallbac

Git git cherry-pick [특정 커밋] 참고 블로그 특정 커밋만 가져오기

프리온보딩 마지막 수업이었다. 면접자 분들을 모시고 모의 면접 기회를 주신다고 하셨는데, '무조건 해야겠다'라는 생각이 들면서도 70명 앞에서 내 바닥이 다 드러날 거란 생각에 걱정이 컸다.걱정할 시간에 연습하면 된다정신 승리를 하며, 정리해 주신 면접 예상 질문들에

기록이 사라진다고 하여 블로그에 남긴다. 서로를 평가한다는 것이 조금 잔인하다는 생각이었는데, 좋은 말씀을 많이 해주셔서 감사하다. 후련하기보다 부족했고 아쉬웠던 점이 더 떠오르는데, 이 발판을 토대로 더 나아가야지. 다들 잘 되셨으면 🙏