티스토리

Dust

검색하기

블로그 홈

Dust

min-ji07.tistory.com/m

먼쥐7 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[NestJs] Nest 시작하기(기초, node설치, 프로젝트 생성하기) 이번에는 여러버전 node를 관리하려고 nvm을 먼저 설치했다 window에서 nvm 설치해줌 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 해당파일 설치해줌 설치 완료 후 cmd나 터미널 창에서 nvm ls 명령어 입력 시 설치된 node들의 버전을 확인할 수 있다 하지만 설치 안했으니 아마 안뜰것임 release 된 전체 버전을 확인하고 싶을 땐 nvm ls-remote lts 버전만 확인하고 .. 공감수 1 댓글수 0 2024. 1. 25.
[AWS] MFA 설정(다중인증, OTP) AWS MFA란 - 다중인증으로 게임 계정 로그인할 때 OTP 같은 개념 MFA 활성화 하기 - AWS 로그인 후 오른쪽 상단에 계정 관리 탭을 선택해 보안 자격 증명 메뉴로 들어간다 할당된 MFA가 없다고 뜨는데 MFA 할당을 클릭해서 받으면 됨~! 어렵지 않다 클릭하면 다중인증 디바이스 선택 페이지로 이동 간편하게 핸드폰 어플리케이션으로 진행 위에 호환 가능한 앱 목록이 있어 원하는 앱을 다운 받으면 된다 QR 코드 표시 클릭시 QR 코드가 나옴 앱 접속 후 하단 오른쪽에 + 버튼을 눌러 새로운 otp를 등록한다 QR 코드 or 설정 키 입력으로 추가해주면 된다 큐알로 진행했고 등록이 되면 코드 번호가 뜬다 오른쪽에 작은 팩맨 같이 생긴 게 시간제한이고 지날수록 빨간색으로 변하고 제한시간이 다 되면 .. 공감수 0 댓글수 0 2024. 1. 11.
Java 설치하기, openJDK(zulu) 설치 및 환경변수 설정(Java 17(LTS)) https://www.azul.com/downloads/?package=jdk#download-openjdk Azul Downloads According to the Gartner report, “by 2025, more than 70% of Java applications will be deployed on third-party Java runtimes, up from 30% in 2019.” www.azul.com 위 사이트 접속해 하단에 Java Version 부터 천천히 선택해주면 됨 Architecture 선택 잘 해주고.. 왜냐면 한번 다시 받았기 때문ㅎ 다운로드 받고 압축 풀어줌 Java 파일을 새로 만들고 파일 안에 zulu17을 넣어주었다 이름 너무 길어서 뒤에 다 잘라버림 내PC 오른쪽.. 공감수 0 댓글수 0 2023. 7. 24.
[Vue.js] vue router 설치, 사용 라우터를 세팅해보자 import { createWebHistory, createRouter } from "vue-router"; // 이동할 페이지 import import List from './components/List.vue'; const routes = [ { // 이동할 페이지 주소 path: "/list", // 이동할 페이지 컴포넌트 설정 component: List, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; 해당 코드를 입력해준다 router 파일을 설정했으면 다시 main.js 파일로 돌아와서 use 안에 해당 파일을 넣어줌 다시 app.js 파일로 돌.. 공감수 0 댓글수 0 2023. 7. 20.
[Vue.js] 컴포넌트 import, 컴포넌트 데이터 전송(부모 자식간, 자식 부모간) ㅈㅔ일 부모 컴포넌트라고 가정하고 보자! // ***************** App.vue // * 하단에 설명 기재 {{ index }} 번 {{ item.title }} ❤️ {{ item.count }} 컴포넌트 가져오는 법 - template에 컴포넌트 태그 입력해줌 - script 내 component import - script 내 components에 컴포넌트 명 입력 Banner컴포넌트의 style은 Banner.vue 파일에서 적용되어 오기 때문에 생략한다! 컴포넌트간 데이터 전송하는법 app.vue 파일에 보면 Banner태그 옆에 v-bind:appValue="count" 라고 적혀있는 것이 자식 컴포넌트에 props 값을 전달하는 방법이다 v-bind는 속성에 데이터를 연결할 때 .. 공감수 0 댓글수 0 2023. 7. 18.
[Vue.js] 빠르게 배우기 {{ item }} {{ index }} 번 {{ item.title }} ❤️ {{ item.count }} {{ index }} 번 {{ item.title }} ❤️ {{ item.count }} 팝업창입니다 팝업의내용입니다 Vue의 if문 v-if v-else v-else-if Vue의 for문 v-for Vue html에서 속성 값 불러오기(속성 앞에 :을 붙여줌) 기존 style="display: blodk; color: red;" Vue :style="display: block; color: red;" 이미지도 같음 img src="/assets/img/~~" :img src="/assets/img/~~" 속성 값이 동적이라면 :img src="item.image" import한 date.j.. 공감수 0 댓글수 0 2023. 7. 17.
윈도우 nvm 설치 nvm은 node 버전관리 도구이다 프로젝트를 하다보면 여러가지 버전이 다른 프로젝트를 진행하게 되는데 그럴 때 아주 유용하다 몇 줄 되지 않는 코드나 css에서 폰트만 수정할건데 버전을 지웠다 다시 다운받았다. . 너무 번거롭기 때문에 버전 관리 도구를 사용해준다! 아래 주소에서 다운받아줌 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 나는 exe 파일 설치ㅎ 기존 최신 노드를 설치해놓고 nvm .. 공감수 0 댓글수 0 2023. 7. 14.
Vue.js 시작하기: Vue 설치 및 프로젝트 생성 https://v2.ko.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org npm install vue node는 이미 깔려있어서 냅다 뷰를 깔긴 했는데.. 막상 뷰 버전을 확인하려고 하니까 안돼서.. cli을 설치했따 cli -> command line interface의 약자로 터미널에 명령어를 입력할 수 있게 해줌 예를 들어 뷰 버전을 확인하고 싶을 때 vue -v 이런식으로 원하는 경로로 설정 후 프로젝트를 생성해준다 냅다 받았기때문에 제일 최신 버전일것.. Vue 3을 선택해줌 설치가 다 되면 이런 화면이 뜬다 npm run serve로 뷰 실행! 혹시 포트번호를 변경하고 싶.. 공감수 0 댓글수 0 2023. 7. 14.
인텔리제이(IntelliJ IDEA) 설치하기 https://www.jetbrains.com/idea/download/#section=windows Download IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrains Download the latest version of IntelliJ IDEA for Windows, macOS or Linux. www.jetbrains.com 노트북에도 개발환경 세팅 겸 포스팅 시간이 되면 공부하는 내용까지 천천히 적어 볼 예정이다 구매는 안해서 무료 버전으로 받았지만 학생 계정이 있으면 무료로 사용할 수 있다 방금 생각난김에 학생 계정 신청도 하고 암튼 첫번째꺼 빼고 체크 했는데 - 바탕화면 바로가기 - 환경변수에 자동으로 추가(따로 환경변수에 입력하지않아.. 공감수 0 댓글수 0 2023. 3. 21.
[Angular] animation 사용하기 앵귤러에서 애니메이션을 사용하고 싶으면 모듈에 BrowserModule BrowserAnimationsModule 추가 모듈파일 // main.module.ts import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ MainComponent, ], exports: [ MainComponent, ], imports: [ CommonModule, BrowserModule, BrowserAnimationsModule ] }) export class MainModule{}.. 공감수 0 댓글수 0 2023. 1. 11.
[flutter] flutter chocolatey로 설치, 실행해보기 flutter 설치 https://docs.flutter.dev/get-started/install/windows - 여기서 설치하면 zip 파일 받고 path 설정 해야함 - 이거 말고 chocolatey 설치해는게 더 편하다고 함(path 설정 따로 안해도 됨) https://chocolatey.org/install - 페이지 들어가서 individual 체크 - powerShell 실행 - individual 클릭 후 나오는 설명대로 진행함 - choco install flutter 명령어 입력 - flutter 설치 후 powerShell 재시작 후 flutter 입력해보면 오류나 빨간색이 안뜨면 설치 된 것임! 시뮬레이터 설치 https://docs.flutter.dev/get-started/i.. 공감수 0 댓글수 0 2023. 1. 5.
[GitHub] git repository 복제, 다른 repository로 옮기기 프로젝트를 git에 올려뒀는데 다른 repository에 올려야 할 일이 생겨서 옮기는 방법을 찾아봤다 기존 repository에서 주소를 복사해주고 프로젝트가 있는 파일로 들어가 git을 열어줌 git bash를 열고 명령어를 입력해줌 $ git clone --mirror 원본 저장소 경로 입력하면 밑에 쫘라락 뜸 복제한다고 완료 됐다고 뜨면 $ git remote set-url --push origin 이동할 원격 저장소 주소 입력해줌 remote 라고 해서 혹시나 내 파일 삭제되는 거 아닌가 걱정했는데 .. (그 전에 git 때문에 한참 머리 아팠어서,,) 걱정할 필요 없었다 그냥 연결하는 것임 암튼 하고 $ git push --mirror 이동할 원격 저장소에 push 해줌 https://clou.. 공감수 0 댓글수 0 2023. 1. 5.
[Javascript] Template literals(ES6) var name = '김'; var num = 20; var title = `안녕하세요 ${name} 입니다`; function fn(문자들, 변수1, 변수2){ console.log(문자들); console.log(변수1, 변수2); } fn`안녕하세요 ${name} 입니다 ${num}` // 문자(텍스트)를 배열로 만들어 반환함 // 문자들 출력시 // ["안녕하세요", " 입니다"]; // 변수 출력시 ${name} , ${num} 안의 값 출력 // 김, 20 글자의 순서를 변경하고 싶을 때 ex) ["안녕하세요", "입니다"] 를 ["입니다", "안녕하세요"] 로 변경 function fn(문자들, 변수1, 변수2){ console.log(문자들[1], 문자들[0]); } // 입니다, 안녕하세.. 공감수 0 댓글수 0 2022. 12. 2.
[Javascript] Spread Operator(ES6) let arr = ['hello', 'world']; console.log(arr); let arr = ['hello', 'world']; console.log(...arr); var text = 'hello'; console.log(text); let text = 'hello'; console.log(...text); // 문자 해체 // console.log('h', 'e', 'l', 'l', 'o'); 활용! - arr복사 , 합치기 할 때 유용함 - Deep copy(복사한 array, object에서 독립적인 값) var a = [1,2,3]; var b = [4,5]; var c = [...a, ...b]; console.log(c); // [1,2,3,4,5]; shallow copy(참조에.. 공감수 0 댓글수 0 2022. 12. 2.
아이폰 인증코드, 인증문자 안옴 해결방법 내가 진짜 이거 때문에 얼마나 고생을 했는지,,🤦 후후나 기본 설정앱을 아무리 만져도 인증코드 문자가 안온다면,,, 밑에 사진을 따라해보자🙃 다시 인증번호를 요청하면 잘 온다! 굿! 공감수 0 댓글수 0 2022. 11. 26.
[node.js] nodemon 실행 오류(이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\pc\AppData\Roaming\npm\nodemon.ps1 파일을 로드할 수 없습니다.) 설치 후 실행시키는데 오류가 떠서 powershell을 켠 후 executionpolicy 입력 --> Restricted 이것을 Unrestricted 이렇게 바꿔줄 것이다 보통 이렇게 하면 오류가 안나오는 걸로 아는데 ,, set-executionpolicy unrestricted 입력 executionpolicy 를 쳐서 다시 확인해봄 Unrestricted 잘 나왔지만 아직도 오류,, 구글 검색.. 간다.. 윈도우 검색창에 powerShell 을 관리자 권한으로 실행한 후 get-ExecutionPolicy 입력 후 값을 확인함 RemoteSigned가 아니라면 바꿔주도록 한다 set-ExecutionPolicy RemoteSigned 입력 후 get-ExecutionPolicy 입력하여 값 확인.. 공감수 0 댓글수 0 2022. 11. 23.
[node.js] 공부 시작 2 (Express 라이브러리 설치하기, Manifest Error) Express 라이브러리란 ? 서버를 쉽게 개발하기 위한 라이브러리 Express 설치 - 원하는 프로젝트를 만들고(나는 리액트에서 사용하려고 터미널에 npx create-react-app 프로젝트명 입력하여 사용) - 터미널을 열어 Express 를 설치(npm install express) - 라이브러리를 설치하게 되면 파일 내 node_modules 파일이 생성이 됨(설치한 라이브러리 관련된 라이브러리) - 맥일경우 다른 오류가 날 수 있음..😢 서버로 사용할 js 파일을 만들고(나는 server.js로 작성!) 서버를 express로 띄우기 위한 기본 셋팅을 해준다 const express = require('express'); const app = express(); app.listen(); /.. 공감수 0 댓글수 0 2022. 11. 22.
[node.js] 공부 시작 코딩애플 사이트에서 node.js 시작! 쉽게 비유해서 재밌고 이해하기 넘 쉬워서 좋다 서버란 ? 쉽게 말해 요청하는 데이터를 가져다 주는 역할 요청(HTTP, HTTPS)은 4개의 방식이 있다 - 읽기(GET) - 쓰기(POST) --> 글 생성, 댓글 생성 기타 등등 생성 - 수정(PUT) - 삭제(DELETE) - 어디선가 예) naver.com 으로 접속하면 - naver.com 메인 html 파일을 전송해주세요 NodeJS란 ? - 1초에 몇십만개의 요청을 처리할 수 있어야함(SNS, 채팅서비스) - 서버가 멈추거나 요청 대기시간이 없음 - 코드가 짧고 쉬움 - 웹 서비스 만들 때 주로 사용 - Non-blocking 이라는 장점 중간에 어려운 작업이 있으면 뒤에 오는 작업들은 해당 작업이 끝날.. 공감수 0 댓글수 0 2022. 11. 22.
[Github] github api key 숨기기 (React) 개인 프로젝트를 진행하면서 api를 사용하였는데 숨기지 않고 올려서 메일이 왔다 api 키를 숨기는 방법에 대해 알아보자! src 와 같은 곳에 .env 파일을 만들어준다(프로젝트 최상단) .env 파일내에 상수를 만들어주고 따옴표 없이 api 키를 입력해준다 React 사용 시 환경변수 앞에 REACT_APP_ 을 붙여줘야 사용할 수 있다! 위 사진에서 보이는 .gitignore 파일에 .env 파일을 추가해준다 .gitignore 파일이란 - 사용자가 원하지 않는 파일들을 git 커밋 대상에서 제외 시킴 - git에 올려서는 안되거나 올리지 말아야 할 파일(보안적으로 중요한 내용) - 프로젝트 최상단에 파일 생성 전부 설정하고 실행 시켰는데 환경변수의 값이 undefined 로 나올 때 확인해야 할 .. 공감수 0 댓글수 0 2022. 11. 22.
[React] gh-pages route 오류 function App() { let state = useSelector((state) => {return state.headerMenu}); return ( {state && } ); } export default App; basename={process.env.PUBLIC_URL} 라고 써도 자꾸 기본이름이 안맞다고 해서 도대체 뭐가 문제야~~~ 하고 시간 좀 날렸는데.. 로컬에서만 계속 보고 뒤에 주소를 안붙이고 확인해서 그랬다.. 머쓱.. 쉬운거였네.. 밑에 글들을 참고 했었음! https://uiyoji-journal.tistory.com/88 [gh-pages] CRA 배포 시 homepage 경로를 참조하지 못할 때 gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.jso.. 공감수 0 댓글수 0 2022. 11. 7.
[React] 이벤트 버블링 막기 포트폴리오 헤더 만들면서 생긴 문제,, Link 안에 span태그로 다크모드를 만들었더니 다크모드 클릭 할 때마다 홈으로 가는 현상 발생 이벤트 버블링 막는 메소드가 e.stopPropagation() 만 있는 줄 알고 왜 안되지 ? 고민만 하다가 검색해보니 form submit 버튼 클릭시 막아주는 메소드(e.preventDefault)를 써도 이벤트 버블링을 막을 수 있다는 걸 발견 e.stopPropagation 안되면 e.preventDefault 써보기 차이가 뭔지 찾아봐야겠다 Dust { // e.stopPropagation(); e.preventDefault(); const click = e.currentTarget; if(click === e.currentTarget){ root.class.. 공감수 0 댓글수 0 2022. 11. 2.
[Javascript] 화살표 함수 let num = function(a){ return a + 10; } 기본 함수가 있을 때 화살표 함수는 let num = (a) => { return a + 10 }; function을 없애고 좀 더 간단히 쓸 수 있음 더 간단히도 쓸 수 있음 값이 하나거나 코드가 한 줄 일 때 let num = a => a + 10; 여러개일 땐 중괄호를 써줘야함 예시! let arr = [1,2,3,4]; arr.forEach((v) => { console.log(v + 10); }) // 11, 12, 13, 14 this 값 재정의 x (바깥에 있던 this 값을 내부에서 그대로 사용함) document.getElementById('button').addEventListener('click', functio.. 공감수 0 댓글수 0 2022. 10. 27.
[Javascript] this 헷갈리는 this를 알아보자.., 객체나 함수 안에서 this를 썼을 때 // this를 그냥 쓰거나 일반 함수에서 쓰면 window를 뜻함 let thisObject = { name: 'dust', test: function(){ console.log('함수 내 this 테스트'); // 메소드 안에서 this를 쓰면 thisObject를 뜻함(속해있는 object) console.log(this); }, data : { test2: function(){ // data를 뜻함(속해있는 object) console.log(this); } } } addEventListener 안에서 this를 썼을 때 modal.addEventListener('click', function(e){ console.log('.. 공감수 0 댓글수 0 2022. 10. 27.
[Javascript] javascript로 태그 만들어서 집어넣기 // html 태그 생성 // 첫번째 방법 const div = document.querySelector('#create'); const p = document.createElement('p'); div.appendChild(p); p.innerText = '반가워'; // 두번째 방법(요즘엔 이렇게 많이 쓰인다고 함) let div2 = `안녕`; document.getElementById('create2').insertAdjacentHTML('beforeend', div2); 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] scroll const width = window.innerWidth; const height = window.innerHeight; // 브라우저의 width, height 값 스크롤을 얼마나 했는지 확인 window.scrollY 일반 div박스나 다른 요소의 스크롤을 확인하고 싶을 때 const section = document.querySeletor('section'); let sectionHeight = section.scrollHeight; // 스크롤 포함 실제 높이, 페이지가 로드완료되야 정확함(body태그 밑에 써주는게 좋음) let scroll = section.scrollTop; // 하면 페이지 내 scroll이 있는 section 박스의 scroll이 어디인지 확인가능 // 위에서 얼마나 내렸.. 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] return function test(){ return 1234; // return 밑에 있는 코드들은 실행되지 않음 } let number = test(); // 값 확인해보고 싶으면 변수에 넣어서 확인 가능 console.log(number); // 1234 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] 정규식(regular expression) 정규식으로 해당 문자가 들어있는지 검사하고 싶을 때 /[a-z]/.test('abcde'); // a부터 z까지 글자가 들어있는지? // 하나만 찾아줌!🙃 /a+/.test('aaaaaaaaaaaaa'); // a가 여러개 있는지? /[A-Z]/.test('abcde'); // 대문자 A부터 Z까지 글자가 있는지? /[ㄱ-ㅎ가-힣]/.test('abcdeA'); // 한국어가 들어있는지? /\S/.test('abcde'); // 아무 문자 하나, 특수기호 포함 /^a/.test('abcd'); // a로 시작하는지 /a$/.test('abcd'); // a로 끝나는지 /a|b/.test('abcd'); // a또는b // 이메일 정규식 /\S+@\S+\.\S+/.test('이메일주소'); // \S+ 는.. 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] setTImeout, setInterval 쓰는 법 setTimeout 기본 문법 setTimeout(function(){ }, 1000); // 1000은 1초뒤에 실행하라는 뜻 // 이렇게도 사용 가능 setTimeout(text, 1000); function text(){ console.log('안녕하세요'); } setInterval 기본 문법 setInterval(function(){ }, 5000); // 5초 간격으로 계속 실행 let count = 0; const timer = setInterval(function(){ count++; if(count === 10){ clearInterval(timer); // count가 10이 됐을 때 clearInterval 메소드로 timer 멈춤 } }, 1000); 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] 값이 숫자인지 확인하기 isNaN 함수 사용! const number = 123; const text = '123'; // isNaN 사용 isNaN(number) // false isNaN(text) // true number 값이 아닐 때 true출력 공감수 0 댓글수 0 2022. 10. 25.
[CSS] 요소에 애니메이션 추가하기 one-way 애니메이션(a상태에서 b상태로 이동하는 애니메이션) one-way 애니메이션 만들 때 시작스타일과 최종스타일을 css로 만들어놓으면 됨 예를 들어 모달창을 부드럽게 띄우고 싶을 때 html 파일 modal Title 닫기 modal Content css 파일 /* modal */ .modal-bg{ position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 5; visibility: hidden; opacity: 0; transition: .5s; } .modal{ position: absolute; flex-direction: column; top: 50%; left: 50%; transform: .. 공감수 0 댓글수 0 2022. 10. 25.

문의안내

티스토리
로그인
고객센터

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