불확실한 미래를 조각합시다

들어가며프론트엔드 개발자는 일반적으로 API를 통해 데이터를 받아 화면에 표시하는 역할을 수행합니다. 이 과정에서 SQL은 백엔드 개발자나 데이터 엔지니어의 영역으로 여겨지는 경우가 많습니다.하지만 협업 과정에서 다음과 같은 말을 자주 듣게 됩니다.“그건 WHERE에서 필터링했어요.” “이건 JOIN으로 합쳐야 돼요.” “ORDER BY 순서가 달라서 정렬이 꼬였어요.”이런 대화를 정확히 이해하려면 SQL의 기본 개념을 알고 있어야 합니다. SQL 문법을 모두 외울 필요는 없지만, 주요 용어를 알고 있으면 API 설계와 데이터 흐름을 훨씬 명확하게 파악할 수 있습니다. 핵심 요약Table에 대한 이해WHERE: 필터 조건 → 검색 및 필터 UI와 대응ORDER BY: 정렬 기준 → 정렬 옵션 구현과 대응..

팀 내 업무 자동화를 위해 React 기반의 프론트엔드와 FastAPI 기반의 백엔드로 프로그램을 개발했습니다.개발 환경에서는 npm start로 React 개발 서버를 실행하고, FastAPI 서버를 로컬에서 띄우는 방식으로 사용했지만,문제는 당장 서버를 할당받아 웹 서비스 형태로 배포할 수 없는 상황이었습니다.사내 인프라 정책과 승인 절차 때문에 클라우드나 온프레미스 서버에 올리는 것은 단기간에 불가능했기에사용자 입장에서는 웹 서비스 접속 대신 설치 후 바로 실행할 수 있는 데스크톱 프로그램이 필요했습니다.즉, React 앱을 exe 파일 형태로 배포해야 했습니다. 1. Node.js 기반 앱을 exe로 만드는 방법은 어떤게 있는지? React로 만든 웹 애플리케이션을 설치형 프로그램(exe) 형태..

회사 일 + 외부 사이드 플젝(겸업 아님 절대 절대 나의 유일한 생산적인 취미임)을 병행하며 살다가오랜만에 회고록에 대한 글을 끄적여 보기 위해 테크 블로그를 다시 방문했다.열심히 글을 쓰는 것도 좋지만 회사 일에 적응을 더 빨리 하고 싶어서 선택과 집중을 했다.덕분에 회사에서 잘 지내고 있다고 스스로 느끼게 되었다. 입사 한 달차까지만 해도 내가 잘 적응하고 있는지 인지를 못했다만...어느순간 확 적응이 된 것 같다.아마 다른 프로님이랑 새로 TF 개발을 진행하면서 그런 느낌이 든 것 같기도 하다!역시 협업이란 키워드는 내 인생에서 아주 중요한 요소인 것 같다. 그래서 오늘의 회고는 바로바로 대망의 '본교 멋쟁이 사자처럼 12기 프론트엔드 파트장'을 맡으면서 겪어온 것들에 대해간 단 하 게 정리해보려고..

30개의 상태관리가 달려있는 하나의 컴포넌트를 마주하신 적 있으신가요?최근 제가 맡은 업무 중 하나는, 파일 변환 기능을 담당하는 컴포넌트의기능 추가구조 개선 배포 및 테스트이 세 가지를 모두 책임지는 일이었어요.처음에는 “기존 코드에 기능 몇 개만 추가하면 되겠지”라는 마음으로 가볍게 시작했지만, 실제로 마주한 코드는 예상과는 조금 달랐어요.return 문만 보면 현기증이… 이 컴포넌트에는 useState가 약 30개가 나열돼 있었고,UI 구성은 Tailwind CSS 라이브러리를 사용한 형태로 되어 있었어요.Tailwind는 스타일을 클래스 단위로 태그에 바로 작성하는 방식이라, 작은 컴포넌트에선 굉장히 생산적일 수 있지만,return문 안에 여러 레이아웃과 조건부 렌더링이 얽혀 있을 경우 한눈에 파..

회사에 입사한 지 두 달쯤 됐을 무렵, 우연한 기회로 사이드 프로젝트에 참여하게 됐다!회사에서 TF로 진행 중인 개발도 재미있지만, 나만의 서비스를 만들어보는 건 또 다른 의미로 다가오는 것 같다. 이번 프로젝트는 Vite + 리액트 기반이라 개발 자체는 크게 어렵지 않은데,나는 중간에 합류한 입장이라 기존 팀의 개발 방식과 툴에 맞춰보려고 한다.상태 관리는 Recoil이라는 라이브러리를 쓰고 있어서, 아직 익숙하진 않지만 간단하게 개념부터 정리해보고 시작해보려 한다.우선, 리코일은 뭘까?1. 리코일의 개념리코일은 페이스북에서 개발한 React 애플리케이션을 위한 상태 관리 라이브러리로, 공유 상태와 비동기 데이터 흐름을 쉽게 다룰 수 있도록 설계되었으며, 아래와 같은 특징을 갖는다. 1. Atoms –..

