2021.03.08. 월요일 upstream-origin과 관련 없는 또 다른 저장소의 코드를 pull 받아서 rebase 하는 걸 해냈다! 사실 나도 잘 몰라서 이 방법 저 방법 해보면서 저장소를 삭제했다가 다시 포크했다가 클론했다 지웠다 하면서 마지막에 겨우 해결한 거였는데, 동료들에게 도움을 줄 수 있었다. ㅎㅎㅎ 문제를 해결한 자체도 뿌듯한데 동료들에게 도움을 줬다는 것도 너무 뿌듯했다. 나도 도움이 될 때가 있구나.. 🥺 글은 여기에 정리해두었다

문제 상황 코드스쿼드의 미션은 1. 해당 주차 저장소를 fork, 2. fork해온 origin 저장소를 로컬에 클론, 3. Pull Request 의 과정으로 진행하고 있다. 그런데 이번주 (5주차) 미션을 3주차 미션에 이어서 해야 되는 상황! 간단한 방법으로는 그냥 로컬의 폴더를 복붙해서 쓰면 되는데, 왠지 git을 이용해서 해보고 싶었다. 5주차의 upstream, origin 저장소가 있고, 3주차의 최신 코드를 불러와서 이어서 작업해야 한다. (나의 경우는 3주차 origin저장소의 step4 브랜치에 푸시된 코드가 최신이었다.) 3주차의 코드와 새로운 5주차 저장소의 코드가 완전 관련이 없어서 entirely different commit histories. 이런 에러가 나왔다. 로컬과 오리진에서는 크게 문제가 없어보였는데 Pull Request를 생성하면 비교할 코드가 없다고 나오면서 PR이 불가능했다. 해결 과정 p

2021.03.02. 화요일 👉 노션 링크 👈 구현할 기능을 써놓고 프로젝트를 진행하기 위해 노션에 적고 있다. 구현할 것들을 최대한 자세하게 적어두고 싶었는데, 아직 개발에 들어가지 않아서인지 큼직큼직한 것밖에 생각이 안난다. Figma를 이용해서 그림 그리고 생성된 svg 코드를 그대로 복붙했는데 너무 야매인가 싶어서 이렇게 해도 되나 궁금하다. 2021.03.03. 수요일 딱히 새롭게 알게된 건 없고, 계획한 일을 잘 해낸 하루! 노션에 우선 시나리오를 적어두고 살을 붙여나가면서 정리하니까 너무 도움이 된당!!! 피어세션 때, 만약 원판을 캔버스로 그리면 색깔 바꾸는 거 어떻게 하냐고, 그 부분만 다시 그려야 되냐고 이야기가 오갔다. 그런데 스윙이 will-change 라는 걸 알려

2021.02.22. 월요일 미루고 미루던 express를 설치해보았다. 아직은 app.js로 Hello, Express만 띄워둔 상태.. scss 사용을 위해 개발환경 세팅 중이다. 브라우저는 sass/scss 문법을 알지 못하기 때문에 css로 컴파일하는 작업이 필요하다. 다양한 컴파일러가 있고 vsc에 extension도 있다. Sass는 2006년 Ruby로 처음 개발되었고 이후 Ruby Sass를 C++로 포팅한 Libsass, node.js 환경에서 Libsass를 사용할 수 있는 node-sass 등 다양한 포팅 버전이 등장했다. Sass는 최근에 Dart Sass로 재구현되었다. Libsass나 node-sass는 현재 유지 관리는 되고 있으나 폐지되었으므로 Dart Sass를 사용하도록 하자. (출처 - poiemaweb) sass / scss

2021.02.15. 월요일 체크된 부분을 누르면 아래 팝업 리스트가 뜨는 것을 구현 중이다. 저 부분의 html 구조는 아래와 같다. 저 버튼을 클릭하면 리스트가 보였다 사라졌다 해야되고, 리스트 영역의 바깥 부분을 클릭하면 리스트가 사라져야 한다. 이것을 구현하기 위해 document에 클릭 이벤트를 달았고, event.target이 누구냐에 따라 class에 display-none을 추가해주는 방식으로 짜봤다. 그래서 발생한 문제! event.target이 .navbar__mypage 인지 여부로 나눴더니, 버튼의 하얀 부분에서는 생각대로 잘 동작하지만 아이콘(svg 태그 부분)을 클릭했을 때는 아무 일이 일어나지 않았다. 이것을 해결하기 위해 이벤트 캡쳐링, 버블링,

