전체 글125 dependencies와 devDependencies package.json 패키지의 버전을 명시, 관리해 주는 파일 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)를 통해 설치한 모듈의 의존성을 관리한다. 기본 설정 npm을 사용하는데 기본적으로 필요한 필드 nom init을 하면 초기의 package.json 파일을 생성할 수 있다. JSON 포맷으로 이루어져 있다. { "name": "payments", "version": "0.1.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } name(프로젝트의 .. 2023. 5. 1. 레벨2 - 다시, 점심 뭐 먹지 리뷰 피드백 1. regular function과 arrow function 어느 것을 사용해야 할까? 일반적으로 한쪽이 권장될 만큼의 차이는 크지 않으며 팀 내 컨벤션으로 가져갈 수 있는 부분이라고 생각한다. 아래 두 가지를 학습해 보자. react가 아닌 js 관점에서 왜 arrow function을 쓰면 bind를 안 해줘도 되는 건지? 각 선언 방법에 따라 취할 수 있는 장단점은 무엇인지? 2. 컴포넌트 props의 인터페이스 한 파일에 모아놓기보다는, 각각 사용하는 컴포넌트와 한 파일에 두는 것을 권장한다. 재사용이 필요한 인터페이스라면 따로 이격 하는 것이 좋지만, 그렇지 않은 경우는 연관된 컴포넌트와 가까이 있는 것이 코드를 확인하는데 더 수월하기 때문이다. 3. 컴포넌트 내부 네이밍 class Rest.. 2023. 4. 25. 레벨1 - 영화 리뷰 피드백 1. 복잡한 조건문은 변수로 분리 src="${ posterPath !== "null" ? `https://image.tmdb.org/t/p/original/${posterPath}` : `${AddSkeleton}` }" 해당 코드는 템플릿 안의 src 조건문이다. 포스터의 경로가 null이면 스켈레톤을, 아니면 해당 포스터를 보여준다. src 안에 조건문이 있어 가독성이 좋지 않다. 코드 밖에서 posterPath에 대한 조건문을 변수로 만들고, 그 변수를 템플릿 안으로 가져오자. 2. 라이프사이클 메서드 활용 라이프사이클 메서드를 적극 활용하자. 생성자의 역할이 너무 크다. connectedCallback은 컴포넌트의 초기화 작업이나 DOM 조작 등을 수행하기에 적합한 라이프사이클 콜백이다. 이를 .. 2023. 4. 3. 레벨1 - 점심 뭐 먹지 피드백 1. 파일 네이밍을 할 때 2 depth가 같은 네이밍이 들어가는 경우를 지양하자 파일과 디렉터리의 이름이 같으면 모호성이 생겨 개발자가 프로젝트를 탐색하기가 더 어려워질 수 있다. "type.ts"라는 파일이 "type"이라는 디렉터리에 존재하는 경우, 파일이 "type" 디렉터리에서 사용되도록 의도된 것인지 아니면 별도의 엔티티인지 명확하지 않게 된다. 혼란을 방지하고 프로젝트 내에서 파일을 더 쉽게 찾을 수 있도록 하기 위해 같은 네이밍은 지양하자. 2. Type 강제 as로 타입을 강제하는 것은 좋지 않다. 타입스크립트에게 '내가 더 잘 알아!'하고 강제하는 행위에 가깝다. 이는 타입스크립트의 보급과 개발자의 유연한 상황 그리고 런타임 환경 대응을 위해 일부 불건전한 타입 선언을 허용하는 경우라고.. 2023. 4. 3. 레벨1 - 로또 게임 피드백 1. export {... }와 export default {... } export default: export한 이름과 상관없이 원하는 이름으로 import 가능, import 시 중괄호 작성 필요 없음 export : export한 이름으로만 import 가능, import시 중괄호로 가져와야 함 2. 성공 케이스와 실패 케이스 모두 테스트하자 성공 케이스의 경우 코드가 의도한 대로 작동하는지 확인하는 데 도움이 된다. 반면 실패 케이스의 경우 잠재적인 문제를 식별하는 것에 도움이 된다. 다양한 시나리오에서 올바르게 작동하는지 확인하면 안정성을 향상하는데 도움이 되며, 나중에 문제가 발생하지 않도록 미리 방지할 수 있다. 3. CSS Bold 일반적으로 400은 regular, 500은 medium,.. 2023. 4. 3. 레벨1 - 자동차경주 피드백 1. 네이밍을 할 때는 축약형을 지양하자 네이밍을 할 때 대부분의 사람들에게 축약된 단어가 더 익숙한 경우를 제외하고는 줄여 쓰지 않는다. 좋은 코드는 짧은 코드가 아닌, 읽기 좋은 코드이다. 미래의 나와 다른 개발자를 위해 작성한다고 생각하고 네이밍을 하자. 2. 재사용을 고려하자 static randomValue() { return Math.floor( Math.random() * (UTIL_NUMBER.CAR_RANDOM_MAXIMUM_NUMBER + 1) ); } 위 함수는 랜덤 한 값을 뽑아낸다. 그러나 UTIL_NUMBER.CAR_RANDOM_MAXIMUM_NUMBER라는 도메인 정보를 알고 있어 사실상 정해진 범위(여기서는 MAXIMUM_NUMBER인 9)의 랜덤 값을 뽑아내는 것을 알 수 .. 2023. 4. 3. 이전 1 ··· 5 6 7 8 9 10 11 ··· 21 다음
