일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 결정 알고리즘
- app router
- 이분 검색
- 타입 좁히기
- tailwind
- Jest
- Cypress
- 투포인터
- 리터럴 타입
- React
- Promise
- autosize
- dfs
- 인터섹션
- async/await
- 태그된 유니온
- SSR
- TS
- recoil
- useAppDispatch
- 무한 스크롤
- ESlint
- 호이스팅
- RTK Query
- CORS
- 반공변성
- 공변성
- webpack
- map
- CI/CD
- Today
- Total
목록분류 전체보기 (506)
짧은코딩
분석 const x = true; let y = false; function a() { let a = 4; y = true; if (x) { let a = 3; for (let i = 0; i { return a + b; }; z(3, 5); -a()까지 호출된 호출 스택과 선언 지도 호출 스택 우선 anonymous(this=window)가 호출 스택에 들어감 a(this=window)가 호출 스택에 들어감 선언 지도 우선 a(fn)가 호이스팅 되어서 들어가고, 그다음으로 x(true), y(false) 선언 a(fn) 안에 a(4)가 선언, 이게..
zerocho.com 사이트에 들어가서 공지사항을 클릭했을 때 2번째 인자의 function이 아니라 addEventListener이 호출 됨 2번째 인자 function은 함수의 선언이지 호출된 적이 없다 그러면 function은 귀신이 와서 호출해주냐? 그렇다고 봐도 됨. 왜냐면 내가 모르는 코드가 호출해주기 때문 이런 경우의 this는 외워야한다. 왜냐하면 저 함수는 호출하는 부분을 우리가 볼 수 없기에 경험적으로 외워야 한다. 결국 저걸 만든 사람만이 알 수 있다. addEventListener를 구현해보면(추론) 실제 addEventListener는 아마 C++로 구현되어 있을 것이다. const header = { addEventListener: function(eventName, callba..
JS의 this는 다른 언어와 좀 다르다. console.log(this)를 하면 window가 나온다. 기본적으로 this는 window라고 생각하면된다. -함수 function a() { console.log(this); } a(); 함수에서도 this는 window가 나온다. globalThis JS에서는 window, Node에서는 global => 최근 스팩에서는 globalThis로 합쳐짐 window의 2가지 역할 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기에 어디서든 접근이 가능해서 '전역 객체'라고도 부른다. 일반적으로 우리가 열고 있는 브라우저의 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. ex) window.innerWidth, window.innerHe..
Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다. => pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다. SSG SSG는 Static Site Generation 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식 장점 이미 만들어진 html를 여러 사람들에게 보여주는 것 서버 부담이 적고 응답 시간이 빠름 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함 단점 데이터가 바뀌면 다시 빌드해줘야 함 동적 컨텐츠를 사용하면 SSG는 좋지 않음 SSR이나 CSR을 사용하면 되는 거 아님? -SSR 서버 부하가 높아짐 -CSR 초기 로딩 느림 seo..
좋은 개발을 하려면 호이스팅을 하지 않는 것이 가장 좋다! 분석 코드 const x = "x"; console.log(z); var y = "hehe"; const z = () => {}; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); } a(); c(); 이런 코드가 있을 때, 호이스팅 상황에서 어떻게 되는지 분석해보겠다. var const x = "x"; console.log(z); var y = "hehe"; 이런 코드가 호이스팅 되면 var y; const x = "x"; ..
스코프 체인 스코프 체인은 "함수에서 어떤 값에 접근이 가능한가 혹은 어떤 값에 접근이 불가능한가"이다. 블록("{}")이 기준이 된다. 함수 안에도 블록이 존재하며, 함수가 아닌 블록은 if, for, while, swtich 등이 있다. -참고 const a = () => ({}); 이 코드는 객체를 리턴하는 함수이다. 예시 const x = "x"; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); b(); } a(); c(); 위 코드는 b가 정의되어 있지 않다는 에러가 나온다..
코드 분석 이 코드에 대해서 호출 스택 분석을 해보겠다. 이렇게 선언을 제외한 함수 호출 할 때마다 호출스택에 넣어주고 함수 끝날 때마다 빼주면 된다. -개발자도구에서 호출 스택 보는 방법 브라우저의 콘솔에다가 내가 원하는 지점에 debugger라고 넣는다. 그러면 이렇게 호출 스택을 볼 수 있다. 또한 오른쪽 창의 "범위"가 스코프 부분이라 이것도 알 수 있다. 처음에 anonymous(익명)이 있는 이유는 파일 전체를 익명 함수로 치기 때문이다. *스코프 체인: 특정 함수에서 어떤 값에 접근할 수 있는지 -참고 const console = { log() { // 콘솔에 글자 적는 기능 }, }; const x = "x"; function c() { const y = "y"; console.log("c..
“함수의 호출은 리턴 값으로 대체해라!” JS 예시 const onClick1 = () => () => { console.log("hello"); }; const onClick2 = () => { console.log("hello"); }; document.querySelector("#header").addEventListener("click", onClick1()); // 정답 document.querySelector("#header").addEventListener("click", onClick2()); // 오답 -onClick1이 정답인 이유는 onClick1() 자리에 document.querySelector("#header").addEventListener("click", () => { con..
이전 구현 방식 https://shortcoding.tistory.com/534 전체 상품 불러오기 무한 스크롤 구현 with react-intersection-observer 구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 shortcoding.tistory.com 저번에는 무한 스크롤에서 데이터를 불러오고 데이터 저장을 items를 따로 만들어서 하였다. 이번에는 공식 사이트에서 준 예시를 보고 구현해 보겠다. 전체 상품을 불러오는 페이지를 구현하는 것은 쉬웠다. 하지만 검색 상품을 가져오는 페이지에서 설정 방법..
무한 스크롤을 구현하고 나서 아이템을 많이 불러왔을 때, 맨 위로 올리는 버튼이 있으면 좋겠다는 생각이 들었다. 그래서 맨 위로 올라가는 버튼을 만들려고 했는데 스크롤을 다루기가 은근히 까다로워서 글로 기록하려 한다. 사용한 라이브러리는 "react-custom-scrollbars"이다. useRef도 같이 사용해서 구현했다. 구현 설계 1. 스크롤이 어느 정도 내려가고 나서 위로 올라가는 버튼이 나타난다. 2. "/"와 "/searchitem" 경로에서만 버튼이 나타나도록한다. 구현 const App = () => { const { pathname } = useLocation(); const ref = useRef(null); const [positionY, setPositionY] = useState..