TIL

[JS30] - 8) Fun with HATML5 Canvas [JS] 마우스 클릭 좌표 ( screenX, clientX, pageX, offsetX )

\[Code Signal] 26. evenDigitsOnly끝까지 스크롤 했는지 판별하기윈도우 사이즈 표기 (screen, client, inner, outer Width / Height)

클로저 개념 정리실행 컨텍스트 개념 정리 및 호이스팅, 스코프 부분 정리TIL - Today I Learn...

\[JS30] -12) Key Sequence DetectionExecution Context & Closure \- 모던 자바스크립트 Deep Dive : 실행 컨텍스트와 클로저에 대한 내용을 읽고, 너무 세세한 부분만 제외하고 나름대로 정리했다. 기존에 작성했던

\[JS30] - 14) JS References VS Copying자기소개 페이지 구현JS30, 메소드 정리와 관련한 내용 학습 \- 얕은 복사와 깊은 복사\[this] - 개념편

\[JS30] -19) Webcam Fun\[leetCode] D-1. Binary Search (14 days study plan to crack algo) \- \[leetCode] 278. First Bad Version \- \[leetCode] 35. Se

\[JS30] - 20) Speech DetectionleetCode 14days study plan to crack algo \- \[leetCode] D-2. Two Pointers\[leetCode] 189. Rotate Array\[leetCode] 977.

\[JS30] - 22) Follow Along Link Highlighters\[leetCode] 167. Two Sum II - Input Array Is Sorted\[leetCode] 283. Move Zeroes\[모던 자바스크립트 Deepdive] 읽기 -

\[JS30] - 27) Click and DragleetCode 14days study plan to crack algo \- D-4 two pointers\[leetCode] 344. Reverse String\[leetCode] 557. Reverse Words

오늘은 하지 않고, 첫 리액트 프로젝트에 집중했다.Linked list, two pointers \- \[leetCode] 19. Remove Nth Node From End of List \- \[leetCode] 876. Middle of the Linked L

\[Redux] 회원가입 유효성 체크

오늘은 하지 않고, 첫 리액트 프로젝트에 집중했다.\[leetCode] D-6. Sliding Window\[leetCode] 3. Longest Substring Without Repeating Characters나머지 한 문제는 어려워서... 나중에 다시 풀어보기로

\[JS30] - 28) Video Speed Controller\[leetCode] 617. Merge Two Binary Trees\[leetCode] 116. Populating Next Right Pointers in Each Node

\[JS30] -23) Speech SynthesisRecursion / Backtracking\[leetCode]\[JS] 21. Merge Two Sorted Lists - recursion\[leetCode]\[JS] 206. Reverse Linked List

\[JS30] -25) Event Capture, Bubbling, Propagation and OnceBit Manipulation, Hamming Weight\[leetCode]\[JS] 191. Number of 1 Bits\[leetCode]\[JS] 231.

🖲 Algorythm [leetCode] D-12. Dynamic Programming(DP) [leetCode 70. Climbing Stairs](https://velog.io/@gygy/leetCodeJS-70.-Climbing-Stairs) 🖲 Javas

🖲 Javascript 30 Challenge [JS30] - 13) Slide in on Scroll 🖲 React - numble challenge [React] 무한반복 슬라이드 만들기 - 확장성 있게 코드 작성하기

오늘은 제대로 한 게 없다.알고리즘과 자바스크립트 30 챌린지, 리액트 프로젝트, 자바스크립트 책 읽기, 리덕스 공부 등무리하게 많은 계획을 세우고 매일매일 하려다 보니 어느 새 부담이 커졌나보다.6월부터 회사에서 퇴근하자마자 자리에 앉아 공부하고, 9월 중순부터는 하

\[JS30] - 30) Whack a Mole!\[JS30] - 24) Sticky Nav\[JS30] - 21) Geolocation\[JS30] -29) Countdown Clock (Recap)

- git form한 레퍼지토리 잔디심기, 퍼스널 액세스 토큰, 리덕스를 사용하는 이유