이번 프로젝트는 리액트 기반이라 익숙하긴 했지만, 기존에 쓰던 CRA(Create React App) 대신 비트(Vite)라는 툴을 쓰고 있어서 처음엔 조금 낯설었다.막상 써보니 왜 많은 개발자들이 Vite로 넘어가는지 체감이 되었다. CRA와 비교했을 때 확실히 빠르고, 설정도 훨씬 간결했다.이번 글에선 두 도구의 차이와 Vite가 왜 더 나은 선택지가 될 수 있는지를 간단히 정리해보려 한다.1. CRA의 장점과 한계CRA는 한동안 리액트 프로젝트의 기본 셋업 도구로 많이 쓰였다.npx create-react-app 한 줄로 프로젝트가 뚝딱 만들어지고, 바로 개발을 시작할 수 있다는 점에서 초보자에게 정말 친절한 툴이다. 하지만 프로젝트가 어느 정도 커지거나 커스터마이징이 필요해지는 순간, 단점이 하나..

회사에서 진행 중이던 기존 프로젝트 TF팀에 합류하면서 인수인계를 받게 되었다.해당 프로젝트는 백엔드는 Python의 FastAPI, 프론트엔드는 React로 구성되어 있었고, 전체적인 구조나 워크플로우는 내가 기존에 경험해왔던 방식과는 조금 달랐다. 그래서 하나씩 구조를 뜯어보며 이해하는 데 집중했다. 나는 프론트엔드 개발자로 참여하게 되었지만, 기존 시스템의 흐름을 제대로 이해하려면 백엔드와 데이터베이스까지 포함한 전체 구조를 파악하는 게 먼저라는 생각이 들었다.그 과정에서 자연스럽게 SQLite라는 데이터베이스를 접하게 되었고, FastAPI와 함께 어떻게 연동되는지를 알아보게 되었다. SQLite는 서버 없이도 작동하는 파일 기반 데이터베이스로, 설치나 복잡한 설정 없이도 빠르게 사용할 수 있다는..

정말 우연한 계기로 참여하게 된 웹 개발 연합 동아리 '멋쟁이 사자처럼 대학 11기'를 회고해보려 한다.2023년에 활동했던 일이어서 이제는 꽤 오래된 일이지만,이 동아리 활동이 나의 진로에 큰 영향을 미쳤다는 사실은 내 주변 대부분이 알고 있는 일이다.이 경험 덕분에 지금의 내가 있고, 나의 진로와 가치관에도 많은 변화를 가져왔다.난 해당 동아리에서 프론트엔드 파트 운영진, 회계직을 맡게 되었다.선발 과정은 개발에 대한 실력이 아닌, 열정을 보이는 태도가 중요했다. 나는 프론트엔드 파트 운영진이라 해도 웹 개발의 '웹'도 모르는 상태로 참여하게 되어'내가 과연 이 동아리에 어떤 도움을 줄 수 있을까' 라는 고민과 걱정이 많았었다.무엇이라도 도움이 되고자 하는 마음으로 회계직을 겸임하기로 결심했다.   ..

프로젝트를 진행하면서 가장 어려웠던 부분 중 하나는 파일 관리와 코드의 복잡성이었다.Redux를 사용하기로 결정했을 때, 처음에는 각각의 액션, 리듀서, 상수, 미들웨어를 따로 관리하다 보니 폴더 구조가 금방 복잡해지고, 필요한 파일을 찾는 데에도 시간이 많이 걸렸다.게다가 Redux의 기본 사용 방식은 보일러플레이트 코드가 많아서, 새로운 기능을 추가하거나 상태를 관리할 때마다 같은 패턴을 반복하는 일이 많았다. 이런 문제를 해결하고자 Redux Toolkit을 도입했고, 결과적으로 코드 관리의 복잡성과 폴더 구조의 혼란을 크게 줄일 수 있었다.여기에서 Redux Toolkit을 사용하면서 느낀 점과 구체적인 방법을 공유해보려고 한다.1. Redux Toolkit의 도입: 보일러플레이트 감소Redux의..

Redux는 리액트에서 상태 관리를 효율적으로 할 수 있도록 도와주는 라이브러리로, 많은 프론트엔드 개발자들이 사용하고 있다.하지만 Redux를 사용할 때, 초기 설정과 사용 과정에서 복잡하고 장황한 코드가 필요하다는 단점이 있다.이를 해결하기 위해, 더 간소화된 버전인 Redux Toolkit(RTK)을 사용할 수 있다.이 글에서는 Redux와 Redux Toolkit의 차이를 예시 코드를 통해 살펴보며, Redux Toolkit이 어떻게 코드의 간결화, 비동기 작업 처리, 불변성 관리 등을 개선하는지 구체적으로 알아보겠다.1. 보일러플레이트 코드 감소Redux에서는 상태를 관리하기 위해 액션 생성자, 액션 타입, 리듀서, 미들웨어 설정을 각각 작성해야 하지만,Redux Toolkit은 createSl..