본문 바로가기
728x90
728x90

전체 글191

[mySQL] 맥북 Air M1칩 mySQL 설치 homebrew 가 설치 되어있다는 전제하에 써진 글입니다. homebrew 가 설치되어 있지 않다면, https://kong-dev.tistory.com/119?category=998366 애플 맥북에어 M1 환경설정 homebrew 부터 nodejs 까지 0. 목차 1. homebrew 2. iterm 3. nodejs 1. homebrew 터미널이용해서 packagemanager 인 홈브루를 설치. https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 사이트.. kong-dev.tistory.com $ brew install mysql iterm 열어서 이거 입력해주면 됨..ㅎ 처음 설치면.. 2022. 2. 3.
[nodejs]todoApp 만들기(express, nunjucks, mongodb,body-parser) 0. 목차 1. 개요 2. 기본세팅 3. HTML & CSS 4. CRUD 5. 정리 1. 개요 가장 기본이 되는 CRUD 만들어볼거다. 사용할 라이브러리는, express, nunjucks, body-parser(exprss 내장 객체 대체가능)이며, 데이터 베이스는 noSQL인 mongoDB를 사용한다. 연휴기간중 mySQL 공부를 마치면 mySQL로 만드는 것도 포스팅 할듯..? 2. 기본 세팅 2-1. express $ npm init -y $ npm install express 터미널에 이거 두개 입력해서, npm 설치하고, npm을 통해 express 를 설치한다. const express = require('express'); const app = express(); app.get('/', .. 2022. 2. 1.
[Javascript] async 와 await 0. 목차 1. 개요 2. async 3. await 4. 응용..? 1. 개요 https://kong-dev.tistory.com/120 [Javascript] 콜백지옥과 프로미스 0. 목차 1. 콜백지옥 2. 프로미스 1. 콜백지옥 프로미스를 이해하기 위해선 콜백 지옥을 이해해야 한다. 콜백지옥을 이해하기 위해선 콜백펑션을 이해해야 한다. .. ㅎ https://kong-dev.tistory.com/116?categ kong-dev.tistory.com 저번 포스팅에서 프로미스를 다뤘었다. 그런데 프로미스도 then mthod를 연속적으로 체이닝 하다보면, 이 then은 뭐고 저then은 뭐고, 이 데이터는 어디 resolve에서 가져온걸까.. 싶은 생각이 들게된다. 그래서 나온게 async와 awa.. 2022. 1. 30.
[Javascript] 콜백지옥과 프로미스 0. 목차 1. 콜백지옥 2. 프로미스 1. 콜백지옥 프로미스를 이해하기 위해선 콜백 지옥을 이해해야 한다. 콜백지옥을 이해하기 위해선 콜백펑션을 이해해야 한다. .. ㅎ https://kong-dev.tistory.com/116?category=991165 [Javascript] 콜백함수 0. 목차 1. 개요 2. 콜백함수란 1. 개요 setTimeout(() => { console.log('hello world'); }, 1000); 이 코드를 보자. 콜백함수에 대한 개념이 잡히기 전의 나는 이 코드를 1000ms 가 지난뒤에, 에로우 펑션 안의.. kong-dev.tistory.com 최근에 정리한 콜백함수에 대한 글. 기억이 안나면 다시 보면 될듯. 우선 억지로 억지로 콜백 지옥을 하나 만들어 보.. 2022. 1. 28.
애플 맥북에어 M1 환경설정 homebrew 부터 nodejs 까지 0. 목차 1. homebrew 2. iterm 3. nodejs 1. homebrew 터미널이용해서 packagemanager 인 홈브루를 설치. https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 사이트에 친절하게 설치하는 방법이 나와있다. 터미널에 입력하라는거 입력해주면 됨 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ 사인은 빼고.. 여기서 부턴 m1 이상의 칩을 사용하는 모델에만해당됨. 친절하게 next step 이라고 알려준다. 저걸 복사붙여넣기 해주면.. 2022. 1. 27.
[javascript] avante 클론코딩 회고록 0. 목차 1. 개요 2. 결과물 3. 진행 중 이슈 및 해결 4. 후기 1. 개요 1월 10일 부터 1월 14일 까지 진행한 아반떼 클론코딩. 처음엔 언제 다하나 싶었는데 하나하나 하다보니 제법 만족스러운 결과물이 나왔다. 하루하루 진행할때마다 있었던 이슈 같은걸 정리하려고 했는데, 막상 시작하고 나니 만드는데 급급해서 그때그때 정리를 못했다. 한번에 정리를 하려니까 이것도 막막하네... 2. 결과물 최애애애대한 눈에 보이는 기능들은 다 구현해보려고 노력을 했다. 그래서 이것저것 해보다 보니 여기저기서 이슈들이 생기더라구... 3. 이슈 및 해결 진짜 뒤지게 많은 이슈가 있었다. 짜잘짜잘한 오타이슈 까지 다 합치면 아마 3천개는 됐을듯..? 그래도 짜잘한거 말고 큼직하게 좀 기억에 남는 것들만 정리해보.. 2022. 1. 16.
[Javascript] 콜백함수 0. 목차 1. 개요 2. 콜백함수란 1. 개요 setTimeout(() => { console.log('hello world'); }, 1000); 이 코드를 보자. 콜백함수에 대한 개념이 잡히기 전의 나는 이 코드를 1000ms 가 지난뒤에, 에로우 펑션 안의 코드를 실행한다. 라고 이해했다. setTimeout(()=>{ // delaytime 이후 실행될 코드 },delaytime) 라고 그냥 통째로 무지성으로 외웠다. 콜백펑션이 뭔지 정확히 알지 못했으니까, addEventListener 역시 마찬가지다. elem.addEventListener(('click'),()=>{ //elem이 클릭 됐을때 실행될 코드 }) 라고 그냥 통째로 머릿속에 집어넣고 외웠다. 사실, 코드를 짤때는 이렇게 이해해.. 2022. 1. 10.
[Javascript] 객체의 비교와 복사 0.목차 1. 개요 2. premitive 와 reference 가 메모리에 저장 되는 방식 2. 얕은복사 3. 깊은복사 1.개요 const a = { num: 1 }; const b = { num: 1 }; console.log(a === b); a라는 객체와 b라는 객체를 만든 뒤에 동일한 프로퍼티를 생성해 주었다. 두개를 비교한 값을 출력해보자. const a = { num: 1 }; const b = { num: 1 }; console.log(a === b); // false 분명 우리눈에는 똑같이 생겼는데, false가 출력 된다. 이걸 이해하기 위해서 메모리에 데이터를 저장하는 방법을 조금 알아볼 필요가 있다. 2. premitive 와 reference 가 메모리에 저장 되는 방식 그림을 그.. 2022. 1. 7.
[Javascript] 메서드와 프로토타입 0.목차 1. 개요 2. 메서드 3. 프로토타입 1.개요 우린 코드를 짜면서 정말 많은 메서드들을 사용한다. 메서드 없는 코딩을 상상하면 정말 끔찍하다. 너무나 소중한 메서드들... 메서드의 종류는 MDN한테 물어보고, 이번엔 메서드와 메서드의 깐부 프로토타입에 대해 조금 정리해보려한다. 2.메서드 2-1. 메서드란 메서드는 함수다. 근데 그냥 함수가 아니고, 객체에 들어있는 함수다. 이거 이상의 설명은 없을 듯..? 2-2. 메서드 만들기 그럼 직접 만들어 보자. const kong = { age: 29, introduce: function () { console.log(`I'm ${this.age}years old`); }, }; kong이라는 object를 만들고 age의 value에는 29을, i.. 2022. 1. 6.
[문제풀이] 문자열 갖고 놀기..? 문제설명 수업시간에 풀었던 문젠데 재밌게 풀어서 정리해 봄 1. string 변수에 할당된 문자열에 포함되어 있는 'e' 갯수 출력 2. string 변수에 할당된 문자열을 5개씩 나눠서 배열에 담아서 출력 3. 2의 결과에서 e, z, d, v, n이 포함된 value 삭제 후 출력 4. 3의 결과에서 value가 중복된 문자 / 숫자 가 있을 경우 중복된 문자 / 숫자 삭제(하나는 남김) 문제에서 제시한 예시와 각 문제에서 요구하는 출력값은 아래와 같다 let string = '1e5315166152e1152z1d1v4b1n'; // 2, // [ '1e531', '51661', '52e11', '52z1d', '1v4b1', 'n' ], // [ '51661' ], // [ '516' ] 접근방법 .. 2022. 1. 6.
[Javascript] 10진수를 x진수로 변환하기(직접구현) https://kong-dev.tistory.com/111?category=982997 [Javascript] 3진법 뒤집기 문제설명 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 100,000,000 이하 kong-dev.tistory.com 이 문제 풀다가, 어 이거 직접 구현은 어떻게 하는 걸까 싶어서 구글링을 해봤는데 전부다 메서드랑 내장 함수만 알려주고 직접 구현한건 하나도 없다. 왠지 할 수 있을거 같아서 해봤는데 잘 된다. 이 글에선 진법변환 하는 메서드랑 내장함수는 안다룰 거다. 지천에 널린게 그건데 굳이 나까지... 아 그리고 10진수를 x진수로.. 2022. 1. 4.
[Javascript] 3진법 뒤집기 문제설명 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 100,000,000 이하인 자연수입니다. 입출력 예 nresult 45 7 125 229 입출력 예 설명 입출력 예 #1 답을 도출하는 과정은 다음과 같습니다. n (10진법)n (3진법)앞뒤 반전(3진법)10진법으로 표현 45 1200 0021 7 따라서 7을 return 해야 합니다. 입출력 예 #2 답을 도출하는 과정은 다음과 같습니다. n (10진법)n (3진법)앞뒤 반전(3진법)10진법으로 표현 125 11122 22111 229 따라서 229를 return 해야 합니다. 접근방법 이건 뭐 메서드.. 2022. 1. 4.
[Javascript] this 동적 바인딩 0.목차 1. 개요 2. 메소드 생성 3. 메소드 호출 4. this 바인딩 1. 개요 수업에서 객체를 다뤘다. 혼자 객체도 만들어보고 메소드도 만들어보고 메소드로 property 참조하고 이것저것 해보다가, 어느 순간 깨달음이 와버렸다. 까먹기 전에 정리를 해보자. 2. 메소드 정의 const obj = { a: 1, print() { console.log('print'); }, }; obj라는 객체를 하나 만들고, 프로퍼티 하나 메소드 하나씩 만들어줬다. 메소드는 익명함수 안쓰고 스마-트 하게 method shorthand 써서 만들었다. es6에서 추가된 기능이다. 기존(es6 이전)에 어떤 형식으로 만들어졌는지 모른다면 문제가 되겠지만, 아니까 걍 쓰겠다. 3. 메소드 호출 const obj = .. 2022. 1. 4.
[Javascript] 예산 https://programmers.co.kr/learn/courses/30/lessons/12982 코딩테스트 연습 - 예산 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 programmers.co.kr 문제설명 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 .. 2022. 1. 4.
[Javascript]크레인 인형뽑기 게임 https://programmers.co.kr/learn/courses/30/lessons/64061 코딩테스트 연습 - 크레인 인형뽑기 게임 [[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]] [1,5,3,5,1,2,1,4] 4 programmers.co.kr 문제설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격.. 2022. 1. 4.
[Javascript] 폰켓몬 문제설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫 .. 2022. 1. 4.
[문제풀이] 짱구의 마스크 소분 문제설명. 짱구가 마스크를 소분 하는 작업을 한다. 마스크를 담을수 있는 봉투에는 두가지 종류가 있는데, 하나는 5개의 마스크를, 나머지 하나는 3개의 마스크를 담을 수 있다. 총 마스크 갯수 n개가 주어졌을 때, 최소한으로 사용하는 봉투의 갯수를 return 하는 함수를 작성하라. 단, 봉투에 딱 떨어지게 담겨지지 않는 경우는 -1을 return 한다. 접근방법. 쉬울줄 알았는데 어려웠다. 우선 얼리리턴을 할 수 있는 경우를 생각해봤다. 1. n이 5의 배수인 경우 에는 n/5를 리턴하면 되고 2. n이 3보다 작거나, 4인경우에는 -1을 리턴하면 된다. 나머지의 경우는 for 문으로 5씩 빼면서 answer 에 1을 더하고, 남은 수가 3으로 나눠지면 n/3으로 나눈 값을 answer에 더해주면 되지.. 2022. 1. 3.
[Javascript]var, let, const 차이점 0. 목차 1. 개요 2. let, const 3. var 4. 결론 1. 개요 변수를 선언하는 예약어에는 var, let, const 세가지가 있다. 크게 나누자면, ES6이전 즉, ES5까지 사용되던 var 와 ES6에 새롭게 추가된 let과 const가 있다. 모든 강의와, 모든 책에서 var사용을 지양하고, let, const 사용을 권장한다. 세가지 예약어의 차이점과, var 사용을 권장하지 않는 이유에 대해 알아보자. 2. let, const 2-1. let let 은 const와 함께 ES6에서 추가된 기능이다. 변수를 선언한다는 점에선 동일하지만, 값의 재할당의 가능 여부에서 차이가 드러난다. let 으로 선언한 변수는 재할당이 가능하다. //선언&할당 let num = 1; console.. 2022. 1. 3.
[Javascript] if 조건문 0.목차 1. if 2. else 3. else if 자바스크립트의 기본 문법중 if 조건 문에 대해 알아보자. 기본 적으로 생긴 모양을 보면 if(){}; 요렇게 생겼다. 물론 아직은 생기다 말았다. 비어있는 괄호안에 들어가는 내용들은 코드가 실행될 조건과, 조건이 true를 반환할때 실행되는 코드다. if(조건){ 위의 조건이 true 일때 실행될 코드 }; 이렇게만 보면 애매한데 예제를 보면 좀더 이해가 쉽다. let eat = true; if (eat) { console.log('배불러'); } // 배불러 위의 조건으로 들어간 변수 eat은 true 이므로 배불러가 출력된다. let eat = false; if (eat) { console.log('배불러'); } 이 예제에선 eat의 값이 fa.. 2021. 12. 30.
[Javascript] 연산자 / template literal / == 과 === 0. 목차 1. 개요 2. 산술연산자 3. 연결연산자 4. 비교연산자 5. 논리연산자 1. 개요 자바스크립트의 연산자 종류는 진짜 많다. 이걸 다 통채로 외우다가는 한세월 다 보낼 지도. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators 표현식과 연산자 - JavaScript | MDN 이 장은 JavaScript의 표현식과 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 여러 가지 연산자를 설명합니다. developer.mozilla.org 한번 읽어보는 걸로 만족하고 기본적인 것만 해보자. 2. 산술연산자 사칙연산 하면 다 아는거다 더하기 빼기 나누기 곱하기 기호도 똑같이 + - / * 를.. 2021. 12. 30.
728x90
728x90

티스토리툴바