본문 바로가기
Git & GitHub (4) - rebase 2020. 5. 12. 같이 협업하는 사람이 몇 없다면 굳이 rebase를 쓰지 않아도 되지만, 팀 단위가 몇 백명 이상이 됐을 때 각자 commit을 2-3개만 날려도 검토해야 할 것이 수백개로 늘어나도 merge 할 때마다 commit이 새로 쌓인다. 따라서 git의 history를 깨끗하게 사용하기 위해 rebase가 필요하다. rebase ㅁ base: 기초, 기본 ㅁ re-base: 기초를 다시 세우다 => 현재 내 branch를 master와 동일시 하고(같은 base 사용), commit을 하나로 합치는 작업이다. 단점이 있다면 conflict가 엄청 많이 난다. 각 commit 마다 생기는 conflict를 단계적으로 해결해야 하고, 잘 못하다간 내가 썼던 코드가 통째로 없어져 버릴 수 있으니 충분히 숙련 후 사..
배열에서 중복 제거하기(Set) 2020. 5. 11. 가끔 중복을 제거해야 하는 상황이나 알고리즘 문제가 있다. 예전이라면 for문 돌려서 찾은 다음에 제거했을 텐데 Set이라는 것을 알게 되었다. 사용법은 무척 간단하다. let num = [2, 1, 3, 21, 3, 4, 5, 1, 2]; let uniqueNum = [...new Set(num)] console.log(uniqueNum) // output: [2, 1, 3, 21, 4, 5] let str = ['a', 'b', 'c', 'a', 'd'] let uniqueStr = [...new Set(str)] console.log(uniqueStr) // output: ["a", "b", "c", "d"] 위처럼 Set은 숫자, 문자 배열에서 모두 가능하다. 우선 아래의 코드를 살펴보자. let..
Redux 소개 (1) - 필요성 2020. 5. 6. 리덕스(Redux)는 Flux archiecture를 만드는 '상태관리' 라이브러리이다. 컴포넌트끼리 데이터 및 스테이트 관리를 쉽고 효율적으로 해줄 수 있게 만들어준다. 우선 간략하게 MVC에 대해 알아보자. MVC는 Model View Controller의 약자로 애플리케이션을 세 가지의 역할로 구분한 개발 방법론이다. 사용자가 Controller를 조작하면, Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 View가 시각적 표현을 담당해서 사용자에게 전달해 준다. React는 MVC를 모두 담당하는 Angular와 Vue와 달리 오직 View를 담당하고 있다. 프로젝트의 규모가 작을 때에는 부모 컴포넌트(ex. APP.js)가 중간자 역할을 해주는 것에 아무런 지장이 ..
Object (3) - 접근법 2020. 5. 5. 예전 글(2020/03/25 - Object (1) - 접근, 할당)에서 Object 접근 방법에 대해 쓴 적이 있다. 해당 글에서는 객체의 키 이름으로 직접적인 접근을 했다. 하지만 만약 어떠한 이유로 객체의 모든 key나 value에 한번씩 접근해야 한다면 어떻게 해야 할까? 객체 값 모두를 하나하나 찍어보기엔 시간이 너무 오래 걸린다. 정말 다행히 객체는 배열처럼 반복할 수 있다. 우선 객체의 key와 value에 어떻게 접근하는지 살펴보자. const obj = { name: 'kmj', age: 17, gender: 'female', likeMovies: true } console.log(Object.keys(obj)); // output: ["name", "age", "gender", "lik..
[자바스크립트/Lv1] 나누어 떨어지는 숫자 배열 2020. 5. 3. https://programmers.co.kr/learn/courses/30/lessons/12910 [ 문제 ] 더보기 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,..
[React/에러] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 2020. 5. 1. 리액트를 시작하거나 git clone을 받은 후, npm install을 하고 npm start를 했음에도 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 에러가 뜰 때가 있다. 그럴 땐 npm을 업데이트를 해준 후, 다시 실행시킨다. npm update npm start 이때도 실행이 되지 않는다면, npm install -g react-scripts 를 실행하면 된다.
Git & GitHub (3) - branch 2020. 5. 1. git remote add origin https://github.com/계정/repo 브랜치 관리는 git에서 필수이다. 만들 것이 있다면 해당 브랜치를 새로 만들고, push 후 merge가 끝났다면 해당 브랜치는 삭제하고 다시 새로 브랜치를 생성하여 사용하는 것이 좋다. Git에서는 local 브랜치와 remote 브랜치로 나뉠 수 있다. 사용이 완료된 브랜치는 삭제 할 때 두 가지 브랜치 모두 삭제하는 것이 혼선을 방지할 수 있다. 브랜치 생성 git checkout feature/브랜치명 브랜치 삭제 git branch --delete feature/브랜치명 local 브랜치를 삭제하고, remote 브랜치를 삭제하기 위해 한번 push해 준다. git push origin :feature/브랜..
CRA에 ESLint와 Prettier 적용하기 2020. 4. 30. React의 코드는 최신 자바스크립트 코드로 작성하는 것이 일반적이지만, 아직 모든 브라우저에서 이를 지원해 주고 있지 않다. 따라서 웹팩이나 바벨을 설치하고 설정해야 하는데 페이스북에서 웹팩 없이 CRA를 제공해 주고 있다. CRA(Create-React-App)는 ES6 자바스크립트를 브라우저가 이해할 수 있는 ES5 코드로 변경해주는 툴이다. 리액트 초기 세팅 하기(2020/04/14 - React 초기 설치 명령어) 그럼 다시 ESLint와 Prettier가 무엇인지 알아보자. ESLint는 syntax나 code를 검사하는 도구(linting utiliy)이다. 특히 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어이기에, 사소한 타이핑 실수로 잘못된 프로그램을 배포할 수 있다. 따라서 수..

티스토리툴바