Reduxtagram 만들기redux store 만들기 : \[Reduxtagram] - setting리덕스 개발자도구 설치: store is not found\[Reduxtagram] Accessing dispatch and state with ReduxbindAct

리덕스를 사용하면 좋은 이유와 더 이상 사용하지 않아도 되는 이유리덕스 기본 사용법리덕스를 대신할 수 있는 hooks 알아보기

\[Redux] action, reducer, dispatch 더 간편하게 작성하기 (createAction, bindActionCreators, handleActions)

useReducer, useContext - 리덕스를 대체할 수 있는 react hooks

\[CSS] Flexbox, Display, PositionSemantic Web

\[CSS] box-sizing

Ajax가 무엇인지 간단히 알아보자

Ghost Defense - 3) hero와 ghost 이동 ( 브라우저 성능 고려한 코드 작성하기 )

리팩토링: hero와 ghost class, init 분리하기

Ghost Defense ver.1 완성

관계형 데이터 베이스 RDBMSrequestAnimationFrame() - reflow, repaint

리눅스 (feat.터미널 명령어)

Git, Github,Git branch(명령어)

인스타그램 클론 코딩Refactor Html 클래스 추가Modify css 수정: feed, main-right, 변수 추가스크롤 시 새 피드 생성 댓글 표시오류 수정댓글 추가/삭제/좋아요 함수 등록피드 없을 시 없음 표시 후 함수 중단

HTTP

Ghost Defense 리팩토링

Sass, SCSS, css-in-js, css-module인스타그램 클론코딩 \- 팀으로 프로젝트 초기세팅 : reset/common/variable.css 등초기 화면 구성, module.css => Scss로 변경

협업을 위한 GIt Flow\[알고리즘]\[JS] stack- 크레인 인형뽑기 게임인스타그램 클론코딩sass 라이브러리 설치 \- 팀 프로젝트 초기세팅variables.css, common.css, reset.css 파일 추가공통 라우팅 세팅

\[알고리즘]\[JS] stack - 후위식 연산\[error] create-react-app 삭제 후 최신버전으로 설치안될때 (Need to install the following packages: create-react-app Ok to proceed? (y) )인

