회사에서 어드민 페이지 프론트 개발을 담당하게 된 후, 기존 개발에 이슈가 상당히 많고 리팩토링 할 것도 많다고 항상 느끼고 있었습니다... 이상하게 동작하는 것들도 많고, 왜 코드가 이렇게 짜져 있을까...? 하는 당황,곤혹,의문의 연속... 에라 모르겠다, 다 뒤집어 엎어보자! 라고 하고 싶지만, 제가 짠 코드가 아니기에 섣불리 손도 댈 수 없는 상황.그렇다고 손놓고 있을 수는 없으니 하나하나씩 차근히 수정해보기로 다짐합니다... 그 중 로그인 만료까지 남은 시간을 렌더링 해주는 타이머 기능을 이번에 수정했습니다.이에 대해서 글로 끄적끄적 기록을 남겨봅니다.  발견한 문제점어드민 페이지에서 유저가 로그인을 하면 로그인 유효까지 남은 시간을 헤더에서 렌더링해서 보여줍니다.은행 사이트에서 흔히들 많이 보..

여러사람과 협업하며 개발을 하다보면, 단순한 import 문도 사람마다 다르게 쓰는 경우를 많이 보게 됩니다. 별 내용의 차이는 없어도 위와 같이 Import 문의 순서만 달라져도 git diff로 인식되는 것을 확인 할 수 있습니다. git diff 뿐만 아니라, 아무런 규칙 없이 개발자 제각각 마구잡이로 Import문을 작성하다보면 코드 품질과 가독성은 당연히 떨어질테고, 결국은 효율적인 개발 업무에 방해가 되겠죠. 이를 해결하기 위해, ESLint를 사용할 수 있습니다. ESLint로 import의 순서(order) 규칙을 정하고 제한할 수 있는 것이죠. 물론 ESLint에서 제공하는 규칙에 플러스로 더 많은 기능을 제공하는 플러그인을 사용해야합니다. 이를 위해 어떠한 설정을 해야하는지 알아보겠습니..

이전에 타입스크립에 대한 세미나를 진행한 적이 있는데, 그 중 가장 기초적인 내용인 타입스크립트 설치 및 사용법과 개발 환경설정에 대한 내용을 공유하려고 합니다. 타입스크립트를 처음 사용해보시는 분들에게 도움이 될 거라 생각합니다. 😁 1. 타입스크립트 설치 타입스크립트 사용을 위해, 프로젝트 내에서 타입스크립트를 설치합니다. yarn이나 npm 명령어로 설치할 수 있습니다. (저는 npm을 사용했습니다.) 이 때, tsc(컴파일러)도 같이 설치됩니다. npm install typescript 타입스크립트를 컴파일 하기 위해서는 타입스크립트 프로젝트 초기 설정 파일인 tsconfig.json 파일이 필요합니다. 이를 생성하기 위해 아래의 명령어를 입력합니다. 프로젝트 루트 디렉토리에 tsconfig.js..

웹 개발을 할 때 사용자 인증을 위해 서버로부터 token을 발급받는 방식을 많이 사용하게 됩니다. 사용자가 로그인한 상태에서 무언가 요청을 보낼 때, 사용자 권한이 필요한 요청이라면 token을 header에 실어 api 호출을 하게 되죠. 이 때, 유효하지 않은 token을 보내거나, 서버에서 설정한 token 만료 시간이 지났을 때 에러가 납니다. 그 중, 필연적(?)으로 맞딱뜨릴 수 밖에 없는 에러가 ‘토큰 인증 만료’입니다. 보통 토큰을 사용하여 사용자 인증을 처리할 때는 서버에서 Access Token과 Refresh Token이 두 가지를 발급합니다. 보안의 목적을 위해 Access Token의 만료 기간은 짧게 설정하여 자주 재발급 받아야 하지만, 그 때마다 사용자를 로그아웃 시키고 사용자..

