박나겸

코드잇 프론트엔드 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 를 사용하니 컴포넌트별로 캡슐화할..

big-o 의 필요성 알고리즘을 풀이하는데 수많은 해결법이 있는데 어떤 해결이 제일 괜찮은 해결인지 알려면 필요한 것이 빅오 표기법이다.코드를 일반적으로 수치를 사용해서 비교하는데 사용.왜 사용해야 되나? 알고리즘의 속도에 따라 성능이 좌지우지 되기 때문이기도 하고 면접에서도 물어본다 공간복잡도입력되는것을 제외하고 알고리즘 자체가 필요한 공간- 불린, 숫자, undefined, null : 불변 공간- 문자열, 참조형, 배열, 객체: O(N) 공간 // 문자열의 길이 만큼입력의 값에는 상관없이, 무조건 그냥 상수 두개 만큼의 공간만 있으면 됨차지하는 공간은 입력된 배열의 크기와 비례해서 커짐 객체의 시간복잡도이 객체에는 3쌍의 key value를 가지고 있음객체는 정렬되어 있지는 않지만, 나머지 모든 부..

렉시컬 스코프란함수를 어디서 호출하는지가 아니라 어디에 선언했는지에 따라 결정되는 것입니다.즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 것이며, 가장 중요한 것은 호출이 아니라 선언된 장소에 따라 결정이 된다는 것입니다.  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..