2021.02.08. 월요일 코드리뷰를 받기 위해 원격 저장소를 클론하고, PR을 보내기 위한 작업을 했다. html 뼈대 코드까지 작성해봤는데, 오랜만에 html을 하니 재밌기도 하고 구조가 너무 지저분해 보이기도 했다. 코드리뷰 PR을 위한 세팅 참고 영상 - 유튜브 코드스쿼드 채널 원본 저장소(upstream)에서 fork해오면 내 깃허브에 똑같은 이름의 저장소(origin)가 생긴다. 원본 저장소에는 멤버들마다 브랜치가 있다. fork를 하면 20개가 넘는 브랜치가 고대~로 origin으로 복사되어 들어온다. 내가 해야할 일은 최종적으로 작업을 할 때 새 브랜치를 만들어서 upstream의 내 전용 브랜치(Autumn 브랜치)에 merge해나가는 것이다. 그 작업을 위해 origin에서 내 노트북(local)으로

2021. 02. 01. 월요일 HTTP Client client와 server의 차이에 대해서 알아봤다. 진짜 처음 안 것은 웹 클라이언트(= 웹 브라우저)에 크롬, 사파리, ... 이런 게 있는 것처럼 웹 서버도 실제 프로그램이 존재한다는 것이었다. Apache, IIS, Nginx 등. 정말 놀라웠다.. 말로만 듣던 서버가 실제로 프로그램이었다니. host란 인터넷이 연결되어있는 컴퓨터 한 대 한 대를 말한다. 서버로 쓸 컴퓨터를 빌려주는 서비스를 웹 호스팅이라고 한다. 참고 : 맥에는 기본적으로 웹 서버가 깔려 있는데, 8080은 그것과 구분되는 새로운 포트이다. 웹 브라우저로 웹 서버에 접속하려면, 웹 서버가 설치되어 있는 컴퓨터의

알고리즘 데이 ~ 😇 오늘은 hacker ranck의 알고리즘 문제를 풀었다. 총 4문제였는데, 마지막 문제는 처음에 유닛 배열을 만드려다가 아주 큰 숫자가 인풋으로 들어오면 배열에 다 넣을 수가 없었다. 한 2시간동안 붙잡고 다른 방법을 생각해보다가 넘 복잡해져서 그냥 안풀었다. 다른 분들은 어어어엄청 간단하게 풀었던데.. 어떻게 생각해낸건지.. 코드를 봐도 모르겠어서 나중에 물어봐야겠다. 2번, 3번 문제는 예전에 (아마 코코아 때) 풀어봤던 문제이다. 2번은 전과 다른 방법으로 풀어봤고, 3번은 전에는 최소공배수 구하고 난리치다가 결국 못 풀었던 문제였는데 다시 풀어보니 그럴 필요 없이 조건만 잘 생각해보면 쉽게 풀리는 문제였다. > 오늘의 문제 / 푸는 데 걸린 시간 diagonal-difference 20분 [time-conversion](h

코드스쿼드의 cs10 미션들은 node.js를 이용해서 진행 중이다. 종종 모듈을 사용하는데, ES6의 export/import 문법이 더 최신이라고 해서 export/import 방식으로 쓰는 것을 선호해왔다. 그런데 오늘!! 문제 발생!! ES6 모듈과 commonJS 모듈을 혼용해서 사용하지 말자 node.js 환경에서 ES6 방식으로 모듈을 사용하려면, package.json 파일 안에 {"type": "module"} 이라고 써줘야 한다. 이렇게 쓰지 않으면 에러가 나고, type:"module"을 쓰거나 mjs 확장자로 쓰라고 친절히 알려준다. 그 이후 나는 Class의 constructor에 모듈을 불러오고 싶어서 아래와 같이 작성했다. 그런데 자꾸 에러가 난다. ReferenceError: require is not defined... constructor 안에 import로 써보기도 했는데 아예 허용되지 않는 문법이었다. Class 밖

reduce는 두 개의 인자를 받을 수 있다. 1) 콜백함수(reducer) 2) 처음 값 (optional) reducer라고 부르는 콜백함수는 네 개의 인자까지 받을 수 있다. 1) accumulator : 콜백함수의 반환값이 담긴다. 만약 옵션인 처음 값이 있다면 콜백의 첫번째 호출의 accumulator는 처음 값 이다. 2) 현재 값 3) 현재 인덱스 (optional) 4) 원본 배열 (optional) 현재 값에 배열의 요소가 하나씩 들어오고 accumulator와 현재 값을 콜백함수의 인자로 넣어 실행. 그 반환값을 다시 accumulator에 할당해서 배열의 모든 요소에 동일하게 진행. 인자의 이름은 그 때마다 상황에 맞게 지어주면 된다. filter, map 등등에서 그랬던 것처럼. 처음 값의 유무에 따라 콜백함수 최초 호출 시 accumulator와 현재 값<

