Til

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

1/3 (몸 관리 실패, 화) TIL

(노드 심화 주차 프로젝트 중)눈이 뜨겁다. 어제 내가 맡은 파트의 백 API를 만들고, 오늘은 프론트에서 요청을 보내오는 코드를 짰다. 대강의 html 페이지를 만들어놓고만 하려고 했는데도 근 한 달만에 해봐서 그런지 막막했다. 실제로 잘 동작하는지는 내일 더 건강한 컨디션으로 확인해봐야겠다. 프론트 동작 탐구로그인 처리 - ajax() 방식과 axios 방식의 공통점과 차이점이 확연히 보인다. Ajax 버전: // 로그인 function sign_in() { let email = $("#inputEmail").val(); let password = $("#inputPassword").val(); $.ajax({ type: "POST", url: "/api/auth", data: { email: ema..

1/2 (include 두 번의 반란, 월) TIL, TIT

(노드 심화 주차 프로젝트 중)Sequelize 모듈을 사용함에 있어서 어려움울 겪었다. Users라는 테이블이 있다. 그리고 Services라는 테이블이 있는데 여기의 customerId와 ownerId는 모두 Users의 userId와 연결되어 있다(userId를 참조하고 있다). 목표: 하나의 ‘Service’ 데이터를 조회할 때 cutomerId와 ownerId 각각에 맞는 User 데이터를 조인해오고 싶다. 추가로, 조인해 온 User 데이터 중 nickname 컬럼만 각각 customerNickname, ownerNickname이라 덮어씌운 별명으로 가져오고 싶다. 상기한 관계는 sequelize의 Model 작성시 이미 맺어져 있다(이게 왜 중요하고 환장할 일인지는 아래에 나와 있다…). 이..

12/30 (3번째 프로젝트 시작, 금) TIL

(프로젝트 진행중) 3번째 프로젝트가 시작됐다. 이전까지는 API 메소드들을 app.js파일에 통으로 짜 넣던걸 이제는 3계층으로 분리하는 것을 목표로 한다. 기능별 단위 테스트와 통합 테스트를 탄탄히 해보는 것 또한 이번 프로젝트의 메인 목표이다. 손님과 사장님 모두에게 서비스를 제공하는 “세탁물 픽업 후 집앞까지 배달” 소프트웨어를 만들어야 함. 내내 팀원들과 프로젝트 사전 계획서를 작성했다. 회의할 때 설명하면서 그려보인 드래프트시간이 오래 걸렸지만 덕분에 프로젝트 요구사항과 요구사항에 생략된 페이지, 기능, 기능의 흐름에 대해 더 심도있게 파악이 가능했다. 이제 만들어볼 수 있을 것 같다. Uploaded by N2T

12/29 (미궁에 빠진 에러, 목) TIL

(노드 심화 주차 강의 듣는 중) 좋은 노트 정리 방식을 하나 알았다. 강의 노트가 있을 때 거기서 꼭 모든 꼭지를 다 내 언어로 옮겨 적지 말고, 내가 명확히 그리고 더 자세하게 정리한 부분이 있으면 그 부분을 강의노트에서 선 긋기 방식으로 (이렇게) 지워놓는 것이다. 그리고 강의 노트에서 특별히 더 덧붙일 말이 없으면 그냥 이 꼭지는 강의 노트를 참고하라고 한 마디 남겨 놓고 말이다. 좋아. 이렇게 덜어낼 것은 덜어내고 분업 루트로 가는 거다..! 오늘은 진짜 미스테리 그 자체인 에러를 하나 기록으로 남기려고 한다. 아직 해결하지 못했다. 테스트 코드에 대해 마침 배우려는 참인데 이걸 배우고 나면 디버깅에 도움될 수 있지 않을까 해서 일단 공부중이다. 아래는 어제에 이은 에러 기록이다. 일단 내 편집..

12/28 (3계층 아키텍처 패턴대로 기존 코드를 분리해보다, 수) TIL

(노드 심화 주차 강의 듣는 중) 나의 용어로 정리한 강의 내용. 다른 이에겐 생소할 수 있다. 프로그래밍에서 ‘도메인’이란 용어의 뜻은: 요구 사항에 따른 개발 범위. 소프트웨어로 해결하고자 하는 문제의 영역. “온라인 쇼핑몰 개발”이라는 상위 도메인 밑에는 “상품 게시글”, “결제”, “정산” 등의 하위 도메인이 여럿 있을 수 있다. 그래서 ‘도메인 모델’이라 함은: 특정 도메인을 개념적으로 정리한 모델!3계층 아키텍쳐 패턴: 제0계층 라우터(?) -> 제1계층 컨트롤러 -> 제2계층 서비스 -> 제3계층 레파지토리 + ORM‘계층’이란 (하위 계층과 상위 계층의 상관관계가) 마치 점조직 같다. 하위 조직은 서로의 존재를 모르고 직속 상위 조직과만 연결되어 있는 것이. Uploaded by N2T

12/27 (객체 지향은 회사 시스템이다, 화) TIL

(노드 심화 주차 강의 듣는 중) 객체 지향에서 나오는 용어들(캡슐화, 상속, 추상화, 다형성, 의존성, 결합도, 응집도)과 객체 지향 프로그래밍 설계의 5가지 원칙인 “SOLID”는 어떤 차이가 있는 걸까. ⇒ 대략 전자를 ‘객체 지향적인 설계에서 다루어지고 활용되는 개념들’로, 후자를 거기서 더 나아가 ‘객체 지향 프로그래밍을 더 잘하기 위한 원칙’으로 이해하고 있다.내가 이해한 ‘객체 지향’: “누가 어떠한 일을 할 것인가”, 일꾼에게 일 할당하기. 어떤 저택을 돌보는 기능이 필요하다고 할 때, 그걸 한 뭉텅이의 일거리로 만들지 않고 임의로 어떤 고용인들을 추상화해내는 것. 침대 시트와 옷가지를 빠는 ‘빨래 담당 하녀’, 마구간을 돌보는 ‘마구간지기’, 주방 담당 ‘주방장’ 등으로. 또 어떤어떤 일..

12/26 (Prettier와 Socket.IO, 월) TIL

(노드 심화 주차 강의 듣는 중)이제 그날 공부한 내용을 그냥 TIL 노트에 바로 쓰고 올리기로 하였다. 통일된 코드 서식은 오타를 줄이고 가독성을 높이는 효과가 있다. 대표 패키지로 prettier를 사용해보았다. 프로젝트 전체 파일을 한 번에 정렬하려면 npm run prettify로, 한 파일이나 코드 조각을 정렬하려면 플러그인 설치를 통한 마우스 우클릭 → “Reformat with Prittier” 액션으로 해결하는 게 좋겠다. 웹소켓은 실시간 웹 서비스를 지원하기 위해 만들어진 소켓이다. ⇒ “새로고침 없이”가 실시간의 정의라고 봐도 되는 걸까?자바스크립트 대표 웹소켓 라이브러리 Socket.IO를 이용하여 서버와 클라이언트가 데이터를 주고받는 방법(간단히): (참고: socket.io 공식 ..