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

1. Facts (사실, 객관) 프로그래머스 0단계 코테 1문제 & 팀 스터디 프로그래머스 1단계 코테 1문제 투두리스트 과제 Lv2에 추가로 리덕스 청크+타입스크립트 적용해 봄 리드미 문서 작성 선발수업: TypeScript Tips https://school.programmers.co.kr/learn/courses/30/lessons/181871 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr https://console-log.tistory.com/181 [프로그래머스 Lv. 1] 가운데 글자 가져오기 1. 문제 https://school.progra..

1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12903 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 나의 풀이 slice 이용하여, 내림값과 올림값으로 가운데 위치한 값들을 가져옴 function solution(s) { const center = (s.length - 1) / 2; return s.slice(Math.floor(center), Math.ceil(center)+1); } 3. 다른 사람 풀이 프로그래머스의 다른 사람의 풀이를 분석함 case 1) substr 이용..

클린 코드는 무엇인가? 왜 써야 하는가 ? 클린코드는 유지보수와 디버깅에 용이 준수한 성능과 명확한 의도를 가진 코드. 내가 적은 코드에 의도를 담고 그 의도를 다른사람으로 하여금 납득할 수 있게 하는 것. 코드 컨벤션 // camelCase // 거의 대부분의 변수 함수 선언에 사용 const thisIsVariable = true; const goToHome = () => { return; } // kebab-case // 페이지, pathname, 폴더명, css className 에 사용 pages ㄴ todo-list ㄴTodoList.tsx ㄴ todo-detail ㄴTodoDetail.tsx // css className: class-name, .item-id // snake_case // ..

1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/76501 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 나의 풀이 reduce를 이용하여 계산. if문으로 더하기와 빼기를 조건부 적용하였다. function solution(absolutes, signs) { return absolutes.reduce((calc, curr, idx) => { if(signs[idx]) return calc += curr; return calc -= curr; }, 0) } 3. 다른 사람 풀이 프로그..

1. Facts (사실, 객관) 투두리스트 과제 Lv2 : 리덕스 툴킷+타입스크립트 최종 프로젝트 팀빌딩 발제 프로그래머스 0단계 코테 1문제 & 팀 스터디 프로그래머스 1단계 코테 1문제 클린코드 특강_2. 의미 있는 변수명 짓기 https://school.programmers.co.kr/learn/courses/30/lessons/181912 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr https://console-log.tistory.com/179 [프로그래머스 Lv. 1] 음양 더하기 1. 문제 https://school.programmers.c..

1. Facts(사실) 팀 프로젝트 제출 및 발표회 Typescript 문법 종합반 강의 완강 및 정리노트 작성 코딩애플 타입 스크립트 무료 부분만 강의 들음 코딩알려주는누나 리액트 타입스크립트 유튜브 강의 타입 스크립트 가이드 및 실습코드 투두리스트 과제 Lv1 : 타입스크립트를 이용해서 투두리스트 만들기 선발 수업: Zustand, jotai (상태관리 라이브러리) 프로그래머스 코테 0단계 & 팀 스터디 프로그래머스 코테 1단계 문제풀이 2. Feelings & Findings(느낌과 배운 점, 주관) 주말까지 달렸던 프로젝트를 월요일에 드디어 제출하고 발표까지 무사히 마쳤다..! 조장님께서 발표를 넘나 재밌게 진행해주셨음😺. 결과물을 보니 뿌듯하고 좋았다 ㅎㅎ Typescript 문법 종합반 강의를..

1. Facts (사실, 객관) 프로그래머스 0단계 코테 1문제 & 팀 스터디 프로그래머스 1단계 코테 1문제 리액트 타입스크립트 유튜브 강의 -코딩알려주는누나 타입스크립트 투두리스트 과제 -Lv1 적용 완 https://school.programmers.co.kr/learn/courses/30/lessons/181866 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr https://console-log.tistory.com/174 [프로그래머스 Lv. 1] 콜라츠 추측 1. 문제 https://school.programmers.co.kr/learn/cou..

셋팅 1. 타입스크립트로 프로젝트 생성하기 react typescript 구글링 tyscriptlan.dorg 링크 ㄱㄱ에서 확인하면 명령어 확인할 수 있음 npx create-react-app my-app --template typescript 2. tsconfig.json "target": "es6"로 변경 lib에 es6 추가 module은 esnext 로 두면 됨 3. 리액트의 함수 컴포넌트에 타입 지정 ㄱ 함수의 매개변수도 타입을 지정하고, 함수의 리턴 값도 타입을 지정해주어야 함 const App:React.FC = () => { return... 실습 코드 레스토랑정보 보여주기 예제 학습 내용: 객체 타입 정의, 타입, useState, 제네릭 문법, 함수, interface, extends..

1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12943 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 나의 풀이 function solution(num) { let answer = 0; while(num > 1) { num%2 == 0 ? num /= 2 : num = num *3 +1 answer++; if(answer >= 500) { num = -1; answer = -1; }; } return answer; } 3. 다른 사람 풀이 프로그래머스의 다른 사람의 풀이를 분석함 ..

1. Facts (사실, 객관) 프로그래머스 0단계 코테 1문제 & 팀 스터디 프로그래머스 1단계 코테 3문제 코딩애플꺼 타입 스크립트 무료 강의부분만 4개 들었다 타입 스크립트 가이드 읽고, 실습 코드 따라 쳐 봄 타입스크립트 투두리스트 과제 시작! 타입 스크립트로 프로젝트 설치하고, 폴더 구조 셋팅, 스타일드 컴포넌트, 라우터 라이브러리 준비 https://school.programmers.co.kr/learn/courses/30/lessons/181887 2. Feelings (느낌, 주관) 타입 스크립트 아직 모르는게 많이 남은 느낌인데????????? 뭘 모르겠는지 모르겠는..?????????????????? 다음 주에 타입 스크립트 특강 있댔으니까.. 일단 모르겠는대로 프로젝트 진행해봐야지 니..