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

1. Facts (사실, 객관) 프로그래머스 1단계 코테 1문제(팀) & 스터디 프로그래머스 1단계 코테 2문제(개인) 공부 기록: 지난 프로젝트 회고록 작성, 클린코딩 특강내용 정리, 프로그래머스 문제풀이 헬스장 유산소 40분, 틈틈히 목 스트레칭 2. Feelings (느낌, 주관) 이번 주는 목이랑 허리 상태가 안좋아서 거의 공부를 못했다. 처음엔 목만 뻐근하다싶었는데 알아서 낫것지하고 방치하다가 이젠 움직이기도 힘들고, 허리두 아파서 최종 프로젝트 들어가기전에 나으려고 요 며칠 관리 빡세게 하는 중. 그래도 요 며칠 운동해주고, 스트레칭도 해주고, 실습 없이 듣기만 해도 되는건 최대한 누워서 듣는 식으로 신경 많이 써줬더니 단 며칠사이에 부쩍 좋아졌다! 이제 목도 좀 돌아가고 한결 나은듯. 이 컨..

리액트 아웃소싱 프로젝트 작업 기간: 07/17 ~ 24(6일) 요구사항 지도 API(->우리 팀은 카카오맵 이용) 상태관리 라이브러리는 RTK를 사용하고, React-query 또는 Redux Thunk 사용은 택1 진행 firebase 또는 json-server 택1 진행 (+선택사항) 무한스크롤 구현 (Intersection Observer API (Web API)를 사용해보기) React Query의 Optimistic Update 적용해보기 firebase Auth 를 사용하여, 로그인 회원가입 기능 구현 S.A. 문서 https://teamsparta.notion.site/3-REACT-PROtain-269853f0fd974eeeb6d13c852743b40d 3조 (💪🏽 REACT PROtei..

요구사항 redux, react query등을 이용하여 본문과 댓글을 가진 구조의 웹 서비스 만들기 API 명세서 본문 CRUD 구현 json-server 서버 배포 동적 라우팅 1개 이상의 Custom Hook을 구현 Form에 유효성 검증 버튼 컴포넌트 1개로 모든 버튼을 구현 development 환경에서만 redux devtool이 활성화 되도록 처리 .env 를 이용해서 API 서버의 URL 코드상에서 숨기도록 처리 (+) 로그인, 회원가입 기능 로그인, 회원가입 폼 에러 처리 JWT의 유효시간이 만료된 경우, 유저에게 재로그인 요청 인가 결과물 작업기간: 7월 6일, 10일 ~ 14일(6일) 마음 일기장 프로젝트를 제작하였다. [CBT 인지행동치료 / 감정 일기 / 자유양식] 3가지 타입으로 ..

추상화와 구체화 알 필요 없는 정보 숨기기. 필요한 정보만 노출하기. 너무 복잡한 정보를 제공해주지 않도록 적절히 추상화를 하고, 구체적인 정보를 숨기자. 추상화 수준이 너무 깊어진다면 끝까지 확인하기 어려워지기 때문에 적절한 수준의 구체화와 추상화 수준을 유지. // 추상 -> 구체 import { 컵들기 } from 'cup.js' 컵들기(); // cup.js // 높은 추상화 수준 function 컵들기(){ 팔뻗기(); 컵쥐기(); 컵들어올리기(); } // cupDetail.js function 팔뻗기(){ 컵방향으로손방향맞추기(); 손움직이기(); } function 컵쥐기(){ 손피기(); 손펴서컵에갖다대기(); 손가락웅크리기(); 손에힘주기(); } function 컵들어올리기(){ 손고..

1. 긍정 조건 사용하기 //bad const isNotBoy = false; //good const isBoy = true; // ! 표기가 잘보이지 않고 부정의 부정이라 조건문을 잘못 해석할 여지가 다분함 if(!isNotBoy){} if(isBoy){} // 꼭 부정문을 사용해야할때는?? const isBoy = !isNotBoy // if 문 바로 상단에서 긍정 조건으로 변경해주기! if(isBoy){} 2. 조건문에 이름 붙이기 중요한건 어떤 조건들이 있느냐의 나열 (X) -> 그래서 어떤 조건인데? (O) //bad if(name === 'js' && obj.someProperty.title === "sparta" && height < 180) {...} //good const isJsTuto..

1. 문제 1단계부터 기록하고 있는데, 팀 스터디에서 푼 0단계 문제인데 어려워서 기록 https://school.programmers.co.kr/learn/courses/30/lessons/120861 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 나의 풀이 처음엔 switch문 돌리고 난 뒤에 board길이로 잘라주는 로직이었는데, case8에서 오류 남. 그렇게하면 맵의 끝에서 돌아오는게 안되는 이슈가 있다고 한다. 그래서 아래 방식으로 case에 if문 추가해줘서 board길이 검증해주도록 변경함 function solution(keyinpu..

1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/82612 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 나의 풀이 function solution(price, money, count) { for (let i = 0; i = 0 ? 0 : Math.abs(money); } 3. 다른 사람 풀이 프로그래머스의 다른 사람의 풀이를 분석함 case 1) 가우스 공식 ?? 가우스가 뭔데 functi..

1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12917 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 나의 풀이 function solution(s) { return s.split('').sort((a, b) => a == b ? 0 : a > b ? -1 : 1).join(''); } 3. 다른 사람 풀이 프로그래머스의 다른 사람의 풀이를 분석함 case 1) 정렬 후 reverse function solution(s) { return s .split("") .sort() .re..

1. 프로젝트 생성 https://create-react-app.dev/docs/adding-typescript # yarn을 사용하는 경우 yarn create react-app my-app --template typescript # npx를 사용하는 경우 npx create-react-app my-app --template typescript 2. 리액트 프로젝트와 동일하게 yarn start 명령어로 프로젝트를 실행함 yarn start 3. tsconfig.json 파일 수정 // tsconfig.json "target": "ES2016" 수정 4. 타입 정의 패키지 설치 # react-router-dom yarn add react-router-dom @types/react-router-dom #..