Lennon FE

ESLint 간단히 말하자면 소스코드를 분석해 에러 및 버그를 보고해주는 도구이다. Prettier 본래 스타일 대신 규칙을 정해 규칙대로 다시 작성해 주는 것이다. 좋은 코드 컨벤션을 지키기위해 한 번 적용해보자. 1. 우선 vscode에 확장 프로그램으로 ESLint, Prettier 두 개를 설치하자. 2. 터미널에서 본인의 프로젝트에 들어가 eslint와 prettier을 설치하자. 2-1. eslint 설치 $ npm install eslint --save-dev 2-2. prettier 설치 $ npm install prettier --save-dev --save-exact 2-3. eslint와 prettier의 충돌을 방지하기 위해 설치 $ npm install eslint-plugin-p..

https://steady-coding.tistory.com/449 [OOP] 캡슐화(Encapsulation)란? 안녕하세요? 제이온입니다. 이번 시간에는 저번 포스팅인 다형성에 이어서 캡슐화에 대해 알아보겠습니다. 캡슐화란? 위키피디아에 따르면, 캡슐화를 아래와 같이 정의하고 있습니다. 객체의 steady-coding.tistory.com

현업 프론트엔드 개발자분에게 코드리뷰를 받는 기회가 생겼다. 그중 인상 깊었던 내용들을 포스팅해보려 한다. 저번 주에 첫 과제를 부여받았고, 모듈, 객체지향에 대해 미숙한 상황이었다. 그냥 index.js 하나에 모든 함수 및 기능을 구현하였으며, import, export를 사용해 모듈화 하지 않았다. 그 결과 아래의 전체 피드백을 받았다. 이제 코드를 보며 현업자들의 입장에서 어떤 점이 문제점이었는지 확인해보자. 1. const와 let 재할당 되지 않는 변수들은 const로 선언하는 습관을 기르자! 2. 함수 이름에 동작까지 포함하여 명시하자. 함수는 동작하는 거니까 어떤 동작을 하는지 명확하게 네이밍 하도록 하자. 3. 원시적인 숫자가 아니라 더 명확하게 보일 수 있도록 선언하고 사용하자. 남들이..

vscode 연동 vscode를 연동시키기 위해 본인의 프로젝트인 Repository를 하나 생성하자. 생성한 Repository에 들어가서 아래 사진처럼 code를 누르면 본인의 저장소 clone 주소를 얻을 수 있다. 해당 내용을 복사해놓자. vscode를 실행한 후 F1을 눌러 git clone을 입력한다. 그럼 위 내용이 뜰 것이다. 이 부분에 위에서 얻은 내용(https://github.com/사용자이름/프로젝트내용.git)을 복사해 넣는다. 그러면 클론되어 vscode에서 새 창으로 열리며, 깃으로 변경내용을 commit할 수 있게 된다. 그 다음 터미널이나 작업 관리자를 켜보자. 그리고 위에 클론한 디렉토리에 접근하자. cd [project Forder] 브랜치 생성 그 후 기능 구현을 위..

https://parkparkpark.tistory.com/51 [JS] 스코프(1) - 전역, 지역 스코프에 대해 이번 포스팅은 자바스크립트에서 중요한 개념인 스코프에 대해 작성해보려 한다. 스코프 = 유효 범위 스코프는 변수 그리고 함수와 관련이 깊다. 함수 내의 매개변수는 함수 내에서만 참조할 수 parkparkpark.tistory.com 스코프 체인 함수는 함수 내에 선언할 수 있어 함수는 중첩되어 있을 수도 있다. 이는 함수의 지역 스코프도 중첩될 수 있다는 것을 의미한다. 즉 스코프는 함수의 중첩에 의해 계층적인 구조를 갖는다. let x = 1; function fun1(){ let y = 2; function fun2(){ let x = 3; } fun2() } 해당 코드에서 스코프를 분..

이번 포스팅은 자바스크립트에서 중요한 개념인 스코프에 대해 작성해보려 한다. 스코프 = 유효 범위 스코프는 변수 그리고 함수와 관련이 깊다. 함수 내의 매개변수는 함수 내에서만 참조할 수 있고, 외부에서는 참조할 수 없다. 모두 알고리즘을 공부하거나 반복문 및 조건문을 공부하면서 스코프 때문에 생긴 오류를 한 번쯤은 봤을 거라 생각한다. 반복문에서의 스코프 for(let i = 0; i < 1; i++){ let num = 0; for(let j = 0; j < 10; j++){ num+=j; } } console.log(num) // 에러 발생 함수에서의 스코프 function add(num1, num2){ console.log(num1, num2); return num1+num2; } add(1,2)..

여러개의 식별자가 하나의 객체를 공유할 수 있다는 것이 무엇을 의미할까? let obj = { name: 'Park' }; let obj2 = obj; // 얕은 복사 obj2.name = 'Lee'; console.log(obj); // name = 'Lee' console.log(obj2); // name = 'Lee' obj2 같은 경우에는 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 이 말은 새롭게 {name = 'Park'} 를 저장하기 위한 메모리를 만들지 않고 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 즉 obj와 obj2는 모두 동일한 객체를 가르키고, 원본 또는 사본 어느 한쪽에서 객체를 변경하면 서로..