데굴데굴

부트캠프에서 했던 프로젝트를 개선해볼 수 있을 것 같아서 이것저것 해오다가 정작 코드의 품질에는 신경쓰지 못하고 있었다는 생각이 들었다. 해보고 싶은 작업들을 하나씩 써보고 차근차근 해나가야겠다. 프로젝트 폴더 구조 개편 (2023.03.21 ✅) 리드미에 리팩토링 문구 추가 (2023.04.18 ✅) 초기 `npm start`시 로딩 속도가 오래 걸림 -> lazy loading으로 해결하기 custom hooks으로 axios 요청 빼내기 axios baseURL 설정하기 (2023.04.15 ✅) 버튼 컴포넌트로 빼기 - `styled-components`의 `css` 활용 연습해보기 (2023.04.19 ✅) input도 custom hooks으로 뺄 수 있을지 고민해보기 JS -> TS 마이그레..

⚙️ 오늘 학습한 내용 태그 🐹 오늘의 기분 어제 같이 프로젝트 했던 백엔드 팀원분께서 프론트 서버 실행법을 알려달라고 하셔서 알려드리고 오랜만에 서로 근황을 공유했다. 다들 잘 지내는 것 같아서 좋았당 나도 열심히 해야지 🗝 키워드 playsInline, git branch -m 🗣 스스로에게 설명 playsInline 모바일에서 동영상을 재생하면 자동으로 전체화면이 되는데 video 태그에 playsInline 속성을 적용하면 이를 막을 수 있다. Your browser does not support the video tag. 동영상 썸네일 보여주기 preload="metadata" 속성을 이용하면 사용자가 동영상을 재생하는 순간에 정보를 불러와 리소스를 아낄 수 있다. 크롬에서는 썸네일도 제대로 떠..

⚙️ 오늘 학습한 내용 리액트 + 타입스크립트로 프로젝트 구성하기 🐹 오늘의 기분 타입스크립트 공부를 해봐야할 것 같아서 프로젝트 주제를 고민하고 있었는데 얼떨결에 좋은 재료가 생겨버렸다. 좋아하는 가수랑 채팅할 수 있는 어플이 있었는데 서비스 종료로 그 동안의 채팅 데이터를 다운받을 수 있게 해준 것! 이게 csv 파일인데다가 사진, 영상 같은 첨부파일도 다 줘서 잘 써먹으면 프로젝트를 해볼 수 있겠다는 생각이 들었당 어제 피그마 만들고 오늘부터 조금씩 만들어보기 시작했는데 타입스크립트로 예시 코드만 몇 개 작성해봤지 이렇게 뭘 만드는 건 처음이라 계속 구글링해가며 개발하고 있다. 오늘은 json으로 변환한 데이터에서 메시지를 뽑아와 렌더링하는 것까지만 해봤다. 확실히 props 안 넘겼을 때나 타입 ..

⚙️ 오늘 학습한 내용 debounce, throttle 🗝 키워드 debounce, throttle 🗣 스스로에게 설명 Debounce와 Throttle 자바스크립트에서 성능 상의 이유로 이벤트를 제어하는 방법 이벤트의 과도한 실행으로 이벤트 핸들러가 DOM 조작과 같은 작업을 많이 수행하게 되면 성능 문제가 발생 => 사용자 경험 저하 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함 사례 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event를 사용하기 위해 사용자가 키보드 입력을 중지할 때까지 비동기 요청을 발생시키지 않기 위해 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 때 앱에서 요소를 드래그할 때 좋은 성능을 보장하기 위해 d..

⚙️ 오늘 학습한 내용 vanillaJS로 자동완성 검색창 만들기 🗝 키워드 fetch, event delegation, data-* 🗣 스스로에게 설명 fetch 사용 시 res.ok로 성공 여부를 확인해야 하는 이유 Fetch 사용하기 - Web API | MDN Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() (en-US) 메서드로 네트워크의 리소 developer.mozilla.org Response.ok - Web APIs | MDN The ok read-only property of the Response interface contains a Bo..

⚙️ 오늘 학습한 내용 vaniilaJS로 폼 양식 만들기 🐹 오늘의 기분 이력서 수정하고 조금 쉬다가 주어진 마크업을 참고해서 자바스크립트로 폼 만드는 걸 해봤다. 오늘은 해설 안 보고 전부 혼자 구현해봤는데 유효성 검사까지 총 2시간 정도 걸렸다. 기능 넣는 건 괜찮은데 역시 처음에 파일 나누고 구조 짜는게 제일 어려운 것 같다ㅠㅠ 그래도 해내니까 뿌듯하다. 🗝 키워드 form 🗣 요약 form 제출 이벤트핸들러는 버튼 click이 아니라 form의 submit 이벤트에 등록해야한다. 이 이벤트핸들러에서 e.target.[필드 name 속성] 을 통해 form에 입력한 값을 받아올 수 있다. input에 required 속성을 적용하면 필수 입력칸으로 설정할 수 있고, pattern에 정규표현식을 지..

⚙️ 오늘 학습한 내용 vanilla JS로 웹페이지 만들기 🐹 오늘의 기분 드러누워있다가 문득 뭐라도 해야될 것 같아서 프로그래머스에 있는 Dev-matching 과제를 한 번 풀어보았다. 과제형 테스트는 처음 연습해보는거라 실행시키는 것부터 허둥지둥이었다 ㅎㅎㅜ 맨날 리액트로만 하다가 바닐라 자바스크립트로 웹을 구현하려니 정말 머리가 새하얘졌다. 옆에 딥다이브 펴놓고 했는데 역시 코드는 직접 쳐보기 전까진 절대 내 것이 되지 않는다는 걸 느꼈다. 바닐라 자바스크립트로도 좀 많이 해볼걸 싶었다. 이런 걸로 많이 연습해봐야지 🗝 키워드 localStorage, $ 🗣 스스로에게 설명 localStorage에 객체 저장하기 로컬스토리지에 데이터(특히 객체가 있는 데이터)를 저장하려고 하면 [object O..

2023.01.03 ~ 2023.02.03 길고도 짧았던 한 달 간의 메인 프로젝트 기간이 끝났다. 총 7명(프론트엔드 4, 백엔드 3)으로 구성된 우리 팀은 book village라는 도서 무료나눔 서비스를 개발했다. '개인 간 도서 대여'라는 아이디어로 시작했는데 차별화를 위해 '도서 무료나눔'을 컨셉으로 잡게 되었다. 깃헙 레포지토리 ⬇️ https://github.com/codestates-seb/seb41_main_015 GitHub - codestates-seb/seb41_main_015 Contribute to codestates-seb/seb41_main_015 development by creating an account on GitHub. github.com 내가 담당한 부분 프론트측 ..