전체 글

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..

1/20 금 (fetch()는 일단 매우 느리고 타입스크립트는 생각보다 똑똑하다) TIL, TIT

(TypeScript 공부 중)어제 못다한 에러 해결과 “asycn/await fetch()로 문서 요소를 동적으로 추가하는 것이 완료되기 전에 document.querySelector 등이 호출되어 버리는 문제”에 대한 조사를 마쳤다. 어제 만든 ‘포켓몬 간단 도감을 크롤링 하기’ 코드를 타입스크립트로 변환해보았다. 나중에 조사해 볼 키워드:named exports와 default exports 에러 TimeoutError: Waiting failed: 50000ms exceeded ✔️(어제에 이어서)상황: await page.waitForFunction(() => { return document.querySelector(".card:last-child .card--id").textContent ==..

1/19 목 (fetch()는 왜 onload 이벤트보다도 늦는 걸까) TIL, TIT

as 속성에 허용되는 값은 script, style, font, image 등이다.as 속성을 생략하거나 유효하지 않은 값을 갖는 것은 XHR 요청과 같다고 한다. 여기서 브라우저는 무엇을 가져오는지 알지 못하므로 올바른 우선순위를 판단할 수 없고, 스크립트와 같은 일부 리소스를 두 번 가져올 수도 있게 된다.그 밖에 폰트나 CSS 파일을 preloading 할 때 주의점들이 있다. 브라우저는 사전 로드된 파일을 실행하지는 않는다. (스크립트를 ‘실행’하거나 스타일시트를 ‘적용’하지 않는다.) ⇒ 내가 원하는 건 스크립트 안의 fetch() 메소드를 더 일찍 ‘실행’시키는 것이므로 이 preload 기법은 무용하다. preload는 브라우저에게 강제성을 부여하므로, 최대한 적게 사용하는 것이 좋다. → ..

1/18 수 (TypeScript로 간단 포켓몬 도감 만들기) TIL, TIT

(TypeScript 공부 중)타입스크립트 문법 중 함수, 리터럴 타입, type과 interface의 차이, 클래스 등을 국수 말아 먹듯 휘리릭 훑고 곧바로 간단한 ‘포켓몬 도감’ 코드를 작성하게 되었다. 개념은 대강 넘어갔더라도 실제 코드를 보고 또 보니 이해가 조금씩 된다. (CSS Grid를 잠깐만 이해해보려다가)찾은 좋은 정리글: https://studiomeal.com/archives/533 에러 npm ERR! could not determine executable to run타입: 바보 이슈발생 상황: 프로젝트 폴더에서 npx sequelize db:migrate 명령어 실행 (models와 migrations 파일들로 처음 DB 테이블을 만들려고 함)에러 메세지 전문:npm ERR! co..

1/17 화 (웹 서비스에서 고가용성이란) TIL

(TypeScript 공부 중)몇몇 타입스크립트 한글 온라인 핸드북으로 공부하고 있는데, 예제와 설명이 빈약해 아쉽다. ‘그러면 이러이런 경우는 어떻게 되는 거지?’하는 사이드 질문들이 너무 많이 생겨나고 끝나버리는 온라인 핸드북보다, 제공하는 정보량을 (초보자에게 맞도록) 제한하되 제공한 정보에 대해서는 추가적인 의문이 남지 않을 수 있도록 구조와 균형을 잘 잡아 써놓은 책으로 공부하고 싶다… 한 번의 예제로 이해하지 못하면 다른 예제를 찾고 그곳에 나와있는 (거의 항상 과한) 정보를 추가로 이해하고, 이전 정보와 비교하고 통합하는 데에 드는 시간과 노력이 생각보다 크다는 것을 느끼고 있다. 이를 방지하려면 처음 접한 문서에서 (최대한) 닫힌 결말로 설명을 잘 해주거나, 내 쪽에서 의문을 다 죽이고 일..

1/16 월 (TypeScript, 만나서 반갑소) TIL, TIT

(TypeScript 공부 중)TypeScript를 처음 접했다. 이번 주는 계속 TypeScript를 공부하게 될 텐데 진도를 잘 좇아갈 수 있을지 걱정이다. 지난 노드 입문과 숙련 과제 해설 강의를 보고 있다. 내가 제출한 코드와 비교해보고 있는데, 내가 뭘 원하는지 모르겠다. 뭘 봐야하지? 어떻게 정리해보아야 할까… 방법 1: 입문과 숙련 강의 노트를 다시 보며 보충 자료도 읽어보며 총정리한다. 방법 2: 내 코드와 해설 코드를 통합해본다. 노트를 적고 싶으면 어떻게 정리하지? (이곳과 이곳 보는 중)인터페이스 | 타입스크립트 핸드북인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 인터페이스에 대해 ..

1/15 (Socket.IO를 활용한 간단 듀얼 게임, 일) TIL

(웹소켓 - 듀얼 게임 예제 공부 중)서버가 원하는 소켓 클라이언트 그룹에 메세지를 보낼 수 있다는 건 명확히 알겠다. 그런데 클라이언트측에서 수정한 데이터들이 어떻게 서버를 경유해 자기자신이 속한 ‘방’에만 영향을 미칠 수 있는 건지가 아리송하다. 분명히 데이터 자체를 넘겨주지는 않는데… (여기 보는 중)socket.rooms, namespace.rooms 예제 모음 - https://www.tabnine.com/code/javascript/functions/socket.io/Socket/rooms ‘듀얼’ 게임모드가 작동하는 핵심을 알았다. 두 번째 참가자가 방에 입장하면 초당 30번씩 호출되는 emitGameState 루프가 시작되게 된다. // server.js function handleJoin..

1/13 (Socket.IO “방”의 개념 예제, 금) TIL

(웹소켓 공부 중)오늘은 Socket.IO를 응용한 간단한 듀얼 게임 예제를 공부하였다. 서버와 프론트 사이에서 socket.emit()과 socket.on()으로 왔다갔다 하는 흐름은 다 정리를 했는데, io.sockets.adapter.rooms.get(roomName)같은 코드들이 어려웠다. (여기 보는 중)관리자 채팅방 살짝 예제 - https://p-story-js.tistory.com/107 Socket.IO 연습용 듀얼 게임 실행 화면듀얼 게임 예제에서 나온 io와 socket 코드 조각들:const room = io.sockets.adapter.rooms.get(roomName); // roomName='ARLUK' console.log("room name is: ", room); // 결..

1/12 (공부가 느려서 초조한 하루, 목) TIL

(웹소켓 공부 중)참고중: 웹소켓과 Socket.IO 코드 예시 - https://velog.io/@delay100/Socket ws 사용하기 - 이것도 좋음. https://curryyou.tistory.com/348 브라우저 렌더링 전체 과정 https://ghost4551.tistory.com/220 소켓IO - 소켓이 끊어지는 상황 리스트와 room에 관하여 https://socket.io/docs/v3/server-socket-instance/ 내일 할 일: 스파르타 쇼핑몰 폴더에서 “누가 주문했어요” 소켓 알림창과 “2명이 함께 이 상품을 보고 있어요” 파트를 떼어내보기. 필요하다면 흐름도 작성. 메세지 앱에 간단 구현 세탁 프로젝트에 “사장님이 픽업하셨습니다” 소켓 알림창 붙여보기 (희망) ..

1/11 (서버측엔 websockets 모듈, 브라우저측엔 표준 웹 소켓 API, 수) TIL

(웹소켓 공부 중)참고중: Mozilla MDN - WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 ✔️웹소켓 공식 문서(?) https://websockets.spec.whatwg.org/#the-websocket-interface ✔️클라이언트 측 웹소켓 API docs - 속성과 메소드, 이벤트 목록 ✔️모던 자바스크립트 웹소켓 https://ko.javascript.info/websocket ✔️WebSockets와 Socket.IO - 비교글 좋음 다시 읽어봐도 좋을 것 https://velog.io/@leeyw2709/WebSocket과-socket.io ✔️웹소켓과 Socket.IO 코드 예시 - https://velog.io/@delay100/Socket ws 사용하기 - 이것..

1/10 (이벤트와 form 잡학상식, 화) TIL

(웹소켓 공부 중)참고중: https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applicationshttps://websockets.spec.whatwg.org/#the-websocket-interface 웹소켓 API docs https://developer.mozilla.org/ko/docs/Web/API/WebSocket 문제풀이 - 프로그래머스 [1차]비밀지도17681 십진수 9를 이진수 01001(2)로 변환하려면 2로 나눈 나머지를 역순으로 늘어놓으면 된다. 문자열을 역순으로 뒤집기 ‘10010’ → ‘01001’로 바꾸기:let s = '10010' s = s.split("").revers..

1/6 (3번째 프로젝트 KDT 회고, 금) TIL

(노드 심화 주차 프로젝트 제출함)KPT 회고Keep : 좋았던 점. 깃의 브랜치를 나눠 작업하는 방식. 다른 팀원이 개발을 진행한 부분까지 거의 실시간으로 pull로 업데이트 해올 수 있다는 점이 좋았다. 내가 작성하는 코드와 다른 팀원들의 코드의 차이가 크게 벌어지지 않을 수 있어서. 저녁마다 팀 회의를 한 것. 팀원들의 진행 상황과 개인적인 컨디션 등을 알 수 있어서 좋았다. Problem문제점 : 프론트의 자바스크립트 코드를 짜는데 시간을 (생각보다) 많이 보냈던 점. 마감이 다가올수록 잘못 건드릴까 무서워 수정 가하기를 망설이게 됐던 점.해결 방안 :눈 깜빡할 새 시간이 훅 가버리므로 스스로 마감 시간을 정해두고 코드 짜기. 이렇게 하면 덜 중요한 기능이나 참고 자료에 시간을 덜 쓰고 중요한 기..

1/5 (프론트의 에러는 백엔드와 달라, 목) TIL, TIT

// 부트스트랩 JS 저렇게 위아래로 코드를 넣어주니 잘 작동했다: 모달은 잘 됐는데 가운데 정렬이 어긋나고갑자기 세로 정렬되고, 충돌이 심한 듯하다.⇒ 팀원의 도움으로 간단하게 해결됐다. Uploaded by N2T

1/4 (3계층 분리 실전 적용, 수) TIL, TIT

(노드 심화 주차 프로젝트 중)통으로 짜여 있던 router 메소드들을 controller, service, repository 세 계층으로 분리하는 작업을 하였다. 원하는 만큼 꼼꼼하게 들여다보지 못했어도 여러 번 하다 보니 원리가 눈에 익는 것 같다. 아래는 오늘 진행하며 기록한 작은 팁들이다. ‘/:serviceId’ 와 ‘/:serviceId/pickup’을 다르게 인식할 수 있을까⇒ 다르게 인식한다!// :serviceId로 끝나는 라우터 밑에 :serviceId/mypage 경로를 쓰는 라우터가 쓰여진 상황 // 메소드는 PUT으로 같음. 과연 /:serviceId가 뒤로 붙는 슬래시(/)까지도 잡아먹을까? router.put('/:serviceId', authMiddleware, async ..