학습한 컨텐츠
학습 동기
React를 선택하신 이유가 뭔가요?
- React는 가장 큰 커뮤니티를 가진 자바스크립트 라이브러리 중 하나이기 때문입니다.
React, Angular, Vue 와 같은 프레임워크 중 하나만 익혀두더라도 다른 프레임워크를 익히는데 그리 오랜 시간이 걸리지 않을 것입니다.
내가 React를 배웠던 것은 특별히 선택의 여지가 없었기 때문이다.
당장 하나의 기술을 배워야 한다면 React를 배우는 것이 가장 범용성이 넓었기 때문이다.
구직 시장에서 기업의 채용 요건에서 vue.js 경험자의 수요가 생각보다 높다는 생각이 들었다.
그리고 내 포트폴리오에 적힌 한 줄
새로운 기술을 학습하는 걸 즐깁니다.
Recoil, Next.js, React Query 내게 배움의 기쁨을 준 친구들이다.
vue를 배우며 오랜만에 다시 활기를 찾고 싶었다
느낀 점
프로그래밍 아키텍처
vue 이름도 많이 들어봤고 MVVM 아키텍처를 사용한다고 익히 전해들었다.
면접 준비를 하면서 flux패턴, mvc패턴들의 작동 방식을 학습하고
vue의 commit, model 키워드들을 보니 이 친구가 디스패처의 역할을 하고, 이 친구가 액션이고 여기가 스토어구나 피부로 느낄 수 있었다.
프레임워크로써의 사용자 경험
Next.js의 경우 React의 단점을 보완해주고 Next.js가 제공하는 강력한 최적화 기능을 추가로 얹은 '장착'한 느낌이 었다면
Vue는 React와 상태 관리 라이브러리가 '합체'된 피조물이라는 느낌을 받을 수 있었다.
- useState // data(){return{}}
- useEffect // created()
- react-router-dom // VueRouter
- 컴포넌트를 가져다 쓰는 방법
- v-if, v-else
- @click // onClick
- @submit.prevent // onSubmit
input의 입력 값을 가져오는 상황에 대해서 React에서는 e.target.value, 혹은 ref를 사용하여 입력 값을 변경하고 가져오는 비교적 많은 코드가 필요했던 것에 비해 꽤 깔끔하게 데이터를 관리 할 수 있었다.
this에 대한 고찰
this는 자신이 속한 객체나 생성할 인스턴스를 가리키는 자기 참조 변수이다.
this는 호출되는 방식에 따라서 어떤 값이 연결될지 결정된다.
...
객체 내부의 메서드 : 호출한 객체
this에 대해서 명성은 자자하게 들었고 면접 단골 질문이고 자바스크립트에서 중요한 키워드라는걸 알고 있었지만
프로젝트에서 매 번 React를 함수형 컴포넌트로 개발하게되는데
this 키워드를 단 한번도 사용한 적이 없어 도대체 왜 this를 그렇게나 강조했던거지? 라는 의문을 가졌었다.
vue를 학습하면서 그 이유를 체감할 수 있었다.
export default {
data() {
return {
username: '',
password: '',
nickname: '',
logMessage: '',
};
},
methods: {
async submitForm() {
const userData = {
username: this.username,
password: this.password,
nickname: this.nickname,
};
const { data } = await registerUser(userData);
this.logMessage = `${data.username} 님이 가입되었습니다`;
this.initForm();
},
}객체 내부의 메서드 : 호출한 객체 submitForm 메서드에서 호출한 this << 호출한 객체의 usename, password, nickname
React 개발자에게도 this가 분명 중요할 것이다. 또 깨닫는 순간이 있겠지만
왜 프론트엔드 개발자에게 this가 중요한지 체감하는 순간이었다.
추가로 얻어가게 된 것
axios 인터셉터
- axios 인터셉터를 통해 baseUrl을 추가하고 Authorization에 토큰을 넣는 방식을 사용해 봤지만,
- 엔드포인트마다 새로운 instance를 생성하고 그것을 모듈화하여 관리하는 방법을 배우게 되었다.
테스트 코드 with Jest
- Jest 테스트 코드의 작성 방법과 사용자의 입장에서 어떻게 테스트에 접근하는게 좋은 방식인지 ex) 이메일 유효성 검사의 경우, 입력된 것이 @를 표현하는지를 검사하기보단 이메일 유효성 검사를 통과하지 못할 경우 알림메세지를 나태는 부분이 활성화되는지를 검사한다.와 같은 꿀팁을 얻어갔다.
