전체 글39 [항해플러스] React Hooks 직접 구현하기 (useRef, useMemo, useCallback, ...) 이번 주 과제얕은 비교와 깊은 비교 로직 구현useRef 구현위 비교 함수와 직접 구현한 useRef를 활용하여 memo, useMemo, useCallback 구현샘플 애플리케이션 최적화 진행 (직접 구현한 훅 활용, 하나로 합쳐져 있는 Context 분리)이번 주 새롭게 알게 된 내용Object.is()// Before if (typeof objA !== typeof objB) return false;if (objA === null || typeof objA !== "object") return objA === objB; // after if (Object.is(objA, objB)) return true; if (typeof objA !== "object" || typeof objB !== "o.. 2024. 10. 12. [항해플러스] 프레임워크 없이 SPA 만들기 Part 2 가상DOM 구현 회고 이번주 새롭게 알게 된 내용Diffing 알고리즘SPA를 구현을 떠올리면, Part 1에서 진행했던 라우팅 처리 방법이 핵심적이긴 하지만 필요한 부분만 업데이트하는 것도 큰 특징 중 하나이다. 이번 과제에서는 Diffing 알고리즘을 통해 업데이트되는 부분만 부분적으로 렌더링을 하는 기능을 구현했다. 사실 좀 막막한 부분도 있기는 했는데, 참고 자료랑 과제 구현 파일에 달린 주석들을 참고로 해서 생각보다는 금방 적용할 수 있었다. 중간에 돔 객체로 만드는 과정에서 children을 제대로 업데이트해주지 않아 파일이 제대로 적용되지 않는 문제가 있었는데, 집단지성의 힘으로 해결할 수 있었다. (3기 17팀...💖)1. 렌더링 가능한 형태로 풀어주고2. oldNode, newNode를 비교해서 여러 케이스.. 2024. 10. 3. [항해플러스] 프레임워크 없이 SPA 만들기 Part 1 회고 프로젝트를 진행하면서 부딪혔던 기술적인 문제(문제, 시도, 해결, 알게된 것)템플릿 리터럴로 HTML을 innerHTML에 넣어 렌더링을 구현했는데, 테스트 코드를 돌렸을 때 렌더링을 시킨 HTML에 있는 id를 읽어오지 못하는 이슈가 있었다. 템플릿 리터럴이 innerHTML에 들어가기 이전에 이벤트를 등록할 경우 내부에 있는 id를 읽어오지 못한다는 사실을 알게 되었고 실행 순서를 조정하는 과정을 통해 해결할 수 있었다.에러 바운더리를 try, catch로 구현을 하고 싶었는데 이벤트가 전파되지 않아 결국 window.addEventListener('error', () => {}) 방식으로 구현했다. 오늘 1주차 과제에 대한 solution을 듣다보니 구조를 잘 짜게 되면 try, catch로도 구.. 2024. 9. 28. [항해플러스] 프론트 3기 과정을 시작하며... 항해 플러스 참여 계기항해99를 수료하고 벌써 3년차 개발자가 되었다. 운 좋게 좋은 회사에 입사하여 근무를 하게 되었는데, 유일한 프론트엔드 개발자이다보니 혼자 업무하는 것에 대한 아쉬움이 항상 있었다. 개발을 하다보면 수 많은 프레임워크나 라이브러리를 검토하고 결정해야 하는 순간들이 찾아오는데, 이럴 때 같이 고민을 나눌 수가 없고 또 구조적인 부분이나 현재 갖고 있는 생각들을 나누기가 쉽지 않았다. 스터디를 통해 어느정도 해소하려고 해보았지만 확실히 현업에서 하는 것처럼 시니어분들의 피드백을 받기가 어려웠기 때문에 새로운 과정이 필요하겠다는 생각이 들었다.항해 면접관을 하는 도중 항해 플러스가 생겼다는 소식을 듣게 되었고 이 과정에 바로 참여하고 싶었지만 당시 상황 때문에 계속 미루고만 있던 상황에.. 2024. 9. 21. [HTTP] URL Fragment와 Hash Router (feat. #) URL Fragment 개념 및 사용예제'HTTP 완벽 가이드: 웹은 어떻게 동작하는가'에 따르면 Fragment는 URL에서 해시(#) 문자에 이어서 오는 것이다. URL Fragment를 주로 볼 수 있는 곳은 공식문서다. 사이드바에서 특정 개념을 클릭하면 동일한 페이지에서 스크롤이 이동하며 해당 개념의 설명이 있는 곳으로 이동하는 경우가 많은데, 보통 이럴 때 URL을 잘 살펴보면 #타겟_개념으로 이어지는 경우가 많다. 이미지와 링크로 다시 이야기하자면, 아래 이미지는 Next.js 공식문서의 한 부분을 캡처했다. Creating UI를 선택 시 URL이 아래와 같이 바뀐다. #creating-ui가 바로 fragment이다. https://nextjs.org/docs/app/building-you.. 2024. 9. 2. 강남스포츠문화센터 시설 주차장 및 수영 강습 후기 (오리발 여부 포함) 오늘은 강남스포츠문화센터 수영 강습 후기를 공유하려고 합니다. 수영 강습 레벨과 개인적으로 추천하는 적절한 반은 어디인지, 또 수영 강습 때의 분위기와 시설 등에 대한 후기까지 적어보겠습니다. 수영 프로그램 수강신청 방법이 궁금하시다면 하단 게시물을 추천드립니다. 몇 개월의 시행착오로 얻은 성공 팁이 담겨 있으니 신청 전에 읽어보시길 바랍니다. 강남스포츠문화센터 수영 수강신청 방법 및 성공 팁 날이 점점 따뜻해지면서 수영을 배우시려는 분들이 많아지실 것 같은데요! 오늘은 강남스포츠문화센터 수영 수강신청 팁에 대해 알려드리고, 몇 개월의 시행착오 끝에 수영 수강신청 성공한 팁 soyoondaily.com 강남스포츠문화센터 시설 후기 강남스포츠문화센터 수영장 탈의실 입장 시간은 수업 20분 전부터 가능합니다.. 2024. 3. 14. 이전 1 2 3 4 5 ··· 7 다음 반응형
