두달 전 개최된 2025 우아콘에 운좋게 참가할 수 있게 되어 후기를 남깁니다.글로 정리는 해서 회사 팀원들에게 공유는 했지만, 블로그에 올린다는 것이 미뤄져서 너무 뒷북이 되버렸네요...아쉽게 참여하지 못한 분들께 좋은 정보가 되었으면 좋겠습니다. 참고로, 모든 컨퍼런스 내용이 아닌 기억에 남고 인상깊었던 세션 위주로 정리해봤습니다. 개최 날짜 : 2025.10.28(화)장소 : 그랜드 인터컨티넨탈 서울 파르나스 5층 1. 누구나 어드민 페이지를 만들 수 있는 “어드민 스튜디오”어드민 스튜디오는 FE 개발자가 아니여도, 코드를 몰라도 어드민 서비스를 제작 할 수 있는 배민의 웹앱 에디터입니다.어드민 스튜디오를 개발 하기 전, 일반적인 어드민 웹 에디터 개발은 다음과 같은 한계가 있습니다.내부 서비스이다..

와, 마지막 블로그 글이 무려 1년 전이다.사실 글을 몇개 정도 작성하고 임시저장 해놨었는데 무슨 이유에서인지 다 날라갔다........ 😫😫😫 그 이후로 현생에 치이고 시간이 흐르면 흐를수록 의지가 더 약해져 1년동안이나 블로그 글을 포스팅하지 않았다..너무 늦은 뒷북이지만 그래도 작년에 내가 한 업적 중 가장 자랑할만한 일을 지금이나마 기록해두려 한다. 작년 3월달 중순쯤,회사 사내 메일로 '부캐 전성 시대, 나는 강사다'(제목이 좀 웃겼음..) 라는 부제로 사내강사 모집 안내를 받았다.강의 주제는 직무기술, OA, 외국어, 기타 자유 등등으로 공유하고 싶은 지식이 있으면 누구나 신청 가능한듯 했다.비어있는 사내 회의실을 활용하여 강의를 하면 되는데, 강의 회차마다 소정의 보상도 있었고 간식까지..

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

어느정도 화면 기획이 정해지고 디자인이 시안이 나온 후,처음으로 본격적으로 개발한 기능 첫번째는 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를 좀 더 효율적으로 사용 하는 방법을 공유하고자 합니다. (저의 개인 경험을 바탕으로 작성된 글이니, 항상 정답은..