현재 회사에 다니면서 한창 크롬 익스텐션 서비스를 개발하던 당시 했던 삽질을 생각난 김에 포스팅하려 한다. 이제 와서 보면 겨우이거? 라고 볼 수 있지만 당시는 대체 뭐가 문제인지 우리의 든든한 친구 GPT에게 물어도 답이 나오질 않아 이것저것 코드 뜯어보던 시기였다. 대략적인 내용은 크롬에서는 해당 페이지가 로딩 중인지 아닌지 어떻게 판단하는가 였다. 문제를 마주했던 웹페이지는 한겨레신문 사이트였는데, 아무 기사나 찍어서 들어가 보면보기힘든(?) .html로 끝나는 형태의 url을 가지고 있다. https://www.hani.co.kr/arti/economy/economy_general/1137958.html ‘1인 가구 10평 원룸’ 살아라?…임대주택 면적 논란에 ..
프론트엔드 컨퍼런스 참석을 위해 잠실 롯데타워에 다녀왔다. FEconf 에서 주최하였고 거의 매년 열리는 컨퍼런스인데 작년에 우연히 참가후기를 읽어본 이후로, 올해는 꼭 한번 가보고 싶다 생각하고 있던 차에 컨퍼런스 개최 일정 공지가 나왔었다.(feconf 2023 공식 페이지) 일정 알림 맞춰두고 200명 선착순 티켓팅(?) 과정이 있는데, 선착순을 뚫고 참가하게 되었다. (친구랑 가려다 친구는 티켓팅 실패...) 현장 후기 1층에서 저런 목걸이를 받아 들고 31층까지 다이렉트로 쭉 올라갔다. 31층 도착하니 컨퍼런스 후원 기업들의 간단한 참여이벤트들을 곁들인 굿즈 나눔터가 바로 펼쳐져있고 복도를 따라 더 들어가면 A, B 순서대로 세션을 들을 수 있는 강의장이 나온다. 위는 B세션이 진행됐던 강연장..
lodash - orderBy() 함수 Table 헤더 버튼을 클릭하면 오름차순, 내림차순 정렬이 왔다 갔다 하면서 하위 내용들이 정렬되는 기능을 구현해야 하는 때였다. 처음 lodash에 orderBy 함수 존재를 모를 당시, 눌리는 헤더 버튼의 타입(email, name, 날짜)에 따라 조건을 달리 줘서 정렬을 일일이 시키고 true/false를 최종적으로 return 시켜서 true를 반환하면 오름차순 정렬, false를 반환하면 내림차순 정렬을 시키는 방식으로 구현했었다. 그러다 보니 코드가 좀 길어져서 상당히 많은 부분을 차지했었는데 lodash에 orderBy() 함수의 존재를 알게 되자 아래의 긴~ 코드가 한 줄로 순식간에 정리가 되었다.... // orderBy 사용전 const handl..
React에서 환경변수 활용 crate react app을 이용해 프로젝트를 생성한 경우 바로 환경변수를 활용할 수 있는 방법이다. .env 파일을 만들고 그 안에서 REACT_APP_ 이 붙은 변수명을 지정하면 환경변수를 바로 활용할 수 있다. // .env REACT_APP_BASE_URL = "www.google.com" root 경로에 .env 라는 파일을 생성하고 앞서 설명했듯 활용할 환경변수에 REACT_APP_ 을 붙여서 선언한다. 예시로 base_url 을 지정하였다. const URL = process.env.REACT_APP_BASE_URL fetch(`${URL}/movie`).then(res => res.json()).then(data => console.log(data)) .env..
TypeScript Utility Type Omit 아직 익숙치 않은 타입 스크립트를 사용하면서 불필요하게 중복되는 내용의 타입들을 또 써주면서 선언하는 경우가 많다 보니(미숙한 탓) 상당히 거슬렸는데 그걸 단번에 해결시켜줄 수 있는 Omit 이라는 utility type에 대해 알게 되었다. 사용 방법은 아래 코드 블록의 내용과 같고 대충 요약하면 기준이 될 interface를 선언한 다음 이리저리 변형시키면서 불필요한 코드의 중복을 줄이고 기존 타입의 재사용성을 높일 수 있다는 장점을 갖고 있는 것 같다. 관련 내용은 아래 링크 첨부하였고, 유틸리티 타입이 몇 개 더 있는데 다른 것들은 따로 보면서 공부하고 포스팅을 해야겠다. // 기준이 될 interface interface Todo { title..
Axios interceptors axios에 interceptors 라는 내장 함수를 알게 되었다. 덕분에 매번 통신을 하면서 일일이 토큰을 끼워 넣는 비효율적인 코드를 대폭 줄일 수 있었다. 나 같은 경우는 요청(request)을 보내는 과정에서 header에 authorization이 포함되어있지 않으면 일단 토큰이 저장되어있는지 아닌지(로그인상태인지와 유사)를 체크하고 토큰이 있으면 헤더에 토큰을 끼워 넣어주는(intercept) 식으로 interceptors를 활용하였다. (없으면 그냥 진행~) axios.interceptors.request.use((config) => { if (!config.headers.authorization) { const token = localStorage.getI..
ESLint "Jsx-a11y/anchor-is-valid" 태그에 기본적으로 href가 들어있어야 적합하다 판단하며, href=# 의 형태 역시 하이퍼링크의 임무를 수행하기에 적합하지 않다고 인식을 해서 오류메세지를 개발자에게 전달해주는 속성이다. 기본값은 true 이며 eslint 파일의 rules 키 부분에 "Jsx-a11y/anchor-is-valid":0 을 추가하면 태그에 더이상 href를 넣지않아도 경고 메세지가 보여지지 않는다. false 값으로 설정해둔다고 해서 딱히 개발하는데 문제될 것 같은 속성이 아니기에 앞으로 쭉 false로 선언하고 시작할 듯하다. "@typescript-eslint/no-unused-vars" 선언 되었으나 사용되지않는 변수가 있으면 알려주는 규칙이다. 기본값은..
회사 입사 후 첫 1주일이 지났다. 거의 환경세팅과 기존 코드 파악하는 시간을 많이 보냈는데 앞으로 매주간 알게된 지식들에 대해 꾸준히 기록 해두려고 한다. NVM의 필요성 체감 NVM 이란 Node Version Manager 의 줄임말로 노드의 버전을 관리할 수 있는 도구이다. 그동안 혼자 공부하면서 NVM이 왜 필요한지 알지 못했었다. 하지만 이번에 회사에서 사용되는 프로젝트를 구동하면서 느꼈다. 프로젝트별로 구성된 node 버전이 다를떄 해당 버전에 맞게 node 버전을 맞추지 않고 실행하면 실행에러가 발생한다. 예를들어 10.17.0 버전으로 세팅된 프로젝트에 16.17.1 버전으로 모듈을 설치(npm install & yarn)하려면 버전이 맞지 않아서 설치가 불가능하다고 알림이 나온다. 이때..
