💥 동기 회사에서 독서비를 지원해주는 덕에 코로나 한참 전부터 거리두기를 하던 책을 조금씩 읽기 시작했다. 최근에 책을 알아보러 알라딘에 들어가보니 책에 마우스를 올리면 책을 돌려볼 수 있도록 되어있었다. 요즘 three.js에 대해 호기심이 있었는데 이 기회에 three.js 경험해볼 겸 혹시 다른 사이드 프로젝트에서 써먹어볼 수 있지 않을까 하는 마음으로 알라딘의 책을 three.js로 클론해보게 되었다.(알라딘에서 책의 앞, 뒤, 옆면에 사용할 이미지 소스도 구할 수 있어서 너무 좋았다.😊) 클론을 하면서 이런저런 소스를 통해서 three.js를 조금은 이해해볼 수 있게 되었는데 혹시 three.js를 뭔가를 만들어보면서 공부해보고 싶으신 분들을 워해 과제 형식으로 내용을 정리 해보았다. 🎮 알라딘 책 클론해보기 🤔 과제 알라딘의 책 미리보기를 three.js를 통해 최대한 유사하게 구현해본다. 제한시간: 5시간(긴장감을 위해) 🧺 준비물 책의 앞, 뒤, 옆면에서 사용할 이…

🤔 목적 css를 진짜 많이 얕봤다.. flutter를 이용해서 UI 구현해내는 일에 이제 익숙해졌기 때문에 스타일링 하는 것은 진짜 가볍게 여겼다가 큰코 다쳤다. 이번에 겸손한 마음으로 css 기초부터 반응형으로 레이아웃을 잡는 여러 좋은 방법들에 대해 조사해봤고 마지막으로 간단하게 github project를 따라하며 실습을 진행했다. 📗 참고 자료 poiemaweb 튜토리얼 flex box로 만들 수 있는 10가지 레이아웃(네이버 D2) 📦 Box Sizing 브라우저는 박스모델의 정보를 근거로 렌더링을 진행한다. 여기서 width와 height는 박스의 전체 사이즈를 말하는 것이 아니라 파란색 영역인 contents 영역의 너비와 높이만을 의미한다. 이 말인 즉슨 만일 width 100%를 주고 padding이나 border 값을 주면 이 되어 box가 예상했던 공간 밖으로 삐져나오게 된다. 이 상태에서 박스의 사이즈를 제대로 측정하려면 contents 너비 + 양쪽 pa…

🧩 목적 express의 특징에 대해서는 Node 개발자라면 알아야 할 기본 지식 포스팅을 통해 정리했으니 이번에는 express generator로 생성되는 여러 미들웨어와 로그인 프로그램 구현에 사용된 미들웨어를 정리해보려고 한다. 📽️ 프로젝트 깃헙 레포지토리 [우아한테크캠프] 배민상회 회원가입/로그인 구현 프로젝트 🏭 Express 주요 미들웨어 pug Express는 런타임에 템플릿 엔진을 이용해서 여러 변수가 있는 static한 템플릿 파일에 실제 값을 넣어 html 파일을 생성한다. Pug는 가장 대표적인 템플릿엔진으로 템플릿이 있는 디렉토리를 views에 정해주고 view engine으로 pug로 설정해주면 사용할 수 있다. app.js에 view engine 종류와 template directory를 정해주고 다음과 같이 index.pug 를 만들어 주고 title에 대한 변수값을 전달받는 template을 설정하고 router.js 에서 res.render 함수를 …

🧪 TDD란 Test Driven Development : 말그대로 테스트가 이끌어 나가는 개발을 의미한다. 개발을 진행하기 앞서 테스트를 먼저 만들거 테스트를 통과하기 위한 것들을 구현한다. 📒 참고글 [Agile] TDD(테스트 주도 개발)란 [번역]쉬운 테스트 주도 개발과 단위 테스트를 위한 5단계 방법론 ❓ TDD는 언제 해야할까? 처음해보는 프로그램 주제일 때(나의 불확실성) 고객 요구조건이 바뀔 수 있는 프로젝트인 경우(외부적인 불확실성) 즉 불확실성이 높으면 테스트를 짠다. 결과가 명확하다면 TDD를 적용하지 않는게 좋다. 🤩 TDD를 잘하는 법 도구나 규칙에 집착하지 말아라(TDD는 어떤 도구가 아니다.) 상황에 맞게 적응적으로 진화적으로 접근하라 어떻게 하면 피드백을 더 많이 받을까를 계속해서 고민해보라 테스트 자체가 처음부터 완벽할 수 없다! 상황에 맞게 반복적으로 개선해나가자 🧠 테스트 코드를 잘 짜는 사고법 비밀번호 강도 측정이라는 예를 통해 과정을 살펴보자 …

🤔 목적 Atomic Design Pattern을 본격적으로 적용하기에 앞서 글을 적어보려고 한다. 이 패턴을 설명하는 여러 블로그글을 가볍게 훑어보고 글들 마다 있는 아래 그림을 보면서 작은 단위의 컴포넌트인 원자를 잘 만들어서 개발하는 느낌이구나하고 넘어갔다. 하지만 막상 구현하기 앞서 여러 글들을 진득하게 앉아서 읽어보니 중점적으로 신경써야하는 부분이 있었다. 그리고 가장 많이 생각 났던 것은 피키를 개발할때 디자이너님과 함께 적용시켜봤으면 너무 좋았을 것 같은 방식이었다. 우아한테크캠프의 프로젝트를 진행하면서 잘 배워서 언젠가 하게 될 또 다른 피키에 잘 적용시켜보자. 📒 참고 글 Brad Frost의 개념적인 내용에 Danilo Woznica의 글을 참고에서 개발에 필요한 구체적인 내용을 담아보았다. atomic design by Brad Frost Atomic Design and ReactJS by Danilo Woznica ⚛️ Atomic Design Pattern …

배경 면접에서 다음과 같은 질문을 받게 됐다. 노드를 이용해서 개발을 여러번 진행하셨는데, 자바스크립트와 노드의 특징에 대해 알고 있나요? ‘비동기’, ‘싱글스레드’, ‘이벤트루프’…? 머리속에 여러가지 개념들이 막 돌았다. 근데 막상 이 여렴풋이 아는 개념을 제대로 설명을 하려니 말문이 막혔다. 면접이 끝난 후에 면접을 세게 맞았지만 그렇다고 그냥 모르는 대로 있을 순 없다. 그래 이왕 이렇게 된 거 자바스크립트와 노드의 특징에 대해서 집고 넘어가자. Javascript란? 1. 자바스크립트는 스크립트 언어다. 자바스크립트는 웹 브라우저에서 동작하는 스크립트 언어이다. 한번에 모든 코드를 기계어로 번역하는 컴파일 언어와 달리 자바스크립트는 스크립트 언어로 한줄씩 코드를 번역하고 실행한다. 이런 스크립트 언어에서 오는 장점은 다음과 같다. 실행 속도는 컴파일 언어보다 느리지만 코드 수정시 바꾼 부분만 번역하고 실행한다.(컴파일 언어의 경우 컴파일을 새로 진행해야 한다.) 이벤트에 …