목록전체 글 (102)
솔미는 성장중
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/beAJIe/btsDuUGUwSU/Gw9VCjQvtqGCeMIK9IUkJK/img.png)
1. JSX 페이스북에서 만든 내장형 구문 트랜스파일러를 필수적으로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS코드로 변환됨 설계 목적 : 다양한 트랜스파일러에서 다양한 속성을 가지 ㄴ트리 구조를 토큰화해 ECMAScript로 변환하는 데 초점 = JSX 내부에 트리 구조로 표현하고 싶은 것을 작성해두고, 트랜스파일 과정을 거쳐 JS(ECMAScript)로 변경하는 것이 목표 JSX 컴포넌트 JSXElement - 가장 기본 요소 - 역할 : HTML element와 유사 - JSXElement의 요소 이름으로 쓸 수 있는 것 (JSXElementName) - 도 가능 (JSXIdentifier) - : 를 이용해 서로 다른 식별자를 이어준 것 ex) (JSXNamespacedName) , (JSX..
보호되어 있는 글입니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqyLuH/btsCEKsn0cX/IEudKd9lK1A1SdWjqugrx0/img.png)
코드리뷰를 더욱 빨리 할 수 있는 환경을 만들고자 webhook을 연결했다! 팀원분이 방법을 공유해달라고 하셔서 글을 작성하게 되었다. 디스코드를 항시 켜놓는 나같은 사람들한테는 아주 유용하다 ( •̀ ω •́ )✧ 아주아주 간단하다 ! 방법 1. Discord에서 채널을 생성해준다. 2. 설정 버튼 클릭 후 '연동'으로 이동해서 웹후크를 만들어준다! 3. 새 웹후크를 만들어준다. 4. 해당 웹후크 클릭 후 URL을 복사해준다. 5. Github Settings - Webhooks - AddWebhook Payload URL : 복사한 URL을 붙여넣어주고 뒤에 '/github'을 추가해준다. ex. ~~~~~asdfa/github Content type : application/json으로 변경 Whi..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BIYZ8/btsCfZwenBW/2ai6X2D7wi5hCUzC6CMRlK/img.gif)
프로젝트를 시작하며 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 참여하고, 첫 번째 기업연계 프로젝트이다. 3번째 프로젝트로 부트캠프에선 토이 프로젝트2(웹소켓을 활용한 채팅 사이트)를 진행했지만 나는 그 시기에 과정 외 프로젝트를 진행해서 API연동을 해보지 못한 상태로 투입됐다. 그리고 백엔드와 첫 협업을 진행하는 것이기에 걱정이 됐었다. 하지만 "하면 된다" 마인드로 냅다 시작 🔥 프로젝트 결과 빨리 잡아! (숙박 예약 사이트) 깃허브 주소 초점을 두고 준비했던 부분 1. 백엔드와 소통 2. 최적화 3. 코드리뷰 꼼꼼히 하기 개별 숙박 상품 상세 조회 이름, 주소, 예약 가능 여부, 전화번호, 소개, 위치, 옵션, 객실 표시 useQuery를 이용해 효율..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nAIJx/btsBC6DktFY/UDVxFpUPms1IWagkckDrYK/img.png)
야놀자 기업연계 프로젝트로 숙박 예약 사이트를 만들었었고 이를 마치며 리팩토링 기간을 가졌다! 전체적으로 type을 분리하고, 가독성을 높이도록 코드를 개선했을 뿐 아니라 성능 개선 또한 도전해보았다. lighthouse를 이용해 dev서버 성능을 측정해보았다. 여러모로 성능을 저하시키는 요인이 많다. 사용하지 않는 자바스크립트 줄이기 vite에서 build를 하면 기본적으로 webpack과 비슷하게 코드 스플리팅을 해준다. 아래 사진에서도 사용하지 않는 자바스크립트 줄이기 항목에서 아주 많이 절감된 것을 볼 수 있다! 폰트 최적화 다음으로는 폰트 최적화를 시도해보았다. @font-face { font-family: "CWDangamAsac-Bold"; src: url("https://cdn.jsdeli..