내 머리는 램인가봐 내 머리는 램인가봐

짧은경험기

• 뻘스러운 리팩토링 후

  짧은경험기 2023. 11. 1. 04:33

  뻘스러운 리팩토링 후 개발하던 도중 UserOpinion 클래스가 신경에 거슬렸다. 이 클래스는 현재 로그인한 유저의 의견을 CRUD 하는 용도이다. 내부에 상태가 없고, CRUD하는 용도라 공개된 메소드가 모두 static이었다. 다음과 같은 형태이다. class UserOpinion { static fetch() { ... } static store() { ... } } 그런데, 이상하게 무언가 마음에 안 드는 것이었다. 어떤 점이 신경에 거슬리는지도 모르겠고. 그래서 멍청하게 static을 우선 다 지웠다. 그래도 마음에 안 든다. 왜 신경이 거슬릴까. 그 후로도 이것저것 뻘스럽게 바꿨는데 마음에 안 들었다. 결국, 쉬다가 왜 이런 결과가 나왔는지 처음부터 생각했다. 처음의 계획은 처음의 계획은 U..

  Read More
• 타입스크립트 삽질

  짧은경험기 2023. 10. 26. 15:35

  1. 타입을 값으로 바꾸려는 삽질 상황 타입스크립트에서 타입을 값으로 바꿀 수 있을까. 이 생각은 FixedArray를 타스에서 구현하려고 한 것으로부터 시작된다. 아래 코드는 타입스크립트에서 FiexArray를 구현하려고 했던 코드이다. class FixedArray { data: RangeObject; constructor() { // 클래스 안에서 N(N으로 주어지는건 1, 2, 4.. 중에 하나인데) // 이것을 타입이 아니라 값으로 얻어오고싶음 // 생성자 인자로 넘기는 방법도 있겠지만, 템플릿 파라미터로도 가능한지 궁금 } } type SIZE = 1 | 2 | 4 | 8 | 16 | 32; type RangeObject = { [K in keyof [...Array]]: T; }; C++의 ..

  Read More
• flex-grow, shirink, basis

  짧은경험기 2023. 8. 18. 09:08

  flex-grow, shirink, basis flex-grow, shirink, basis는 flex container에 속한 flex item의 크기 비율을 결정한다. flex-grow는 container가 점유한 공간의 비어있는 곳을 채우기 위해 아이템을 늘릴 비율을 의미한다. flex-shirink는 container가 점유한 공간이 좁아 아이템의 크기를 유지할 수 없어 아이템을 줄이기 위한 비율을 의미한다. flex-basis는 container안에서 아이템이 얼마만큼 공간을 점유할지 결정하는 초기값이다. 아이템이 늘어나고 줄어날 때의 방향은 flex-direction에 의하여 결정된다. 다음 상황을 가정해 보자. flex container가 점유하는 노란색 공간이 있고, 청녹적의 세 박스가 f..

  Read More
• 패딩이 적용된 블록 엘리먼트에 높이로 트랜지션하기

  짧은경험기 2023. 8. 1. 19:36

  개요 패딩이 적용된 블록 엘리먼트에 높이를 기준으로 트랜지션을 하려고 시도하면 두 가지 문제가 발생한다. 시작 상태에 height 속성을 0으로 지정하더라도, 패딩에 의하여 공간이 확보되어 해당 엘리먼트 안의 내용물 보인다. 트랜지션 롤백 과정의 마지막에 엘리먼트 안의 내용물이 감춰지지 않는다. 예시 Hello World 블록 엘리먼트에 패딩을 1em만큼 주고 height을 0으로 하면 어떤 결과가 나올까? 다음 이미지를 보자. 왜 이런 결과가 나온 걸까? 패딩에 의하여 블록 엘리먼트의 공간이 확보되고 height: 0 속성이 무시된다. 엘리먼트는 최소 padding의 top, bottom 크기만큼의 높이를 갖게 되는 것이다. 그 결과, 가리기를 원했던 글이 보인 것이다. 이 상태에서 height을 변경..

  Read More
• 도커 쓰다가 버그 발견해서 제보하려고 했더니

  짧은경험기 2023. 6. 6. 01:16

  도커 쓰다가 설정을 열면 문제가 생기는 버그를 발견해서 제보하려고 했더니 이미 제보 완료... 나 뿐만 아니라 많은 사람들이 겪은 버그였다. 해당 버그 깃허브 이슈 4.20 버전으로 업데이트 되면서 도커 데스크톱에서 wsl의 버전을 가져오지 못해서 생긴 버그라고 한다. 아래는 해당 버그가 발생한 지점이다. [com.docker.backend.exe][E] getting WSL version: executing wsl --version: exit status 0xffffffff [2023-05-31T07:33:22.691488800Z][GoBackendProcess][I] 실시간으로 경험한 버그가 이슈로 등록되어 해소되는 과정이 신기해서 기록으로 남긴다. --------- fix되었다.

  Read More
• 서로 다른 프로젝트에서 코드를 공유하기

  짧은경험기 2023. 3. 25. 20:54

  서로 다른 프로젝트에서 코드를 공유하기 서버, 클라이언트 프로젝트가 독립적으로 존재할 때, 요청과 응답을 다루는 코드에 중복되는 부분이 있어 공유하고 싶다. 어떻게 코드를 공유할 수 있을까? 방법 서버, 클라이언트, 공통 코드를 다루는 프로젝트가 따로 있다고 가정해 보자. 디렉토리 구조는 다음과 같다. 위와 같은 구조에서, client.ts는 common.ts에서 export하는 타입과 함수를 import하여 사용하려고 했다. 빌드는 실패했고, 에러는 다음과 같다. TS6059: File 'C:/workspace/test/structure/common/common.ts' is not under 'rootDir' 'C:/workspace/test/structure/client'. 'rootDir' is e..

  Read More
• node.js + typescript 디버그 모드 실행하기(웹스톰)

  짧은경험기 2023. 3. 22. 18:51

  디버그 모드는 왜 쓰는지? node.js, typescript를 사용하는 웹스톰 프로젝트에서 디버그 모드에 들어가는 방법을 알아본다. 디버그 모드에서 브레이크 포인트를 걸어 코드 진행을 멈출 수 있고, 변수의 값과 같은 정보를 알 수도 있다. 디버그 모드 없이 개발한다면, 특정 변수를 확인하기 위해서 console.log(변수) 같은 코드를 추가해야 할 것이다. 디버그 모드를 이용하면, 이러한 번거로움 없이 코드를 확인할 수 있다. 디버그 모드 적용하기 참고링크: 웹스톰공식문서 전제조건: 프로젝트에 ts-node가 설치되어 있어야 한다. 1. 상단 메뉴의 Run탭에서 Edit Configuration을 선택한다. 2. 새로 나타난 창의 좌측 상단 + 버튼을 누르고 Node.js를 클릭한다. 3. 우측 화..

  Read More
• 미니 게시판에 서버 추가

  짧은경험기 2023. 3. 21. 15:32

  목적 이전에 만든 미니 게시판에 서버를 붙인다. 목표 node.js, express를 이용하여 서버를 구현하고 mysql을연동한다. 기존의 미니 게시판을 서버와 연동한다. 과정 데이터베이스 db는 mysql로 하고, 따로 설치없이 docker를 이용하여 이미지를 띄워보기로 했다. mysql은 익숙하기도 하고 많은 사람들이 사용하여 자료 찾기가 쉬울 것 같아서 선택했다. 서버를 배포할 것이므로 docker를 사용하면 로컬에 설정한 내용을 기반으로 세팅하기 용이하지 않을까 싶었다. docker에 mysql 공식 이미지와 설명이 있어 이를 활용하였다. 링크에 있는 yml파일 예제에 몇가지를 추가하였다. volums: 저장한 데이터를 영속적으로 저장하기 위해 사용하였다. 도커에서 volums를 이용하여 매핑된 ..

  Read More