Programming 65

Redux

리덕스가 필요한 이유 유지보수, 디버깅을 어렵게하는 불필요한 props drilling을 없애고 언제든 global state가 필요할 때마다 store에 접근하여 사용할 수 있음 리덕스 설치 yarn add redux react-redux 폴더 구조 // src/redux/config/configStore.js // 원래 있던 코드 import { createStore } from "redux"; import { combineReducers } from "redux"; // 새롭게 추가한 부분 import counter from "../modules/counter"; const rootReducer = combineReducers({ counter: counter, // { switch (action..

Programming 2023.07.04

[WIL] week3 회고

Keep 시간 지키며 계획된 시간에 공부하기 React 선행학습 / 스터디 수면시간을 줄여 몰입하는 공부 시간 증가 아침 운동 (월수금-테니스, 화목토일-헬스) Problem 타입스크립트 챌린지 실패 정규시간 이외의 차별화를 가져갈 포인트 필요 강의를 보는 시간 집중도 하락 우선순위를 두고 공부하지 못함 알고리즘 문제풀이 시간이 줄어듦 Try(우선순위) 우선순위를 두고 당일 계획대로 공부 다음 타입스크립트 챌린지 수강 시간표 안에서 끝까지 몰입하기 강의 시간 집중도 높이기 알고리즘 공부에 매일 30분 이상 투자 3주차를 마치며 아직은 아는 개념들로 제출하는 과제가 많다보니 일찍 과제를 제출하고 그만큼 풀어지는 듯 하다 우선순위를 두어 공부하고 매일매일 시간표를 정해 차주는 전역 상태관리, 커스텀 훅, 최..

Programming 2023.07.02

[알고리즘] 프로그래머스 크기가 작은 부분 문자열

