티스토리

wonin의 공부노트

검색하기

블로그 홈

wonin의 공부노트

wonin.tistory.com/m

wonin 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

개발자로 지내오면서 대학교를 다니며 야간에 전자공학을 배우며 인생의 목표를 찾기보단 재미를 추구하던 시절에 만난 프로그래밍 언어 수업이 지금의 나를 여기까지 이끌었네요. 이 글은 정보전달이나 유익한 글이 아닐 수도 있어요. 무더위가 시작되기 전 이름 모를 변덕 때문에 시작한 글이에요. 저는 항상 변덕이 많았어요. 좋게 말하면 호기심이 많고, 나쁘게 말하면 쉽게 흥미를 잃는 편이었죠. 이런 나를 발견한 건 최근이에요. 지금까지는 저를 깊게 들여다보지 않았어요. 사실 지금도 그렇고요. 누군가에게 비춰진 내 모습을 보고 알아차린 거죠. 그래서 흥미 있는 것을 발견해도 스스로 알아차리지 못해요. 그런데 프로그래밍은 좀 달랐어요. 공부를 하면서 처음으로 “왜?”라는 질문이 떠올랐어요. 20여 년을 살아오면서 “왜?”라는 질문은 많이.. 공감수 2 댓글수 2 2024. 6. 11.
nodejs + express에서 prometheus, grafana 적용하기 1. 이유와 목적Node.js로 개발된 서버의 모니터링이 필요했습니다. 언제 서버가 다운되는지, 언제 부하가 발생하는지를 파악하기 위해 여러 모니터링 도구를 검토했습니다. 많은 사람들이 Prometheus와 Grafana를 조합하여 모니터링 도구로 사용하고 있기에, 저도 이 스택을 사용해 모니터링 시스템을 구축해 보았습니다.2. Prometheus란?Prometheus는 오픈 소스로 제공되는 모니터링 및 경고 도구입니다. 주로 시스템과 서비스를 실시간으로 모니터링하는 데 사용되며, 이벤트 및 성능을 모니터링할 때 유용합니다. Prometheus의 핵심 기능은 시간에 따른 데이터 변화를 수집하고 저장하는 것입니다. 유연한 알람 설정과 다양한 데이터 소스로부터의 데이터 수집을 지원하여, 시스템의 상태를 효과.. 공감수 1 댓글수 0 2024. 5. 27.
[Postgres] window 환경에서 postgres exportor를 쓸 때 db 저장소 변경하기 postgres exportor는 postgres db를 pormetheus에서 쓸 수 있는 정보(metrics)를 뽑아주는 고마운 소프트웨어 입니다. 다운로드 주소그런데 이걸 깔고 실행해보니 db를 설정하는 부분이 없었습니다. 그런대도 잘 실행되는것 보니 postgres exportor를 만든사람이 예제 db로 연결되게끔 만들었나봅니다. 공식문서를 보면 docker로 간편하게 시작 할 수 있다고 합니다. 그런데 저는 window 환경에서 실행시키고 싶어졌습니다.다운로드를 하고 압축을 풀면 3개의 파일만 나옵니다. postgres_exporter.yml 파일이 있다고 하지만 어디있는지 모르겠습니다. 그래서 yml 만들고 안에 내용을 아래와 같이 하고 실행시켜보니 DATA_SOURCE_NAME: post.. 공감수 0 댓글수 0 2024. 5. 9.
Bunjs v.1.1 출시 Bunjs가 v1.1을 출시 했습니다. 공식블로그 공식홈페이지 🟦Bun 이란? bun는 node, deno 같은 javascript 런타임 및 패키지 관리자 입니다. node, deno와 달리 bun은 빠릅니다. v8엔진을 사용하는 node, deno와 달리 Zig로 작성되고 JavaScriptCore로 구동되어 속도가 굉장히 빠릅니다. 🟦 Bun의 특징 node가 있는데 bun을 쓸 이유가 있을까요? 좀더 빠른 것을 원하면 bun을 선택하는 것이 좋습니다. 걱정되는 것은 node에서 사용되었던 것들이 호환이 안될 수 있다는 것 입니다. 걱정 안하셔도 됩니다. bun 개발자들이 가장 중요하게 생각하는 것이 node와 호환성입니다. Bun을 썼을 때 더 편리한 방법중 몇가지 알려드리겠습니다. npx — 5.. 공감수 0 댓글수 0 2024. 4. 3.
깃허브 commit의 작성자 변경하기(git-filter-repo) 공식문서 newren/git-filter-repo: Quickly rewrite git repository history (filter-branch replacement) (github.com) 🟩 0. 준비물 python git 환경변수를 설정할 지식 🟩 1. git-filter-repo를 다운받는다. git clone https://github.com/newren/git-filter-repo.git 어디로 다운 받는지 상관 없습니다. 환경변수를 저장할거이기 때문입니다. 🟩 2. 환경변수 저장을 해준다. git-filter-repo.py가 있는 폴더를 환경변수로 저장해준다. clone 받은 폴더를 통체로 저장해주세요 🟩 3. filter-repo가 잘 설정됬는지 확인한다. git filter-repo .. 공감수 0 댓글수 0 2024. 3. 25.
[Nestjs] microserivce 쓸 때 중복 반환 해결법 nestjs 에서 mqtt를 사용할 때 주의해야할 점이 있습니다. 공식문서에서 MicroService를 사용해서 redis나 mqtt 등을 사용하려고 하면 overView로 아래 코드블럭을 보여줍니다. import { NestFactory } from '@nestjs/core'; import { Transport, MicroserviceOptions } from '@nestjs/microservices'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.createMicroservice( AppModule, { transport: Transport.TCP, }, ); awa.. 공감수 1 댓글수 1 2024. 3. 18.
[반성문] 테스트 코드의 중요성 🟩 현장 폐쇠망에서 일을 하다가 테스트 코드의 중요성을 느꼈습니다. nestjs로 서버를 개발했는데 이 전에는 postman으로 한땀한땀 input 값을 넣고 output을 검사했습니다. 로깅도 console.log로 찍어서 하나하나 씩 봤습니다. 데이터가 쌓이면서 순간 순간 지나가는 데이터를 재현해 내는 것이 불가능 해졌습니다. 재현이 불가능해지면서 디버깅이 어려워지고 그래서 시간이 많이 걸려게 되었습니다. 그래서 느낀 바로는 내 로직에 input, output값을 정해두는 테스트코드를 작성해 놓는 것이 중요하다고 생각했습니다. 어떤 값이 들어왔을 때 로직이 올바른지, 어떤 부분을 고쳐야하는지 세세하게 고민을 합니다. 정답지 안에서 디버깅을 하는 것이 중요하다고 느꼈습니다. 내가 천재가 아니니 예상 결.. 공감수 0 댓글수 0 2024. 2. 26.
Nestjs를 사용할 때 controller에서 400 Validation failed (numeric string is expected) 에러 발생 시 🟩 문제 상황 예시 코드 @Controller('tasks') @UseGuards(AuthGuard()) export class TasksController { constructor(private tasksService: TasksService) { } @Get('/:id') getTaskById(@Param('id', ParseIntPipe) id: number): Promise { return this.tasksService.getTaskById(id); } @Get('/week') getTasksByWeek(@GetUser() user: User): Promise { return this.tasksService.getTasksByWeek(user); } } 이렇게 컨트롤러를 만들었었습니다. 그리고 .. 공감수 0 댓글수 0 2024. 1. 16.
2023 회고 나의 2023년을 반성하고 더 나은 2024년을 위한 반성의 글입니다. 🟩 스스로 정한 2023년 목표였던 것 노드 교과서 책, 강의보기 nest 백엔드 프로그래밍 책 보기 컨테이너 책 보기 나만의 사이드 프로젝트 해보기 아쉽게도 이루지 못했습니다. 일기를 뒤져가며 기억을 되짚어 보면 회사에 불만이 가득했네요. 불만과 함께 그 어떤 엑션도 취하지 못한 것이 자신에게 실망스러웠습다. 다음년에는 꼭 목표의 50%는 이루어 보겠다고 다짐합니다. 🟩 7월 부터는 회사 프로젝트를 했습니다. 프로젝트 경험은 긍정적이었습니다. 처음으로 회사에서 처음부터 프로젝트에 들어가 본 경험입니다. 설계는 다른분이 하셨지만 그래도 프로그램을 처음부터 끝까지 만들어본 경험이 좋았습니다. nestjs를 처음 사용해봤는데요. spri.. 공감수 1 댓글수 0 2023. 12. 31.
[js] flatMap에 대해서 🟩 왜 flatMap에 관심을 가지셨나요? 프로젝트나 코딩하다가 쓸일이 있어서 알게된건 아닙니다. next에 유용한 12가지 라이브러리들 이라는 글을 읽고 있었는데 lodash 라는 라이브러리를 소개해주었습니다. 소개 문구에서 flatMap이라는 것을 지원해주기 전에 이 라이브러리를 써서 유용하게 썻다 라고 이해했습니다. "어? flatMap이 뭐지? 하다가 찾아본 것입니다." ✅ js의 flatMap에 대해서 ✨ map은 알고있다고 가정하겠습니다 Array.prototype.flatMap() - JavaScript | MDN (mozilla.org) map와 flatMap은 차이가 있습니다. map을 이미 알고있다면 한번에 이해가 갈 예시가 있는데요. const arr1 = ["it's Sunny in.. 공감수 0 댓글수 0 2023. 12. 27.
[Postgresql] datagrip에서 postgres db 백업하기 datagrip에서 postgres db 백업하기 ✅ 상황 저의 상황은 docker로 postgres를 설치하고 운영해왔습니다. 다른 db를 datagrip으로 백업을 하려 했는데요. 이 때 마주친 문제점을 공유합니다. db를 선택 ⇒ 왼쪽 클릭 ⇒ import/Export ⇒ Export with ‘pg_dump’를 사용합니다. 🔷 postgres가 안깔려있다. docker에 컨테이너 형태로 db를 사용해서 로컬pc에는 postgres 자체가 안깔려있었습니다. 이 때 생기는 문제점이 있었습니다. 바로 Path to pg_dump 부분에 Path to executable is wrong 이라는 오류가 나왔습니다. 이건 datagrip에서 pg_dump.exe 파일을 찾지 못했기 때문입니다. 이 때문에 p.. 공감수 1 댓글수 1 2023. 10. 25.
[Nest] nest에서 redis 연결하기 nest와 redis를 연결 nest와 redis를 연결하는것에 초점을 맞춘 글입니다. nest에서 여러가지 방법으로 redis를 연결해도 된다고 하지만 너무 다양한 방법이 있어 오히려 혼란스러웠기 때문에 제일 간단한 방법으로 소개해드리겠습니다. redis에 대한 자세한 정보 🟩redis 설치 npm i redis를 설치하시면 됩니다. pnpm이면 pnpm i redis 으로 하시고 bun이면 bun i redis 로 설치하면 됩니다. 🟩 redis 폴더 만들기 app.module.ts 파일에다가 직접 redisModule을 연결할 수도 있지만 더 깔끔한 방법을 위해 redis를 관리하는 폴더, 모듈화를 했습니다. 🟦 redis.provider.ts import { createClient } from '.. 공감수 0 댓글수 0 2023. 10. 12.
[Nest] Nestjs에서 microService를 이용할 때 cron이 여러번 나타는 경우 😮 문제상황 nest에서 cron을 통해서 스케줄링 작업을 하려하는데 한 스케줄러가 여러번 실행되었습니다. 추적을 해보니 microService객체도 스케줄링을 실행하고 있었습니다. 저의 경우에는 mqtt와 redis를 microservice로 쓰고 있었는데요. cron작업을 했을 때 3개가 돌아갔습니다. cron작업을 1개만 실행하기 위한 해결책을 공유하기 위한 글입니다. 이를 해결하기 위한 방법을 찾아보니 여러개가 있었습니다. 스케줄러만 동작시키는 분리된 nest 프로세스를 만들기 cron job을 백그라운드로 돌리는 api를 만들기 Buil Queue(?)라는 것을 사용해서 프로세서를 핸들링하기 db를 locking 해서 스케줄러의 영향을 줄이기 저는 1번을 선택해서 스케줄러만 동작시키는 nest .. 공감수 0 댓글수 0 2023. 8. 31.
[Nestjs] @ManyToMany를 OneToMany2개로 쪼개고 select 하기 ManyToMany를 왜 쓰지 말라고 할까요? 제가 생각하는 이유는 확장성 때문이라고 생각합니다. 중간 테이블의 역할이 PK, FK 쌍을 알아서 매핑만 하는 역할이면 ManyToMany를 써도 상관없다고 생각합니다. 하지만 중간 테이블에 어떤 column이 추가가 되거나 삭제가 되야한다면 문제가 될 수 있기 때문 아닐까요? 그래서 테이블을 엮는 2가지 방법을 소개해 드립니다. 1번은 ManyToMany를 사용해서 select을 하고요. 2번은 OneToMany2개를 사용해서 select을 합니다. A, B 테이블이 있습니다. 이 2개의 테이블은 서로 다대다 관계입니다. 🟩 1. ManyToMany를 사용해서 관계맺기 A @Entity({ schema: 'sleact' }) export class A { .. 공감수 0 댓글수 0 2023. 7. 30.
[Jetbrain] Ai Assistant 출시/ 적용법 🎈Jetbrain 2023.2 버전이 업데이트 되었습니다. Jetbrain 2023.2 버전부터 ai assistant를 사용할 수 있습니다. ai assistant는 chat gpt 처럼 채팅기능도 있습니다. 또한 프로젝트의 전반적인 도움을 줍니다. 그 기능을 하나씩 소개드립니다. 주요기능은 Ai 채팅 & 코드분석 리팩토링 커밋 메세지 작성 🟩 1. Ai asisstant 설치 plugin 형태로 설치를 해서 간단합니다. ctrl + alt + s 를 눌러서 세팅에 들어갑니다. Plugins 를 클릭하고 Marketplace에 ai라고 검색합니다. 그 후 Ai Assistant를 install 해줍니다. 다 설치가 되면 ide를 한번 껏다 켜야합니다. restart IDE를 눌러줍니다. 🟩 2. 활용 .. 공감수 0 댓글수 0 2023. 7. 26.
[Nest] Nest.v10 출시 / nest 에서 swc(Speedy Web Compiler) 적용하기 Nest의 버전 10이 공개되었습니다. NestJS v10 is now available - Trilon Consulting 특징 swc를 적용할 수 있다 redis에 wildcard를 적용할 수 있다. cachmodule 분리 @nestjs/common package에서 @nestjs/cache-manager 패키지로 분할되었다고 합니다. node12이하에서 지원 중지 nest-cli 플러그인 typescript 4.8이상에서만 동작 저는 swc를 기존 nest.v9에 적용 해보았습니다. 마이그레이션 하는법 공식문서 nest 에서 swc 적용하기 nest v10으로 버전업 되면서 swc라는 rust 기반의 컴파일러를 사용할 수 있다고 들었습니다. 좀더 빠른 빌드를 위해 nest에 swc 컴파일러를 도입.. 공감수 0 댓글수 0 2023. 7. 10.
[Nest] nest에서 MicroService 세팅하기(mqtt 세팅하기) 공식문서를 참고하면 더욱 이해를 빠르게 하실 수 있습니다. nest서버를 http로 활용하는데 mqtt 를 활용하는 mqtt서버를 추가 할 때 mqtt 통신을 설정하는 방법입니다. 0. mqtt 서버 세팅 docker로 손쉽게 mqtt 서버를 세팅할 수 있습니다. mosquitto를 docker로 깔아서 로컬로 돌리면서 테스트를 해볼 수 있는데요. docker run -it --name mosquitto -p 1883:1883 eclipse-mosquitto docker로 eclipse-mosquitto의 이미지를 받아온 후 docker start mosquitto 를 실행하면 mosequitto가 1883포트를 열고 돌아갑니다. 1. nest에서 mqtt 세팅 //마이크로서비스 npm install @.. 공감수 0 댓글수 0 2023. 7. 4.
[Nest] Nest에서 swagger와 postman 연동하기 아무래도 swagger를 메인으로 서버 개발을 하다 보면 클릭할 것이 많아져 편한 툴인 postman으로 하고싶은 마음이 듭니다. postman은 json 객체로된 정보들을 가져다가 collection을 만들 수 있습니다. nest에서 swagger를 연동하면 json형태의 swagger을 가져올 수 있습니다. swagger의 json파일을 얻으려면 nest 서버를 실행하고 api-json에 접속하면 됩니다. 1. nest에서 swagger 작성하기 공식문서에 친절하게 swagger의 적용 방법이 나와있습니다. $ npm install --save @nestjs/swagger @nestjs/swagger을 다운받고요. main.ts 파일에 swagger 설정을 하면 됩니다. main.ts async fu.. 공감수 0 댓글수 0 2023. 7. 3.
[DB] postgresDB에서 distinct on에 대해서 🟦 "distinct" 키워드를 사용하면 해당 열(들)에 대해 중복을 제거하여 고유한 값을 반환한다는 것입니다. 즉, 중복된 값이 있을 경우 첫 번째로 나오는 값만 반환하는 것이 아니라, 중복을 제거한 후에 고유한 값들을 모두 반환합니다. 🟦 "distinct on"은 PostgreSQL의 확장 기능 중 하나로, 지정된 열(들)을 기준으로 중복을 제거하고 해당 열들의 첫 번째 값을 반환합니다. 따라서 "distinct on"을 사용하면 해당 열(들)에 대해서는 중복을 제거하여 첫 번째로 나오는 값만 반환하게 됩니다. 예를 들어, "distinct on (A.storage_id, A.item_id)" 구문이 쿼리에 포함되어 있다면, "A.storage_id"와 "A.item_id" 열의 조합에 대해서 중복.. 공감수 0 댓글수 0 2023. 6. 14.
[Nest] nest의 핫 리로딩 🟩 핫 리로딩이란? 애플리케이션의 코드를 수정하거나 업데이트할 때, 애플리케이션을 다시 시작하지 않고도 변경 사항을 즉시 적용할 수 있는 기능입니다. 일반적으로 소프트웨어 개발 중에는 코드를 수정하고 변경 사항을 적용하기 위해 애플리케이션을 다시 빌드하고 재시작해야 합니다. 이는 개발 프로세스를 느리게 만들 수 있고, 잦은 빌드 및 재시작으로 인해 개발자의 생산성을 저하시킬 수 있습니다. 핫 리로딩은 이러한 문제를 해결하기 위해 도입된 개발 기법이며, 개발 중인 애플리케이션을 다시 시작하지 않고도 코드 변경 사항을 적용할 수 있습니다. 이는 개발자가 수정한 코드를 실시간으로 반영하여 개발 중인 애플리케이션을 새로고침하거나 재시작하지 않고도 변경 사항을 확인할 수 있게 해줍니다. 핫 리로딩은 개발자들 사이.. 공감수 1 댓글수 1 2023. 6. 10.
Nestjs를 EC2에 배포하기, SSL 적용시키기 이글을 쓰게된 계기 토이 프로젝트를 react를 만들어서 vercel에 배포를 해놨습니다. 하지만 local에서 서버를 돌리고 request를 날려보니 mixed content 문제가 발생했습니다. https가 필요하다고 합니다. 이 문제를 해결하기 위한 과정입니다. 🟦 첫 번째 시도 로컬에서 ssl을 집어넣어서 https 요청을 커버하자! ⇒ 이 때는 ssl 계념을 잘 몰랐습니다. ssl을 적용하는건 로컬에서 돌리면 되는거 아냐? 라고 생각했었습니다. 하지만 인증된 도메인이 필요했었습니다. 🟦 두 번째 시도 ec2에 서버를 올려서 ssl을 받자! ⇒ ec2에 docker-compose로 nestjs 서버를 띄우는 방법 위 글에서 postgres 부분을 aws rds로 바꿨습니다. 그리고 nestjs 서.. 공감수 0 댓글수 0 2023. 5. 24.
nestjs와 typeorm 그리고 postgres 환경에서 docker-compose로 한번에 띄우기 매번 개발을 할 때 db(postgres)를 docker로 띄웠었습니다. 그리고 서버를 따로 띄웠었습니다. 이 과정이 너무나 귀찮았기 때문에 서버+db를 한번에 띄우는걸 해보자 라고 결심했습니다. 제가 생각했던 흐름은 서버를 docker로 띄운다. db를 docker로 띄운다.(이미 postgres를 5432로 띄우고 있음) 서로 연결시켜준다. 위 과정을 진행시키려고 했습니다. 서버를 docker로 띄웁니다. 처음에 docker라는 계념을 잘 몰라서 서버를 Docker로 만다(?)라는 의미를 몰랐습니다. 이제는 알것도 같은데요. 서버를 docker 이미지 파일로 만든다 라는 뜻으로 이해하고 있습니다. 제가 이해한 docker의 계념은 어떤 환경에서든 잘 풀어쓸 수 있는 설계도를 이미지라 생각하고 설계도대.. 공감수 0 댓글수 0 2023. 5. 16.
typescript에서 …(전개 연산자)을 string에 쓴다면 string을 강제로 object로 만들고 …(전개 연산자)를 쓴다면 어떻게 될까요? const str11: string = '태스트 입니다'; const obj22 = { ...str11, // TS2698: Spread types may only be created from object types. test: ' test', }; console.log(obj22); typescript 에서 이렇게 쓰면 에러가 납니다. object types만 전개 연산자를 사용할 수 있다네요. 근데 js 에서는 가능하죠, 그래서 js처럼 string 타입이 아닌 object 타입으로 만들어줍니다. 🟩 object 타입으로 변환 후 전개연산자 적용 const str11: unknown = '태스트 입니다'; const.. 공감수 0 댓글수 0 2023. 4. 26.
[React] useEffect 안에서 fetch를 쓸 때 전에 setState를 하면 fetch 안에 값이 바뀔까? 🟩문제 import React, { Component, useCallback, useEffect, useState } from "react"; const Test = () => { const [count, setCount] = useState(0); const [products, setProducts] = useState([]); const [loading, setLoading] = useState(false); const onClickHandle1 = useCallback(() => {}, []); console.log(`전체 컴포넌트랜더링 count : ${count}`); useEffect(() => { console.log("useEffect 랜더링"); setCount(count + 1); fe.. 공감수 0 댓글수 0 2023. 4. 9.
[Js] 고차함수에 대해서 🟩 고차 함수(Higher-Order Function) 고차 함수는 함수를 인자로 받거나 또는 함수를 반환함으로써 작동 하는 함수를 말합니다. 간단히 말하자면, 고차 함수는 함수를 인자로 받거나 함수를 출력(output)으로 반환하는(return) 함수를 말합니다. 일단 함수형 프로그래밍에 대해서도 알아봅니다. 🟩 함수형 프로그래밍이란 무엇일까요? 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환(return) 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말합니다. js를 다루게 되면 다른 함수에 콜백으로 들어가는 거나, return 받을 때 변수에 그대로 넣을 수 있는거를 자연스럽게 지나갔던거 같습니다. 이게 가능할 수 있게되는 이유가 고차 함수라는 계념인 것을 최근에 알았습니.. 공감수 0 댓글수 0 2023. 4. 5.
[Typescript] react, typescript에서 변수를 다른 파일에서 사용할 때 만난 TS1184: Modifiers cannot appear here 오류 const CompanyTable = () => { const companyApi = "http://localhost:3030/order-sheets"; }; export default CompanyTable 여기에 있는 CompanyTable 안에 있는 companyApi 변수를 다른 파일에서 사용하려고 바로 export를 걸어봤습니다. 하지만 TS1184: Modifiers cannot appear here. 이렇게 오류가 납니다. 여기에 Modifier(제한자)가 여기 나타날 수 없다고 합니다. export 문이 함수 바디 내부에 위치하고 있기 때문입니다. export 문은 모듈의 최상위 수준에서만 사용할 수 있습니다. 🟩 왜 export문은 모듈의 최상위에서만 사용할 수 있을까요? export 문.. 공감수 0 댓글수 0 2023. 3. 23.
[React] React에서 devExtreme 쓰는법 🟩 DevExtrem이란? devExtreme은 화면에 테이블을 쉽게 만들어주는 라이브러리 입니다. const row = [ { non: "555", q: "5", w: "3", e: "5", r: "6", }, { non: "배배", q: "11", w: "333", e: "52355", r: "253256", }, ]; const column = [ { caption: "테스트1", dataField: "non", }, { caption: "테스트2", dataField: "q", }, { caption: "테스트3", dataField: "w", }, { caption: "테스트4", dataField: "e", }, { caption: "테스트5", dataField: "r", }, ]; 이러한 .. 공감수 0 댓글수 0 2023. 3. 16.
[npm] Error: EPERM: operation not permitted, mkdir '\node_modules' 에러가 날 때 pacakage.json에 있는 npm 페키지들을 바로 install 하려했습니다. 그런데! not permitted mkdir이 떴습니다. 왜 dir을 만들지 못할까 생각하고 해결한 과정입니다. 🟩 해결과정 저는 로컬디스크(F:)를 보조 하드로 쓰고 있는데요. 여기에 수정 권한이 없어서 생기는 문제라고 생각했습니다. 속성을 눌러서 모든권한을 체크해봅니다. User에게 모든권한을 줘봅니다. 그러면 /node_module 이라는 파일을 생성하는데 아무런 문제가 없을것입니다. 왜 이런 권한이 바뀌었나 생각을 하고 찾아보니 윈도우에서 사용자 이름을 바꾸면 생기는 경우라고 합니다. 파일의 권한이 예전 사용자의 이름의 권한으로 되어 있던것이었습니다. npm 설치 성공! 공감수 0 댓글수 0 2023. 3. 15.
npm과 npx의 차이점 🟩 npm npm은 node Pacakge Module입니다. npm 사이트에서 필요한 라이브러리를 다운받을수 있게해주는 명령어 입니다. 🟩 npx npx는 새로운 패키지 관리 모듈이 아닙니다. npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구입니다. 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구입니다. 따라서 npm@5.2.0 이상 버전만 깔려 있다면 npx 명령어를 사용할 수 있습니다. npx 는 패키지를 임시 설치해서 "실행"하는 용도입니다! 예를 들어 react 와 같은 library 를 설치할 수는 있지만 실행이 안 되므로 npx로 설치가 불가능합니다. 만약 npx 로 react를 설치할거라면 creat.. 공감수 0 댓글수 0 2023. 3. 14.
[Vue] Computed 속성에 대해서 🟩 Computed Computed는 대상으로 정한 data() 속성 값이 변했을 때, 이를 감지하고 자동으로 다시 연산해주며, 결과 값은 저장(캐싱)을 합니다.(Watch와 비슷하지만 Computed에서 중요한 부분은 결과 값을 "저장"하는 부분입니다. 캐싱이 포인트입니다) 🟩 computed 속성은 Vue.js 컴포넌트 내에서 객체 형태로 선언됩니다. 예를 들어 다음과 같은 코드로 fullName이라는 computed 속성을 정의할 수 있습니다. computed: { fullName() { return `${this.firstName} ${this.lastName}`; } } 🟩 computed 속성에 접근하기 computed 속성은 템플릿에서 {{ }}와 같은 보간법(interpolation)을 사.. 공감수 0 댓글수 0 2023. 3. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.