본문 바로가기

개발 경험과 회고

 (9)
[회고] - MBTI 명탐정 (테오의 스프린트 14기) 우연히 좋은 기회로 시니어 프론트엔드 개발자 테오 님이 주관하시는 테오의 스프린트에 참여하게 되었다. 테오의 스프린트의 취지는 요약해서 이야기 하면 "5일간 좋은 사람들과 함께 잘 만들어진 협업 프로세스를 함께 경험한다." 이다 구글 스프린트라는 협업 프로세스를 표방하고 있고 예전부터 벨로그 트렌딩 글 등에서 참여했던 사람들의 후기를 보고 관심을 가지고 있었는데 기회가 왔고 참여하게 되었다. https://brunch.co.kr/@brunchjwshim/90 구글 스프린트를 아시나요? 한국형 스프린트, 퀵서클(Quick Circle) | 구글 스프린트란? 스프린트는 7명의 팀원들이 열린 토론을 통해 프로토타입을 제작하고 고객과 함께 아이디어를 테스트하여 중요한 문제들에 대한 답을 brunch.co.kr ..
Chart.js를 이용한 차트 그리기 최근 참여하게 된 간단한 미니 프로젝트이다 해당 서비스는 친구들의 MBTI를 맞춰보고 친구들은 내 MBTI를 어떻게 생각하는지에 대한 통계를 보여주는 서비스이다. 응답에 대한 통계를 리스트 형태로 보여줄 지 아니면 차트 형태로 보여줄지 기획 단에서 꽤 많은 고민을 했는데 별도의 통계 페이지에서 두가지 방식 모두 구현을 하기로 했다 다음과 같은 형태다 리스트 목록의 경우는 구현이 간단하지만 이러한 파이 차트 는 직접 구현하기에는 공수가 많이 들 것 같아 chart.js 라이브러리를 사용했고 어떤 방식으로 사용하였는지 공유하려 한다. https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern w..
삽질은 배움이다 개발을 하다보면 어마어마하게 많은 고생을 한다. 익숙치 않은 용어, 개념, 복잡한 알고리즘, 등등. 때문에 새로운 프레임워크, 언어를 공부할때면 매번 시행착오, 일명 삽질을 겪게 된다. 그러나 삽질은 사실 도전이고 완성을 위한 과정이다 삽질하는 과정에서 시도해본 수많은 토이프로젝트, 이곳저곳 염탐한 다른사람의 코드, 또는 공식소스코드, 문서, 이 모든것들이 모여서 클릭하게 된다. 이번에 개인 프로젝트를 처음써보는 react-query, recoil을 적용하면서 느꼈다. 그 과정에서 수많은 에러와 버그를 만났다. 특히 cookie를 저장하고 읽어오는 과정에서 많은 에러를 만났다. cookie를 받아오기 위하여 에러를 검색하고 읽어내려간 문서에서 또다시 모르는 개념을 찾기를 반복하였다. 당장 react-qu..
Select 태그에서 placeholder 만들기 개요 HTML의 select 태그에 placeholder를 넣어야 하는 상황이 생겼다 대충 이런식이다 하지만 select 태그는 placeholder 속성이 없다. 그래서 이렇게 option 하나를 placeholder를 대신해서 써야 한다. 해결 플레이스홀더 옵션1 옵션2 옵션3 옵션4 옵션5 옵션6 이렇게 나온다. 맨 위 옵션은 selected 되었지만 disabled 및 hidden 되었기 때문에 옵션 리스트에는 보이지 않는다. 옵션 한 개를 선택하면 그 다음부터는 보이지 않는다. 그리고 추가로 플레이스홀더가 있을 때와 없어졌을 때 스타일이 달라져야 했다. select와 option의 value에 플레이스홀더 값을 달고 onChange 이벤트 핸들러를 다음과 같이 붙일 수 있다. styles.sel..
좋은 커밋 메세지 작성하기 협업과 커밋 메시지 개발자는 혼자 일하는 직업이 아니다. 많은 경우에 다른 사람들과 함께 작업을 하고 그렇기 때문에 협업을 위한 여러가지 규칙이 존재한다. Git을 통해 코드를 유지하는 경우 커밋과 커밋 메시지에 규칙을 정해 각 커밋에서 어떤 작업이 이루어졌는지 쉽고 명확하게 파악할 수 있다. 그렇다면 좋은 커밋 메시지를 작성하기 위한 규칙에는 어떤것들이 있을까? 좋은 커밋 메시지를 작성하기 위한 규칙들 한 눈에 커밋 메시지를 알아보기 위해 중요한 것 중 하나는 이름을 명시적이고 규칙적으로 작성해주는 것이다. 또한 해당 커밋에 대한 내용을 잘 작성해준다면 코드를 일일히 분석하지 않아도 해당 커밋의 내용을 알아볼 수 있다. 커밋 메시지의 7가지 규칙 1. 제목과 본문을 빈 행으로 구분한다. 2. 제목을 5..
[프로젝트 회고] - 모두의 해결사 1. 프로젝트 링크 https://mo-hae.com/ 모두의 해결사 mo-hae.com 2. 기획 의도 세상 모든 사람들은 최소한 한 가지 이상의 재능을 타고난다고 합니다 그런데 자신의 뜻과는 다르게 재능을 살리지 못하고 자신의 뜻과는 다른 삶을 살고 있는 분들이 참 많다는 생각을 하게 되었고 사회 초년생들과 대학생들이 자신의 전공과 재능을 살려서 다른 사람에게 도움을 주고 또는 도움을 받는 재능 나눔 서비스를 기획하게 되었습니다 3. 기술 스택 1) React.js SPA 구현을 위해 React를 선택했다. Next도 고려를 했었지만 동그라미 프로젝트를 할때와는 팀원도 바뀌고 React를 더 선호하는 의견이 주류였기에 자연스럽게 React를 선택했다. 2) TypeScript TypeScript를 사..
Lighthouse를 이용한 웹 성능 최적화 후기 *성능 최적화를 하게 된 계기 모해 프로젝트의 기능에 대한 개발이 모두 끝난 이후 우연히 Lighthouse에 대해서 알게 되었다. Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다 Lighthouse를 이용해서 성능 측정을 하게 되었고 결과는? ....... 처참했다..... 대체 무엇이 문제였을까 막막한 마음이 컸다 ㅜㅜㅜㅜ 프론트 개발자의 역량으로 웹 성능 최적화에 대한 부분도 굉장히 중요한 것으로 알고 있었기 때문에 이번 기회에 하나하나 문제점을 분석하고 해결해보기로 결심했다. 1. 코드 분할 (Code Spliting) 첫번째로 사용하지 않는 자바스크립트 코드로 인해서 많은 시간이 지체된다는 문제점이였다 이런 문제가 생긴 이유는 CRA ..
프리온보딩 프론트엔드 회고 8월 28일 부터 9월 30일 까지 진행한 원티드 프리온보딩 코스에서 기업과제와 강의를 들으며 느꼈던 부분과 후기를 회고로 적어보려고 한다. 다음은 해당 코스에 대한 소개글 링크이다. https://www.wanted.co.kr/events/pre_ob_fe_5 프리온보딩 프론트엔드 코스 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 1. 협업에 대하여 프리온보딩 세션에서는 어떤 기술을 잘 쓰는가에 대한 부분보다는 어떻게 하면 클린한 코드를 작성하고 팀원과 협업을 잘하는 방법을 중점을 두고 진행이 되었다. 강사님은 우리가 왜 협업을 잘해야 하는지 그리고 코드를 작성할때 가독성이 좋은 코드가 나 자신을 위..

티스토리툴바