박나겸

코드잇 프론트엔드 12기 파트3 1팀에서 중급프로젝트를 진행했다. 총 네개의 주제 중 하나를 선정해 2주 반 동안 개발을 하는 일정이였다. 그중에서 깃헙 이슈나 지라 와 비슷한 서비스를 만들수있는 주제가 있어서 선택했다.  이 프로젝트를 진행하면서 내가 개발했던 부분, 이슈들과 해결법등을 기록하고 기억하기 위해 회고록을 작성하려고 한다.목차- 결과- 프로젝트 세팅 환경- 내가 맡은 부분- 개발하면서 생긴 오류들과 해결방법 => 다른 포스트에 따로 정리- 추가 되면 좋을 부분- KDT 회고 이 순서로 프로젝트 회고를 해볼려고 한다.결과결과물은  taskify 사이트 에서 확인할 수 있다.  프로젝트 세팅 환경Next, typescript, scss module 을 사용했다. 이번에 next와 tsx를 가지..

typescript vs javascript TypeScript는 javascript와 다르게 변수명 뒤에 변수의 타입을 지정할 수 있습니다. let n:number = 2;n="string"; // 오류 발생n=3; // n이 3으로 변경 n에 Number라는 데이터 타입을 명시해줘서 해당 변수의 type을 명시적으로 알 수 있습니다. type을 알기에 생기는 장점이 있습니다. 1. compile 과정에서 에러 체크 가능- javascript는 런타임 중 에러를 확인할 수 있습니다. 즉, 프로그램이 돈 후에 체크 하지만, typescript는 프로그램이 돌기도 전에 에러를 출력합니다. type을 명시함으로 컴파일 단에서 미리 선언될 수 없는 변수를 차단하기 때문입니다. => Javascript는 동적 ..

코드잇 프론트엔드 12기 파트2 9팀에서 기초프로젝트를 진행했다.총 네개의 주제 중 하나를 선정해 2주 반 동안 개발을 하는 일정이였다.이 프로젝트를 진행하면서 내가 개발했던 부분, 이슈들과 해결법등을 기록하고 기억하기 위해 회고록을 작성하려고 한다.목차- 결과- 프로젝트 세팅 환경- 내가 맡은 부분- 개발하면서 생긴 오류들과 해결방법 => 다른 포스트에 따로 정리- KDT 회고 이 순서로 프로젝트 회고를 해볼려고 한다.결과결과를 먼저 보여주자면, fandom-k 링크 에 들어가서 확인을 할 수 있다. 프로젝트 세팅 환경React, Javascript, scss module 을 사용했다. 이번 프로젝트에서 처음으로 scss module 을 사용하였는데, 모듈화 된 css 를 사용하니 컴포넌트별로 캡슐화할..

렉시컬 스코프란함수를 어디서 호출하는지가 아니라 어디에 선언했는지에 따라 결정되는 것입니다.즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 것이며, 가장 중요한 것은 호출이 아니라 선언된 장소에 따라 결정이 된다는 것입니다.  var x=1function scope(){ var x=10; scope_test();};function scope_test(){ console.log(x);};scope();scope_test(); 의 결과로 10과 1이라고 생각할 수 있지만, 실제 결과는 1과 1 입니다. 왜냐면, 자바스크립드에서 코드를 실행할 때 코드들의 스코프를 결정하기 때문입니다.위 예제의 실행 결과는 함수 scope_test()에서 참조하는 x변수는 scope_test()의 상위 스코..

자바스크립트에서 this는 누가 나를 불렀나 입니다. 변수를 선언해서 사용하는 것이 아니라 호출해서 사용한다는 것입니다. 1. 하나만 있는 this 전역객체는 모든 객체의 유일한 최상위 객체이고, 일반적으로 브라우저의 전역객체는 window입니다. let x = this;console.log(x) // window 2. 함수 안에서 사용한 thisfunction myFunction() { return this;}console.log(myFunction()); //Windowvar num = 0;function addNum() { this.num = 100; num++; console.log(num); // 101 console.log(window.num); // 101 console.log..

var,let,const는 모두 자바스크립트에서 사용하는 변수이지만, 각각 다르게 작동합니다. *호이스팅이란->1. 중복 선언var: 같은 스코프에서 여러 번 변수를 선언해도 오류가 발생하지 않습니다. 예를 들어:var x = 1; var x = 2; //중복 선언 허용 console.log(x); // 2 let: 같은 스코프에서 중복 선언을 허용하지 않습니다. 중복 선언 시 에러가 발생합니다. let y = 1; // let y = 2; // SyntaxError: Identifier 'y' has already been declared const: let과 동일하게 중복 선언을 허용하지 않습니다. const z = 1; // const z = 2; // SyntaxError: Identifier '..

브랜치 전략 협업시 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 work-flow입니다. 개발 중인 기능이나 수정된 것들이 서로 독립적이므로 영향을 주지 않고 동시에 진행이 가능합니다. 따라서 브랜치가 특정 기능이나 이슈에 대응하여 작업을 추적하고 버전 단위로 관리해 프로젝트 관리와 배포의 안정성을 높여줍니다.  Git-flow와 Github-Flow가 두가지 대표적인 전략입니다. Git-FlowGit-flow에는 5가지 종류의 브랜치가 존재합니다. 항상 유지 되는 메인 브랜치인 master, develop과 일정 기간동안만 유지 되는 보조 브랜치인 feature, release, hot fixes이 있습니다. 각 용도에 맞게 브랜치를 나눠서 사용합니다. master..

GitGit은 여러 사람들이 협업을 하기 쉽도록 만든 분산 버전 관리 시스템입니다. Branch- 브랜치란 협업 시, 하나의 프로젝트를 여러 갈래로 나누어서 관리할 수 있는 기능입니다. 각각 독립된 브랜치에서 작업한 후 원래 버전과 비교할 수 있습니다. - 브랜치를 나누지 않고 작업을 할 경우, 여러 사람들이 commit을 할때 충돌이 발생 할 수 있기에 꼭 브랜치를 나눠서 작업하는 것이 문제를 발생하지 않는 방법입니다.  Merge- 각각의 브랜치에서 작업해 나뉘어져있는 작업들을 합치는 기능입니다. - 브랜치를 합치는 방법은 4가지 정도 있습니다.  1. 3-way Merge 각 브랜치에 커밋이 있는 경우, git merge 명령어를 사용하면 두 브랜치의 코드를 합쳐서 새로운 커밋으로 만들어주는 방식입..