dev story

최근 작성된 게시물

• [DB] Query문 배워보기 Nest.js를 공부하면서 드디어 백엔드 개발을 경험해보았다.프론트엔드 개발자로 JavaScript와 TypeScript는 익숙했어도데이터베이스는 완전히 처음이었다. 솔직히 말하면, 데이터베이스라는 단어만 들어도 살짝 겁이 났다.쿼리문? 테이블? 조인? 이런 단어들이 머릿속에서 맴돌았지만,로직을 고민하며 씨름하는 게 재미있을 거라는 기대도 있었다. 이 글은 Nest.js를 배우면서 MySQL 쿼리문을 처음 접한 프론트엔드 개발자의 고군분투기를 정리한 것이다. QueryMySQL을 설치하고, Nest.js에서 TypeORM으로 연결해보는 것까지는 그래도 순조로웠다.TypeORM 덕분에 JavaScript 객체나 함수처럼 데이터를 다룰 수 있어서 프론트엔드 감각으로 접근이 가능했다.DB를 어떤식으로 불러올지.. 2025.04.27

• 

  프론트엔드 개발자의 백엔드 입문하기 계기아마 대부분의 프론트엔드 개발자는 비슷한 생각일 것이다.퍼블리싱의 영역보다는 로직의 영역이 더 재미있다는 것 물론 퍼블리싱이 하기싫은 정도는 아니지만 퍼블리싱 끝에 로직에 대한 고민하는 시간이더 재미있는 건 부정할 수 없다. 지금도 완벽하지 못하고 벅찬 알고리즘을 만나는 순간이 많지만프론트엔드 영역에서 해결하기 힘든 문제는 좀 처럼 만나보기 쉽지 않다. 마침 무언가 배우기 위해 인프런에 접속했고App, Web, 3D 등 여러 분야가 있었지만 백엔드를 해보고 싶은 생각이 들었다. 프론트엔드 개발자로 아주 깊게 이해하는 전문가가 되기 위한 목표가 있지만혼자 개발하는 것이 아닌 이상 백엔드의 환경이나 고민거리도 알아놓으면 좋을 것 같다. 그 중에서 무엇을 해볼지 고민했지만 그리 길지는 않았다.지금 바로 시.. 2025.04.20

• 

  좋은 코드에 대한 생각 정리 고민항상 개발하면서 생각하는 공통사항이다.지금보다 깨끗하고 더 나은코드를 작성하고 싶다....그래서 더 나은코드가 뭔데?결국 매번 답을 내리지 못한채 코딩을 이어갔고 조금 더 정성들여 코드를 작성해왔다.이젠 이글을 통해서 내 생각을 정리하고 꾸준히 생각나는대로 업데이트 해보려고 한다.균형있는 개발코드사실 좋은코드, 나은코드라는 것이 정답이 있지는 않다.누군가는 짧고 구동 속도가 빠른코드라면 좋다고 느낄 것이고누군가는 주석이 잘 달려있다면 좋다고 느낄 것이고누군가는 버그가 없다면 좋다고 느낄 수 있다. 내 생각은 다음과 같다. 읽기 쉽고, 유지보수가 용이한가?사용자 편의를 고려했는가?확장이나 업데이트를 고려했는가?안정적이며 예외상황을 최소화 했는가? 이제 하나씩 내용을 정리해보자.읽기 쉽고 유지보수가 용이.. 2025.04.14

• 

  [JavaScript] Global Locale 다국어 지원하기 개발하던 프로젝트에 다국어를 지원하기로 했다.한, 영, 일 3개국어를 대상으로 하고 기존 Text를 다국어처리 해야하는데...언제 다 바꿀지 부터 막막하다. 처음부터 했으면 좋았을걸...  우선 구현 방식부터 선정해보자. 구현방식1. 직접 모듈 개발 및 텍스트 표현보유한 다국어문서를 JSON으로 파싱-각 뷰, 컴포넌트에서 가져다 쓸수 있게 개발하는 방식장점 - 커스텀이나 유지보수에 용이하고 가볍다.단점 - 개발공수가 발생하며 사용하는 파일에 import를 하거나 글로벌 모듈로 설정해야한다. 2. 라이브러리 사용 (i18n)JSON형식의 파일을 사용해서 i18n 라이브러리로 각 컴포넌트에서 언어 변형장점 - 개발공수가 짧다.단점 - 커스텀이 제한적이다. 결정결국 두가지 방법을 조합해서 다음과 같이 사용하기.. 2025.04.11

• 

  프론트엔드 개발자 회고 인생의 첫 회고라는 것을 기록하려고 한다. 단순히 메모나 기록을 넘어서 내가 어떻게 성장하고 있는지 적어보고 싶다. Why? 개발자 가장먼저 어떻게 개발자라는 직업을 가지게 되었는가 컴퓨터, 통신을 전공으로 하는 실업계 고등학교를 나왔지만 프로그래밍을 해본경험은 거의 없었다. 해본것이라곤 전공선생님 코드를 따라하는 정도의 C, Visual basic 정도 하지만 평소에 컴퓨터나 전자제품, 하드웨어, 소프트웨어를 좋아하는 성격이라서 자주 접하기도 했고 관련 영상도 자주 봐왔다. 전향을 결심한 건 '목표가 없다는 것' 그저 삶에 안주하며 발전하지 않고 있다는게 결정적인 이유였다. 주변을 둘러봤을때 누군가는 발전을 위해 공부하고 높은곳에 올라서있고 누군가는 그저 안주한채로 나와 비슷한 위치에 있거나 뒤쳐져 있.. 2023.12.27