인스타그램 클론코딩 \- 무한 스크롤 기능 구현 \- \[React] 무한스크롤 - intersectionObserver사용하기, (Feeds.js:45 Uncaught (in promise) TypeError: Failed to execute 'observe'

\[algorythm]\[stack]\[JS] 쇠막대기\[Algorythm]\[JS]\[Queue] 공주 구하기\[React] \[인스타그램] 로그인 유효성 검사와 버튼 활성화\[React] \[인스타그램] 댓글 추가/삭제 - state 끌어올리기\[React]\[인스

\[Algorythm]\[JS]\[Queue] 교육과정 설계인증/ 인가\[React] 무한 스크롤 - 새 피드 생성하기 / 스크롤한 위치 위로 새 피드가 생성되는 문제\[React] key props를 전달해주어야 하는 이유\[React] useEffect - clea

\[Algorythm]\[JS] DFS - 전위순회, 후위 순회

\[React] useState vs useReducer\[React] 렌더링 최적화 방법 (+ React.memo, useMemo, useCallback 알아보기)\[Algorythm]\[JS] 과반수 찾기

\[React]\[인스타그램] 리팩토링 - 코드 되짚어보기 (코드 포맷 고치기)\[React]\[Instagram] 리팩토링 - 무한 스크롤 별도 컴포넌트 생성\[React]\[Instagram] setTimeout과 async/await 함께 사용하기

\[Error] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. T

\[Algorythm]\[JS] 물을 담는 최대의 면적

\[Algorythm]\[JS]\[DFS] 합이 같은 부분집합

마켓컬리 클론코딩 \- 메인페이지 상품 캐러셀 구현메인페이지 배너 무한 슬라이드 기능 구현상품 컴포넌트 생성

\[React]\[ESLint] useEffect 의존성 배열 관리하기 (This is a new ESLint rule that verifies the list of dependencies for Hooks like useEffect and similar, protec

마켓컬리 클론코딩 \- 무한 슬라이드 리팩토링/로직 수정 - memo 변수 삭제장바구니 버튼 클릭시 상품담기 기능 구현 완료

마켓컬리 클론코딩 \- 메인페이지 지연로딩 기능 구현 \- skeleton 컴포넌트 추가 \- 무한스크롤 리팩토링 - loadMoreProducts 컴포넌트 추가useEffect race condition 방지 위해 내부 비동기 함수 추가\[Reac

마켓컬리 클론코딩 \- \[React] 무한 스크롤 기능 코드 되짚어보기 ref와 useEffect - 공식문서 데모 해부하기 예시 2번 코드 뜯어보기

마켓컬리 클론코딩 \- 상품 캐러셀 슬라이드 수정MD의 추천 영역 컴포넌트 추가

마켓컬리 클론코딩 \- 장바구니 추가, 삭제, 업데이트 백엔드 요청 구현 완료 \- git conflict 수정Nav 컴포넌트 병합useParams, useNavigate

마켓컬리 클론코딩 프로젝트 회고 \- \[프로젝트 회고]\[마켓컬리 클론] 프론트엔드와 백엔드의 협업에 대한 고민, 프론트엔드로서 좋은 UX구현에 대한 고민과 배운점

마켓컬리 클론코딩 \- 프론트엔드 배포 : S3를 이용한 정적 웹사이트 호스팅로그아웃 기능 추가로그인 정보 없을 시 장바구니 페이지 클릭하면 로그인 페이지로 리디렉션 하도록 추가상품 클릭시 상세페이지로 이동 기능 추가

2차 프로젝트 - 숙박 플랫폼\[Error]\[npm] npm install 설치시 npm ERR! code ERESOLVE --unable to resolve dependency tree

2차 프로젝트 - 숙박플랫폼 \- \[2차 프로젝트]\[숙박플랫폼]\[Recoil] 모달창과 달력 전역 상태관리하기\[2차 프로젝트]\[숙박플랫폼]QueryString에 대한 고민(1) - 쿼리스트링, 어떻게 관리할까?\[Error]\[Recoil] recoilWEB

2차 프로젝트 - 숙박 플랫폼\[git] git rm --cached 깃허브에 올리지 말아야할 파일을 올렸을 때 삭제하기 (.env)

2차 프로젝트 - 숙박플랫폼 \- \[2차 프로젝트]\[숙박플랫폼] 어드민 페이지 - 이미지 업로더 만들기fileReader API, base64인코딩, formData

2차 프로젝트 - 숙박플랫폼 사이트 \- \[2차 프로젝트]\[숙박 플랫폼] 카카오 소셜로그인 (REST API 방식, Redirect URI)

\[Git]\[rebase] git merge와 rebase의 차이점, rebase는 왜 사용할까? rebase 사용법

\[Test]\[error]serializes to the same stringUnit Test란 무엇일까?

Redux 조금 더 깊이 이해해보기

리덕스 사가 알아보기

\[Error]\[Next.js] Warning : Props 'className' did not match\[Error]\[TS] A is missing in type but required in type B\_\_ does not exist on type {chil

브랜드명, 제품명 상수화는 타입 지정이 안된다?enum으로 해보기\[]대괄호 사용해 key값 명시하기

\[원티드 프리온보딩 프론트엔드]\[3주차 2차 과제] 검색창 구현하기

\[JS]\[비동기] 프로미스, async/await 다시 짚어보기

\[원티드 프리온보딩 프론트엔드]\[4주차 1차 과제] - Vanilla JS로 웹사이트 구현 & 크로스 브라우징하기

이전에 카카오 REST API를 사용한 소셜로그인 기능을 구현해본 적이 있고,구글 로그인은 파이어베이스를 통해서 진행해봤었다.회사 프로젝트에서 구글 로그인을 진행하게 되어 이번 기회에 정리해보았다.자체적으로 로그인/회원가입 서비스를 구현할 경우 사용자로부터 개인정보를