m2ndy 개발 블로그

당근 알바팀의 Frontend Engineer 인턴으로 합류한지 한 달이 된 시점에서 작성해보는 회고.    인턴 합격 소식을 들었을 때 정말 꿈만 같았다. 평소 자주 사용하던 서비스의 개발자로 근무할 수 있는 기회가 생겼다니..! 누구보다 잘 해내고 싶은 마음이 컸다. 그렇지만 잘 하는 것은 쉽지 않았다. 처음 써보는 기술과 생각보다 훨씬 복잡한 도메인, 방대한 양의 코드.. 과연 내가 할 수 있을까? 라는 생각이 들었다. 다행히 담당 페어였던 킷이 많은 도움을 주신 덕분에 차츰 익숙해져갔고, 모르는 부분을 질문해가며 천천히 학습해나갔다. 다만 걱정이 되는 부분은 3개월이라는 짧은 시간 동안 괄목한 성과를 이룰 수 있을까에 대한 부분이다. 생산성을 빠르게 높이고 '정확'하게 배워가기 위해 고민 중이다...

본 글은 2025.1.6에 마지막으로 수정되었습니다.  기존의 Input 공통 컴포넌트에 ComboBox를 추가해야 하는 요구사항이 생겼습니다. Input ComboBox는 Input과 매우 유사하지만 에러 상태와 에러 메시지를 받지 않는데요, 따라서 Input ComboBox에서 불필요한 코드를 줄이고 유지보수성을 높이기 위해 InputComboBox라는 컴포넌트를 따로 만들기로 결정했습니다.           Input ComboBox  사용자가 "강남"을 입력하려고 할 때, 기능적인 시나리오를 정리하면 다음과 같습니다. 값을 입력하는 경우1-1. 사용자가 input에 커서를 올린다.1-2. input에 "ㄱ"를 입력한다.1-3. 입력값이 존재하면 combobox items를 보여준다.1-4. 커서를..

본 글은 2025.1.2에 마지막으로 수정되었습니다. 시작하기에 앞서, 본 글에서 ‘가리킨다’라는 의미는 ‘바인딩된다’라고 정의하겠습니다. 또한, 모든 예제는 브라우저 환경임을 가정합니다. this함수 호출 방식에 따라 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 거나, 전역 객체를 가리키는 변수.즉, this는 자기 자신을 가리키거나, 전역 객체를 가리킵니다.// 객체 리터럴 예제// this는 getName 메서드를 호출한 객체인 introduction을 가리킵니다.const introduction = { name: 'Lee', getName() { return this.name; },};console.log(introduction.getName()); // L..

본 글은 2024.12.31에 마지막으로 수정되었습니다.  Storybook 버전 : 8.4.5Typescript 버전 : 5.6.2Vite 버전 : 5.4.10   프로젝트에서 FeedItem 컴포넌트의 스토리북을 구현하던 중 이런 에러를 마주했다.createRoot(...): Target container is not a DOM element.  preview.ts와 FeedItem 스토리북의 코드는 아래와 같았다.// .storybook/preview.tsimport React from 'react';import { MemoryRouter } from 'react-router-dom';import type { Decorator, Preview } from '@storybook/react';impor..

본 글은 2024.12.23에 마지막으로 수정되었습니다.  CI를 왜 구축하는 거야?운영 브랜치, 또는 개발 브랜치로 병합하기 전 해당 브랜치가 잘 동작하는지, 병합 시 이상은 없는지 확인하는 단계가 필요합니다. 주로 테스트, lint, 빌드가 이상 없이 완료되는지 확인을 해야 하는데요. 매번 PR을 올리고 추가 커밋을 할 때마다 이 단계를 모두 수작업으로 하기에는 번거로우니, CI라는 단계로 자동화하여 시스템을 구축할 수 있습니다.  CI 구축 시작하기"메리 트리스마스" 서비스에서 프론트엔드 CI 구축을 담당하며 어떤 전략이 필요할지 검토해 보았습니다. 먼저 저희 서비스에서는 jest를 아직 도입하지 않았기에 CI 과정에 lint, 빌드 단계가 필요했고, 추가로 Storybook 자동 배포를 추가하고자..

