FE개발 공부 시작: 23년 4월 10일

Node.js https://github.com/coreybutler/nvm-windows/releases페이지로 이동 스크롤 조금 내려서 Assets섹션의 nvm-setup.exe 다운로드 및 실행 설치 완료되면 윈도우 시작버튼 - powershell 검색 실행된 PowerShell에서 nvm install [설치할 노드 버전] 입력하여 Node.js 활성화ㄱ PowerShell에서 npm -v명령어로 npm이 제대로 설치됐는지 확인할 수 있음 npm으로 글로벌하게 TypeScript 설치하기 PowerShell터미널 종료하고 윈도우 시작버튼 - cmd 검색 실행된 명령 프롬프트에서 npm install typescript -g를 실행하여 TypeScript를 글로벌하게 설치 명령 프롬프트에 tsc 명..

1. Facts (사실, 객관) 프로그래머스 0단계 코테 1문제 & 팀 스터디 프로그래머스 1단계 코테 1문제 Typescript 문법 종합반 강의 완강❗ 정리 노트 작성 완❗❗ 선발 수업: Zustand, jotai (상태관리 라이브러리) 클린코드 특강_1. 클린 코드는 무엇인가 ? 왜 써야 하는가 ? https://school.programmers.co.kr/learn/courses/30/lessons/181840 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. Feelings (느낌, 주관) 오늘은 카페로 출근해서 강의 달렸다. 집중 잘 돼서 쭉..

1. Facts (사실, 객관) 발제, 팀 규칙 및 계획표 등 작성 코테 스터디 Lv 0 Typescript 문법 종합반 강의 https://school.programmers.co.kr/learn/courses/30/lessons/181863 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. Feelings (느낌, 주관) 오늘부터 주특기 플러스 주차가 시작되면서, 새로운 조원들과 함께 타입 스크립트를 배우게 된다..! 강의 듣는데 계속 잠들어부려서 진도를 많이 못뺐다. 그치만 어제오늘 잘 쉬어서 낼부턴 다시 진도 바짝 뺄거임 타입 스크립트도 재밌겠다 ..

1. Facts(사실) 지도api를 이용한 팀 프로젝트를 진행하였다 ! ! 우리 동네의 헬스장 등 운동시설의 후기를 남길 수 있고, 평점을 통해 비교 분석할 수 있는 커뮤니티. 내가 맡은 역할은 카카오맵 api를 이용하여 메인페이지에서 운동시설 관련 데이터를 뿌리고 다루는 걸 담당하였다. 카카오맵 api 지도 연결 지도에 헬스장 마커 표시하기 사용자가 지도맵을 핸들링하여 중심 좌표가 변경되면 해당 지역의 헬스장 정보로 업데이트 상세 페이지에 props로 상세 정보 전달 메인페이지 styled-components로 스타일 입힘 지도맵 리팩토링 마커의 인포윈도우에서 상세보기 기능 가게 검색 기능 현재 맵의 행정 구역 정보 받아오기 행정 정보를 토대로 카테고리에 해당하는 가게 검색 행정동 기준 카테고리별 TO..

1. Facts(사실) json-server와 리액트 쿼리를 이용하여 개인 과제로 인지행동치료(CBT)를 적용한 마음 일기장을 만들어봤다. API 명세서 작성 일기 CRUD 구현 체크박스 Custom Hook 회원가입, 로그인, 로그아웃 회원가입 폼 유효성 검사 로그인 서버 에러 처리 배포: glitch(서버), vercel 선발수업: Custom Hooks 실습 2. Feelings & Findings(느낌과 배운 점, 주관) 수정 폼과 작성 폼을 동일한 컴포넌트로 사용하고 싶었는데, 수정 시 데이터를 get해오는 부분이 필요해서 넣은게 작성 시엔 오류가 나서, 결국 수정 폼과 작성 폼을 분리했다. 이 부분은 다음에 꼭 튜터님께 더 여쭤보고 넘어가야겠다. ⭐⭐⭐ 배포를 한번도 안해봐서 막연해서 두려웠는..

1. Facts(사실) 프로그래머스 0단계 코테 및 스터디 리액트 심화강의: Redux Toolkit, json-server, HTTP, axios, thunk, custom hook, react query, throttling & debouncing, 쿠키, 세션, 토큰, JWT 리액트 선발 수업: 1:N / N:M 관계, 좋아요 기능 만들기 실습, Custom Hooks 이론 개인프로젝트 초기화 및 셋팅 2. Feelings & Findings(느낌과 배운 점, 주관) 쿠키, 세션, 토큰, JWT가 아직 감이 안오고, 잘 모르겠다... ,, 어떻게 공부하면 좋을까..? throttling & debouncing 배운 걸 앞으로의 프로젝트에서 함 써먹어보고싶다 custom hook을 어떻게 이용해야 리..

1. Facts (사실, 객관) 리액트 심화강의 전체 복습 개인프로젝트 초기화 및 셋팅 선발 수업: 좋아요 기능 만들기 2. Feelings (느낌, 주관) 와.. 복습하고는 좀 알겠다싶었는데 선발 수업 때 이번 주에 배운 내용 나오는데 막상 맞딱뜨리니 1도 모르겠다 아직 처음이라 그런거겠지? 3. Findings (배운 점) 하면 할 수록 쉽지 않군.. 4. 자기선언 금토일은 다 약속 있어서 프로젝트 못하는데 월화수목 4일동안 다 만들 수 있겠지..? 내일 결석이지만 버스 이동하면서 틈틈히 JS 강의라도 들어봐야겠다.

Throttling 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 => 주로 사용되는 예: 무한스크롤 Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것 => 주로 사용되는 예: 입력값 실시간 검색, 화면 resize 이벤트 메모리 누수(Memory Leak) 필요하지 않은 메모리를 계속 점유하고 있는 현상. 리액트로 만든 SPA 웹사이트는 페이지 이동 전에 setTimeout 으로 인해 타이머가 동작중인 상태에서 clearTimeout을 안해주고 페이지 이동 시 컴포넌트는 언마운트..

청크&사가(기존) -> 리액트 쿼리(요새 많이 쓰는듯) 리액트 쿼리는 모듈 건드리지 않고 함. 보일러 플레이트 만들다가 오류날 일이 없음 리액트 쿼리의 사용방법이 thunk 대비 쉽고 직관적임 키워드 Query: 어떤 데이터에 대한 요청 Mutation: 어떤 데이터를 변경 Query Invalidation: Query를 invalidation. 즉, 무효화 시킨다 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있어요. 그렇기 때문에 최신 상태가 아닐 수 있습니다. 그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 하겠죠. 이런 과정을 React Query에서는 알아서 해준답니다 준비 yarn add axios yarn add json-server db.json파일 ..

반복되는 로직이나 중복되는 코드를 우리만의 훅, 즉 커스텀 훅을 통해서 관리할 수 있다. 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅을 말함❗ 보통 src 폴더에 hooks 라는 폴더를 생성해서 커스텀 훅들을 보관. 커스텀 훅을 만들때 이름은 내 마음대로 해도 상관이 없으나, 파일의 이름 앞에 use 라는 키워드를 붙여줘야 함. (src/hooks/useInput.js) import { useState } from 'react'; const useInput = () => { // 2. value는 useState로 관리하고, // state const [value, setValue] = useState(''); // 3. 핸들러 로직도 구현합니다. // handler const hand..