Input의 빈번한 사용과 문제 발생프로젝트에서 텍스트를 작성하고 post하는 과정은 매우 빈번하다 검색창, 채팅, 블로그 글, 회원가입, 로그인 등 하지만, 가끔 위 사진과 같이 애를 먹는 경우가 있는데 다름 아닌 enter 이벤트를 통해 입력 값을 처리할 때 종종 등장하곤 한다 위와 같은 상황이 발생하는 경우는 다음과 같다 1. 영어가 아닌 한글을 작성 후 Enter를 클릭하는 경우2. 한글 작성 후 스페이스바를 누르지 않고 바로 Enter를 클릭하는 경우 const handleKeyDown2 = async (e: React.KeyboardEvent) => { if (e.key !== "Enter") return; setLogs2((prev) => [...prev, message2]);..
개요 현재 프로젝트에서는 팀원 3명 모두 새롭게 Vue를 사용해서 개발하고있다. 프로젝트 코드가 일관되게 유지하고자 여러 컨벤션들이랑 룰들을 미리 정했다. 1. 상세한 코드리뷰2. 변수, 함수, 파일, 폴더 명명 규칙 수립3. prettier, esLint와 같은 코드 포매팅 tool을 통한 코드 구조 통일화 하지만 우리끼리 규칙을 정하고, 좋은 코드를 찾고 하는건 귀찮고 더군다나 새로운 언어를 접한 우리 팀의 입장으로서는 반갑지 못한 일이었다. 위에서 언급한 방법들을 지키며, Vue에서 권장하는 방식으로 개발을 할 수 있는 방식이 있으니 그건 바로 Vue 스타일 가이드이다. https://ko.vuejs.org/style-guide/ Vue.jsVue.js - The Progressive JavaS..
개요 Vue 현재 진행중인 프로젝트에서 난 FE파트 PL을 맡게 되었다. 원래대로라면 Next.js로 진행하려던 프로젝트였을텐데.. 팀원들의 고민과 vue 추천으로 인해 끝내 Vue.js로 프로젝트를 작업하게 되었다. 물론, 프로젝트에 걸맞는 이유들이 있어 설득된 것이지만, 분명 프로젝트에서 활용될 Next의 장점들도 많다고 생각했다. 결과적으로, 내가 쓰고싶었던 건 Next.js였으나 사실 Next에 대해서 잘 아는 것보다 Vue.js를 잘몰라서 뭔가 팀원들에게 강하게 의견제시를 못하지 않았나 싶다. 단순히 한 기술에 대해서 잘 이야기할 수 있는건 단순 그 기술에대해서 정보를 나열할 때고, 대조를 하는경우 그 대조군에 대한 이해가 필요하다는 걸 깨달은 한 주 였다. 그럼 이제 내 친구가 될 Vue에 대..
개요 캐싱 캐싱은 서버가 동일한 요청에 대해 매번 데이터베이스나 외부 API에 접근하지 않고, 미리 저장된 데이터를 빠르게 반환함으로써 응답 시간을 단축하고, 서버의 부하를 줄이는 기술이다. 동일한 콘텐츠를 보여주는데 api를 매번 새롭게 요청 할 경우 네트워크 부하 및 성능 저하가 발생한다. 그래서 매번 최신 데이터가 필요하거나 데이터 갱신이 자주 이뤄져야하는게 아닌경우 캐싱을 활용해 api 요청방식의 전략을 잘 짜는 것이 중요하다. 나의 경우 주가 그래프 파트 및 일부 요소에만 적용을 했는데 Next JS에서 제공하는 캐싱 개념과 우리 서비스에 적합한 캐싱 방법을 사용해보려 한다. Next.js Caching (latest ver.) Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은..
개요 리팩토링 계획 중 getStaticProps, getServerSideProps를 사용해 서버 측에서 데이터를 요청하는 방법을 해보려고 하던 중 난관에 봉착했다. 처음 마주한 문제는 getStaticProps, getServerSideProps의 경우 page에서 요청해야 된다는 내용이었다. 해당 오류에 맞게 어서 최상단의 Page에서 요청을 했으나 이번엔 다른 문제가 발생했다. Next 13 버전부터는 해당 함수들을 지원하지 않고 다른 데이터 요청 방법을 사용해야한다고 한다. 뭐가 문제인지를 확인하고, 적절한 data fetching 방식을 알아보자. getStaticProps 사용 불가?아래 사진을보면 Next 공식문서에서 Pages Router 방식과 App Router에서 사용되는 방식의 ..
개요 새해가 밝은 지금, 지금까지 번들사이즈를 측정하고 감소시키려고 여러 시도를 했다. 오늘은 마지막으로 로컬 폰트로 변경, Next 이미지의 Objectfit 속성 전환, size 지정을 해주었다. 최종 번들사이즈 결과를 비교하고, 성능 점수를 보고 번들사이즈에 대한 리팩토링을 마무리 해보자 로고 폰트 로컬 폰트로 변경개발 마무리 단계가 아닌 초반부터 의아했던 점이 있는데 늘 Lighthouse 성능 평가의 LCP 부문에서 유독 낮은 점수를 받았다. 근데 다름 아닌 텍스트인 FLEX 로고 부분에서 매번 낮은 붉은색 경고가 보이곤해서 무슨 문제일까 냅두다가 우리 전역 폰트인 Pretendar와는 다르게 로고에서 사용중인 폰트는 웹폰트로 사용중이어서 이부분에서 문제인가 하고 접근하게 되었다. 먼저 로고..
개요 이전글에서 측정한 번들크기를 보고 여러 방법을 시도 후 얼만큼 번들크기를 감소시켰는지 확인해보자 번들 사이즈에 대해 검색하며 배운 방법들을 사용해보려 한다. 1. 불필요한 파일,코드 삭제2. 코드 스플리팅3. 미사용 라이브러리 의존성을 삭제 및 Third-Party 라이브러리 최소화 (가능하다면) 추가로 저번 시간에 활용하지 못한 방법중 하나가 cloc을 통해 코드의 줄 개수를 측정하는 것이다.cloc : 코드 라인, 주석 라인, 빈 줄 등을 계산해주는 CLI 도구cloc . // 프로젝트의 전체 코드 라인 수를 출력 물론, 적은양의 코드가 항상 옳다고는 할 수 없지만, 가독성과 로직이 유사하다면 아무래도 적은 양의 코드가 좋은 평가를 받는다. cloc을 통한 코드, 파일 수의 비교와 저번..
개요 프로젝트가 마감되고 12월 셋째 주를 쉬고 크리스마스도 보내고 가족들과도 많은 시간을 보냈다.이제껏 진행했던 여느 프로젝트처럼 막판에 부랴부랴 기능이 돌아가고 오류가 나지 않게끔 하느라 애썼다.하지만, 불편하고 불필요한 코드가 계속 눈엣가시처럼 걸려서 한 번은 치워야겠다 하고 다짐을 했다. 이제는 정말 1월이 되기 전 끝 마쳐야 할 거 같아서 진행하려하고 당장 생각한 목표는 다음과 같다.번들사이즈 감소무한 스크롤 미반영 컴포넌트 반영getServerSideProps 활용한 데이터 페칭불필요한 파일, 코드삭제비효율적인 로직 변경 각 요소들이 시간이 얼만큼 잡아먹을지는 모르겠지만, 첫 매듭을 번들 사이즈를 줄이면서 시작하려고 한다. Next 프로젝트의 번들사이즈NextJS로 만든 애플리케이션을 사용하려..
개요 랜딩페이지가 어느정도 완성되어 다른 기능들을 하나 둘 개발 중, 메인 화면에 유독 컨텐츠들이 많아 실제 배포환경에서 렌더링이 늦거나 유저경험을 저해하는 해프닝이 생길까 하고 검사를 받아보고 싶었다.마침, 크롬 브라우저의 관리자 모드에서 제공하는 Lighthouse가 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화), 그리고 기타 웹 품질 지표를 분석하고 개선할 수 있도록 도와주는 오픈 소스 도구라고 해서 사용해보았다. Lighthouse 사용검사를 받고 싶은 페이지에서 개발자 모드를 킨 후, (윈도우는 f12, 맥은 cmd+option+i 또는 fn+f12) 하단의 요소들 중 Lighthouse를 선택한다.모드, 기기, 카테고리를 선택 후 페이지 로드 분석을 클릭 나의 경우 모드 : 기본 값,..