• 

  [THREE.JS] Web에서 3D 구현하기 (three.js 사용법 example) 최근 인터렉티브 웹에 대한 관심이 많아졌다 그래서 여러 라이브러리와 예재, 잘 구현된 웹을 찾다보니 three.js를 사용해서 조금 더 역동적이고 눈에 띄는 웹을 구현해보고 싶었다. 우선 React나 Next.js에 적용하기 전에 기본적인 three.js의 사용, 설치방법을 알아보자. 1. 구성 Three.js는 다음과 같은 중요한 골격요소를 가지고 있다. 이 구성을 이해한다면 응용하고 여러 장면을 만드는데 큰 어려움이 없을 것이다. Renderer Renderer는 Three.js를 화면에 렌더링해주는 역할을 한다. Renderer의 domElement(canvas)를 사용해 Element를 추가할 수 있다. HTML에 있는 기존 canvas element에 적용할 수도 있다. Scene 3D Canv.. 2023.11.15

• 

  [M-V-VM] Dto와 Model정의와 사용법 (+class-transformer example) 프론트엔드에서 다루는 변수, 객체 들은 대표적으로 두개로 나뉜다. 서버로부터 받는 정보 (프론트엔드에서 함부로 건들이면 안되는 것이 원칙) 유저로부터 받는 정보 (Input, Button 등 유저의 행동에 의해 변경될 수 있는 변수) 그래서 M-V-VM의 데이터 모델링 규칙에서 두가지 변수를 어떻게 모델링 할것인지 정리해보려고 한다. 개인적으로 디자인패턴이라는 것은 더 나은길을 제시해 줄 뿐이며, 정답없는 이정표같은 느낌이다. 혹시라도 잘못 사용하는 것 같다면 얼마든지 피드백을 받을 준비가 되어있기에 많은 관심을 기다린다. 1. DTO 서버로 부터 받는 정보는 DTO로 모델링하고 다음과 같이 사용한다. 프론트엔드에서 특별한 상황이 아니고서는 임의변경을 하면 안되기에 readonly로 각 변수를 선언해준다.. 2023.09.15

• 

  [Lv.2] 프로그래머스 괄호 회전하기 (정답포함) 문제 설명 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, '(A), [A], {A}' 도 올바른 괄호 문자열입니다. 예를 들어, '[]' 가 올바른 괄호 문자열이므로 '([])' 도올바른 괄호 문자열입니다. 만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, '{}' 와 '([])' 가 올바른 괄호 문자열이므로 '{}([])' 도 올바른 괄호 문자열입니다. 대괄호, 중괄호, 그리고 소괄호로 이루어진 문자열 s가 매개변수로 주어집니다. 이 s를 왼쪽으로 x (0 ≤ x < (s의 길이)) 칸만큼 회전시켰을 때 s가 올바른 괄호 문자열이 되게 하는 x의 개수.. 2023.09.12

• 

  [React-Native] 리액트네이티브 시작하기 (expo cli로 프로젝트 생성하기) 현재까지 웹 프론트엔드를 공부하고 개발해오면서 여러가지 느낀점 중 하나가 바로 App개발까지 잘 할수있다면 앞으로 더 많은 기회와 성장을 할 수 있을거라고 생각했다. 이제는 웹뿐만아니라 앱도 함께 개발하는 하이브리드개발자가 되어야 한다는 생각을 가지고 있기 때문이다. 그렇게 앱개발 공부를 시작했고 앱뿐아니라 웹도 완벽하지 못하지만 열심히 해야한다는 다짐으로 더 노력하려고 한다. 왜? React Native인가 React Native뿐만 아니라 여러가지 언어, 프레임워크로 앱개발이 가능한데 React Native를 사용하는 이유는 다음과 같다. JavaScript와 React 기반의 낮은 진입장벽 기존의 웹 React, Next.js를 주로 개발했던 입장에서 앱생태계와 구조를 배워보기에는 적절하다 생각했다.. 2023.09.11

• 

  [React] Drag & Drop 기능 구현하기 (react-beautiful-dnd example) 구현해야 하는 기능 중 드래그 & 드롭 기능이 필요해졌다. 관련 라이브러리를 여러가지 찾다보니 React-dnd에 애니메이션이 첨가된 React-beautiful-dnd라이브러리를 사용하게 됐다. 그래서 오늘은 간단하게 기능을 구현해보고 라이브러리를 체득해보자 설치 먼저 프로젝트에 설치부터 해보자. npm install react-beautiful-dnd 참고로 프로젝트는 React Next.js를 사용해서 구현해볼 것이다. react-beautiful-dnd를 사용하려면 두가지 설정을 필수로 해야한다. strictMode끄기 requestAnimationFrame실행 후 랜더링하기 프로젝트 루트에 next.config.js에서 strictMode를 아래와 같이 꺼주면 되며 /** @type {impor.. 2023.09.11