VS Code 환경 설정 Visual Studio Code 설치 https://code.visualstudio.com/download Next, Tailwindcss 관련 플러그인 설치 참고 https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code VS Code Extension https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss Prettier 플러그인 설치 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 프로젝트 셋업 프로젝트 생성 “npx create-next-app@latest” 커맨드를 실행하면 가이드가 나온다. 아래와 같이 Typescript + Tailwind + Eslint를 사용한다. $ npx create-next-app@latest ✔ What is your project named? … project-name ✔ Would... Continue Reading →
Uninstall Microsoft Edge extension that reinstalls even if you delete it
Go to “edge://settings/profiles/sync” or direct sync settings in the Edge address bar. The last item exists as follows. If you select "Still having sync problems? Try other options" you will see "Reset sync data from Microsoft servers" as shown below. If you run this setting, you can erase all synchronization data and then reset the... Continue Reading →
지워도 다시 설치 되는 Microsoft Edge 확장 제거
이 문제를 해결할 수 있는 방법을 찾게 된 동기: 엣지 확장 중 "원 클릭 번역"이 멀웨어로 확인돼 스토어에서 없어진 이 후 이 확장을 제거하려고 해도 계정의 동기화 기능이 다시 살리는 문제가 발생함원인: 스토어에서 내려간 확장은 동기화에 문제가 있어 발생 아마 나중에 업데이트하면서 해결은 하겠지만...🤔 방법은 아래와 같이 진행하면 된다. Edge 주소창에 "edge://settings/profiles/sync"또는 직접 동기화 설정에... Continue Reading →
Ease 용어 정리
참고할만한 사이트 그래프 한 눈에 보기: https://easings.net/ https://gsap.com/docs/v3/Eases https://animejs.com/documentation/#linearEasing In/Out Ease out 천천히 느려짐 Bound, Elastic같은 설정과 함께 쓰이는 경우 특수한 동작이 점점 강해지는 방향으로 진행 예를 들면 Elastic같은 경우 처음에는 한 방향으로 움직이다가 끝날 때 즈음 역/순방향으로 흔들리는 동작을 함 Ease in Ease out의 반대 Ease inout in+out으로 점점 빨라지다가 목표 속력에 도달하고 끝날... Continue Reading →
Prisma Client 배열 타입 create/update 정리
Prisma Client create 정리 https://www.prisma.io/docs/concepts/components/prisma-schema/relations/many-to-many-relations#querying-mongodb-many-to-many-relations https://www.prisma.io/docs/concepts/components/prisma-client/crud#create sql INSERT에 해당 일반적인 타입에는 INSERT 쓰듯이 사용 가능 const user = await prisma.user.create({ data: { email: 'elsa@prisma.io', name: 'Elsa Prisma', }, }) Array 타입은 약간 특이한 방식으로 사용 1-n / m-n 관계 테이블을 만들 경우 아래와 같이 Array 타입으로 스키마에 정의함 model Post { id Int @id @default(autoincrement())... Continue Reading →
nestJs + prisma + postgresql
nestJs + prisma + postgresql nest, prisma 설치, postgresql 환경 설치 nest n 프로젝트 디렉토리 진입 PrismaClient 설치 npm install @prisma/client https://docs.nestjs.com/recipes/prisma#set-up-prisma npx prisma init ./.env DATABASE_URL 편집 database 생성 필요 https://www.postgresql.org/docs/current/sql-createdatabase.html CREATE DATABASE jointest WITH OWNER = kyi TEMPLATE = template0 ENCODING = 'UTF8' LC_COLLATE = 'en_US.UTF-8' LC_CTYPE = 'C' TABLESPACE = pg_default CONNECTION... Continue Reading →
Javascript, Typescript 수열 만들기
js 수열 만드는 법 Array 사용 > var arr = Array.from(Array(5).keys(), (value, index) => value) undefined > arr [ 0, 1, 2, 3, 4 ] > var arr = Array.from(Array(5).keys(), (value, index) => value *2) undefined > arr [ 0, 2, 4, 6, 8 ] lodash(https://lodash.com) 사용 https://lodash.com/docs/4.17.15#range _.range(4); // => [0, 1, 2, 3]... Continue Reading →
[js, ts] string 값으로 object 멤버 이름으로 사용하기
string 값을 object 멤버 이름으로 사용하기 > var a = 'name' undefined > var obj = { [a]: 'value' } undefined > obj { name: 'value' }
Graphql Client. GraphiQL 사용
GraphiQL Github 주소 https://github.com/graphql/graphiql Example: https://github.com/graphql/graphiql/tree/main/examples 메인 README를 보면 Getting started만 보고서는 환경 별로 사용 방법을 모두 적어서 시작이 어려움 여기에 있는 예제만 가져가 빌드해 사용하면 어렵지 않게 시작 가능 Monaco GraphQL Next.js Example examples의 monaco-graphql-nextjs 복사 npm i --force npm run dev GraphiQL create-react-app Example npm install npm run start 버전 차이로 인해서인지 제대로... Continue Reading →
Spread
> var obj1 = { name: 'kyi' } undefined > var obj2 = undefined undefined > var obj3 = null undefined > var result = { data: 'data', ... obj1, ...obj2, ...obj3 } undefined > result { data: 'data', name: 'kyi' } > result = {...result, data: 'new' } { data: 'new', name: 'kyi' }... Continue Reading →