[프로그래머스에서 문제 보기] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr My Solution / Try t.length에서 p.length의 길이를 뺀 것과 같을 때까지 반복 str.substr() 활용하여 문자열 추출 인덱스부터 p.length만큼 추출 function solution(t, p) { let result = 0; for (let i = 0; i

Programming 2023.07.02

[TypeScript] Generics, 노마드코더 타입스크립트 챌린지

[Generics - 타입스크립트 공식문서 참고] Generic이란 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법 제네릭 사용 이유 /* type SuperPrint = { (arr: nuber[]):void (arr: boolean[]):void (arr: string[]):void (arr: (number|boolean)[]):void } */ // 위 타입을 제네릭을 활용하면 코드가 간결해지고 재사용성이 높아진다 // 아래는 제네릭 사용 type SuperPrint = { (arr:[]) } const superPrint:SuperPrint = (arr) => { arr.forEach(e => console.log(e)) } supe..

Programming 2023.06.30

[알고리즘] 프로그래머스 삼총사

프로그래머스 문제 링크 My Solution / Try 삼중 반복문을 돌며 더해서 0이 되는 값을 찾는다. 해당 인덱스 요소를 중복해서 더할 순 없으니(찾을 필요 X) 시작 인덱스는 1씩 증가하고, 마지막 인덱스는 1씩 감소해서 비교한다 function solution(number) { let result = 0 for(let i=0; i < number.length-2; i++) { for(let j=i+1; j < number.length-1; j++) { for(let k=j+1; k < number.length; k++) { if(number[i] + number[j] + number[k] === 0) { result++ } } } } return result } Advanced Solution ..

Programming 2023.06.30

[알고리즘] 프로그래머스 콜라 문제

프로그래머스 문제 링크 My Solution / Try while 반복문, n이 a보다 작은 순간 종료 n은 a만큼 줄고 b만큼 더해짐을 반복 받을 수 있는 콜라 sum은 b만큼 더해짐을 반복 function solution(a, b, n) { let sum = 0 while (n >= a) { n = n - a + b sum = sum + b } return sum; } Advanced Solution 재귀를 이용한 풀이 n이 a보다 작다면 0 출력 => 재귀 탈출문 콜라병의 합계는 n을 a로나눈 몫에 b를 곱함 solution 함수는 다시 a와 b 그리고 n을 a로 나눈 나머지와 합계를 더한 것으로 재귀(n이 a보다 작아질 때까지) function solution(a, b, n) { if (n <..

Programming 2023.06.29

Code Convention (Style Guide)

Airbnb Style Guide Naming convention 단일 문자 이름 사용X, 이름 설명 // bad function q() { // ... } // good function query() { // ... } 객체, 함수, 인스턴스 이름 camelCase 사용 // bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {} 생성자나 클래스 이름을 지정할 때만 PascalCase 사용 // bad function user(options) { this.name = options.name; } const ..

Programming 2023.06.27

[React] Virtual DOM

Virtual DOM React에는 virtual DOM이라는 가상의 DOM 객체가 존재 실제 DOM 객체에 접근하여 조작하는 대신 Virtual DOM 객체에 접근하여 전후를 비교, 바뀐 부분을 적용 Virtual DOM 활용 이유 DOM은 브라우저가 트리구조로 만들어진 객체 모델이기 때문에 JavaScript는 쉽게 DOM 객체에 접근할 수 있고, 조작 가능 프로그래밍 언어로 조작하는 DOM은 애플리케이션 UI 상태가 변경될 때마다 전체 업데이트. 이런 렌더링은 브라우저의 구동 능력에 의존하기 때문에 DOM의 조작 속도는 느려짐 일정 부분이 바뀐다면 전체가 아닌 바뀐 부분만 렌더링 하기 위해 Virtual DOM이 등장 Virtual DOM 객체는 화면에 표시되는 내용을 직접 변경하는 것이 아니라 실..

Programming 2023.06.26

[WIL] week2 회고

Keep 시간 지키며 계획된 시간에 공부하기 1일 1시간 알고리즘 문제 풀이 React 선행학습 수면시간을 줄여 몰입하는 공부 시간 증가 아침 운동 (월수금-테니스, 화목토일-헬스) Problem 타입스크립트 공부가 지체됨 알고리즘 테스트에서 가장 쉬운 문제 오답 제출 강의를 보는 시간 집중도 하락 지난주보단 나아졌지만 시간표대로 철저하게 움직이지 못함 Try(우선순위) 쉬운 문제도 꼼꼼히 읽고 입력값 / 출력값 잘 확인하기 차주 월요일부터 타입스크립트 챌린지 수강하기 시간표 안에서 끝까지 몰입하기 강의 시간 집중도 높이기 2주차를 마치며 하루 12시간 이상 공부하려 노력하다 보니 지난주보다 집중하는 시간이 길어졌다. 알고리즘 문제들도 다시 익숙해지기 시작했고 블로깅 시간이 짧아지고 직접 코딩하는 시간은..

Programming 2023.06.26

효과적인 코드리뷰 방법

리뷰 규칙 1. 왜 개선이 필요한지 충분한 이유 설명 주관적이거나 추상한 표현은 지양 리뷰이가 개선의 필요성을 느낄 수 있도록 구체적인 이유 작성 예) const data = [ ['데이터베이스', 'A', 3], ['교양영어', 'B+', 1], ['철학', 'A', 2] ]; “data라는 이름은 현재의 자료구조가 무엇인지 그 의도를 알기가 어렵네요. 학점 정보를 담고 있는 자료구조 같은데 이와 관련된 변수명을 짓는다면 현재 정의한 자료구조가 무엇인지 그 의도를 쉽게 파악할 수 있을 것 같아요.” 2. 답을 알려주기보다 개선 방법을 선택하고 고민하게끔 답을 알려주는 코드 지양 리뷰이 입장에서 학습할 기회를 갖고 스스로 코드를 리팩토링할 수 있게 함 예) const result = []; arr.for..

Programming 2023.06.26