Lennon FE

깃허브는 모두 알다시피 리모트 환경에서 협업을 하기 쉽게 만들어져 있다. 깃으로 협업한다 협업한다 하는데 어떻게 협업하는지,좋은 협업 방식은 무엇일지 포스팅에서 알아보도록 하자. 먼저 해당 포스팅을 보고 기본적인 깃허브와 소스 코드를 연결해보도록 하자! https://parkparkpark.tistory.com/53 [Git] vscode 연동 및 branch 생성, commit / PR(Pull requests) 하는 법 vscode 연동 vscode를 연동시키기 위해 본인의 프로젝트인 Repository를 하나 생성하자. 생성한 Repository에 들어가서 아래 사진처럼 code를 누르면 본인의 저장소 clone 주소를 얻을 수 있다. 해당 내용을 parkparkpark.tistory.com 1. ..

프로젝트를 버전 관리하다 보면 특정 브랜치에 원하는 파일들이 존재하고, 해당 파일만 현재 브랜치에 가져오고 싶을 경우가 생길 것이다. 이럴 때 특정 브랜치에서 전체 파일들을 pull 하게 되면 괜히 충돌이 일어날 수 있고 이를 해결하는 공수가 커질 수 있다. 이럴 때 알면 좋은 게 특정 파일을 pull 하는 방법이다. 먼저 현재 브랜치에서 git fetch --all 을 해준다. 그 후 git checkout origin/master -- path/to/file 를 해주면 된다. 예로 REC-13에 있는 브랜치에서 src/pages/workspace 안에 workspace.jsx를 가져온다고 하면 git checkout origin/REC-13 -- src/pages/workspace/workspace...

이번 글에서는 실무에서 깃을 통해 어떤 형식으로 프로젝트 버전관리를 하는지 포스팅 해보려 한다. 많은 방법론 중 실무에서 많이 쓰인다는 Git flow에 대해 알아봅시다! (대형 서비스 기업들이 대부분 사용!) 💁🏻 GIt flow ? 아래 그림은 깃 플로우를 설명할 때 가장 많이 쓰는 그림? 이다. 한 번 살펴보고 개발자의 입장에서 어떤 플로우일지 예상해보자. master branch 실제 운용되고 있는 서비스(안정적이어야 함 => 맘대로 merge되면 큰일...) develop branch 다음 버전 개발을 위해 실제 개발되고 있는 브랜치! 다음 버전이 준비되면 master에 merge됨 feature branch 다음 버전에 들어갈 기능 개발을 위해 develop 브랜치에서 새로운 브랜치를 생..

리액트를 사용해 코드를 작성하다보면 서버통신 및 컴포넌트 라이프 사이클 차이에 따라 null, undefined를 반환해 가끔 오류가 발생하곤 한다. 이는 그래도 친절하게 오류 코드로 알려주기에 해결하긴 쉬울 수 있지만, 존재 또는 존재하지 않는 요소와 메서드들에 대해 안전하게 접근할 수 있도록 도와주는 옵셔널 체이닝 연산자를 통해 더 쉽게 해결할 수 있다. 아래 코드에서 span안의 text값이 몇이 나올지 예상해보자. import React from 'react' const getNonEmptyCategories = (catrgories) => ( categories.filter((category) => category.items > 0); ) // categories = [ {items: 5, id..

Array를 순회하는 방법엔 여러가지 방법이 있다. 고전적이라면 const arr = [1,2,3,4,5] for(let i = 0; i { console.log(v); }) forEach를 사용할 것이다. 또는, 이터러블, 이터레이터의 개념을 알거나, 뭔가 이렇게 쓰는 게 좋다고 들으셨다면 const arr = [1,2,3,4,5] for(const a of arr) { console.log(a); } for of..

고차함수는 함수를 값으로 다루는 함수이다. 함수를 인자로 받아서 실행하는 함수들을 살펴보자. const funcAdd = f => f(1); const add10 = a => a + 10; console.log(funcAdd(add10)); 위 funcAdd 함수는 console.log에서 인자로 add10함수를 받는다. 당연하게 결과는 11로 예상할 수 있다. 함수를 만들어 리턴하는 경우도 있다. 이런 경우를 클로저를 만들어 리턴하는 함수라고 말한다. 함수가 함수를 만들어서 리턴할때는 결국은 클로저를 만들어서 리턴하기 위해 사용한다. 아래 예시를 확인해보자, 우리가 써보지 못한 느낌의 arrow Func 로 적혀있다. const add = a => b => a + b; const add10 = add(..

react, javascript에서는 보통 sort를 이용해 정렬을 많이한다. 그러나 sort를 사용하면 모두가 알다시피 코드 가독성이 많이 떨어질 수 밖에 없다. 또한 sort는 이상한 문제점이 있다. const arr = [1,3,20,5]; const sortedArr = arr.sort(); console.log(sortedArr) // [1,20,3,5] sort를 그냥 사용하면 위처럼 우리가 예상한대로 동작하지 않는다...(자바스크립트... ㅠ.ㅠ🥲) 그로인해 자바스크립트를 사용하는 개발자라면 보통 기본 sort를 바로 사용하지 않고 (a,b) 두 인자를 비교하는 함수를 만들어 sort를 사용한다. const arr = [1,3,20,5]; const sortedArr = arr.sort((a..