코딩테스트에서 종종 2차원 배열 문제가 나오는데, 2차원 배열의 행과 열을 바꾸면 쉽게 풀릴 것 같은 문제들이 있다. 언젠가 구현해보겠다고 메모에 써놨는데 마침 오늘 크레인 인형뽑기 게임을 다시 풀게 되어서 정리를 해놓기로 마음먹었다. 1. reduce와 map을 활용한 방법 구글에 검색해보면 첫 번째로 나오는 stackoverflow 사이트에 사람들이 여러 가지 방법을 댓글로 써두었다. 먼저 reduce가 들어간 코드부터 살펴보자. _그냥

예전부터 여러개의 클래스 사이에서 정보를 넘겨주는 걸 대체 어떻게 하는 건지, 인자로 넘겨줘야 한다는 건 알겠는데 막상 코드로 써보려 하면 막막했다. 이번에 객체지향 프로그래밍에 대한 미션을 하면서 약간 감을 잡아서 아래처럼 코드를 썼다. (중간중간 console.log는 Node.js에서 디버깅 어떻게 하는지 몰라서 써놓은건데, Node.js에서의 디버깅 방법도 공부해야겠다.) 데이터를 어떻게 주고받을지 큰 구조는 그렸지만, init 함수에서 계속해서 변수를 만들고 값을 할당하고 그 변수를 다음 클래스의 constructor로 넘겨주도록 했다. 이렇게 하니까 코드가 너무 지저분한 느낌이 들었다. 다른 사람들의 코드를 보다가 어떤 클래스 안에서 이전 단계의 클래스를 new로 생성하는 것을 봤다.

leetcode | Remove Duplicates from Sorted List leetcode | Linked List Cycle 이번주 미션은 linked list 구현하기, 그리고 알고리즘 데이에도 linked list 관련 문제가 두 개나 나왔다. 릿코드에서 linked list 관련 문제를 풀 때는 우선 currentNode 변수를 만들어 head를 할당해두고, while문을 활용해 계속해서 currentNode에 next를 할당해서 linked list를 탐색해나가는 게 포인트였다. 알고리즘을 풀다보니 구현할 때 어떻게 해야할지 약간 감이 잡히는 것 같기도 ..? 아예 연결만 담당하는 Node라는 클래스를 만들어주는게 해결 포인트..

미션을 하던 중에 Symbol 타입을 써보면 어떨까 하는 생각이 들어서 공부하다가 인프런 채널에 올라온 이 영상을 봤다. 영상 4:30 쯤에 '변수에 접근하기 위해서 대괄호 표기법을 쓴 거, 아시죠?' 라고 하시는데... 전.. 모르는데요..? 😭 그래서 우선 저 문법이 무엇인지 찾아보고 Symbol 타입에 대해서도 더 공부해보기로 결심 🤓 객체 리터럴 '계산된 프로퍼티 이름' ES6에서는 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적으로 생성할 수 있게 되었다. (명칭만 보고는 뭔소린지 잘 와닿지가 않았다.) C++나 자바와 같은 클래스 기반 객체지향 언어는 객체를 생성할 때 클래스를 먼저 정의하고 인스턴스를 만들어야 하는데, 프로토타입 기반 객체지향 언어인 자바스크립트는 다양한 객체 생성 방법을 지원한다. > - 객

Expressions vs Statements Expressions value를 return하는 것. 자바스크립트는 expression을 value로 대체하고 계속 진행한다. Statements value를 return하지 않는 것. 명령, 혹은 지시. if문, for문, while문... 뭔가 액션을 컨트롤하는 문들. 리턴값(value)이 없으므로 변수에 할당할 수도 없다. parameter vs argument parameter (매개변수) 함수의 정의 부분에 나열되어 있는 변수들 (variable) argument (인자) 함수를 호출할 때 전달되는 실제 값 (value) 파라미터와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 함수가 실행되면 arguments라는 유사배열객체가 생성된다. 선언한 파라미터보다 더 많은 인자를 넣어 호출할 수 있는데, 이 때 인자는 arguments에

