현재 내가 속한 회사에서는 개발자 모임이라는 시간을 한 달에 한 번씩 갖는다. 서로 공유하면 좋을 내용들과 개발적인 대화를 하는 매우 생산적이고 좋은 문화라고 생각하며, 이번에 그 시간을 적극적으로 활용해보기 위해 타입 스크립트에서 사용할 수 있는 유틸리티 타입에 대한 간단 소개 발표를 하게 되었다. 아래 내용은 이번 발표에 사용한 예시자료들이다. 유틸리티 타입(Utility Type) 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다. Partial 특정 타입의 부분 집합을 만족하는 타..
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)하려면 버전이 맞지 않아서 설치가 불가능하다고 알림이 나온다. 이때..
Scope란? (유효범위) 변수의 접근성과 생존 기간을 제어한다. 맛보기 코드 예제 let func1 = function(){ var a = 1; var b = 2; console.log(a + b); return a + b }; let a = 20; // a가 1로 적용될까 20으로 적용될까? ------------------------------------------------------ func1(); // 3 -> a = 1 로 적용되었다. // 함수 밖에서 a가 선언되어도 함수 안에서 다시 a = 1로 할당됨 스코프는 이름이 충돌하는 문제를 덜어주고, 자동으로 메모리를 관리한다. 🟢 자바스크립트의 유효 범위(scope) 전역 스코프 함수 스코프 블록 스코프(es6) 🔴 전역 스코프 스크립트 어디..