Vite는 제가 정말 좋아하고 자주쓰는 프론트엔드 빌드 툴입니다. 리액트, 뷰, 스벨트 추가로 타입스크립트 사용 여부까지 맞춰서 빠른 속도로 프로젝트를 세팅할 수 있게 해줍니다. 또 개인적으로 npx CRA로 리액트 개발을 했을 때 보다 빌드나 런타임 소요 시간이 훨씬 빠른 것을 체감할 수 있었습니다. CSS관련 기술 중에서는 Tailwind CSS를 개발할 때 즐겁게 썼습니다. class 네이밍을 고민하지 않아도 되고, css 파일을 왔다갔다 하며 확인하지 않아도 된다는게 참 편리했습니다. 그래서 제가 좋아하는 이 둘을 합쳐, Vite로 세팅한 React 프로젝트에서 Tailwind css를 좀 더 효율적으로 사용 하는 방법을 공유하고자 합니다. (저의 개인 경험을 바탕으로 작성된 글이니, 항상 정답은..

프론트엔드 개발 시, 서버 API 호출이 필요한 경우 Fetch와 Axios 중 무엇을 더 많이 사용하시나요? 저는 개발 공부를 시작했을 코린이 시절부터 지금까지 Axios를 쓰고 있습니다. Fetch()는 자바스크립트에서 제공해주는 메소드로 따로 외부 패키지를 설치할 필요가 없습니다. Axios는 브라우저와 node.js 환경에서 비동기 통신을 위한 라이브러리로 따로 패키지 설치가 필요합니다. 개발을 할 때 보통 라이브러리를 최대한 많이 안쓰자는 주의이지만 Axios는 항상 쓰고 있습니다. 하지만 처음에는 그냥 Axios가 좋다는 말을 주워듣고 막 쓰기 시작했습니다. Axios의 강점을 효율적으로 사용하지도 못하면서요. 아래가 예전에 제가 작성했던 방식의 코드로 참 비효율적입니다..😅 //React 컴..

String(문자열)을 표기할 때 백틱으로 여러줄을 표현할 수 있다. 일반 따옴표로 한줄이 아닌 여러줄을 표기하면 에러가 난다. var name = "Sam" var welcome = '안녕하세요' + name + '님'; //백틱으로 표현 var welcome = `안녕하세요${name}님`; 문자열도 배열과 마찬가지로 Index로 위치에 접근할 수 있다. 하지만 배열과 다르게 한 글자만 바꾸는 것은 허용되지 않는다. let letter = '안녕하세요'; letter[2] //'하' 반환 letter[4] = '용'(X) 1. 문자열 Methods toUpperCase() / toLowerCase() 모든 영문자를 대문자/소문자로 바꿔준다. let message = "Hi everyone, Nice ..

1. toString() 10 진수 -> 2진수 / 16진수 let num = 10; num.toString(); //"10" num.toString(2); //"1010" ->2진수로 변경 2. Math Math.PI : 원주율 Math.ceil() : 올림 Math.floor() : 내림 Math.round() : 반올림 toFixed() : 숫자를 고정 소수점 표기법으로 표시 let number = 30.1234; //소수점 둘째자리까지 표현(셋째 자리에서 반올림) number.toFixed(2); => "30.12" number.toFixed(0); => "30" number.toFixed(6); => "30.123400" **주의해야할 점! toFixed는 문자형을 반환하기 때문에 다시 숫자형으..

심볼(Symbol)이란? ES6에 새롭게 추가된 7번째 타입으로 변경 불가능한 원시타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 즉 기존의 객체에서 property key는 문자형이었지만 추가로 더 가능한 형태는 Symbol이다. 심볼은 유일한 식별자를 만들 때 사용한다. 즉, 심볼은 유일성을 보장한다. const a = Symbol(); const b = Symbol(); //new를 붙이지 않는다. console.log(a) => Symbol() console.log(b) => Symbol() a === b; -> false a == b; -> false const a = Symbol('id'); -> 설명을 넣어줄 ..