Compiled vs Interpreted 자료 출처 바로가기 어떤 레시피를 보고 음식을 만든다고 해보자. 그런데 레시피가 고대 그리스 언어로 적혀있다. 이 때, 누가 이미 한국어로 번역해놓은 레시피를 보는 것은 Compiled, 고대 그리스 언어를 아는 사람이 바로 옆에서 한 줄씩 동시에 통역해주는 것은 Interpreted이다. Compiled Languages > Examples of pure compiled languages are C, C++, Erlang, Haskell, Rust, and Go. Compiled languages는 곧바로 machine code로 변환되기 때문에 프로세서가 코드를 실행할 수 있다. 그래서 Interpreted languages보다 더 빠르고 효과적으로 실행되는 경향이 있다. me

++ 연산자 ++ 을 앞이든 뒤든 붙이면 원본 변수에도 영향을 주어 원본이 같이 변하게 된다. for문의 조건에서만 써봐서 별 생각 없이 썼었는데 원래 변수를 변하게 한다는 것이 신기했다! 아래는 이 의문이 들었던 예제 코드 콜백함수의 this 바인딩 코어자바스크립트 책에는 예제에 다 var로 변수를 정의하고 function 키워드로 함수를 정의한다. 화살표 함수로 바꾸면 this 바인딩이 어떻게 될지 궁금해서 한 번 해봤다. 콜백함수는 기본적으로 '함수'이기 때문에 객체의 메서드로써 사용을 한다고 하더라도 일반 함수 호출처럼 전역 객체에 this 바인딩이 된다. 따라서 다른 객체에 바인딩을 하고 싶다면 bind 메서드를 사용하면 간편하게 할 수 있는데, 위 예제에서 마지막 줄에 obj2에 바인딩해줬음에도 불구하고 window 객체가 나왔다. function 키워드로 프로퍼티를 정의하면 정상적으로 바인딩됐는데, 화살표 함수로 바꾸니 바인딩이 안 되는

화살표 함수의 this outer 는 일반 함수고 outer2 는 화살표 함수다. obj.outer(); 는 객체의 메서드로 실행된 것이기 때문에 this 는 함수를 호출한 객체 obj 가 된다. 그런데 화살표 함수로 작성했을 때 궁금한 점이 두 가지 있었다. 화살표 함수에 this 가 없다는 건 알고 있었다. 그리고 머릿속에는 this === 호출한 놈 !!!!!! 이라는 생각이 깊게 자리 잡고 있었다. > 1. outer2 를 호출한 놈이 obj 니까 this 는 obj 여야 하는 것 아닌가? > 2. 1번이 틀렸다 하더라도, 스코프 체인에서 제일 가까운 걸 찾으면 그래도 obj 아닌가? 이야기를 나누다보니, > 3. console.log() 가 전역객체의 메서드이기 때문에 전역객체가 호출한 거라서 this는 전역객체다. (setTimeout처럼...) 라는 의견도 나왔다. 알고 보니 실행컨텍스트와 this 를 제대로

코어자바스크립트 책을 읽고 정리한 내용입니다. 🤓 얕은 복사? 깊은 복사? 도대체 뭐야? 코딩을 하다 보면 얕은 복사, 깊은 복사라는 말을 들어봤을 것이다. MDN 사이트에서도 뭐뭐를 얕게 복사하여 어쩌구저쩌구 라는 말을 심심찮게 볼 수 있다. 이 요상한 말들은 무슨 뜻일까 함께 알아보자! 복사를 이해하기 위해서는 변수에 데이터가 어떻게 할당되는지를 우선 알아야 한다. 데이터 할당은 기본형 데이터냐 참조형 데이터냐에 따라서 약간 다르다. 1. 데이터 타입의 종류 기본형 데이터 (Primitive type) Number, String, Boolean, null, undefined, Symbol 참조형 데이터 (Reference type) Object - Array, Function, Date, RegExp, Map/WeakMap, Set/WeakSet 2. 데이터 할당 데이터 할당을 알아보

내가 정리해놓은 내용을 보다가 '함수 표현식 덕분에 일급 함수 가능하다.' 이 부분을 보고 문득 어..? 그러면 함수 선언식은 파라미터로 쓰일 수 없다는 건가? 궁금해졌다. 우선 일급 함수란 무엇이냐, 함수가 일급 시민이라는 것이다. 그럼 일급 시민은 뭐야??! 일급 시민 (First class citizen) 일급 시민의 조건은 3가지이다. 변수에 담을 수 있다. 인자로 전달할 수 있다. 반환값으로 전달할 수 있다. ✅ 함수 선언식을 변수에 담아보기 변수에 담아진다. 첫째줄처럼 사용한 것을 함수 표현식이라 한다. 함수 표현식은 익명으로도 가능하나, 선언식을 변수에 담아보기 위해 이름(sayHello)을 붙였다.