전체 글

얕은 복사와 깊은 복사에 대해 알아보기 전에 잠시 데이터 타입을 짚고 넘어가자. 기본형(primitive) 타입: number, string, boolean, undefined, null 등 참조형(reference) 타입: object, array, function, date, regexp 등 결론부터 말하자면 얕은 복사: 객체의 참조값(주소)를 복사 깊은 복사: 객체의 값 자체를 복사 예시와 함께 자세히 살펴보자. 얕은 복사 (Shallow Copy) 1. Object.assign() var obj1 = { a: 10, b: { c: 'abc', }, }; var obj2 = Object.assign({}, obj1); obj2.a = 20; obj2.b.c = 'def'; console.log(ob..

자바스크립트에서 ==와 ===는 비슷해 보이지만 서로 다른 비교 연산자이다. ==는 동등성을 비교하고 ===는 일치성을 비교하는데, 무슨 말인지 조금 더 자세히 살펴보자. == 영어로는 loose equality를 비교한다고 표현한다. 말 그대로 느슨한 동등성을 비교하는 연산자이다. === 보다 느슨하게 동등성을 비교하기 때문에 강제 형변환을 수행한다. 예를 들어 숫자 77과 문자열 '77'을 == 연산자를 사용하여 비교하면 실제로는 타입이 다른 두 값이지만 자바스크립트가 수행한 강제 형변환 때문에 true 값으로 동등하다는 결과가 나온다. 77 == '77' /*true*/ === 영어로는 strict equality를 비교한다고 표현한다. 말 그대로 엄격한 동등성을 비교하는 연산자이다. == 보다 엄..

개발 협업을 하는 과정에서 사용되는 브랜치 전략들 중 많은 곳에서 사용되고 있는 Git Flow 전략에 대해 간단히 살펴보자. 우선 브랜치 전략이란 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 워크플로우다. 브랜치 전략이 없다면 어떤 브랜치가 최신 브랜치인지, 어디에 push를 해야 하는지, 어떤 브랜치를 끌어와서 개발을 시작해야 하는지 등 여러 혼선이 일어날 수 있다. 가장 널리 사용되는 브랜치 전략 두 가지로는 Git Flow 전략과 GitHub Flow 전략이 있다. Git Flow 전략은 Vincent Driessen이 제시한 브랜치 전략이다. 아래 링크에서 그가 쓴 글을 확인해볼 수 있다. A successful Git branching model In th..

GitHub에서는 두 개의 브랜치를 머지(merge)하는 세 가지의 방법이 있다. 각 방법이 무엇인지, 그 특징은 무엇인지 알아보자. 1. Create a merge commit 두 브랜치의 변경 사항을 모두 유지하면서 병합 각 브랜치의 변경 사항이 과거의 커밋으로 보존되고, 새로운 커밋이 추가되어 최종 병합이 완료 장점 브랜치의 히스토리 모두 유지하면서 변경 사항을 병합할 수 있음 프로젝트의 진행 상황을 명황하게 이해하고 추적 가능 모든 커밋들의 커밋 아이디가 바뀌는 경우가 없기 때문에 squash와 rebase 방식에 비해서 비교적 사용이 쉬움 단점 커밋 히스토리가 복잡해질 수 있음 팀이 커질수록 이 복잡성을 빠르게 증가하게 됨 2. Squash and Merge 브랜치에서의 모든 변경 사항을 하나의..

Week 1 위클리 미션 템플릿 코드를 새로운 파일에 카피해 적으며 내가 쓴 코드와 템플릿 코드를 비교해 보았다. 스스로 피드백 해 본 내용 태그를 남발하지 말자. 다른 페이지로 연결되는 버튼들은 태그가 아니라 태그로 감싸자. , , 같은 태그들에 클래스를 주자. 굳이 불필요한 로 감쌀 필요가 없다. 반복되는 특징들은 하나의 클래스로 묶자. (센스 있게 하려면 연습이 필요할 듯) 텍스트들에 최대한 시맨틱 한 태그를 사용하자. 아무 텍스트에나 같은 태그 갖다 붙이지 말자. grid로 배치할 때 grid-area로 각각 요소에 이름을 준 후에 grid-template으로 배치하는 것에 익숙해져 보자. :nth-of-type(odd), nth-of-type(even)도 활용해보자. 새롭게 알게 된 것들 1. ..

공간에 대한 소개다. 어느 정도의 정체성은 가지고 싶어서 "소개"라는 제목의 글로 나와 이 공간에 대한 소개를 해본다. 주기적으로 수정될 글이 될지도 모르겠다. 1. 이 공간의 정체는? 이 블로그의 정체는 개발 블로그다. 2. 이 공간의 목적은? 한 마디로 말하면 "기록"이 목적이다. 우선 나의 학습 내용을 기록하기 위한 목적으로 만들었다. 기록하지 않으면 날아가 버리니까. 내 생각에 대한 기록도 하고 싶다. 책을 읽고 든 생각이라든가, 무언가 멋진 것을 보고 든 생각이라든가. 그러다 보면 기록하는 실력도 늘지 않을까! 바로 위의 질문에서 이 공간의 정체가 개발 블로그라고 하긴 했지만, 내가 워낙 이것저것 좋아하다 보니 뾰족한 방향성을 가진 블로그는 아무래도 힘들 것 같다. 방향이 조금 두루뭉술해진다고 ..

스프린트 우리 팀 팀원분께서 공유해주신 "Flexbox Froggy"라는 교육용 코딩 게임. CSS의 flexbox를 이용해서 같은 색깔의 개구리와 연잎을 매치시켜주는 게임이다. 이제 막 flexbox 개념을 배웠다면 쉽고 재미있게 flex와 친해질 수 있는 게임이다.  Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.com 공부하다가 머리 환기 시킬 겸 해봤는데 재미있고,유익하고,귀엽다!  끝까지 완료해보니 같은 팀에서 개발한 여러가지 다른 게임들도 있다. CSS 뿐만 아니라 HTML, JS,  SQL도 재미있게 학습해볼 수 있다. (다만 대부분 유료이고, 앞서 언급한 Flexbox 속성 게임과 Grid 속성 게임은 무료로 풀려있다.)  Code..

우선 git add라는 커맨드는 working directory에 있는 새로운 파일, 혹은 수정된 파일을 staging area에 올리는 작업을 하는 커맨드이다. 공부를 하던 중 한 예시에서 -A 옵션이 달린 커맨드가 쓰였는데 git add . 과 헷갈려서 검색해 본 내용을 정리해서 기록으로 남긴다. 우선 두 커맨드는 staging area에 올라갈 대상 파일의 범위에 차이가 있다. git add -A: 레포지토리 전체에 있는 모든 파일을 staging area에 더함 git add . : 현재 디렉토리와 하위 디렉토리에 있는 모든 파일을 staging area에 더함 그래서 루트 레포지토리에서 실행된 커맨드가 아니라면 둘의 결과는 다르다. 좀 더 찾아보니 git add -u라는 커맨드도 있다. git ..