티스토리

메노

검색하기

블로그 홈

메노

meno1011.tistory.com/m

meno1011 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Mysql WorkBench에서 데이터베이스 생성 1. Mysql WorkBench 열기2. MySQL Connections 에서 Local instance 3306 root / localhost:3306 열기3. 비밀번호 입력4. 상단에서 schemas 탭으로 이동5. 아래와 같은 공간에서 우클릭 6. Create Schema... 선택7. Schema Name 입력 후 Apply 하여 생성결과 확인 방법Query 1 창에서 show databases; 실행하면 모든 데이터 베이스 볼 수 있다. 공감수 0 댓글수 0 2024. 12. 27.
git push -u <remote> <branch> git push -u 에서 -u는 --set-upstream의 약자이다.git push -u 명령어는 현재 브런치 주로 git branch -M main을 통해 만들어진 main 브런치를 지정된 리모트 브랜치를 연결하고 push를 통해 레포지토리에 푸시할 수 있게 해준다. 즉 -u 와 --set-upstream 은 현재 브랜치와 지정된 리모트 브랜치와 연결 해준다. 공감수 0 댓글수 0 2024. 4. 30.
react proxy 설정 방법 react에 proxy를 설정하는 방법으로는 두가지가 있다. 1. package.json에 "proxy":"~url"을 하는 방법 2. http-proxy-middleware를 설치하여 setupProxy.js를 설정하여 연결하는 방법 먼저 1번 package.json에 proxy를 설정하는 방법은 간단하다. 아래와 같이 proxy를 추가 해주면된다. 이 방법에는 단점들이 몇가지 있는데 1. localhost 즉 dev 에서만 프록시가 적용된다는 점. 2. commit할때 까먹고 proxy를 깜빡하고 지우지 않았다면 api주소가 노출되어 지웠다가 다시 올려야 되는 불상사가 일어날 수 있다. 두 번째 http-proxy-middleware를 설치하여 setupProxy.js를 설정하여 연결하는 방법은 먼저.. 공감수 0 댓글수 1 2023. 10. 28.
mac에서 ios 시뮬레이터 열기 terminal 또는 iterm 에서 open -a simulator 추가로 스크린샷은 command키 + s 디버거 보는 법은 command키 + d 공감수 0 댓글수 0 2023. 8. 22.
next.js 로 설문 사이트 만들기3 5월 초에 작성하고 진행못했던 플젝 이어서 합니다... 일정이 너무 바빠서 이제 작성합니다. 먼저 설문을 진행하려면 설문자의 정보, 정보에 대한 동의서 등이 필요합니다. 이부분에 대해 적당한 그림을 그려줍니다. 첫번째 설문자의 정보를 입력하는란엔 input태그들을 이용해 필요한 데이터를 입력하게 하고 또는 선택지를 주어서 선택하게 만들어줍니다. 1차 설문자의 정보를 넣는 부분에 대한 레이어에 대략적인 설계는 끝나게 됩니다. 두번째 동의서 및 동의 부분 동의 내용에 해당하는 부분들을 보여주고 체크박스를 이용해 동의에 대한 체크를 받아줍니다. 2차 설문자의 동의 부분에 대한 설계가 끝납니다. 이렇게 첫페이지가 완성됩니다. 그밖에 "헤더"에 설문의 정보를 넣는다던지 "푸터"에 사이트의 정보를 넣는다던지 공통적.. 공감수 0 댓글수 0 2023. 8. 7.
[javascript] iterable 객체 반복가능한( iterable, 이터러블) 객체는 배열을 일반화한 객체이다. 이터러블이라는 개념을 사용하는 어떤 객체는 for ... of 반복문을 적용할 수 있다. 배열은 대표적인 이터러블이다. 배열 외에도 다수의 내장 객체가 반복 가능하다. 문자열 역시 이터러블의 예이다. 아래 예시로 range라는 객체를 이터러블로 만들어 배열화 해보면 Symbol.iterator 반복 대상의 객체( range )와 이터레이터 객체( range[Symbol.iterator] )를 분리하여 관리 let range = { from: 1, to: 5, }; // 1. for..of 최초 호출 시, Symbol.iterator가 호출됩니다. range[Symbol.iterator] = function () { // Symbo.. 공감수 0 댓글수 0 2023. 5. 31.
Firebase - Realtime Database 규칙 간단한 설정 Firebase 콘솔로 이동해서 사용하고 있는 프로젝트를 선택 프로젝트 페이지에서 빌드 > Realtime Database 선택 > 규칙탭 으로 이동하면 아래 같은 규칙을 볼 수 있다. { "rules": { ".read": "now < 1685491200000", // 2023-3-15 ".write": "now < 1685491200000", // 2023-3-15 } } read는 이 실시간 데이터베이스를 읽어볼 수 있는 기간을 설정, write는 실시간 데이터터베이스에 데이터를 삽입(insert) 할 수 있는 기간을 말한다 만약에 위와 같은 상태인데 내가 서비스를 오픈하고 미리 프로젝트를 배포를 해뒀는데 데이터에 입출력을 막아두고 오픈 시간을 정해두고 싶다면 아래와같이 범위를 지정해 두면된다. {.. 공감수 0 댓글수 0 2023. 5. 31.
next.js 로 설문 사이트 만들기2 일단 vercel을 통해 배포를 해둡시다. 아래 링크에서 접속 ㄱㄱ https://vercel.com/ Vercel: Develop. Preview. Ship. For the best frontend teams Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. vercel.com vercel에서 로그인을 할때 github 아이디로 로그인을 하면 바로 deploy, 배포를 하라고 함. 그러면 아래와 같이 배포하고 싶은 repository를 선택하여 배포. 위 상황에서 import를 선택하면 아래와 같은 페이지.. 공감수 0 댓글수 0 2023. 5. 4.
next.js 로 설문 사이트 만들기1 Next.js 사이트에서 cna를 이용해 시작하기 아래 링크를 통해 천천히 읽어가면서 시작하면 된다. https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org cmd 창에서 아래 명령어를 입력하면 코드로 입력해둔 내용들이 순차적으로 나오는데 읽어보고 골라서 선택해주면된다 npx create-next-app 프로젝트명 npx create-n.. 공감수 0 댓글수 0 2023. 5. 2.
react storybook 에러 npm run storybook 명령어 사용시 Module not found: Can't resolve '@testing-library/dom' in '~~\node_modules\@testing-library\user-event\dist' node_modules\@testing-library\user-event/dist/click.js 와 같은 에러가 발생했다.. 위 에러는 @testing-library/user-event 패키지에서 @testing-library/dom 모듈을 찾을 수 없어서 발생하는 에러로 먼저 @testing-library/dom 모듈을 설치해야한다. npm install --save-dev @testing-library/dom 다음으로는 @testing-library/user-e.. 공감수 0 댓글수 0 2023. 3. 23.
[javascript] Object의 키, 값 얻어오기 객체를 아래와 같이 준비 했을때 const obj = { 'a' : 1, 'b' : 2, 'c' : 3 } 객체의 키 배열을 얻어오기 Object.keys(obj); // ['a', 'b', 'c'] 객체의 값 배열을 얻어오기 Object.values(obj); // [1, 2, 3] 위 와 같이 배열의 형태로 얻어올 수 있다. 공감수 0 댓글수 0 2023. 3. 7.
[javascript] 제곱수 판별 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 이때 제곱수는 제곱근에 의해서 만들어진다. *제곱근이란 어떤수의 제곱이 되는 수를 말한다. 숫자 n을 넣었을때 제곱근을 가지고 있는 수이면 1을 제곱근이 아닐경우 2를 출력한다. function square(n) { var result = 0; let count = 1; while(count * count 공감수 0 댓글수 0 2023. 3. 1.
[javascript] Array.from() Array.from() - 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만듭니다. * 유사 배열은 키,값을 가지고 length를 가지는 객체를 말한다 문자열 배열로 만들기 const foo = "foo"; console.log(Array.from(foo)); // ['f', 'o', 'o'] 유사 배열 객체로 배열 만들기 // length를 가지게 해서 유사 배열로 만든다. const obj = { 0: "zero", 1: "number", 2: "string", 3: "Learn Javascript", length: 4, }; console.log(obj.length); // 4 console.log(Array.from(obj)); // [ 'zero', 'number',.. 공감수 0 댓글수 0 2023. 2. 28.
[javascript] trim() String.prototype.trim() const str = " Learn Javascript "; console.log(str); // " Learn Javascript " console.log(str.trim()); // "Learn Javascript" trim()은 문자열의 양 쪽 공백을 제거하고 문자열은 수정하지 않으며 새로운 문자열을 반환한다. Todo List를 만들던 중 input에 공백이 생기는 경우나 스페이스바만 누르고 엔터를 하여서 공백만 입력되었을 경우에 공백을 제거하거나 공백만 들어간 내용이 Todo List에 입력되는 것을 방지하기 위해 사용하다가 기록을 남기게 되었다. 공감수 0 댓글수 0 2023. 2. 27.
[javascript] Array.reverse() 사용하지 않고 배열 뒤집기 배열 뒤집기 const array = [1, 2, 3, 4, 5]; // 배열 끝에서부터 for문으로 하나씩 호출한다. function reverseArray(arr){ const result = []; // 배열 끝에부터 호출하기 위해 길이부터 const len = arr.length; // 길이는 5지만 마지막 배열은 arr[4]부터 시작하므로 -1 해준다. // -1씩 빼면서 0까지 진행한다. for(let i = len -1; i > -1; i--){ result.push(arr[i]); } return result; } reverseArray(arr); // [5, 4, 3, 2, 1] 문자열 뒤집기 const str = 'abc' function reverseString(str) { let r.. 공감수 0 댓글수 0 2023. 2. 27.
[javascript] 나눗셈 몫 구하기 , 소수점 올림/버림 나누셈 몫 구하기 // 나눗셈 몫 const m = 10; const n = 3; // parseInt를 사용하면 정수 값을 반환하여 몫만 구할 수 있다. const result = parseInt( m / n ); 소수점 버림 // 소수점 버림 // Math.floor()를 사용하면 작거나 같은 정수중 가장 큰 수(절대값 숫자 중 큰 수)를 반환한다. // 즉, 소수점 나머지를 버리거나 음수의 경우 더 작은 수로 값을 반환한다. const 몫 = Math.floor( m / n ); Math.floor( -1.1 ); // 값 -2 로 더 작은 수로 반환 소수점 올림 // 소수점 올림 const m = 10; const n = 3; // Math.ceil()을 이용하면 소수점을 올린다. const re.. 공감수 0 댓글수 0 2023. 2. 27.
[javascript] 최소공배수 최대공약수 두 수 A 와 B 가 있을 때 A * B = 최소공배수(LCM) * 최대공약수(GCD) 이다. 최대공약수 : GCD (Greatest Common Divisor) // 재귀적 사용법 function gcd(a, b){ if(b === 0){ return a; }eles{ gcd(b, a % b); } } // 반복문으로 작성한 방법 function gcd(a, b){ while( b > 0 ){ let temp = a; a = b; b = temp % b; } return a } 최소공배수 : LCM (Least Common Multiple) // A * B = 최소공배수(LCM) * 최대공약수(GCD) 를 이용하자면 // 최대공약수를 먼저 구한후 두 수의 곱을 최대공약수로 나누는 것이 좋다. const.. 공감수 0 댓글수 0 2023. 2. 23.
[javascript] 소문자 대문자 만들기 소문자 "ABC".toLowerCase(); // "abc" 대문자 "abc".toUpperCase(); // "ABC" 공감수 0 댓글수 0 2023. 2. 21.
[nextJS] FirebaseError: Firebase: Error (auth/invalid-api-key) 위와 같이 firebase/auth를 이용해 login페이지를 만들던 도중 발생한 에러이다. firebase콘솔에서 프로젝트를 만들고 웹에 적용하려고 firebaseInit.ts 파일을 하나 만들어서 firebaseConfig 에 값을 넣어줬는데 이때 env파일로 키값들을 넣어준다. nextjs의 경우 ssr하는 부분은 nodejs로 되어있어 .env파일에서 NEXT_PUBLIC을 안붙여줘도 되지만 그밖에 파일들에서 env 값들을 가져오려면 NEXT_PUBLIC을 붙여줘야된다. 고로 아래와 같이 NEXT_PUBLIC를 붙인 env키값으로 작성하면 된다. // Import the functions you need from the SDKs you need import { initializeApp } from.. 공감수 0 댓글수 0 2023. 2. 14.
tailwindcss "Unkown at rule @tailwind" css(unknownAtRules) tailwindcss를 적용하면서 발생한 warning 인데 거슬려서 없애보려했다. 먼저 사용환경은 vsCode에서 사용했다. 위와 같이 warning이 나와서 파일이 노란색으로 표시되니 지워보려한다. vsCode에서 ctrl + , 단축키를 사용하면 setting으로 이동된다. 검색창에 unknown을 검색하고 스크롤을 내리다보면 CSS> Lint: Unknown At Rule 에 warning이라고 되어있는것을 볼 수 있다. 이것을 ignore로 변경하게되면 warning 표시가 지워지는것을 볼 수 있다. 공감수 0 댓글수 0 2023. 2. 8.
[javascript] 브라우저 렌더링 렌더링이란 HTML, CSS, javascript 등 개발자가 작성한 코드가 브라우저에 출력되는 과정을 말한다. 브라우저 페이지가 렌더링 되려면 먼저 HTML은 DOM으로 CSS는 CSSOM트리를 생성해야한다. Constructing the Object Model DOM / CSSOM 트리 생성 브라우저가 페이지를 레더링하기 전에 DOM과 CSSOM트리를 구성해야한다. Bytes → characters → tokens → nodes → object model HTML 마크업은 DOM으로 CSS 마크업은 CSSOM으로 변환한다. 변환 : 브라우저는 HTML의 원시 바이트를 읽어서 HTML에 지정된 인코딩(예: UTF-8)에 따라서 문자열로 변환한다. 토큰화 : 부라우저는 W3C HTML5 표준(예: , ….. 공감수 0 댓글수 0 2023. 2. 6.
[javascript] 이벤트 버블링 이벤트 객체는 트리거한 DOM노드(아래 예시HTML에서 button)에서 시작해서 모든 조상 노드(div)로 올라간다. 이러한 메커니즘을 버블 단계(bubble phase) 또는 이벤트 버블링(event bubbling)이라고 한다. 간단한 중첩구조 HTML로는 버튼을 감싸고 있는 div 버튼 메커니즘을 확인할 javascript로는 const div = document.querySelector('div'); const button = document.querySelector('button'); div.addEventListenser('click', ()=>{ console.log("div clicked"); }); button.addEventListenser('click', ()=>{ console.l.. 공감수 0 댓글수 0 2023. 2. 6.
Path variale와 Query string 1) Path variable /categories/monitor 와 같이 경로에 대한 요청을 할 수 있다. 백엔드에서 보자면 /categories/:category와 같은 형식의 라우트를 만들어서 monitor를 :(콜론)으로 구분자를 두고 category에서 값을 얻어 올 수 있다. 2) Query string /user?name=joy 와 같이 ? 뒤에 name이라는 변수에 값을 넣어서 백엔드에 전달하는 방식으로 key, value형식(예시의 상황에선 key: name, value: joy)을 가진다. 아래 코드를 보면 req.query를 통해 name의 값을 가져오는 것을 볼 수 있다. 3) Query string과 Path variable은 언제 쓰는가? 위 두가지 방법을 통해 말하자면 Path.. 공감수 0 댓글수 1 2023. 2. 2.
Next.JS에서 styled-components 사용하기 Next.JS에서 styled-components를 사용하면 Warning: Prop `className` did not match. Server: "sc-gswNZR iCCgiY" Client: "sc-bcXHqe eeJMcQ" 와같은 에러를 볼 수 있다. 이것은 Next.JS가 기본적으로 페이지를 SSR을 통해 pre-rendering을 하기 때문에 SSR시의 className과 CSS-in-JS로 렌더링이 된 className이 맞지 않아서 생기는 경우이다. 이럴때 여러가지 방법이 있는데 가장 간단한 방법으로는 next.config.js파일을 수정하는 방법이 있다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMo.. 공감수 0 댓글수 0 2023. 1. 9.
MySql json타입의 column을 nodejs에서 조회하기 MySql의 테이블에 데이터를 json타입으로 저장을 했을경우 api 콜을 해서 출력을 하면 아래와 같이 string형식으로 나오게 된다. "{\"a\": \"a-data\", \"b\": \"b-data\", \"c\": \"c-data\", \"d\": \"d-data\"}" 이럴땐 JSON.parse()를 이용해주자 JSON.parse()를 이용하면 주석처리된것과 같은 형식이 나오게된다. const test_json = "{\"a\": \"a-data\", \"b\": \"b-data\", \"c\": \"c-data\", \"d\": \"d-data\"}"; console.log(JSON.parse(test_json)); // { a: 'a-data', b: 'b-data', c: 'c-data'.. 공감수 0 댓글수 0 2022. 12. 26.
리덕스(redux) 이해하기 1 리덕스는 자바스크립트에서 상태관리를 위해 사용하는 라이브러리로 리액트에서 전역으로 상태 관리를 하고자 react-redux를 사용한다. 리덕스를 이용한 데이터 흐름구조는 다음과 같다. Action : 상태변화가 필요하면 일어나는 것에 대한 정의. Dispatch : Action을 발생시키는 것. store : 어플리케이션 내부에 1개의 store만 존재하며 상태들을 store라는 객제에 저장해둔다. 간단하게 흐름에 대해서 설명하자면 action에 상태관리할 데이터에 대한 행동(action)을 정의 해둔다. dispatch를 이용하여 action을 실행시키고 store에는 변화된 값에 대해서 저장을 한다. 이를 화면에 띄워주게 되는것이고 다시 화면에서는 상태에 대한 action을 수행하여 dispatch를.. 공감수 0 댓글수 0 2022. 11. 13.
구글 소셜 로그인 로그인 버튼 결과물이다. 구글 로그인 버튼이 세션 상태에 따라 모습이 변하는 형태로 바뀌어서 로그인 버튼도 한번이라도 로그인을 하게 된다면 아래와 같이 변경된다. // button 모양 window.google.accounts.id.renderButton( googleButtonRef.current, { theme: "outline", size: "large" } ) 아래 링크에서 확인이 가능하다 : https://developers.google.com/identity/gsi/web/guides/personalized-button 공감수 0 댓글수 0 2022. 11. 11.
구글 소셜 로그인 (구글 로그인) - 에러편 로그인 버튼은 나왔는데 크롬 콘솔 창을 보니 에러가.. 1. [GSI_LOGGER]: The given origin is not allowed for the given client ID. 해결 방법으로는 "승인된 리디렉션 URI" 에서 URI 를 'http://localhost:3000' 과 'http://localhost'를 추가해주면 위 에러가 제거된다. 에러가 난 이유는 이 사항을 읽고 지나갔기때문에.. 아래 주소에서 확인해보시길.. 봐야 할 주소 : https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid 설정 | Authentication | Google Developers 이 페이지는 Cloud Translati.. 공감수 0 댓글수 0 2022. 11. 9.
구글 소셜 로그인 (구글 로그인) - 클라이언트 ID 1. 클라이언트 ID만들기 진행 과정 1. GCP(Google Cloud Platform)로 이동 해서 콘솔 화면으로 가서 프로젝트를 생성하거나 이미 있던 프로젝트로 들어간다. 2. API 및 서비스 > 사용자 인증 정보 > + 사용자 인증정보 만들기 > OAuth 클라이언트 ID 3. 동의 화면 구성 > OAuth 동의 화면 구성 > User Type - 외부 선택 4. 동의 화면에서 "앱 이름" / "사용자 지원 이메일" 입력 - 앱 이름 : 구글 로그인 팝업에서 보여지게되는 앱이름 - 사용자 지원 이메일 : 클릭하면 본인 사용 이메일이 표시됨 - 개발자 연락처 정보 : 본인 이메일 입력 - 다음으로 5. 저장 후 계속 6. 테스트 사용자 - 저장 후 계속 7. 앱 등록 수정 - 대시보드로 돌아가기 .. 공감수 0 댓글수 0 2022. 11. 7.
mac 캡쳐 단축키 맨날 mac에서 캡쳐할 때마다 단축키 까먹어서.. 메모 전체 화면 캡쳐 : command(⌘) + shift(^) + 3(숫자) 부분 영역 캡쳐 : command(⌘) + shift(^) + 4(숫자) 누르고 드래그로 영역 지정 공감수 0 댓글수 0 2022. 10. 31.

문의안내

티스토리
로그인
고객센터

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