231212(화)
🌱 성장일지 8.0
책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록
- 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
- 성장하고 있는 것이 살아 있는 것이다.
- 생명의 유일한 증거는 성장이다!
⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.
Vue.js의 function props
Vue.js는 리액트와는 다르게 양방향 데이터 바인딩을 지원한다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있을 뿐만 아니라, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수도 있다. 이 때, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 props를 사용한다. 그리고 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때는 emit을 사용한다.
그런데 나는 리액트부터 접해서 그런지(그래봤자 리액트 경력이 긴 건 아니지만) 특히나 Vue3부터 지원하는 <script setup>을 사용하면서 너무 자연스럽게 state를 handle하는 함수도 props로 전달하면서 사용하게 되었다. 이게 뭔가 양방향을 지원하는 뷰스럽지는 않은(?) 느낌이지만, 너무 편하다는 생각이 많이 들었고 뷰 진영에서는 이걸 function props 패턴이라고 부르는 것 같았다. 이 부분에 대해서도 안티패턴이라는 말도 있고, 이게 왜 안티 패턴이냐라고 하는 말들도 있고... 뭔가 좀더 양방향 바인딩의 개념을 잘 알고 그 장점을 알 수 있도록 해야할 것 같다. 솔직히 지금의 나는 단방향이 너무 편해서 function props 패턴 자체가 너무 익숙하고 좋다.
Vue router의 createWebHistory vs createWebHashHistory
createWebHistory는 HTML5 History API를 사용하는 history 객체를 생성한다.createWebHashHistory는 URL의 해시를 사용하는 history 객체를 생성한다.- 이 둘의 가장 큰 차이는 URL의 형태이다.
createWebHistory는https://example.com/user/id와 같은 형태로 URL이 생성된다.createWebHashHistory는https://example.com/#/user/id와 같은 형태로 URL이 생성된다.
즉, createWebHistory는 URL에 해시가 없고, createWebHashHistory는 URL에 해시가 있다.
createWebHistory는 HTML5 History API를 사용하기 때문에, 브라우저가 지원하지 않는다면createWebHashHistory를 사용해야한다.createWebHashHistory는 URL에 해시가 있기 때문에, 서버에 요청을 보낼 때 해시 이후의 부분은 무시된다.createWebHistory는 URL에 해시가 없기 때문에, 서버에 요청을 보낼 때 전체 URL을 보낸다.- 즉,
createWebHistory는 서버에 요청을 보낼 때 전체 URL을 보내기 때문에, 서버에서 해당 URL에 대한 처리를 해줘야한다. createWebHashHistory는 서버에 요청을 보낼 때 해시 이후의 부분은 무시되기 때문에, 서버에서 해당 URL에 대한 처리를 해줄 필요가 없다.
📝 회고
아주 작은 부분이라도 잘 모르겠는 건 꼭 찾아보고 기록하자. 나중에 내가 시니어 개발자가 되었을 때, 주니어 개발자의 질문에 어렴풋이라도 개발할 수 있게 매일매일 넓게 공부할 수 있도록 하자. 그리고 그 중에서도 깊게 들어갈 부분들을 꾸준히 파보자. 지금 생각에는 주에 성장일지를 얕은 주제로 2 ~ 3개 작성하는 것을 목표로 하고 그 중에 주제 1개를 꼽아서 조금 깊게 주간요약 형태로 작성하면 좋을 것 같다!