GIS 강의 1강 개발 환경 구성 & 2강 기본 구성 요소와 코드 three.js의 기본 구성 요소 Renderer Scene을 화면에 출력해주는 렌더러 Scene 3차원 객체로 구성되는 장면. Light와 Mesh로 구성됨 Light 3차원 형상이 화면 상에 표시되기 위한 광원 Mesh Object3D의 파생 클래스. Geometry와 Material로 구성 Geometry: 형상을 정의 Material: 색상 및 투명도 등을 정의 Camera Scene을 바라보는 시점. 3차원의 Scene은 어느 시점에서 바라보느냐에 따라 다르게 보임. Camera로 이 시점을 정의할 수 있다. PRACTICE: 회전하는 파란색 정육면체 렌더링하기 id가 webgl-container인 div element 안에 3차..

1장. 깨끗한 코드 코드가 존재하리라 코드의 중요성과 역할을 강조한다. 프로그래밍이란, 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업 코드란, 프로그래밍으로 요구사항을 명시한 결과 궁극적으로 코드는 요구사항을 표현하는 언어 나쁜 코드 나쁜 코드, 즉 깨끗하게 정리되지 못한 코드의 영향을 기술한다. 이 파트를 읽으면서 굉장히 공감이 갔다. 개발자라면 누구나 한 번씩 느껴봤을 고행을 통해 왜 클린 코드가 중요한 지 한 번 더 강조한다. 나중은 결코 오지 않는다 시간에 쫓기다보면 ‘일단 동작만 하도록 짜고, 코드는 나중에 정리하자’라는 유혹에 빠질 때가 있다. 저자는 르블랑의 법칙에 빗대어 이를 날카롭게 꼬집는다. 결국 클린한 코드를 작성하는 원칙을 깊이 새겨놓는 것이 중요하다. 나쁜 코드는 팀의 생..

새 책을 펼치는 순간은 언제나 설렌다. 오늘은 개발자의 바이블 같은 책, 클린코드를 펼치는 날. 내가 가장 좋아하고, 또 가장 중요하게 생각하는 파트는 바로 서론이다. 서론에서는 책을 어떻게 읽어야 하는 지 가이드를 제시해준다. 또, 저자가 이 책을 통해 말하고자하는 모든 것이 요약되어 나오기 때문에 가장 꼼꼼히 읽어야 한다. 서론 클린코드는 어떤 책인가 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. 거의 모든 의사결정에 참여 할 수 있다. 모든 팀원들과 긴밀한 커뮤니케이션이 가능한 환경이다 보니, 기획, 디자인, 인사, 경영까지 자유롭게 의견을 표현할 수 있다. 직군과 관계없이 누구나 의견을 낼 수 있고, 좋은 의견이라면 의사결정에 반영될 수 있다. 이런 환경이다보니 개발에만 국한되지 않고 더 넓은 관점에서 조직과 프로덕트를 바..

2021년에 React를 이용한 프로젝트를 진행했었다. (내 첫 프론트엔드 프로젝트) 그때 이후로 회사에 입사하면서 Next.js로만 개발하다 보니 react-router-dom를 사용할 일이 없었다. Next.js는 pages 폴더를 이용해 자동으로 라우트를 만들어주기 때문이다. 리액트 멘토링을 진행하면서 2년만에 기억 저편의 react-router-dom을 다시 사용해 보게 되었다. 2년 전에 사용했던 버전은 5.2.0이고 이번에 사용하게 된 버전은 6.10.0이다. v6로 업데이트되면서 인터페이스가 완전히 바뀌었다. react-router-dom BroswerRouter로 라우터 구현하기 v5에서 라우팅 구현하는 방법 기존 v5에서는 라는 컴포넌트가 존재했다. path prop에 `/posts/:i..

퇴사 후 첫 번째 목표인 '새로운 서비스를 런칭하고 운영해 보기'를 위해 사이드 프로젝트를 함께 할 팀원을 찾다가 알게 된 IT 연합동아리, YAPP. YAPP이 어떤 동아리인지, 이전 기수들은 어떤 활동을 했는지 살펴본 후, 내가 찾던 동아리다 싶어 고민 없이 지원하게 되었다. IT 연합동아리 YAPP YAPP Your own idea can change the Actual world at anytime with Passion and Potential. YAPP은 다양한 분야의 기획자, 디자이너, 개발자가 모여 사이드 프로젝트를 진행한다 대학생은 물론 직장인도 지원할 수 있으며 활동 기간은 총 4개월! 모집 관련 정보는 여기서 볼 수 있다. 목차 1. YAPP 프론트엔드 개발 직군 서류 전형 질문 2...