Til
2/20 월 (튜터를 모신 코드 리뷰와 리팩토링의 달콤함) TIL
(막간 보충 공부중)프로그래머스 연습 문제들을 풀어보는 스터디를 즉흥 결성한 후 사흘 차, 오늘도 튜터에게 찾아갔고 좋은 경험을 하였다. 특히나 현업 개발자는 어떤 사고방식으로 수정할 부분을 감지하고 리팩토링을 하는지를 소소하게 견식할 수 있어서 좋았다. 혼자 찾아갔으면 과분할 뻔 하였는데 그룹으로 찾아가니 좋았고, 첫 문제 푸는데 진짜 오랜 시간이 걸렸는데 흔쾌히 다음 문제까지 풀자 해주신 튜터께 감사했다. 한 일: 프로그래머스 30분 https://school.programmers.co.kr/learn/courses/30/lessons/120923 ⇒ 1시간..! 프로그래머스 30분 https://school.programmers.co.kr/learn/courses/30/lessons/120812 ⇒..
2/17 금 (Rule of Three 중복 제거 리팩토링, 생생한 예제 코드가 여기있다) TIL
(막간 보충 공부중)오늘 한 것: Mars Rover Kata와 중복 제거 리팩토링 시범Test-Driven Development (TDD) in JavaScript #4 - Duplication & The Rule Of ThreeIn this video, Jason Gorman illustrates how refactoring to remove duplication from our code can lead us to a better design, and demonstrates the Rule of Three that can guide us towards better abstractions and protect us from leaving refactoring too late. The example us..
2/16 목 (코드를 실컷 작성하니 단축키가 손에 붙는다) TIL
(막간 보충 공부중)“TDD 또한 큰 도움이 된다. 실패한 테스트는 당시의 흐름을 유지한다. 방해가 사라진 후 실패한 테스트가 통과하도록 일하다 보면 흐름으로 돌아갈 수 있다.” — 클린 코더 The Clean Coder, 로버트 마틴 느낀 점오늘 저녁에 알고리즘 문제풀이 스터디 팀원들과 튜터님을 찾아갔다가 mob programming이라는 걸 경험했다. 한 문제를 한 메모장(에디터)에, 각 1분씩 돌아가며 구두로 프로그래밍을 이어가는 것이다. 관전인이 갑자기 많아져서 긴장되긴 했지만, 긴장되는 만큼 재미있었다. 내일 스터디에 도입해보기로 하였다. 당장 흥미로운 점은 크게 두 가지였다: 누가 시작을 하든 남이 그려놓은 청사진을 빠르게 이해하고 이어서 건물을 지어 올려야 한다.손으로 쓰던 코드를 말로 읊어..
2/15 수 (Ajax를 안 거치고 로그인이 필요한 페이지에 접근하려면 cookie밖에 답이 없다) TIL, TIT
(막간 보충 공부중)오늘 한 것: TDD 방식으로 FizzBuzz 문제 풀기FizzBuzz in NodeJS and Jest, with TDD (Kata 1)Repo used in the video: https://github.com/GA1/algo-tdd-starters Code from the video: https://github.com/GA1/youtube-videos/blob/master/src/katas/001-fizz-buzz.js Find more about the repo at: https://medium.com/@kamilnguyenvan/e02ecf357892 A short introduction to a programming technique - Test Driven Developm..
2/14 화 (표류하고 있음) TIL
(막간 보충 공부중)어제 오늘은 이론을 배우고 정리하기보다 코드를 직접 써보는 일에 집중했다. 직전 프로젝트 때의 다른 팀들의 코드를 보면서 연구하고 우리 팀 프로젝트 코드에 적용해보았다. 사실은 집중이 잘 안 됐다. 이론상으로 작동되어야 하는 코드가 계속해서 턱턱 막히니 진도가 굼벵이보다도 느린 느낌이었고 이렇게 계속해도 되는가 의문이 들었다. 저녁에는 그래서 자바스크립트 문법을 공부하며 환기했다. 여태 코딩과 구글링을 하며 스치기라도 한 개념들이 한가득 쌓여있는 상태라 그런지, 아니면 죽치고 안 풀리는 문제가 아닌 다른 걸 보는 것만으로도 살 판이 난 건지, 꽤 심화 문법에 관한 책이었는데도 재밌게 읽었다. 언제나 같은 딜레마와 의문이긴 하지만… 지식을 읽고 배워서 어떻게 해야 코드를 한 줄이라도 써..
2/13 월 (첫 TDD 코딩 문제 풀이 - Bowling Game Kata) TIL
(Nest.js 공부중 + TDD 공부중)오 처음으로 TDD라는 걸 해봤다. 간단한 볼링 게임 연습문제를 테스트 코드와 함께 짜봤다. Bowling Game Kata in JavaScriptThis is the Bowling Game Kata in JavaScript. This kata was originally created by Uncle Bob Martin. Music by Chillhop: https://chillhop.com/listen Listen on Spotify: https://bit.ly/ChillhopSpotifyhttps://www.youtube.com/watch?v=brahHchaegc깃헙 풀이: Coding-Practice-with-TDD/other-sources-easy/bow..
2/10 금 (Nest.js로 DB없는 게시판을 만들어 보다) TIL
(Nest.js 공부중)Nest.js로 간단한 게시판 CRUD를 만들어 봄. DB는 포함하지 않고 컨트롤러와 서비스 파트만 구현했는데, 확실히 Express를 쓸 때보다 간단했다. @Param() 에게는 req.params가 맡았던 파라미터 변수를 넣어주면 되고, @Body()가 장식하는 변수 data에게는 DTO를 타입으로 넣어주면 된다. @Controller(’큰라우트’) 클래스와, 그 안의 @Get(’/작은라우트’) 같은 메소드들이 묶여 ⇒ ‘http://localhost:3000/큰라우트/작은라우트’ 와 같은 최종 url을 형성한다. 큰 라우트는 컨트롤러 데코레이션에, 작은 라우터는 메소드 데코레이션에! 데코레이션은 클래스나 함수 뿐만 아니라 변수에게도 붙는가? Nest.js 실습 예제 - 게시판..
2/9 목 (Nest.js 진입, Visual Studio Code로도 첫 진입) TIL
(Nest.js 공부 시작)처음으로 Nest.js를 소개 받았다. 일단 프레임워크이고, 제어 역전이 일어났다는 점에서 라이브러리와 다르며, 알아서 코드 틀을 짜주고 폴더 구조를 잡아준다. 데코레이터 클래스라는 이름표들을 나에게 쥐어주고 ‘넌 네 가내수공업 코드에 내가 준 이름표를 붙여놓기만 해, 가져다 쓰는 건 내가 한다’ 하는 적극적이고 주도적인 성격. 폴더와 파일 틀을 척척 짜주는 면에서 자신감이 돋보인다. 라이브러리를 비롯해 내가 기존에 알고 지내던 군상과는 또 결을 달리하는 친구임이 분명하다. 개인적인 소감으로는, IoC(제어 역전)이 되면 모듈간 결합도가 낮아지고 유지보수가 쉬워지고 결과적으로 개발자가 서비스 로직에 더 집중할 수 있다는 휘황찬란한 점들은 차치하고 일단 폴더가 (그리고 파일명들이..
2/8 수 (프로젝트 발표) TIL
(베이커리 이커머스 프로젝트 발표)오늘은 발표를 들으며 프로젝트를 진행하며 든 생각과 질문거리들만 적어둔다. 프로젝트 폴더 관리를 실무에서는 다들 어떻게 하는 걸까? 특별한 노하우가 있을까? 지금만 해도 파일이 많아져서 여기저기 찾아 옮겨 다니기가 힘든데 말이다. 프로젝트가 더 커지면 한 사람이 ‘파악하고 있어야 하는 범위’가 어디까지인지 명확히 선을 긋고 시작할게 될까? 그렇게가 가능할까? 다들 어떻게 웹소켓으로 실시간 채팅을 만드는 것이, ‘관리자 측에서는 채팅방 목록을 볼 수 있어야겠고 사용자 이름으로 방 이름을 정하자’같은 기능이 있어야 한다고하나같이 생각해낼 수 있었는지? 테스트 코드를 작성하는 비법(…) Sequelize - 조건절에 OR와 LIKE 짬뽕시키기Product.findAll({ w..
2/6 월 (잘 되는 것 같기도, 망함을 목전에 두고 있는 것 같기도 한 D-2) TIL
(베이커리 이커머스 프로젝트 6일차)피곤해서 생각이 잘 안 돌아간다. 음. 낮에 영양제와 물을 옆에 챙겨두고 앉았는데 지금까지 먹지 못했다. 그래도 나쁘지많은 않은 기분.오늘 한 일 내가 뭘 했는지 일단 셀 수가 없고 기억을 더듬을 기력도 더 없다. 내일 정신이 든다면 좀 생각이 정리될지도 모르겠다. 이전 페이지로 이동(한 페이지씩) 뒤로/앞으로 가기 (브라우저의 뒤로/앞으로 가기 기능과 같음): window.history.back() window.history.forward() 몇 페이지씩 뒤로/앞으로 가기: window.history.go(-4) window.history.go(2)“window.” 부분은 생략이 가능하다. Uploaded by N2T
2/4 토 (ejs와 `express-ejs-layouts` 동시 사용시 가능한 url 경로는 오직 query string 방법뿐) TIL, TIT
프로젝트 폴더 구조public/css/styles.css 이걸 해결하는 다른 방법이 있을지도 모르겠다. 다만 지금은 일단 경로명에 슬래시(/) 대신 언더바로 표현하는 것으로 넘어가기로 한다. 에러: ejs 파일명에 점(.)을 넣을 시 res.render()로 인식하지 못함또 파일명을 admin.product.list.ejs 같이 설정하면 res.render로 파일명을 넣어줄 때 “list 모듈을 찾지 못했음” 에러가 뜬다. ⇒ 파일명을 admin_product_list.ejs로 바꾸고 res.render(’admin_product_list’)와 같이 호출하니 잘 됨. EJS 기초 공식 문서: EJS'E' is for 'effective'. EJS is a simple templating language ..
2/3 금 (merge 충돌 해결, 충돌 해결) TIL
(베이커리 이커머스 프로젝트 3일차)깃헙 develop 브랜치와 팀원들 feature 브랜치 사이의 간극이 벌어지지 않게 하려고 노력중. 와중에 발생한 무수히 많은 병합 충돌을 처리하며 브랜치 사이의 ‘간극’에 점점 더 치를 떨게 됨. 머지않아 풀 리퀘스트 빌런, PR 무새가 될 것 같다. …저기, 깃헙 본인 브랜치에 푸시 해주신 건 좋아요..! 이제 PR도 해주세요. 겁먹지 마세요 PR만으로는 문제가 되지 않아요 충돌 해결하는 리뷰어만 힘을 내면 됩니다..! pull 자주 받아주셔서 감사합니다. 본인 코드도 자주 풀 리퀘 해주세요… 허허 저희 언제 한 번 다같이 화면 켜두고 풀 → 풀 리퀘 사이클 한 번 돌아볼까요. 오늘 한 일 ejs 템플릿 구조 분석을 마쳤다. nodemon과 Joi를 API 테스트..
2/2 목 (다대다 관계 테이블은 이렇게 짜면 된다) TIL, TIT
(베이커리 이커머스 프로젝트 2일차)오늘 한 일 어제 만든 DB 스키마를 보강하고 sequelize 모델을 만들었다. 깃험에 pull 완료. ⇒ ‘product’와 ‘cart’ 테이블의 관계에서 Many-to-Many를 굳이 적용해야 하나를 고민하다가 (mapping 테이블이 하나 더 만들어진다는 게 꺼려졌다) 이게 사실은 One-toMany 관계라는 것을 깨달았다. 기존의 ‘cart’ 테이블 자체가 ‘user’와 ‘product’를 Many-to-Many로 연결지어주는 매핑 테이블이었던 셈이다. ‘cart’라는 테이블명 때문에 더 헷갈렸던 것 같아서, ‘cart-item’이라고 이름을 바꿔주었다. ⇒ 참고로 user와 product 테이블이 Many-to-Many인데 중간에 cart_item이 매핑 테..
2/1 수 (4번째 프로젝트 시작) TIL
(베이커리 이커머스 프로젝트 진행중)오늘 새 프로젝트에 돌입했다. 이커머스 사이트를 하나 만드는 것이 목표인데, 하루 내내 팀원들과 토론을 하였다. Express와 Sequelize(MySQL), Socket.IO 등을 이용해 판매와 구매가 가능하고 테스트 코드가 작성된 3계층 서비스를 만들어야 한다. 내가 맡은 기능: 관리자 페이지 - 상품 관리(상품 CRUD), 회원 관리(회원 목록 조회까지만 일단 구현하기로 함), 주문 관리(총 주문 목록 조회) 개인적으로 난관이 예상되는 부분은 테스트 코드 작성 부분이다. 지난 프로젝트에서도 여실히 느낀 바, 데이터베이스 설계가 탄탄하면 프로젝트가 흔들리지 않는다. 내일 DB 스키마를 한 번 더 꼼꼼히 점검하고 제일 먼저 sequelize 모델을 만들어 놔야겠다...
1/31 화 (타입스크립트 엔티티 모음과 분류) TIL, TIT
(타입스크립트 공부중)배운 것:타입스크립트에서 keyof과 typeof과 그 사용례에 대해 더 체계적으로 정리해봤다. (어제치 TIL에 업데이트함)타입스크립트의 엔티티를 여러가지로 구분지어 보았다. 예를 들어 ‘타입 선언’ 자리에 올 수 있는 엔티티는 열거형(enum)과 타입(type), 인터페이스, 원시형뿐이다. (아마도)객체의 “계산된 프로퍼티(Computed property)” 방식을 이용해 프로퍼티 키 값을 런타임시에 동적으로 할당해줄 수 있다. 느낀 점지난 이주, 타입스크립트를 새롭게 공부하며 도무지 감이 잡히지 않는 기분이었다. 어렵긴 어려운데 뭔가 납득도 안 되는 느낌? 이쪽 구멍을 막으면 저쪽이 뚫리고 저쪽을 막으면 다른 곳이 고장나는 항아리를 어떻게든 절묘하게 완성시키라는 것 같았다. 어..
1/30 월 (keyof typeof 콤보) TIL
(타입스크립트 공부중)배운 것:타입스크립트에서 keyof typeof 꼼수의 활용례와 원리에 대해 알아봤다. 타입스크립트의 열거형을 Jest를 활용한 테스트코드와 연계하여 연습해보았다. 데이터베이스의 인덱스 개념과 selectivity 이슈, 정규화와 역정규화에 대한 예제를 조금 더 익혔다. 검색 속도를 빠르게 하기 위해 도리어 정규화의 반대 루트(역정규화)를 택할 때도 있다는 사실이 흥미로웠다. Jest 테스트코드 사용 예제 비교describe("테스트 큰 제목", () => { it("테스트 작은 제목", () => { expect(...).toBe(false); } } vs describe("테스트 큰 제목", () => { test("테스트 작은 제목", async () => { expect(....
1/29 일 (열거형과 제네릭) TIL
(프로그래머스 문제 해결함)코딩테스트 연습 - 빛의 경로 사이클각 칸마다 S, L, 또는 R가 써져 있는 격자가 있습니다. 당신은 이 격자에서 빛을 쏘고자 합니다. 이 격자의 각 칸에는 다음과 같은 특이한 성질이 있습니다. 빛이 "S"가 써진 칸에 도달한 경우, 직진합니다. 빛이 "L"이 써진 칸에 도달한 경우, 좌회전을 합니다. 빛이 "R"이 써진 칸에 도달한 경우, 우회전을 합니다.https://school.programmers.co.kr/learn/courses/30/lessons/86052GRID를 만들고 좌표를 불러오는 과정에서 row, col로 나타내는 방식과 x, y 좌표로 나타내는 방식이 일정치 못한 데서 생긴 에러였다. GRID와 directionGrid를 호출하는 곳에서 [x][y]로 ..
1/28 토 (2차원 배열 만들기, 반복문 순회 대상 업데이트하기) TIL, TIT
(프로그래머스 문제 푸는 중)코딩테스트 연습 - 빛의 경로 사이클각 칸마다 S, L, 또는 R가 써져 있는 격자가 있습니다. 당신은 이 격자에서 빛을 쏘고자 합니다. 이 격자의 각 칸에는 다음과 같은 특이한 성질이 있습니다. 빛이 "S"가 써진 칸에 도달한 경우, 직진합니다. 빛이 "L"이 써진 칸에 도달한 경우, 좌회전을 합니다. 빛이 "R"이 써진 칸에 도달한 경우, 우회전을 합니다.https://school.programmers.co.kr/learn/courses/30/lessons/86052프로그래머스 문제를 중간 정도까지 해결했다. 예시로 나온 테스트 케이스들은 결과값이 잘 나오는데 실제 테스트케이스들은 하나도 통과를 못하고 런타임 에러를 낸다. …한글 변수명 때문에 그런가?또 기존의 산문같은 ..
1/26 목 (@types/Node가 정확히 뭔지 알게 되어 속이 시원함) TIL, TIT
(TypeScript 공부 중)배운 것:타입스크립트의 Enum. 일단 Enum에는 숫자형과 문자형이 있다. 타입스크립트 컴파일러는 사실 index.d.ts 파일(들)을 찾아내는 것이 주 목적이고 그러기 위해 엄청난 노력을 한다(?!) → 컴파일러가 어떻게 필요 모듈들을 찾아 타입을 참고하여 트랜스파일 하는지 대략적인 순서를 알게 되었다. @types/’라이브러리’ 라는 경로명은 역시 컨벤션이었다. 많은 자바스크립트 라이브러리가 타입스크립트 선언 보조 라이브러리를 제공할 때 약속처럼 만들어 넣는. 이 ‘보조’ 라이브러리는 타입스크립트 환경에서 자바스크립트 모듈을 실행하기 위해 타입만 몽땅 정의해서 넣어준, 말 그대로 ‘선언 파일(Declaration files)’이다. 확장자는 .d.ts. 느낀 점:사실 ..
1/25 수 (CORS 정책, 생각보다 쉬웠다) TIL, TIT
(TypeScript 공부 중)공부 중인 타입스크립트 index.ts 전문: // src/index.ts // 1. 필요 모듈 import dotenv from "dotenv"; import express, { Request, Response } from "express"; import cors from "cors"; import helmet from "helmet"; import { itemsRouter } from "./items/items.router"; dotenv.config(); // 2. 앱 변수 선언 // PORT 설정값이 없으면 서버 종료 if (!process.env.PORT) { process.exit(1); } // PORT를 string으로 받고, 10진수로 parseInt함. c..