챌린지 개요
- 진행 기간: 2023. 01.09 ~ 2023. 02.19
- 참가 계기
대주제가 CRUD vs React-query 로 명시되어있었다.
엘리스 코딩을 수료하고 이력서 작성에 지쳐있을 때쯤 다시 불을 지펴야겠다고 생각했고 '챌린지' 를 통해 기름을 부어보았다.
⏳ 사전미션
-
제공되는 API 서버 레포를 참고하여 리드미에 제시되어있는 기능을 구현하기였다. 처음에는 레포만 떡하니 주어지니 깜깜했지만 내 방식대로 진행했다.
깃 허브 레포를 하나 만들고 서버와 프론트를 나누어 폴더를 관리하였다. -
이 사전미션이 이후에 강의를 통해 업그레이드해가는 과정을 경험하는 게 챌린지의 묘미였다. CRUD만을 적용하는 작은 프로젝트라 생각했는데 강의마다 과제를 진행하면서 너무 얕은 생각이었다고 반성하게 되었다.
👨🏫 챌린지 진행
챌린지 목표
“회사가 내게 확인하고 싶은 것들을 이해하고, 과락하지 않는 기술 과제 제출하기”
강사님
- OT때부터 말씀을 굉장히 잘한다고 생각이 들었다.
아니나 다를까 실 강의에서의 입담은 개발계의 새로운 인재라고 생각이 들었다.
피드백
-
사전미션을 제출하면 강의시간마다 피드백을 받았고 수강생들과 더 좋은 코드 더 좋은 방법은 없었는지에 대해 이야기하는 시간을 가졌다.
개인적으로 내 작업의 결과물이 평가받는걸 좋아하기 때문에 항상 피드백 받길 원했던 것 같다. -
피드백 받길 원했지만 강의마다 첫번째로 선정이된건 절대 의도하지 않았던 결과였다. etc에 내 코드가 보일때마다 약간의 식은땀이 주르륵..
-
흔한 리엑트 입문자의 실수, 내 코드가 소개될때는 대부분 제목이 이러했다.- 아..!! 나는 아직 햇병아리였구나 부트캠프 하나 수료했다고 자신감이 감을 잃었구나 반성했다.
1차 리펙토링
1차 리펙토링 과제 1. 자바스크립트로 작성된 코드 → 타입스크립트 변환
2. 타입스크립트 → any, 타입 단언 없애기, 타입 가드 및 추론으로 타입 좁히기
처음부터 TS로 작업했던 나는 할 게 없겠구나 생각을 했다. 하지만, 피드백 첫번째 예시로 내 코드가 보이는순간 당황했다.
- 타입스크립트에 대한 내 생각은 이러했다.
- 모든 변수와 함수는 타입을 지정해주어야 한다.
- 타입만 지정하는거라면 자바스크립트와 다를것이 무엇인가
- Before
- 모든 useState에 제네릭 타입을 지정.
- 불필요한 state값이 많다.
- After
- useState의 기본값을 토대로 타입 추론하여 사용해주었다.
- state값을 두개로 줄여 기능이 동작함에 있어 코드가 더 간결해졌다.
- 느낀점
- 내가 사용하고 있지만 과연 제대로 사용하는것인가에 대한 의문이 생겼다.
- 많은 코드를 보고 학습하고 내 코드를 발전시키자
Before
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [emailValidate, setEmailValidate] = useState<boolean>(false);
const [btnDisabled, setBtnDisabled] = useState<boolean>(true);
const emailChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
reg.test(value) ? setEmailValidate(false) : setEmailValidate(true);
if (value === '') setEmailValidate(false);
setEmail(value);
};After
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const isEmailValid = reg.test(email)
const isBtnDisAbled = email.length ? false : true;
const emailChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
};2차 리펙토링
2차 리펙토링 과제 1. Redux 레포지토리에서 코드 분석하고 직접 scratch 작성해보기 2. 각자 React Query 공부해서 적용해보기
3. 과제 제출할 때 수업에서 배운 내용을 근거로 들어 개선사항 만들어보기
Redux 레포를 확인해보긴 하였으나 사용하기에 급급해서 분석까지는 못하였다.
-
2차부터는 브랜치를 새로 생성해서 PR로 리펙토링을 기록하였다.
2차 리펙토링 깃허브 PR -
느낀점
- 공식문서와 공식 레포를 참고하여 공부하는 게 좋다는걸 알게 되었다.
- 로컬 상태관리와 서버 상태관리를 프론트단에서 다룰 수 있다는 것이 매력적이었다.
- 로컬상태관리 라이브러리가 많다는 것을 알게 되었고 recoil, redux, mobX 등의 차이점이 무엇인지 학습하게 되는 계기가 되었다.
- react query를 사용하면서 더 이상 axios의 서버 통신과 async,await를 사용한 비동기 통신을 작성하지 않아도 되는 것이 가장 편했다.
마지막 리펙토링
마지막 리펙토링 과제 1. README 작성 및 코드 정리
2. ‘개발자로서의 나’ 특징 정의해보기 코드뿐만이 아닌 기록에 대해서도 열띤 강의와 함께 과제를 내주셨다.
-
마지막이라고 작성하긴 했지만 챌린지를 통해 배우고 깨달은 것들을 프로젝트에 꾸준히 적용하고 벨로그에 기록해 볼 예정이다.
-
프로젝트를 할 때마다 작성하는 리드미의 경우 개발자가 문서정리도 잘해야 하나라는 생각을 가지고 있었기에 항상 귀찮았다.
-
하지만, 강의를 듣고 태도를 바꿔서 생각해보았다. 내가 이 프로젝트를 보고 사람을 채용해야 한다면 과연 대충 작성하는 것이 맞느냐는 생각이었다.
-
느낀점
- 좋은 문서정리와 기록은 면접관의 고생 시간을 줄여준다는 강사님의 말씀이 굉장히 와닿았다.
- 리드미뿐만이 아닌 프로젝트에 대한 회고록을 남겨두면 좋을 거 같다는 피드백을 수용하여 벨로그에 글을 작성하게 되었다.
🧑🎄 끝맺음
- 너무 좋았던 챌린지였다.
- 항상 열심히 한다고 생각했는데 많이 부족했다고 생각한다.
- 개발 세계에 뛰어들고 나서 달라진 것은 개발 동료, 개발커뮤니티를 통해 정보를 공유하고 대화하고 협력하는 걸 주저하지 않게 되었다는 것이다.
- 개발자로서의 현재를 검토해볼 수 있었고 내가 지금까지 작성했던 코드들을 더 냉철하게 바라볼 수 있게 되었다.
