기획 단계
저희 팀이 만들 원데이클럽(일회성 동호회)서비스의 기획 의도는 운동이나 원데이 클래스 등 모임에 관심은 있지만 지속적인 참여가 어려운 사람들이 느낄 수 있는 부담스러움을 없애고자 일회성으로 사람을 모집하여 참여할 수 있는 서비스를 개발하는 것 입니다.
프리프로젝트가 종료되고 바로 아이디어 회의에 들어갔습니다.
브레인 스토밍을 하며 자유롭게 아이디어 말하는 시간을 가졌습니다.
그 후 PMI(Plus, Minus, Interest) 기법과 투표를 활용하여 아이디어 구체화 단계에 돌입했습니다.
아이디어는 넷플릭스 리뷰 서비스와 일회성 동호회 서비스로 좁혀졌습니다.
넷플릭스 리뷰 서비스는 넷플릭스 API의 중요도가 컸고 검색과정에서 openAPI가 없다는 것을 찾았습니다. 그래서 아이디어 실현 가능성은 일회성 동호회 서비스 쪽으로 기울어 졌습니다.
이후 페이지와 페이지별 필요기능들을 나누고 사용자 요구사항정의서와 화면정의서 작업을 들어갔습니다. 이번 메인 프로젝트에선 디자이너분을 구했기 때문에 피그마 작업이 훨씬 수훨했습니다.
개발 1일차
- 프론트엔드 작업 툴
- create-react-app
- typescript
- styled-components -npm install --save styled-components
- react-router-dom
- RTK -npm install @reduxjs/toolkit
- axios -npm install axios
개발을 들어가기 전 프론트엔드 멘토님과 이야기할 시간을 가졌습니다.
기획단계와 개발툴에 대한 피드백을 해주셨고 가장 강조하신 부분은 반응형 구현과 hero 페이지, 타입스크립트의 사용이었습니다. 특히 타입스크립트는 개발 단계와 협업에서 많은 에러를 감소시키고 현업에서 필수로 사용하기 때문에 이번 기회에 학습을 해보는건 어떤지 강조하셨습니다.
프론트엔드 팀원들 모두 아직 타입스크립트를 접한적이 없어 회의가 필요했고 같이 1시간정도 공식문서를 읽어보는 시간을 가졌습니다. 그 결과 타입스크립트를 사용하기로 결정했고 목업단계를 진행할때 틈틈히 타입스크립트를 학습하기로 했습니다.
오늘 타입스크립트 학습한 부분
- 원시 자료형의 타입지정
let age: number = 12;
let userName: string = "jeongseok";
let isLogin: boolean = true;- 배열, 객체의 타입지정
let hobbies: string[] = ["Sports", "Cooking"];
let hobbies: (string | number)[] = [123, "123"]; //유니온 유형 사용
숫자와 문자열이 들어간 배열을 사용할 경우
let hobbies: any[] = [123, "123", true];
어떤 타입이 들어갈지 정해지지 않은 배열을 사용할 경우
let person: {
name: string;
age: number;
} = { name: "Max", age: 32 };
let people: {
name: string;
age: number;
}[];- type Aliases 만들기 => 중복되는 타입
interface IUser {
name: string,
age: number,
isValid: boolean
}
let userArr: IUser[] = [
{
name: 'Neo',
age: 85,
isValid: true
},
{
name: 'Lewis',
age: 52,
isValid: false
},
{
name: 'Evan',
age: 36,
isValid: true
}
];- Funtion의 타입지정
// func는 2개의 숫자 타입 인수를 가지고, 숫자 타입을 반환하는 함수.
const func: (arg1: number, arg2: number) => number;
func = function (x, y) {
return x + y;
};
// 인수가 없고, 반환도 없는 경우.
const func: () => void;
func = function () {
console.log('Hello world~');
};- 타입 추론
명시적으로 타입 선언이 되어있지 않은 경우, 타입스크립트는 타입을 추론합니다.
- 초기화된 변수
- 기본값이 설정된 매개 변수
- 반환 값이 있는 함수
- React에서 typescript 사용하기
-
state, props, function, event 등에 타입 선언을 해야합니다.
-
npx create-react-app my-app --template typescript설치 -
기존 리액트 파일에 ts 설치 :
npm install --save typescript @types/node @types/react @types/react-dom @types/jest -
tsconfig.json 생성하기 (빌드시 js로 컴파일 가능하게 합니다.)
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": "./src",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
],
"exclude": [
"node_modules"
],
}- useState의 타입지정
const [isLogin, setIsLogin] = useState<boolean>(false)오늘 진행한 일
- 지역필터 컴포넌트 목업
- 타입스크립트 학습
내일 진행해야하는 일
- 메시지 보내기 모달 컴포넌트 만들기
- 글 작성 페이지 디자인 나올시 목업
- 타입스크립트 학습
진행하면서 어려웠던 점과 회고
지역필터 목업을 진행하면서 onClick 이벤트를 구현해야할 부분이 있었고 타입스크립트로는 처음 구현해보기 때문에 어려움을 느꼈습니다. 이벤트 핸들러의 인자인 e에도 타입지정을 해줘야했고 e.target에도 타입을 지정해줘야 제가 원하는 값인 textContent를 가져올 수 있었습니다.
const handleClickArea = (e: React.MouseEvent<HTMLElement>) => {
setArea((e.target as any).textContent);
setIsClicked(!isClicked);
};여기서 느낄 수 있던 TS의 장점은 에러가 있을경우 코드를 작성할때 타입에러가 바로바로 발생한다는 점입니다. 그래서 개발 단계에서 에러메시지를 확인하고 어떤 문제인지 파악해 해결할 수 있었습니다.
TS에 대한 학습을 꾸준히 진행해서 능숙한 사용을 하고싶다는 마음이 생겼습니다.
하루에 적은 시간이라도 TS에 관한 레퍼런스를 통해 학습할 것입니다.
