본문 바로가기

전체 글63

[23.08.10] 음악으로 성공한 사람들의 공통적인 사고 방식 1. 좋은 아웃풋을 내기 위해서는 역시 많은 인풋이 필요하다. 음악을 다양하게 많이 들어보기. 2. 일상과 음악을 분리하기보다 일상 속에 음악을 녹여낸다. 멜로디를 자주 흥얼거리거나 일상 속에서 소재를 찾는다. 3. 작업할 때 본인만의 색깔을 뚜렷하게 만드는데 에너지를 쏟는다. 그래서 '나다운 것'을 되게 중요시한다. - 일단 나만의 플레이리스트를 만들어보면 어떨까 싶음 - 본인에게 어울리는 멜로디, 가사에 집착함 - 기술이 발전함에 따라 편집 기술 또한 그 사람의 색깔로 인정받는 듯 (e.g. 플러그인) 4. 가사를 쓸 때는 경험에서 우러나오거나, 가상의 상황을 부여하거나 두 가지의 방향이 있다. - 대부분 핵심 주제 -> 주제를 관통하는 가사 혹은 멜로디 -> 거기서 살을 이어붙이는 식으로 작업을 하.. 2024. 1. 9.
[23.08.06] 부트캠프 리뷰어의 자세 어느덧 회사를 제외한 여러 학습 기관(우아한테크코스, NEXTSTEP)에서 몇 번의 리뷰어 경험을 얻었다. 처음엔 단순히 업무 외 남는 시간에 소일거리 삼아 참여했던 일이 나름 또 성취감도 있어 꾸준히 기회가 될 때마다 참여하는 중이다. 리뷰어를 진행하며 그동안 느꼈던 감정들과 내가 추구하는 리뷰어의 자세에 대해 짧게나마 남겨두면 어떨까 생각만 하다가, 미뤄두면 또 잊어버릴 것 같아 이렇게 글을 적는다. 우선 나의 관점으로 보았을 때, 회사의 코드 리뷰와 학습 기관의 코드 리뷰는 목적이 약간 다르다. 회사에서 이루어지는 코드 리뷰는 제품을 정해진 기한 안에 최대한 안정적으로 배포하는 것을 목표로 한다. 그렇기 때문에 동료가 올린 PR에서는 1) 요구사항이 잘 동작하는지, 2) 코드의 변경으로 버그를 유발.. 2024. 1. 9.
[23.07.29] 프론트엔드에서 Route를 확장성있게 관리하기 리팩터링 배경 앱 내의 페이지가 많아지고 기획이 복잡해질수록 각 페이지의 주소를 나타내는 route 또한 심도 있게 관리될 필요가 있다. route의 경로뿐만 아니라 해당 경로로 안내된 페이지가 public 한 지, 해당 route의 하위 route는 무엇인지 등 여러 가지 상태를 표현할 수 있어야 하기 때문이다. 현재 관리되고 있는 route 객체는 이러한 요구사항을 충족시키기에 다소 부족하다는 생각이 들었고 이를 보완하기 위해 확장성을 높이는 방향으로 리팩터링을 시도해보았다. 기존 구조가 가지고 있던 문제점 const Route = { Public: { SignIn: '/signin', }, Private: { Main: '/', Billings: { Orders: '/billings/orders',.. 2024. 1. 9.
[22.09.03] 실무 프로젝트에서 Virtual Scroll 활용하기 24.01.09) 아래의 글은 작성 시점에 맞추어 쓴 글이며, 현재는 다른 회사에 재직 중입니다. Issue 현재 내가 몸 담고 있는 회사는 SDK를 통한 간편한 데이터 집계와 데이터 기반 의사결정을 도와주는 대시보드 서비스를 제공한다. 서비스 내에서는 연동한 SDK를 통해 이벤트 로그를 보내면 대시보드에서 해당 로그를 확인할 수 있는 구조로 되어 있는데, 문제는 대시보드 화면에 보이는 로그가 점점 많아질수록 대시보드의 반응 속도는 현저히 느려져서 대형 고객사들이나 개발, 테스트를 위해 제품을 가장 활발히 사용하는 우리 팀 또한 불편함을 겪고 있었다는 것이다. 때문에 이 부분을 개선할 필요가 있었고 우선 다음과 같이 제품의 구현 상황과 해결해야할 문제를 정리해보았다. AS-IS 기존의 구현 방식은 api.. 2024. 1. 9.
[22.04.21] Data Fetching in Next.js Next.js란? The React Framework for Production. 공식 사이트를 타고 들어가면 가장 먼저 확인할 수 있는 문구다. 위 표현 그대로 Next.js는 대규모 서비스에 특화된 구조와 설계를 간편하게 만들 수 있도록 도와주는 리액트 프레임워크라고 할 수 있다. Next.js 내에서는 페이지를 렌더링 하는 다양한 방법을 지원하고 있기 때문에 각각의 장점을 두루 흡수할 수 있는데, 이 글에서는 다음과 같은 렌더링 기법의 특징과 해당 기법을 구현하기 위해 Next.js에서 제공하는 api들을 알아보려 한다. CSR SSR SSG CSR CSR은 Client Side Rendering의 약자로, 데이터의 요청이 발생하면 클라이언트가 데이터를 가져와 html을 다시 그린다. 이는 리액트의.. 2024. 1. 9.
[22.01.06] JS의 Map vs Object 최근에 알고리즘과 자료구조를 공부하면서 Set, Map을 의식적으로 자주 사용하려 했다. 그 결과, 어떠한 상황에서 이러한 자료구조가 어울리는지 조금 더 알게 되었다. 하지만 Map은 기본 객체와 비교해보았을 때 어떤 부분이 다른지 이해가 잘 되질 않았다. 이번 글을 통해 각 차이점을 살펴보고 각 자료구조를 어떻게 사용하면 좋을지 알아보려 한다. 1. Default Keys Map - default key가 없다. Map 내부의 중복만 방지한다면 어떤 값을 key로 선언하든 상관이 없다. Object - built-in prototype을 가지고 있기 때문에 prototype 객체의 default key와 충돌 가능성이 있는 네이밍은 피해야 한다. (e.g. toString, hasOwnProperty .. 2024. 1. 9.