[Main-Project] Day 6(주말) - 코딩 컨벤션, Router, 반응형 웹앱, TypeScript
우리동네 중고서적 대여 서비스 '동네북'(Main-project)
📗 Pre-Project, Day 6
- 코딩 컨벤션 - 프론트엔드 코딩 규칙 정하기
- Router 정리
- 공통 아이콘 정리(react icons)
- 반응형 피그마
- Router 정리하기
- TypeScript 개인 공부
📗 코딩 컨벤션
→ 본격적으로 기능 구현을 하기 전에 깔끔하고 팀원 모두가 이해하기 쉬운 코드 작성을 위해 프론트엔드의 코딩 규칙을 정하고 github wiki에 추가하였다.
프론트엔드 코딩 규칙
1. 함수 작성
- 이벤트 함수는 앞에 handle을 붙입니다.
- 함수는 가장 작은 단위로, 재사용이 가능하며, 독립적으로 작성합니다.
- 함수 이름은 함수의 기능을 나타내야합니다.
- 컴포넌트 내부에 되도록 함수를 작성하지 않습니다.
➡️ 재사용 되는 함수는 Utils로 분리하여 재사용 함수로 구분합니다.
➡️ 컴포넌트 외부에 따로 작성합니다.
2. 변수 작성- 기본 선언문은 const를 사용하고, 사용이 불가능한 경우 let을 사용합니다. (var를 사용하지 않습니다.)
- 환경 변수명 : 스네이크 케이스(SNAKE_CASE)
- 컴포넌트, 컴포넌트 파일 이름 : 파스칼 케이스(PascalCase)
- CSS 클래스명 및 그 외 : 카멜 케이스(camelCase)
3. 주석 작성- 주석으로 변수를 설명합니다.
- 타인이 알아볼 수 있도록 코드를 정리합니다.(항상 가독성을 생각합니다.)
- 직관적으로 이해하기 어려운 코드라고 판단되면 주석을 작성합니다.
4. 컴포넌트 구성import interface component style export
📗 공통 아이콘 정리
→ 이제 프론트엔드 팀원이 css 작업에 들어가기 전에, 우리의 동네북에서 사용하는 모든 아이콘들을 미리 선정하여 정리해두었다.
react icons에서 hi 스타일로 통일!
이러한 작업이 별 것 아닌 것 같지만, 막상 여러 팀원이 코드 작성에 들어가며 불필요한 확인 시간을 줄일 수 있다고 생각한다.
📗 반응형 - 모바일, 데스크탑
→ 전일 멘토링 피드백을 반영하여 데스크탑까지 고려한
반응형 웹앱으로 구현하기로 하였다.
모바일 화면 425px를 기본으로, max width는 1256px으로 정했으며, 아직 테블릿 버전은 고려하지 않고 넓이가 넓어지며 navbar가 header로 바뀌는 것만을 고려하였다.
📗 Router 정리하기
→ 전체적인
Router 정리를 하고 들어가기로 하였다.
일단 피그마에서 구현한 페이지별로 각각 페이지로 생성한 후 Router를 해주었는데, 페이지 안에서도 탭에 따라 달라지는 화면을 기존에 했던 조건부 렌더링으로 상태값에 따라 다르게 보이게 구현할 것인지, 위처럼 페이지로 생각하여 구현할 것인지에 대해서는 아직 팀원들과 논의 중이다.
📗 TypeScript 개인 공부
→ 주말이라 이번에 처음 사용해보는 TypeScript에 대해 개인 공부하는 시간을 가졌다.
일단 자세한 부분은 실제로 코드를 작성하면서 알게 되겠지만, 그에 앞서 우리가왜 TypeScript를 사용하고,TypeScript는 무엇이며,TypeScript의 기본적인 작성법에 대해 알아보았다.
🖌 TypeScript이란, 사용하는 이유
TypeScript = JavaScript + Type 문법- JavaScript는 Dynamic Typing 가능
- 프로젝트와 코드를 길게 짤 때는, 이러한 자바스크립트의 자유도와 유연성은 해가 될 수 있음
- TypeScript는 타입을 엄격하게 검사해줌 / 에러메세지를 자세하게 보여줌
- 코드 에디터 부가기능 역할로 봐도 가능
🖌 TypeScript 기본 사용법
- ts 파일을 js로 변환해야 사용이 가능하다
->터미널을 켜서 tsc -w 입력해두면 자동변환된다, 컴파일한다
1. 간단한 변수 타입 지정 가능
let name : string = 'kim';
let name : string[] = ['kim', 'park'];
let name : {name : string} = {name:'kim'}
let name : {name? : string} = {name:'kim'} //name 속성은 옵션이다2. uniona type 다양한 타입이 들어올 수 있게 하려면
let name : string | number = 'kim';string, number, boolean, null, undefined, bigint, [], {} 등
3. 타입은 변수에 담아서 쓸 수 있다 type alias
type My = string | number;
let My : Name = 123;4. 함수에 타입지정 가능
function Name(x: number) : number {
return x * 2
}5.동시에 지정
type Member = [number, boolean];
let john: Member = [123, true]6. object에 타입지정해야할 속성이 너무 많으면
type Member = {
[key : string] : string,//글자로 된 모든 object 속성의 타입은 string
}
let join : Member = { name : 'kim', age : '123'}6. class 타입 지정 가능
class USer {
name : string;
constructor(name : string){
this.name = name;
}
}✍🏻 회고
→ 이제 하루하루가 지나갈 수록 빠르게 프로젝트가 진행이 되고, 새로운 일들이 진행되고 있는데 이럴 때일수록 기록을 잘해두어야겠다는 생각이 들었다.
기록하는 개발자가 되자!
차일인 월요일부터 화요일까지는 팀원들 각각 맡은 페이지의 틀을 잡고 css까지 완성할 예정이다. pr와 라벨링, squacy merge도 제대로 하자!
