TIT (Today I Troubleshot)

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/16 월 (TypeScript, 만나서 반갑소) TIL, TIT

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

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/2 (include 두 번의 반란, 월) TIL, TIT

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

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

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

12/15 (mongoose, 귀여운 이름과 그렇지 못한 방대한 문서, 목) TIL, TIT

(노드 입문편 개인 과제 제출함)오늘 에러는 우분투 서버에 MongoDB를 설치하다 하나 발견했고 그 외에는 없었다. 나중에 정리해서 한꺼번에 올릴 예정이다. 구현해야 하는 API를 크게 ‘게시글’ CRUD와 ‘코멘트’ CRUD로 나누면, 오늘 코멘트 부분을 다 만들었다. 어제 만든 게시글 API와 함께 기능 테스트를 완료했다. (의도한 대로 에러 메세지와 HTTP 응답 코드를 던지는 것을 확인함)mongoose의 findById(), findByIdAndUpdate(), findByIdAndDelete() 메소드들의 존재를 발견하고 활용법을 연습했다. findById() 하나만 해도 수많은 기능과 유의점들이 있다. 예를 들면 나는 아직 MongoDB의 ObjectID타입을 잘 검색하게 하려고 findB..

12/14 (만만한 Express API와 에러 나무, 수) TIL, TIT

(노드 입문편 개인 과제중)오늘 배포 전까지는 마치고 싶었으나 그도 못했다. 에러가 줄줄이 줄줄이 나고, 안 나더라도 찾아가서 예외 처리를 해줘야 돼서 또 예외 탐구 중이다. Node.js로 CRUD API 작성하기를 배우고 바로 과제에 적용하는 중이다.에러 탐색과 미진한 부분 테스트에 있어서 가지가 뻗치는 양상이 한 두 분기가 아니다. 최대한 쳐내고 본 가지만 따라가고 있는데도 오늘 글로 정리한 게 에러 번호 7번까지 있다. 보류해두고 지나친 가지까지 어렴풋이 따져보자면 거의 뭐 나무 한 그루가 그려지고 있다. 이번 과제 만만히 볼 게 아니었구나… 본 가지만 얼른 그려서 제출을 일단 한다고 하면, 이후론 어느 가지까지 그려낼 수 있을까. “좋은 개발자가 어떻게 될 수 있을까”에 대한 특강을 오늘 진행했..

11/29 (Ajax와 그 옵션들, 화) TIL, TIT

(01. 미니 프로젝트에 이어서)어제 구현한 DELETE 기능에 비번 확인 후 삭제 기능을 추가하였다. 이제 ‘삭제’ 버튼을 누르면 비번을 입력하라는 alert창이 뜨고, 비번이 맞아야 댓글이 삭제된다. TIT (Today I Troubleshot)프로젝트 트러블 슈팅: 미니 프로젝트 때부터 있던 “ 안 제이쿼리 이벤트 호출 안됨” 에러를 오늘 튜터께 들고가서 해결봤다. (그렇다. 오늘 마침내 질문을 개시했다…!) 서버에서 json_util.dumps() → json.loads() → jsonify()의 3단계를 거쳐 가공하여 보내던 HTTP 응답을 json_util.dumps()만으로 끝내게 만들었다. Ajax의 dataType 옵션을 사용했다.요청 실패시 서버에서 반환한 errorhandler 안의 ..

11/28 (트러블 슈팅을 메인으로 삼은 후 첫날, 월) TIL, TIT

(01. 미니 프로젝트에 이어서)POST 요청시 비밀번호도 넣어야 하도록 구현 완료. 비번은 해시 처리하여 넣었다.GET 요청에 에러가 생겨서 업데이트함DELETE 구현 완료. ‘삭제’ 버튼을 누르면 댓글이 삭제된다. TIT (Today I Troubleshot)프로젝트 트러블 슈팅: 파이썬의 flask.json.jsonify()를 뽀개버렸다. 가 외 트러블 슈팅:삼성뮤직 싱크가사 에러 해결 ⇒ [시:분:초.00]의 요 “.00”부분을 빼먹으면 안됐다.MySQL 설치시 “mysql은 명령어로 인식할 수 없어” 에러 해결 ⇒ 환경변수를 설정해줬다.MySQL 실행시 “mysql server에 연결할 수 없어” 에러 해결 ⇒ MySQL 서버를 직접 실행시켜줬다. 참고: https://www.youtube.co..