![react](https://tistory1.daumcdn.net/tistory/4365896/skin/images/react-logo.png)
목록📖 👨🏻💻 기록 (5)
즐겁게, 코드
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxXtSb/btsLBfRwOox/5EFh7DRxrKKyZwKUd2oD20/img.jpg)
학생 때는 1년이라는 시간이 정말 길게 느껴졌는데 올해는 유독 빠르게 지나갔다고 느껴지는 것 같습니다.지나간 시간들이 기억 속에서 휘발되는게 아쉬워, 그간의 기록을 글로 남겨보려 합니다.2024년의 어려움올해 제게 가장 큰 아젠다는 "나는 비슷한 연차의 개발자들 이상으로 성장하고 있는가?" 였던 것 같습니다.안타깝게도 저는 이 질문에 주저없이 "Yes" 를 외칠 자신이 없었고, 어떻게 해야 경쟁력 있는 개발자가 될 수 있을지 고민했던 것 같습니다.그리고 그 답을 찾는 과정에서의 혼란, 의문, 열등감 등의 부정적인 감정들에서 스트레스를 많이 받았던 해였던 것 같습니다. 제가 선뜻 제 역량에 확신을 갖지 못했던 이유는 다른 회사들의 테크 블로그 속 프론트엔드 개발자들은 빌드 - 배포 속도를 극적으로 최적화하..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cLTINd/btsKHXRZ42V/jkRC5WklqILpRuEIjSJm30/img.webp)
지난 프로젝트를 회고하며 부족했던 점들을 돌아봤을 때, 새로운 서비스를 추가할 때마다 기존 코드를 복사 - 붙여넣기 후 새로운 프로젝트를 시작하는 것에 좋지 않은 경험을 느꼈던 것 같다. 어떤 경로로 진입했을 때 어떤 페이지를 렌더할지 설정하는 modules/[모듈명]/route.ts 를 작성하는 상황을 예로 들어보겠다.import type { RouteRecordRaw } from 'vue-router';export const accountRoutes: RouteRecordRaw[] = [];accountRoutes.push({ path: '/account/signUp', name: 'accountSignup', component: () => import('@/pages/account/Accoun..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/q1lut/btrEuQewDqV/AfJCkrVKQLFITEgbnqh4q1/img.png)
최근 새로운 토이 프로젝트를 개발하면서, 빠른 개발을 위해 firebase strorage 를 활용해 갤러리 서비스를 구현하고 있었습니다. 처음에는 firebase storage가 5GB의 스토리지를 항상 무료로 제공한다는 점에서 무료로 프로젝트를 운영할 때 적합할 것 같았지만, "대역폭 요금" 이라는 예상치 못했던 요인으로 인해 스토리지를 포기하게 된 과정을 간단히 소개해보려 합니다. TL;DR 스토리지를 결정할 때는 저장 용량뿐만 아니라 대역폭 요금 역시 염두에 두어야 한다. 스토리지는 AWS 프리 티어를 적용받는 S3가 가장 경제적이다. 만약 AWS 프리 티어 기간이 만료됐다면 월 5GB, 30GB 대역폭(약 4천원 상당)을 무료로 제공하는 firebase storage가 괜찮은 선택이 될 수도 있..
한기대의 코인 이라는 프로젝트에서 영감을 얻어 시간표 부분을 항공대 버전으로 만들어볼 계획을 세우고 있었습니다. (※ 저희 학교는 에브리타임 시간표 자동 불러오기를 지원하지 않아 학우들의 불만이 꽤 있습니다. 작은 학교 슬퍼요 ㅠ__ㅠ) 아무튼 공사를 앞두고 어찌저찌 과목 정보까지는 가져오는데 성공했는데, 뭔가 쎄한걸 느꼈습니다. 두 텍스트가 약간씩 다른게 보이시나요? 분명 겉으로 봤을때는 멀쩡했는데, 노드 입출력을 거치니 "항우기학부" 는 "항우기학" 이 되어있고 "배재성" 은 "배재" 가 되어 있네요. 😣 벌써 어지러워졌지만 원인을 찾아 보기로 했습니다. 1. 인코딩을 의심하자 첫 번째로 의심한건 바로 인코딩이었습니다. 아니나 다를까 뭔가 이상하긴 했는데요, 응답 헤더에 담긴 인코딩 타입이 UTF-8..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxGqUB/btq3TWVvNc3/rrF8Wo2oZbZUXFZV80UD60/img.png)
이전에 제작한 항공대 종강시계의 공지사항 탭이 죽었습니다. 이유가 뭔가 했더니 방학동안 홈페이지 리모델링이 이루어져, 기존 공지사항 게시판이 사라졌다고 하네요...!! 안돼!! 그래서 새로운 페이지의 공지사항을 크롤링해야 했는데, 페이지 렌더링 방식이 변해 공지사항을 어디선가 불러와 동적으로 렌더링하는걸 알게 되었습니다. ⚙️ 학교 게시판 함수 호출 순서 분석 과정 교내 홈페이지 코드는 확실히 공공기관이라는 보수적인 분위기 때문인지, JQuery와 함께 엄청난 스파게티가 되어 있었습니다. 메서드 호출 순서를 따라가며 교내 홈페이지 분석에 필요한 내용들을 정리해보았습니다. 1. onLoad 시 익명 함수 실행 공지사항을 확인하면 제일 먼저 실행되는 함수입니다. $(document).ready(functio..