원티드 프리온보딩 프론트엔드 챌린지 2월
<TypeScript>
기간: 2023.2.6~2023.2.19
원티드 프리온보딩 프론트엔드 챌린지를 시작하며,
프리온보딩 프론트엔드 챌린지 사이트
프리온보딩 프론트엔드 챌린지 사전과제
사전 과제는 필수가 아니지만 효과적인 기술 역량 향상을 위해 사전 미션을 수행 후 참여하기를 권장하고 있다.
시작하기에 앞서
1월에도 프리온보딩 챌린지를 신청해서 들었었고, 매우 흡족한 경험이었기에 이번에도 신청했다. 이번 2월의 프리온보딩 주제는 typescript로, 아직 찍먹하는 수준인 나에게 알맞았다. 진행 방식은 1월과 똑같고, 1월의 사전 과제는 Todo 애플리케이션을 프론트로 만들어보는 것이라면, 이번 2월의 사전 과제는 Todo 애플리케이션의 API를 typescript로 설계해보는 것이다.
typescript로 API를 설계한다 하면, 나는 여지껏 들어오는 데이터 타입에 따라 interface를 만들어주는 것이 다였다. 백엔드를 건드리지 않았고 오픈 API를 사용했기에 결과 예시를 보고 만들어주는 정도. 그런데, 생각해보면 현업에서는 백엔드를 직접 개발하기 때문에 그걸 통해 API 문서를 만들어주는 일이 있을 수도 있겠다라는 생각을 하게 되었다. 과제를 보고, 강의를 듣고 고개를 끄덕인... 한 번도 설계는 해본 적이 없고 JSDoc도 만들어본 적이 없어서 이걸 어떻게 하나 고민을 했다. 구글링을 해서 공식 문서도 찾아보고, 쉽게 만들었는데 이게 이렇게 해도 되나? 하는... 고민도.
그렇지만 여전히 좋은 경험이 될 거 같아서 두근거린다.
사용한 기술
TypeScript
사전 과제
Todo 앱을 JSDoc으로 문서화하는 챌린지 과제입니다.
모든 요구사항은 JSDoc을 기반으로 수행합니다.
JSDoc는 처음 들어본다. 찾아보니 API를 문서화한 거라고 들었다. 우선 요구사항에 맞춰 수행해야하기에 이미 과제를 수행하신 분들, 구글링을 많이 참고하여 진행했다.
(참고로, JSDoc 환경 세팅을 해본 적 없는 사람은 강사님께서 템플릿을 제공해주셨다. 따라서 나는 템플릿을 사용한다.)
조사하는 데 시간을 꽤 썼으나 막상 과제를 수행하고 보니 생각보다 시간이 걸리지 않았다. 구현이 아닌 설계만 진행해서 그런가? 처음에는 js로만 문서를 작성했다. (오히려 빌드하는 걸 어떻게 해야하지 고민했다)
JSDoc 문서를 살펴보니 어떻게 사용하는지 나와있어서 그것을 토대로 작성했다.
@function: 함수에 대한 설명@param: 들어오는 파라미터에 대한 설명
아래에는 param 사용만 있지만 다른 항목도 존재하니 JSDoc 문서를 보는 것도 좋을 거 같다!
createToDo
/** @function createToDo
* 할 일을 추가할 수 있습니다.
* 내용 없이는 추가할 수 없습니다.
* @param {Object} toDo - toDo에는 아이디, 내용, 카테고리, 완료여부가 필요합니다.
* @param {string} toDo.id - toDo의 id
* @param {string} toDo.content - toDo의 내용
* @param { "DOING" | "DONE" | "TODO"} toDo.category - toDo의 카테고리
* @param {string} [toDo.tags] - toDo의 태그
* @param {boolean} isFinish - 완료 여부(done/doing)
*/
function createToDo(toDo, isFinish) {}
createToDo는 새로운 todo를 추가해주는 함수이다. 따라서 todo에 대한 항목은 object로 들어오게 설정했고, 완료 여부는 별도로 관리해준다.
지금 생각해보면 별도로 관리하는 것보다 todo 내부에 넣어 완료 여부를 체크하는 것이 개별 todo를 관리하는 데 좋을 거 같다.
readToDo
/** @function readToDo
* 모든 할 일을 조회할 수 있습니다.
* ID를 기반으로 특정 할 일을 조회할 수 있습니다.
* @param {Object} toDo
* @param {string} [toDo.id]
*/
function readToDo(toDo) {}todo 전체를 읽어올 때는 별도의 id 없이 함수 호출로 가능하게 하기 위해서 toDo.id는 option으로 설정해주었다.
여기서
object를 사용했는데, 그냥 단일하게 id만 사용해도 될 것을... 왜 저렇게 코드를 짰을까?
updateToDo
/** @function updateToDo
* ID를 제외한 모든 속성을 수정할 수 있습니다.
* 특정 할 일의 특정 태그를 수정할 수 있습니다.
* @param {Object} toDo
* @param {string} toDo.id - 업데이트하기 위해서는 필수 요소입니다.
* @param {string} [toDo.content]
* @param { "DOING" | "DONE" | "TODO"} [toDo.category]
* @param {string} [toDo.tags]
*/
function updateToDo(toDo) {}todo를 업데이트 할 때는, 특정 todo를 찾기위해 id가 필수 요소이다. 또, 특정 할 일의 특정 태그를 수정할 수 있다고 되어 있는데, 나는 이걸 하나의 함수에서 해결하도록 만들었다.
하나의 함수에서 모든 걸 해결하는 것보다 세분화하여 사용하는 게 더 편리할 거 같다. 항상 코드의 관심사를 생각하여 분리시키는 것을 잊지 말자.
또한, todo의text와category,tags를option으로 두었는데, 이렇게 되면 변경을 하지 않고도 함수를 사용할 수 있을 것 같다. 차라리 이걸 2차원 오브젝트로 빼서 오브젝트 자체는 필수 요소지만 내부에 있는category,tags,content셋 중 하나를 만족하면 함수를 사용할 수 있도록 해주는 것도 좋을 거 같다.
=> 아니면 아예 함수 구현을 할 때 내용이 없으면 return 시키거나.
deleteToDo
/** @function deleteToDo
* ID를 기반으로 특정 할 일을 삭제할 수 있습니다.
* 모든 할 일을 제거할 수 있습니다.
* 특정 할 일의 특정 태그를 삭제할 수 있습니다.
* 특정 할 일의 모든 태그를 제거할 수 있습니다.
* @param {Object} toDo
* @param {string} toDo.id - Todo를 제거하기 위해서 필수 요소입니다.
* @param {string} [toDo.tags.id] - 특정 할 일의 특정 태그를 삭제할 수 있습니다.
* @param {boolean} [toDo.tags.isAllRemove=false] - 특정 할 일의 모든 태그를 삭제할 수 있습니다.
* @param {boolean} [isAllRemove=false] - 모든 할 일을 제거합니다. 기본값은 false입니다.
*/
function deleteToDo(toDo, isAllRemove) {}
todo를 삭제하는 건 간단하다. 삭제할 todo의 id만 알고 있으면 해당 todo를 삭제시키고, 전부 삭제시킬 건지에 대한 여부를 true로 전달하면 todo를 모두 삭제한다. 또한 tags의 개별 tag에 id를 넣어 개별 tag를 삭제할 수 있도록 설계했다.
전체를 삭제할 때는 파라미터 없이 함수만 호출해도 좋을 것 같다. 실수로 호출하는 일은 없을 테니까.
특정 태그를 삭제하는 것의 여부도 별도의 함수로 빼서 작성하는 것이 좋을 것 같고 태그에 id를 넣는 것도 좋을지 모르지만 string으로 관리하는 것도 괜찮을 것 같다. 제거할 때, 해당 tag의 문자가 일치하는 지 확인하고 삭제.
마지막으로
TypeScript를 사용하여 설계하는 일은 처음이라 굉장히 재밌다. 물론, 처음인 만큼 모르는 것이 많지만 다른 분들이 작성하는 코드도 참고하고 구글링도 하면서 알아가는 것이 있어 눈앞이 캄캄한 기분은 아니다.
이상으로 사전과제 기록을 마치겠다!
