썸네일 Prisma schema 다중 파일 세팅하기 prisma 5.15.0부터 지원되는 기능으로 다중 스키마 파일(모듈) 세팅이 가능해졌어요. schema.prisma 파일에 previewFeatures.로 prismaSchemaFolder 기능을 활성화 시켜주어야 하는데요,간단히 다음 한 줄을 추가해주면 세팅은 끝나요.generator client { provider = "prisma-client-js" previewFeatures = ["prismaSchemaFolder"]} 기존에 프리즈마가 하나의 프리즈마 스키마 파일만 지원했기 때문에 여러개의 파일을 분할할 수 없는 이슈가 있었는데,24년도 6월부터 5.15.0 버전에 프리뷰 기능으로 추가되었어요. prisma 폴더 하위에 schema 폴더를 생성해주고, 모듈화할 스키마 파일들을 만들어주면 ..
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" node typescript 환경 세팅 중 발생한 에러.TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" .ts 확장자를 인식하지 못해서 발생한 에러인데, 세팅이 잘못된 것 같다는 추측외에 정확히 뭐가 문제인지 알지 못하는 상태..ㅠ  해결 방법ES6 문법을 사용하기 위해 package.json 파일에 "type" : "module" 을 설정해서 발생한 문제였다."type" : "module" 제거해준다. 제거 했더니 이제 디펜던시로 추가해놓았던 helmet 라이브러리 import 문쪽에서 에러가 터졌는데 에러 메시지는 다음과 같다.Cannot find module 'helmet'. Did you mean to set the 'mo..
썸네일 함수 표현식과 선언식 어제 시저님께서 요즘 리액트 강의를 보고 계시다고 하는데 잘 이해가 안되는 부분이 있다고 하셨다. 리액트 얘기하던 중이었어서 (너무나도 당연히) 컴포넌트 명령형, 선언형 방식 질문인줄 알고 설명해 드리고 있었는데, 그게 아니라 함수 표현식, 선언식에 대한 질문이셨다... ㅋㅋㅋ 덕분에 쓸데없이 캡슐화 얘기까지 갔다가 다시 턴해서 표현식, 선언식 사용 방법으로 다시 설명드리긴 했지만. 아무튼, 다시 정정해서 함수 표현식과 선언식을 어떤 상황에서 사용해야 하고 유의해야 할 부분이 무엇인지 알려드렸다. 함수 선언식은 호이스팅으로 인해 함수가 선언 전에도 호출해서 사용할 수 있다는 특징이 있다. 개인적인 선호도로는 함수 선언식을 좋아하는 편이지만, 버그가 발생할 수 있는 관점에서는 함수 표현식이 더 좋기 때문에..
썸네일 OOP, 상속보다는 조립 그리고 역할을 분리하기 상속보다는 조립하기 특정 기능을 재사용하기위한 상속은 좋지 않다. 진짜 하위타입인지 체크하고, 정말 하위타입인 경우에는 상속을 사용하고 그렇지 않은 상황에서는 조립하는 방식을 선택한다. 강한 커플링이 발생하기 때문에 코드가 변경하기 어렵고, 확장하기 어려운 형태가 될 수 있기 때문이다. 역할 분리를 위한 패턴 적용 간단한 경우(기본 구조) 컨트롤러에서 사용자 입력 처리 및 응답 반환 서비스에서 비즈니스 로직 처리 DAO에서 DB 상호 작용 캡슐화하기 복잡할 경우 엔티티: 비즈니스 도메인 주요 개념 객체 밸류: 불변 속성을 가지는 객체로 주로 데이터를 전달할 때 사용 리포지토리: 엔티티 영속성 관리 도메인 서비스: 여러 엔티티가 있는 복잡한 비즈니스 로직 처리 AOP(Aspect-Oriented Progr..
썸네일 JS 더미데이터로 ERD 다이어그램 그리기 자바스크립트 더미 데이터가 주어졌다. 이걸 ERD로 그려오라는 지령을 받았다. (😨ㅖ..? 그려본 적 없는뎅!) // playlist export const playlistArray = [ { id: 1, owner: "reason", playlistName: "reason's playlist", songList: getSongsBychannel("reason"), }, { id: 2, // 대충 이렇게 생긴 더미 데이터 여러개.. 현재 주어진 더미데이터로 songs, channelList, PlaylistArray가 있다. 받은 더미데이터 중, value 값은 임의로 변경하였다. 이 데이터로 ERD 그리려고 보니 뭔가 이상한 느낌이 들었다. songs 배열에서 객체 key를 살펴보면 name, src,..
썸네일 자바스크립트로 상대시간 만들고 테스트코드 작성하기 (하루 전, 일주일 전…) 라이브러리 없이 자바스크립트로 상대시간을 만들어보자. 저는 바닐라 자바스크립트를 정말 좋아하지만 ㅋㅋ 이번엔 바닐라는 아니고 타입스크립트를 조금 사용해서 작성했습니다. Dayjs와 같은 라이브러리를 사용하면 손쉽게 만들 수 있는데요, 저는 직접 만든다고 나댔지만 날짜는 라이브러리를 쓰는 게 좋겠다..는 생각입니다.. 꼭이요.. 😓 '날짜' 라고 한다면 역시 Date 객체부터 떠올릴 건데, '상대 시간을 어떻게 만들 것인가'가 오늘의 주제입니다. Date 객체만으로도 만들 수 있겠지만, 오늘은 Date 객체와 Intl의 메서드를 사용해서 만들어보고자 해요. Intl을 아시나요? Intl은 국제화 API로 자바스크립트 내장 API되시는 분입니다. 사실 저는 너무 생소하게 느껴지는 API인데 로컬라이징 하시는..
썸네일 radixUI colors 파일을 참고해서 css 모듈 만들기 오늘 분석할 코드는 radixUI의 build-css-modules.js const fs = require("fs"); const path = require("path"); const allColorScales = require("../index"); const outputDir = require("../tsconfig.json").compilerOptions.outDir; const supportsP3AtRule = "@supports (color: color(display-p3 1 1 1))"; const matchesP3MediaRule = "@media (color-gamut: p3)"; Object.keys(allColorScales) .filter((key) => !key.includes("P..
썸네일 퇴사 전에 만들었던 2번째 브랜드 사이트 퇴사 후 오픈 예정 서비스여서 (계속 정식 출시 일자가 밀리는 바람에..) 마무리는 내가 하지 못했다. 배포 페이지를 살펴보니 이미지 다운로드 때문에 네트워크를 계속 열어놓고 받아 오는 건지 계속 돌아가고 있었다. 저렇게 배포하신 이유가 있었을 것 같지만, 내부 사정은 지금은 잘 모르니..ㅠㅜ 왜인지 현 배포 사이트는 이미지 배치가 많이 밀려있고 여러 해상도 대응을 해놨었는데 배치가 다 깨져있었다. 도대체 브랜드 사이트에 무슨 일이😭 제가 했습니다!!하고 배포 주소 올리고 싶었지만..ㅠ 지금 배포되어 있는 페이지는 순수하게 100% 내꺼가 아니라서.. 내가 했던 작업물 결과만 여기에 남겨보고자 한다. 햄버거 메뉴 슬라이드(?) 효과는 크리에이티브 마케터분께서 구두로 요청하셨던 부분이었는데 이런 느낌 맞냐..
썸네일 기획자 ChatGPT와 태스크 관리자 프로그램 만들기 자바스크립트 class로 투두리스트 만들기 - 오늘도 바닐라 자바스크립트(class)로 구현한다. 유틸 함수가 필요할 경우 function을 적절히 사용할 생각이고, 도메인 로직인 또두리스트는 class 문법을 사용할 것이다. - 라이브러리는 사용하지 않는다. - 객체지향 알못이지만 최선을 다해 객체스럽게 사용해보겠다............... 😳 또두리스트 CLI 버전 (TTO DO LIST) UI 인터페이스 없이 CLI로 돌아가는 프로그램을 짜고 싶은데 뭘 해야 할지 고민이 됐다. 그래서 ChatGPT를 기획자로 섭외했다. 기획안을 가져와라! 1. 기획하기 Todo List만 여러 차례 만들었던 전적이 있는 또두리스트 성애자의 눈길을 사로잡는 제안이 있었다. 오.. 그렇다면 CLI버전 투두 리스트를 ..
썸네일 Symbol.iterator를 변수에 담아 호출하면 왜 에러가 발생할까? (feat. this) 오늘의 궁금증 Symbol.iterator를 변수에 담아 호출하면 왜 에러가 발생할까? (feat. this) iterator라는 변수에 list[Symbol.itertaor]를 호출한 리턴 값을 담았을 때 출력 값은 다음과 같다. Array가 이터러블이므로 [Symbol.iterator]()를 호출하면 Iterator가 반환되기 때문에 이런 결과가 나오는구나. 그런데 다음과 같이 list[Symbol.iterator]를 iterator 변수에 담고 이후에 iterator를 호출시켰을 때 에러가 발생했다. 그냥 봤을 때는 동일한 것 같은데 왜 후자는 타입 에러가 발생하는 걸까? 정확한 원인을 알 수 없어서 이번엔 호출 하지 않고 iterator가 무슨 값을 가지고 있는지 확인해보기로 했다. list[Sy..
썸네일 바닐라 자바스크립트로 스톱워치 구현 및 리팩토링하기 스톱워치 만들기 ⏱ 리액트 라이브러리에 의존하며 살다 오랜만에 다시 돌아온 바닐라. 😳😳 스톱워치를 만들어보자. 요구사항 정의하기 📔 [UI 영역] 1. 시작 버튼이 존재한다. 2. 시작 버튼을 누르면 중지 버튼으로 변경된다. 3. Reset 버튼이 존재한다. [기능영역] 밀리초 단위까지는 필요하지 않을 것 같으므로 최소 단위는 초(s) 기준으로 설계할 것이다. 1. 0(s)으로 시작하여 1초 마다 초 단위 숫자가 1씩 숫자가 증가한다. 2. 60초는 분(m) 단위 1로 변환한다. 3. 60분은 1시간(hr) 단위 1로 변환한다. 4. 중지 버튼을 누를 경우 현재 시간을 일시정지 할 수 있다. 5. 리셋 버튼을 누르면 alert창에서 정말 리셋할 것인지 여부를 묻고, true를 리턴받았을 경우 0으로 초..
썸네일 사이드 프로젝트에 Storybook을 도입하다. (버튼 컴포넌트 리팩토링은 덤) 스토리북 도입 배경 📄 요구사항이 변경/추가됨에 따라 레이아웃이나 특정 컴포넌트의 디자인이 전체적으로 변경되어야 하는 문제가 있었다. 매번 컴포넌트를 조금씩 변경해야할 일이 생길때 마다 해당 컴포넌트를 사용하는 페이지 또는 렌더링 시킬 임시 페이지를 만들어서 컴포넌트를 렌더링하여 체크하는 방법을 사용해야 했다. ( 즉, 페이지 이동하고 UI가 제대로 나오는지 확인하는데 불필요한 시간을 소모해야 한다.) 따라서, 스토리북을 도입하게 되면 해당 컴포넌트 하나만을 가지고 테스트하고 작업할 수 있다는 점에서 재사용성이나 컴포넌트 개발 시간 단축에 이점을 가질 수 있을 것으로 판단했다. 현재는 다른 FE개발자나 디자이너가 존재하지 않기 때문에 문서화 부분에서는 큰 장점을 얻긴 어렵겠으나, 대신 미래의 나를 위한 ..
라이브러리 브랜드 그룹 | ReturnReason

티스토리툴바