어느정도 화면 기획이 정해지고 디자인이 시안이 나온 후,처음으로 본격적으로 개발한 기능 첫번째는 OAuth 연동이었다. 작년에 회사에서 소셜 로그인(OAuth)관련해서 세미나를 진행한 적이 있기 때문에, OAuth에 관한 개념이나 로직을 이해하는 데에서는 크게 문제가 없었다. 관건은 프론트엔드 / 백엔드 / OAuth Server 간의 통신 시퀀스 로직을 어떻게 설정하느냐였다.  사용할 OAuth 서비스우리는 푸디지에 사용될 OAuth 서비스를 카카오, 네이버, 구글로 선정했다. 어느 애플리케이션에서든 소셜 로그인에서 이 세가지 서비스가 가장 많이 쓰인다는 것이 이유였다.각 서비스의 개발자 문서를 열심히 뒤적거렸고, REST API 보다는 각 서비스가 제공하는 sdk를 사용하기로 했다.그 이유는 우리가 ..

가벼운 첫걸음 지난 겨울 12월, 회사에서 한창 바쁜 시기가 끝났을 무렵, 이전부터 친한 동료와 몇번 얘기가 오고 갔었던 토이 프로젝트 개발을 본격적으로 진행하기로 했다. 보통 회사 업무 흐름이 신규 개발건 업데이트 → 열심히 개발 → QA 진행(열심히 개발 수정) → 배포 이 순으로 싸이클이 반복되었는데, 배포가 끝나면 그 다음 신규 개발 건까지 시간이 아주 널널한 편이었다. 그래서 무료함을 느끼고 있던 찰나, 이 시간에 뭐라도 해야겠다 싶어 나와 생각이 맞는 회사 같은 팀 동료와 프로젝트를 시작하게 되었다. 쇠뿔도 단김에 빼라고, 우리는 말이 나오자마자 하루만에... 토이 프로젝트를 같이 할 멤버를 모집했다. 스타트 멤버 그렇게 모여진 멤버는 나(프론트), 같은 회사 팀 동료 깨찰님(백엔드), 깨찰님..

여러사람과 협업하며 개발을 하다보면, 단순한 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 ..

11월 28일. 정식으로 프론트엔드 개발자로 첫 출근을 한 날이다. 이제 한달이 조금 흘렀다. 오늘은 정식적으로 첫월급도 받았다! 전혀 상상도 못했지만, 일반적인 IT 서비스 회사가 아닌 보안회사에 다니고 있다. 그러다보니 입사하자마자 배워야할 것이 산더미였고, 들어도 들어도 무슨말인지 정말 이해가 안갔다. 근데 팀장님도 그렇고 팀원들도 그렇고, 처음엔 어렵고 이해 안가는게 당연한거라고 말해줘서 안심이 된다. 팀원들도 좋다. 다들 1을 물어보면 10을 알려주려고 한다. 아무래도 "개발자"라는 기술직이다 보니 다들 사소한 것도 헷갈리면 적극적으로 찾아보기도 한다. 성격도 다들 부드럽고... 좋다... 이전 회사랑 너무너무너무 비교된다... 이제 겨우 개발자가 된 지 한달이 넘었지만, 나는 지금 회사에서 곧..