새 책을 펼치는 순간은 언제나 설렌다. 오늘은 개발자의 바이블 같은 책, 클린코드를 펼치는 날. 내가 가장 좋아하고, 또 가장 중요하게 생각하는 파트는 바로 서론이다. 서론에서는 책을 어떻게 읽어야 하는 지 가이드를 제시해준다. 또, 저자가 이 책을 통해 말하고자하는 모든 것이 요약되어 나오기 때문에 가장 꼼꼼히 읽어야 한다. 서론 클린코드는 어떤 책인가 IT 분야는 매우 빠르게 변화하고, 또 진화하고 있다. 하지만 ‘클린 코드’에서 설명하는 원칙과 기본은 변하지 않았다. 이 책이 절대적이라 생각하면 안되며, 언제든지 개선의 여지가 있다고 생각하는 편이 바람직하다. 클린코드는 무려 2013년 12월 24일에 출간된, 10년된 책이다. 그만큼 ‘클린 코드’는 특정 언어와 프레임워크, 또는 환경에 국한되지 ..
3D 스터디 가보자구 🚀 평소에도 매력적인 인터렉티브 웹을 구현해보고 싶단 생각이 컸다. 그러던 중 three.js 공식 문서에 소개되어있는 여러 3D 웹에 매료되었고, 3D를 활용한 인터렉션을 직접 구현해보고 싶어 스터디를 시작하기로 하였다. 그리고 정말 좋은 기회로 디자이너 한 분을 모시고 3D 스터디를 하게 되었다. (디자이너 1명, 프론트엔드 3명) three.js vs babylon.js 웹에서 3d를 구현할 수 있는 유명한 라이브러리는 three.js와 babylon.js가 있다. 이 둘의 차이점은 다음과 같다. (레퍼런스) three.js babylon 주용도 간단한 애플리케이션 게임 개발 커뮤니티 크다 작다 특징 가볍고 단순하여 사용하기 쉬움 복잡하지만 기능이 풍부함 (물리 엔진, 애니매이..
내가 스타트업에 들어간 이유 2021년 6월 30일. 대학교 졸업을 앞두고 인턴 프로그램으로 면접을 보았는데 바로 정규직 제의를 받아 입사하게 되었다. 상상만 해오던 스타트업의 모습 속에 팀원으로서 들어가 있는 내 모습이 신기하고 설레었다. 20명 미만 규모의 스타트업이었다. 스타트업에서 기대했던 것들이 몇 가지 있는데, 약 2년간 그 기대했던 것들을 모두 경험했다. 1. 거의 모든 의사결정에 참여 할 수 있다. 모든 팀원들과 긴밀한 커뮤니케이션이 가능한 환경이다 보니, 기획, 디자인, 인사, 경영까지 자유롭게 의견을 표현할 수 있다. 직군과 관계없이 누구나 의견을 낼 수 있고, 좋은 의견이라면 의사결정에 반영될 수 있다. 이런 환경이다보니 개발에만 국한되지 않고 더 넓은 관점에서 조직과 프로덕트를 바..
1차 스프린트 목표 우리는 유기견 봉사 및 커뮤니티 플랫폼 웹 서비스 출시를 목표로 프로젝트를 진행하고 있다. 우리 팀은 디자이너 1명, PM 1명, 프론트엔드 개발자 3명, 백엔드 개발자 2명으로 이루어져 있다. 개발 기간은 5월 28일부터 8월 5일까지이고, 이 기간을 총 3개의 스프린트로 나누어 진행하기로 하였다. 1차 스프린트 기간: 2023.5.28 ~ 2023.6.18 (총 3주) 작업 범위 공통 컴포넌트 개발 랜딩 페이지 로그인/회원가입 - 개인 봉사자 로그인/회원가입 - 보호소 파트너 보호소 정보 수정 TPM.. 그게 뭔데 다른 개발 팀원보다 경력이 있고 스타트업에서 주도적으로 일도 해봤고 시간적 여유도 있고 등의 이유로 TPM을 맡게 되었다. TPM이란 게 굉장히 생소했지만 다음과 같은 ..
Contributor가 되기로 한 이유 2년 전, 처음 리액트를 접했을 때 닳고 닳도록 읽었던 리액트 공식 문서가 개편되었다. React The library for web and native user interfaces react.dev 주니어라고 하기도 뭐 했던 학부생 시절, 한글로 친절하게 번역되어있는 공식 문서는 든든한 스승님이 되어주었다. 리액트를 주 스택으로 다루는 2년 차 프론트엔드 개발자가 된 지금, 내가 받았던 친절을 돌려주고자 한국어 번역에 참여하였다. 2년 전의 나와 비슷한 개발자들에게 친절한 가이드가 될 수 있도록 최대한 간단 명료하고 자연스러운 어투로 번역하려고 노력했다. 개편된 리액트 공식 문서 내가 맡은 부분은 useCallback 레퍼런스 파트인데, 다른 사람들이 어떻게 번역..
Next.js 13 버전에서 추가된 4가지 기능 Next.js 13 버전에서는 App Directory가 추가되었다. 이전 버전에서 pages 폴더에 대응되는 것으로, 다음과 같은 기능을 지원한다. Layouts: state를 유지하고 비용이 많이 드는 리렌더링을 피하면서 라우트 사이에 UI를 쉽게 공유할 수 있음. Server Components: 서버에서 렌더링되는 컴포넌트를 명시적으로 구현할 수 있음. Streaming: 유저는 로딩 상태를 즉시 확인할 수 있으며, UI가 단계적으로 렌더링됨. 원한다면 App Directory 내에 컴포넌트 파일, 테스트 파일, 스타일 파일 등 라우트가 아닌 파일이 존재해도 된다. 이전 버전에서 pages 폴더 안에는 무조건 NextPage Dynamic Rout..
YAPP 22기 활동의 마무리, 성과공유회 4월 29일부터 8월 5일까지 약 3달이 넘는 기간 동안 진행된 YAPP 22기 활동을 마무리하는 날이다. 우리 팀은 유기견 봉사 매칭 플랫폼, 댕글댕글이란 웹 서비스를 만들었고, 성공적으로 출시할 수 있었다. 모든 팀원이 열정적으로 맡은 바에 최선을 다해준 덕분이다. 다른 팀들이 만든 서비스를 직접 이용해보고 궁금증과 피드백을 주고받는 시간도 주어졌다. 다양한 서비스를 구경하는 재미도 쏠쏠했다. 성과 발표 시간에는 각 팀들이 어떤 과정을 거쳐서 얼마큼의 성과를 만들어냈는지 공유하였다. 나도 우리팀 TPM으로서 22기 멤버들에게 댕글댕글 서비스를 소개하고 이후 목표를 발표했다. 성과 발표. 그리고 향후 목표 우리 팀은 처음 시작할 때부터 목표를 명확하게 잡았다...
TDD 법칙 세 가지 TDD: 실제 코드를 짜기 전에 단위 테스트부터 짜는 개발 방식 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다. 위 규칙을 따면 개발과 테스트가 약 30초 주기로 함께 나온다. 하지만 방대한 테스트 코드는 심각한 관리 문제를 유발하기도 한다. 깨끗한 테스트 코드 유지하기 지저분한 테스트 코드를 짜는 것은 테스트를 안 하는 것보다 못하다. 실제 코드가 진화하면 테스트 코드도 변해야 한다. 테스트 코드가 지저분하면 변경하기 어려워진다. 테스트 코드가 복잡할 수록 실제 코드를 짜는 시간보다 테스트 케이스를 추가하는 시간이 더 길어진..
라이브러리, 패키지, 오픈 소스 등의 외부 코드를 우리 코드에 통합시키는 방법과 이런 소프트웨어 경계를 깔끔하게 처리하는 방법에 대해 알아본다. 소프트웨어 경계란, 인터페이스 제공자와 사용자 사이의 입장 차이로 발생하는 경계 인터페이스 제공자는 최대한 적용성을 넓히는 방향으로 설계한다. 인터페이스 사용자는 자신의 요구에 집중하는 인터페이스를 원한다. 외부 코드 사용하기 예를 들어 Map 객체는 굉장히 다양한 인터페이스로 수많은 기능을 제공하는데, 이런 유연성은 유용하지만 그만큼 위험이 크다. 객체 유형을 제한하지 않는다. 어떤 타입의 객체도 추가할 수 있다. 사용자에게 필요하지 않은 기능까지 제공한다. 누구나 내장된 clear() 함수를 호출하여 내용을 지워버릴 가능성이 있다. 제너릭 사용하기 const..
9강 그림자 three.js는 동적으로 그림자를 렌더링 할 수 있다. 내부적으로 텍스쳐 맵핑을 통해 그림자를 위한 이미지를 생성하고, 이 이미지를 이용해 그림자를 시각화 해보자. 그림자를 렌더링하기 위한 세 가지 객체 설정 1. Renderer 객체 renderer.shadowMap.enabled = true 2. 광원 그림자를 제공하는 광원 DirectionalLight PointLight SpotLight 이 광원들은 모두 shadow.camera 속성을 갖는다. 이 속성이 그림자에 대한 텍스쳐 이미지를 생성하는 데 사용된다. 그림자를 줄 것인지에 대한 여부를 다음처럼 설정할 수 있다. light.castShadow = true; // 활성화 3. 모델 그림자를 표현하는 모델에 다음 코드를 추가한다...
자료 추상화 구현을 감추기 위해서는 추상화가 필요하다 Getter와 Setter가 아닌, 추상 인터페이스를 제공해 사용자가 구현을 모른 채 자료와 핵심을 조작할 수 있어야 한다. 자료를 세세하게 공개하기보다는 추상적인 개념으로 표현하는 편이 좋다 자료/객체 비대칭 객체와 자료 구조의 정의는 본질적으로 상반된다. 객체: 추상화 뒤로 자료를 숨긴 채 자료를 다루는 함수만 공개한다. 자료 구조: 자료를 그대로 공개하며 별다른 함수는 제공하지 않는다. 사소해 보이지만 이 차이가 미치는 영향은 매우 크다. 예제를 통해 둘의 차이점을 자세히 알아보자 도형 클래스를 자료 구조로 구현 - 절차적인 도형 class Square { topLeft: Point; side: number; } class Rectangle { ..