느릿늘있

Q1. 과제  클린 코드 2주차도 무사히(?) 마쳤습니다! 과제를 완성하는 것에 너무 스트레스를 받기 보다는 공부를 꾸준히 하고 있는 과정 자체에 집중을 하려고 노력하고 있답니다. 이번 주에는 또 어떤 것들을 시도하고 배웠는 지 기록을 남겨보겠습니다!!Q2. 시도  이번 주 코드는 저번 주만큼 더티하지는 않았던 것 같습니다. 클린 코드 중에서도 이번 주는 순수함수를 주요 주제로 삼고 있었습니다. 함수라는 카테고리 안에서 액션과 계산을 구분한다는 생각 자체를 해본 적이 없었고 그냥 느낌적인 느낌으로 구분하고 쪼개고 했었던 것 같습니다. 이번 과제에는 액션 함수가 덩어리로 묶여 있었고 이를 순수함수인 계산의 단위로 추출해내고 정리하는 것이 미션이었습니다. 확실히 액션과 계산을 분리한다라는 개념을 가지고 접근..

React에서는 다양한 Hooks를 사용해서 컴포넌트의 상태를 관리하는 패러다임을 제시합니다. 그 중 하나로 useContext라는 훅이 있는데요. 실무에서 자주 써본 것이 아니라면 그냥 전역 상태 관리를 할 수 있게 해주는 훅이다 정도로 알고 있을 겁니다. 저 또한 그랬기에 이번 기회에 useContext에 대해 공식 문서를 보면서 꼼꼼하게 정리해보려고 합니다!https://ko.react.dev/reference/react/useContext useContext – ReactThe library for web and native user interfacesko.react.dev  React의 공식 문서에는 useContext를 컴포넌트에서 Context를 읽고 구독할 수 있는 React Hook이라고..

항해 플러스를 진행하면서 메모이제이션을 구현해보는 미션을 받았습니다. 객체를 비교함에 있어서도 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)와 마찬가지로 얕은 비교(Sallow Equals), 깊은 비교(Deep Equals)라는 용어를 사용한다는 것도 이번 과제을 진행하면서 처음 알게 되었는데요. 그런데 두 개념을 이해함에 있어서 깊이(Depth)라는 키워드가 약간 다르게 쓰이는 것 같아서 이번 기회에 깔끔하게 정리해보겠습니다.  보통 개발을 바닥부터 시작하게 되면 저처럼 얕은 복사와 깊은 복사에 대해서 먼저 접하게 되는데요. 제 기준으로는 비교에 대해서 먼저 짚고 넘어가는 게 이해하기가 더 수월하다고 생각이 듭니다! 그래서 비교에 대해서 먼저 정의를 해보겠습니다. 정말 간단한데요..

인증은 웹 개발의 기본이 되면서도 종류의 다양성과 보안의 정도에 따라 꽤 많은 케이스가 존재하기에 정답이 없다. 최근 회사에서의 신규 프로젝트와 몇 가지 토이 프로젝트들을 개발하면서 브라우저의 웹 스토리지와 인증을 하나로 엮어서 글로 정리해두면 기억하기 좋을 것 같다는 생각이 들어 이 주제로 글을 쓰게되었다.브라우저 웹 스토리지(+ 쿠키)와 인증  브라우저의 웹 스토리지 각각의 세부 내용과 사용법은 이 글의 목적이 아니다. 비교해서 기억하기 쉬운 형태로 각각의 주요 특징만 짚고 넘어가겠다.[ 로컬 스토리지 ]1. 브라우저를 종료해도 데이터가 유지된다. (로컬 - 유지)2. 서로 다른 도메인 간 데이터를 공유하지 않는다. (동일 도메인은 공유)3. 개발자 도구의 Application 탭에서 조회할 수 있다..

[TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. 성능하면 빠질 수 없는 메모이제이션, 네가 궁금해 https://d2.naver.com/helloworld/9223303 메모이제이션 소개 메모이제이션은 함수 호출의 결과를 캐싱하고 요청 시 다시 불필요한 계산을 다시 하지 않고 캐싱된 결과를 반환하는 프로그래밍 기술이다. React에서는 useCallback 또는 useMemo와 같은 메모이제이션 훅이 있습니다. 하지만 메모이제이션은 특정한 값을 메모리에 저장하는 것이기 때문에 잘못 사용하면 메모리가 오히려 낭..

[TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. Web 3.0은 무엇인가? https://itnext.io/what-do-you-need-to-know-about-new-era-of-internet-web-3-0-as-a-frontend-developer-55e51f2cd03f 🔥What You Need to Know About the New Era of Internet Web 3.0 As a Frontend Developer What the future of Internet Web 3.0 looks like..