영원히 지나가지 않을 것만 같았던 10개월이 지나고 .. 우아한테크코스 6기 수료식 날이 왔다!         오전에는 근로 팀이 열심히 준비해 준 컨텐츠로 시간을 보내고, 오후에는 다 같이 모여 수료증을 받고 사진을 찍었다.         우아한테크코스 동안 무엇을 배웠니?마인드 셋 부분으로는, '어떤 개발자가 될 것인가', '어떤 삶을 살아갈 것인가'에 대한 고민을 통해 나만의 답을 만들어 낼 수 있었다. '어떤 개발자가 될 것인가'에 대한 대답으로는, 협업하기 좋은 개발자, 동료들이 나와 함께 일하고 싶어지는 개발자가 되는 것이다. 개발자라는 직업은 반드시 다른 개발자들과 협업하는 부분이 생기게 된다. 이렇게 협업을 하는 과정에서 서로의 니즈를 원활하게 주고받으며, 동료들에게 도움이 되는 개발자가 ..

대상 독자자바스크립트 이벤트 루프에 대한 지식이 있는 분렉시컬 스코프와 실행 컨텍스트에 대한 지식이 있는 분호이스팅에 대한 지식이 있는 분    실행 컨텍스트 (Execution Context)Lexical Environment에 대해 알아보기에 앞서, 자바스크립트의 실행은 실행 컨텍스트(Execution Context)에 의해서 일어납니다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 즉, 코드를 실행하기 위해 필요한 정보들이 들어가 있는 공간입니다. 이 공간들을 콜 스택에 쌓아 올리면서 자바스크립트를 실행합니다. 실행 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval, 함수 등이 있습니다. 우리가 흔히 실행 컨텍스트를 구성하는 방법으로 대표적으로는 함수를 실행하는..

EC2와 Nginx를 사용한 첫 번째 버전의 배포 과정은 여기서 확인하실 수 있습니다. Devel Up 프로젝트의 브랜치 전략Devel Up 프로젝트에서는 dev 브랜치와 main 브랜치를 활용해 각각 개발 서버와 운영 서버의 파이프라인을 독립적으로 구축하고 배포하는 것을 목표로 했습니다.   처음에는 GitHub Actions를 사용하려 했지만, 제공받은 AWS 계정의 S3 정책 설정 상 access key 발급이 불가능했습니다. 이에 따라 AWS CodePipeline과 CodeBuild를 사용해 파이프라인을 구축하기로 결정했습니다.   AWS를 선택한 이유와 장단점 AWS는 GUI를 통해 파이프라인을 간편하게 설정하고 실행할 수 있는 장점이 있습니다. 디버깅 과정에서도 CloudWatch를 활용하면..

3차례의 QA와 5회의 유저 테스트(UT)를 진행하며, 자잘한 버그를 해결하고 테스트 유저로부터 피드백을 수집했습니다.  테스트 과정 중 "글 수정 기능이 있으면 좋겠다"는 피드백을 받아 수정 기능을 구현하기로 결정했습니다. 하지만 새로운 풀이 작성 페이지와 풀이 수정 페이지를 같은 MissionSubmitPage로 재사용하고자 했기에, 이를 어떻게 설계할지에 대해 고민이 들었습니다. 그래서 일단 흐름도를 그려보기로 했습니다.글 작성 페이지를 (1) 새로운 글을 작성하기 위해 방문하는 경우와, (2) 수정하기 위해 방문하는 경우를 나누기 위해 url에 solutionId 파라미터를 추가했습니다. 페이지 로드 시 파라미터를 확인하여, 데이터가 존재하면 서버에서 기존 데이터를 가져와 수정 작업으로 간주합니다..

1차 런칭 이후 피드백 반영   1차 런칭 후 받은 주요 피드백은 모바일 환경을 고려해야 한다는 점이었습니다.서비스의 주요 진입점이 카카오톡이었기 때문에 대부분의 사용자가 모바일로 접속하는 상황이었습니다. 특히, 메신저를 통해 주변 사람들에게 서비스를 홍보하는 경우가 많아 사용자들이 처음 마주하는 랜딩 페이지가 모바일 환경에 최적화될 필요가 있다는 의견이 있었습니다. 이러한 피드백을 반영해 반응형 디자인 적용을 결정했습니다.   저는 랜딩 페이지의 소개 이미지를 코드로 변환하고 반응형 작업을 맡았습니다. 또한, 헤더를 반응형으로 수정해 모바일과 데스크탑 환경 모두에서 최적의 사용자 경험을 제공하고자 했습니다. 반응형 랜딩 페이지 구현기존에는 UT 피드백에 따라 랜딩 페이지를 소개 이미지로 대체했지만 화질..