lodash - orderBy() 함수 Table 헤더 버튼을 클릭하면 오름차순, 내림차순 정렬이 왔다 갔다 하면서 하위 내용들이 정렬되는 기능을 구현해야 하는 때였다. 처음 lodash에 orderBy 함수 존재를 모를 당시, 눌리는 헤더 버튼의 타입(email, name, 날짜)에 따라 조건을 달리 줘서 정렬을 일일이 시키고 true/false를 최종적으로 return 시켜서 true를 반환하면 오름차순 정렬, false를 반환하면 내림차순 정렬을 시키는 방식으로 구현했었다. 그러다 보니 코드가 좀 길어져서 상당히 많은 부분을 차지했었는데 lodash에 orderBy() 함수의 존재를 알게 되자 아래의 긴~ 코드가 한 줄로 순식간에 정리가 되었다.... // orderBy 사용전 const handl..
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)하려면 버전이 맞지 않아서 설치가 불가능하다고 알림이 나온다. 이때..
실전 프로젝트 마무리 단계 돌입 이제 유저들로부터 피드백을 받고 받은 피드백 반영하는 등 새로운 것을 만드는 것보다는 기존 기능들에서 발생하는 각종 오류들을 잡는 것에 집중을 할 듯하다. 채널 톡 연결(피드백 및 오류 문의) 처음엔 설문을 넣을까 했지만 당장 나도 설문에 비협조적이기 때문에 유저들의 피드백을 좀 쉽게 받기 위해 채널 톡이라는 서비스를 이용했다. 정말 쉽게 연결되어 놀랐고 실제 모르는 유저들의 문의글이 올라올 때마다 아직도 흠칫한다. 리뷰 같은 거 적을 때 잘 써줘야겠다고 느꼈다. HTTPS 도메인 연결 S3 밖에 할 줄 몰랐는데 SSL 연결하면서 CloudFront와 Route53, CLI, Certificate Manager 등 정말 많은 기능을 써서 연결시켰다. 사실 아직도 어떤 원리..
21.05.10(월) - 해왔던 거와 흡사한 기능 구현은 이제 어렵지 않다. 새로고침 시 username을 불러오는 함수 실행시키고 닉네임 중복검사 기능을 완성하였다. 이미 다 기반이 다져져 있던 부분 숟가락만 얹은 거라 쉽게 쉽게 하였다. - chart.js 첫 사용 chart.js 활용하여 막대그래프와 선 그래프가 함께 나오는 혼합 차트를 구현해야 한다. Library Docs를 보고 있긴 한데 거의 자바스크립트 위주라 필요한 정보 뽑아내기가 어렵다. 곧 MVP 출시해야 하는 시기가 다가오는 만큼 빨리 끝내야 하는데 내일까지는 성공해보겠다. 21.05.11(화) - Chart 작업 완료 그래프 구현 성공을 하였다. 데이터를 넘겨받고 누락된 데이터들도 에러 없이 날짜순으로 표시를 해야 하는데 이 부분에..
카카오 소셜 로그인 기능 구현 실전 프로젝트를 진행 중 소셜 로그인 구현을 맡게 되어 05.02 부터 소셜로그인 구현을 위한 사전 작업에 돌입하였고 그렇게 1주일간 백엔드 팀원 분과 소셜 로그인 늪에 빠지게 되었다. 분명 쉽다 그랬는데.. 소셜 로그인 중에서도 카카오가 가장 쉽고 프론트는 할 일이 정말 없다고 했다. 그래서 정말 편하게 시작했다. 근데 할일이 없다고는 하는데 대체 내가 프론트로서 어떤 역할을 해줘야 하는 건지 확실하게 명시된 곳이 없었다. 그냥 서비스 설명뿐... 애매한 역할분담, 결론은 삽질 kakao developers 페이지에서 우리가 구현하려는 부분에 대한 프론트와 백엔드의 역할이 명확히 지정되어있지 않았다. 이것저것 검색해보니 정말 많은 방법들로 포스팅한 사람들이 많았다. 근데 ..
