키자드에 등록된 총 395개의 포스트를 확인하실 수 있습니다.
https://programmers.co.kr/learn/courses/30/lessons/17687 1부터 한 숫자씩 올라가며 숫자를 부르는 베스킨라빈스 게임 비슷한..? 게임인데, 이 숫자가 2진수일수도 있고, 16진수일수도 있는 그런 문제였다. 최대 미리 구해둘 숫자와 최대 사람 수 만큼 자연수를 구해두고 이 수를 n에 들어온 n진법 숫자로 바꾸고 대문자로 변환해 배열에 spread연산자를 이용해 넣어줬다. 이후 본인 차례가 왔을때만 다시 기록해두고 이 기록들을 문자열로 변환해 문제를 풀 수 있었다.
antd의 Icon을 가져와 사용하다가 아래와 같은 오류가 발생했다. 이 오류는 특정 컴포넌트의 import가 잘못되어 발생한 오류이다. 추가한 컴포넌트를 다시한번 확인하여 해결하였다.
아래와 같이 react와 redux 연결을 하다 아래와 같은 오류가 발생했다. 알아보니 React와 Redux를 연결하는 index부분에 코드상 잘못된 것이 있으면 발생하는 문제란다. 구글링해보니 해결방법이 다 오타를 수정한 내용이길래 열심히 찾아봤으나 오타를 찾을 수 없었다. 알고보니 'next-redux-wrapper' 버전에따라 특정 버전은 컴포넌트에 Provider를 설정하지 않아도 Provider까지 wrapping 해준다고 한다. 아래는 쓰고있던 버전이다. <Provider>부분을 지워주니 정상적으로 동작하기 시작했다. 오류가 뜬 이유가 이렇게 대놓고 써있었는데 이 부분을 늦게 발견해 이상한 부분에서 삽질을 했던 오류였다.
https://www.npmjs.com/package/connect-redis 세션관리를 위해 express-session에 connect-redis를 사용하던 도중 아래와 같은 오류가 발생했다. 이 오류는 버전문제때문에 발생한 문제이다. 4버전 이후를 사용하며 3버전때의 코드처럼 사용하면 위와 같은 오류가 발생한다. 해결방법은 2가지이다. 1. 3버전대로 버전을 바꿔 재설치하자. 2. 4버전 이후대 사용 가능한 코드로 바꾸자.
https://docs.nestjs.kr/recipes/sql-typeorm NestJS 에서 TypeORM을 MySQL과 사용하는 방법에 대해 알아보자. 간단한 예제를 직접 만들며 알아보겠다. 1. 프로젝트 생성 https://blog.naver.com/dlaxodud2388/222494827734 위 링크처럼 NestJS 프로젝트를 생성한 뒤 아래와 같이 프로젝트 구조를 짰다. 간단한 게시판 기능을 하는 Nest서버를 만든다고 생각하고 예제 코드를 짰다. 2. TypeORM 설치 우선 TypeORM을 설치해야한다. 아래 명령어를 터미널에 쳐주자. 3. Entity 코드 작성 및 관계설정 이제 테이블들을 만들어주자. TypeORM에서 테이블은 entity라고 부른다. entities라는 디렉토리를 만들어주자. 간단한 게시판이므로 User Entity와.......
이번 포스팅에서는 NestJS+Passport와 TypeORM을 이용해 로그인/ 회원가입 API를 구현해보겠다. Nest 프로젝트 생성과 TypeORM 사용법에 관해서는 아래 글에서 다뤘었다. https://blog.naver.com/dlaxodud2388/222505555514 https://blog.naver.com/dlaxodud2388/222494827734 1. 프로젝트 구조 프로젝트 구조는 아래와 같다. 2. 엔티티 생성 프로젝트 생성 후 아래와 같이 User 엔티티만 생성해 주겠다. ormconfig.ts도 아래와 같이 작성해준 뒤 app.module.ts에 import해주자. 테이블 구조는 위와 같을 것이다. 3. 회원가입 구현 user service코드와 user controller코드를 작성해주자. typeorm repository의 save()와 bcrypt 모듈을 이용하여.......
9월 10일 코로나로 인해 부대복귀 없이 사회에서 전역을 하고 깬 적금으로 바로 맥북m1을 샀다. 쓰고있던 그램 상태가 날이 갈수록 안좋아지는게 느껴지기도 했고 워낙 노트북이 바꾸기 싶었기에 전역 전부터 계속 구매할 계획을 가지고 있었다. 에어살까 프로살까 계속 고민하다 '이왕 비싸게 주고 사는거 프로로 확실하게 사자!' 하고 프로로 구매했다. ssd는 512, 램은 16으로 구매했다. 쿠팡에서 9월 9일 저녁 11시 넘어서 구매했는데 바로 다음날 인 9월 10일 오전 11시쯤 도착했다. (쿠팡 와우하면 10만원 할인해주길래 무료체험 처음 써봤는데 빠르긴 하더라..) 이것저것 할인받을 수 있길래 카드할인도 받아 거의 30만원정도 할.......
주변 친구들이 하나둘씩 백신을 맞는 걸 보며 백신 이런저런 얘기를 종종 했었는데, 블로그 이웃분들께도 혹시 도움이 되지 않을까 하여 조금 많이 늦긴 했지만 화이자 후기글을 한번 써보려고 한다....ㅎ 본인은 군대에 있을 때 6월 초, 6월 말에 각각 1차 2차 화이자 백신을 맞았다. 접종 때 기억들과 맞은 뒤 친구들이랑 카톡했던 기록을 기반으로 포스팅을 작성하였다. 1차부터 정리하자면 일단 1차는 크게 아프지 않았다. 접종은 오전 10시쯤 받았고 접종 15분 후 바로 타이레놀 한 알을 먹었었다. 접종 후 첫날 저녁쯤?부터 팔이 꽤 아팠었다가 밤쯤에 감기기운이 조금 생긴 느낌을 받았던걸로 기억한다.(정말 약한 감기기운이였다.) 다음.......
https://programmers.co.kr/learn/courses/30/lessons/86491 명함을 적절하게 회전시킨다고 생각하고 가로나 세로 한 쪽으로 큰 변, 작은 변을 몰아둔다. 이후 정렬하여 가장 긴 가로와 세로를 구해 풀 수 있는 문제였다.
Prettier는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구이다. 우선 market place에서 prettier를 설치해주자. 이후 command + shift + p 를 누른 뒤 settings를 입력해주자. 이후 Preferences: Open Settings(JSON)을 찾아주자. 그리고 아래 코드를 추가해주자. 이후 vscode를 재시작하면 된다. 만약 안되는 경우가 있다면 아래 내용을 참고하자. code -> Preference -> Settings로 들어간 뒤 format on save를 쳐 체크가 되어있는지 확인하자. 이후 defaultFormatter를 쳐 none으로 되어있다면 이걸 prettier로 설정해주자.
nest코드를 짜다 @nestjs/passport모듈이 필요하여 설치하려하자 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 오류가 발생했다. 이는 뒤에 --legacy-peer-deps 를 추가해 문제를 해결하였다. --legacy-peer-deps 는 충돌을 무시하고 설치하게 한다. (--force의 경우도 가능한데, 이는 package-lock.json에 몇가지 의존성을 추가하고 충돌을 우회한다.) 이후 위와 같이 문제를 해결할 수 있었다.
https://programmers.co.kr/learn/courses/30/lessons/42839 문제를 보면 알 수 있지만, 특정한 숫자로 된 문자열이 주어진다면 이 숫자를 가지고 나올 수 있는 모든 숫자들이 소수인지 확인해야하는 문제이다. "011"이라면 0,1,10,11,101,110 이 나올 수 있다. 같은 숫자가 두번 포함되도 안되는 문제이기에 이 문제는 순열을 사용했고, 순열을 통해 추린 숫자들을 에라토스테네스의 체에 넣어 소수를 걸러내는 방식으로 풀었다. 우선 코드는 아래와 같다. 순열로 걸러진 배열들을 숫자로 합치고 거기서 가장 큰 수를 찾은 뒤 에라토스테네스의 체를 이용해서 풀었다.
https://programmers.co.kr/learn/courses/30/lessons/12941 두 배열을 각각 오름차순, 내림차순 한 뒤 곱해줬다. 이후 곱해준 값을 reduce를 이용하여 더하는 방식으로 문제를 해결하였다.
https://programmers.co.kr/learn/courses/30/lessons/43165 이 문제는 dfs문제였다. 재귀를 이용해 풀 수 있는 문제였다.
https://programmers.co.kr/learn/courses/30/lessons/42747 처음 이 문제를 읽고 문제를 잘못 이해해 풀었다. 가장 중간값에 있는 인용수를 구하라는 문제로 착각하여 아래와 같이 잘못 풀었다. 결과는 위처럼 완전 실패했다. 알고보니 자신의 전체 논문을 내림차순으로 정렬한 뒤 인용수와 논문수가 같아지는 지점을 구하는 문제였다. 따라서 아래와 같이 코드를 수정하였다. 위와 같이 성공하였다.
아무생각없이 nest프로젝트를 만들고 레포지토리를 하나 파서 만든 nest프로젝트 상위 경로에 git add를 하였는데 아래와 같은 오류가 발생하였다. 알고보니 nest프로젝트에 .git이 이미 존재하고있었다. 이걸 지우고 다시 해보니 add 하는데 문제가 없었다.
https://docs.nestjs.kr/ nestJS는 타입스크립트를 사용하며 Node.js위에서 돌아가는 프레임워크중 하나이다. (실질적으로는 다른 node.js framework 위에서 돌아간다. Nest서버 켜고 네트워크탭 열어서 확인해보면 아래와 같이 X-Powered-By : Express 인것을 확인할 수 있다.) NestJS의 프로젝트를 생성하며 간단하게 express와의 구조적 차이점을 한번 알아보자. 우선 프로젝트를 생성하기 위해 아래와 같은 명령어를 쳐 NestJS를 설치해주자. 이후 프로젝트를 생성한 경로로 이동한 뒤 아래와 같은 명령어를 작성해 nest 프로젝트를 만들어주자. 어떤 패키지매니저를 사용할건지 고르라고 한다. 그냥 npm 그대로 쓰겠다. 그럼 이렇게 프로젝.......
Swagger는 API문서 자동화 도구이다. 따로 API문서를 작성하는것이 아닌 그냥 코드를 작성하면서 API문서를 수정할 수 있다. 그렇게 수정된 코드는 자동으로 API문서를 만들어준다. 이제 사용방법에 대해 알아보자. 우선 아래와 같이 모듈들을 설치해주자. 여기서 만약 NestJS(express)가 아닌 NestJS(fastify)를 쓸 경우 swagger-ui-express대신 fastify-swagger를 설치해주자. 이후 이 swagger를 미리 main.ts에 연결해주자. 아래 코드를 추가해주자. 이후 main.ts의 코드는 아래와 같다. 이후 user 컨트롤러, 서비스 모듈정도만 있다고 해보자. 이후 서버를 아래와 같이 킨 뒤 localhost:3000/api로 가보면 아래와 같은 api문서 양식이 생긴 것.......
homebrew에 대해 간단히 소개하자면 무언가를 설치할 때 터미널에 명령어를 입력해 간편히 설치할 수 있도록 해주는 MacOS용 패키지 매니저이다. https://brew.sh/index_ko 설치 방법은 위 링크를 타고 들어가면 나온다. 위 명령어를 터미널에 간 뒤 입력해주는 방식으로 설치한다. 이후 brew명령어를 사용해봤는데 아래와 같이 사용이 불가능하단다. 다시 보니 아래와 같은 오류가 발생하였다. /opt/homebrew/bin is not in your PATH에 써있는 것처럼 아직 PATH에 등록되어있지 않아 발생하는 문제이기에 /opt/homebrew/bin를 등록해주면 해결되는 문제이다. 터미널에서 아래 명령어를 입력해주었다. 이후 아래 명령어를 치면 PATH=/opt/h.......
https://programmers.co.kr/learn/courses/30/lessons/81301 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다.......
위 그림과 같은 창을 띄워주는 서버가 있다고 해보자 이 코드를 Google Cloud Platform에 배포해보자. 우선 올리기 전에 코드를 간단하게 수정해주자. 보안을 위해 위와 같이 hpp와 helmet을 추가하는 것을 추천한다. 배포시 상황과 아닌 상황을 구분하여 morgan도 상황에 맞게 쓰도록 해주자. package.json도 아래와 같이 수정해주자. 우선 cross-env를 npm에서 받아주자. cross-env는 os나 플랫폼에 종속되지 않는 방법으로 환경변수를 넣어준다. 그리고 뒤는 "pm2 start 파일명 -i 프로세스수" 와 같이 수정해주자. pm2 를 사용하는 방법은 아래 글에서 다뤘었다. https://blog.naver.com/dlaxodud2388/222461276895 이제 구글클라.......
https://programmers.co.kr/learn/courses/30/lessons/72410 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마.......
https://programmers.co.kr/learn/courses/30/lessons/12913# 처음에 이 문제를 보고 그냥 위에서부터 높은 순서대로 내려오되 같은 열만 안밟고 내려오면 되는건가 해서 문제를 풀었다. 같은 행에서 가장 높은 수를 찾은 뒤 그 다음 행의 같은 열을 0으로 바꾼 뒤 문제를 해결하려 했다. 그 결과 테스트 케이스만 맞고 정확성 테스트는 아래와 같이 완전히 틀려버렸다. 각 행 배열의 원소마다 더할 수 있는 최댓값과 더했을 때 나올 수 있는 값이 다 다르다는 점을 생각하지 못해 틀린 것이였다. 이후 map()을 이용해 각 행 배열의 원소마다 더할 수 있는 최댓값과 더한 값을 계속해서 배열에 쌓아가는 방식으로 문제를 풀 수 있었다. 아래와 같.......
https://programmers.co.kr/learn/courses/30/lessons/12973 처음 이 문제를 접하고 풀었을 때 split()메서드와 join()메서드를 이용하여 풀었다. 그 결과 위와 같이 효율성 테스트가 0점이 나와버렸다. 각 문자들을 다 한바퀴씩 도는 것 때문에 이런 결과가 나왔나 생각이 들어 set처럼 중복된 문자열들을 다 제거하고 split.join을 하면 풀 수 있지 않을까 하여 아래와 같이 코드를 수정해보았다. 결과는 역시나 시간초과였다. split과 join이 어떻게 동작하는지는 모르겠으나 이 메서드 사용으로 인해 시간초과가 나는 것 같았다. 결국 stack을 사용해 풀게 되었다. 글자를 비교해가며 뒤의 글자와 다른 경우 push, 같으면 pop을 해주는 방법.......
https://programmers.co.kr/learn/courses/30/lessons/12921 모든 수를 확인하지 않고 제곱근까지만 확인하면 된다는 성질과 에라토스테네스의 체를 이용하여 풀 수 있는 문제였다.
Google Cloud Platform Compute Engine의 VM인스턴스 상에서 node.js 서버를 배포하다 pm2모듈을 이...
"교차 출처 리소스 공유"라고도 불리는 CORS란 "Cross-Origin-Resource-Sharing&qu...
npm에서 pm2를 받아서 쓰려했는데 아래와 같은 오류가 발생했다. 이 오류는 스크립트 실행 권한이 제한되어...
https://blog.naver.com/dlaxodud2388/222196528936 예전에 썼던 위 글에서 말했던 것처럼, 멀티 스레딩이 ...
우선 MySQL이 설치된 경로로 간 뒤 bin까지 가주자. 이 경로를 우선 복사해두자. 내 컴퓨터에서 속성을...
전역하고 집에와보니 ssd가 초기화되어있었다. 이것저것 다시 깔고 하다가 깃허브에서 코드 가져와 한번 돌...
일반적으로 우리는 협업을 하게되면 git을 사용하게 된다. 이렇게 우리가 하게되는 git project는 원격 저장소까지 포함하여 크게 4가지 요소로 나눌 수 있다. 1. Working Directory 2. Staging Area 3. Local Repository 4. Remote Repository 우선 1번 Working Directory의 경우 그냥 우리 로컬 환경에서 작업하는 파일들이라고 생각하면될 듯 하다. 그냥 이런 작업환경 생각하면 된다. 물론 당연하게도 이러한 경우는 git init 명령어를 사용했다는 전제 하이다. 이 작업환경에 있는 파일들은 Tracked상태의 파일들과 Untracked상태의 파일들로 나뉘게 되는데 Tracked 파일들의 경우 git이 관리해주는 상태의 파일들이라고 보면 되는거고 Untr.......
https://programmers.co.kr/learn/courses/30/lessons/42746 자바스크립트의 sort()메서드를 써먹은 문제이다. 코드는 위와 같다. 배열의 모든 요소들을 문자로 바꿔준 뒤 앞의 문자와 뒤의 문자(a,b)를 각각 더해 비교한 뒤 다시 숫자로 바꾸어 넣어준 뒤 다시 문자로 전환하였다. 문제를 보면 양의 정수 또는 0이 들어갈 수 있다고 하였는데, 이 경우 배열에 0,0,0,0,0 과 같이 들어갈 수도 있다. 이 경우는 답으로 0이 아닌 "00000" 이렇게 나올수도 있기 때문에 answer = answer[0]==='0'?'0':answer 이 코드를 작성하여 위와 같은 경우 "0"으로 나올 수 있도록 방지해주었다.
https://programmers.co.kr/learn/courses/30/lessons/12931 코드는 아래와 같다.
메모리를 효율적으로 관리하기 위해 운영체제는 여러 메모리 낭비 방지 기술들을 적용한다. 이 글에서는 아래 3가지 기술에 대해 작성해보겠다. 1. 동적 적재(Dynamic Loading) 2. 동적 연결(Dynamic Linking) 3. 스와핑(Swapping) 1. 동적 적재(Dynamic Loading) 우선 이 Dynamic Loading에서 load는 메인메모리로 프로그램이 적재되는 것을 의미한다. 이 동적 적재(Dynamic Loading)이 무엇인지에 대해 간추려보자면, 프로그램 실행에 반드시 필요한 루틴과 데이터만 적재한다는 것이 바로 동적 적재이다. 우리가 어떤 프로그램을 하나 만들었다고 해보자. 이 프로그램이 메인메모리상에 올라갔을 때 오류처리같은 루틴들은 항상 사용되진 않을.......
일반적으로 우리가 컴퓨터를 부팅을 하고 나면 메인메모리의 상태는 아래와 같을것이다. 운영체제를 제외하고는 비어있을 텐데, 이렇게 크게 비어있는 공간을 "big single hole"이라고 한다. 이런 것처럼 프로세스가 차지하고 있는 공간을 제외하고는 빈 공간을 "hole"이라고 부른다. 그런데 만약 수많은 프로세스들이 실행되었다가 꺼졌다가를 반복하다보면 어느순간 아래와 같은 사진처럼 듬성듬성 hole들이 생길 것이다. 이렇게 되었을 때, 저 hole들의 크기가 각각 20kb라고 쳐보자. 3개가 있으니 60kb의 메모리가 남지만, 듬성듬성 있기에 30kb짜리 프로세스를 실행하려 해도 할 수가 없는 상황이 되어버리게 된다. 다.......
흔히 자바스크립트의 "호이스팅(Hoisting)"이라고 하면 "변수나 함수의 선언 코드가 상단으로 끌어올려지는 것이다" 라고 종종 말하곤 한다. 위 사진을 보면 알 수 있겠지만, 사실 hoisting의 의미도 끌어올린다는 의미이다. 정말 "hoisting"이란 이름처럼 끌어 올려지는것일까? 끌어올려진다면 어떻게 끌어 올려지는지 한번 알아보자. 우선 호이스팅을 이해하기 위해서는 실행 컨텍스트(Execution Context)에 대해 이해해야한다. 1. 실행 컨텍스트(Execution Context) 우선 위와 같이 자바스크립트 엔진 사진이 있다. Memory Heap과 Call Stack으로 나누어져 있는데, 여기서 Call Stack이라는 곳에 실행 컨텍스트.......
우선 프로세스들이 실행되려면 그 프로세스들은 여러 자원들을 필요로 한다. 그러나 위 그림을 보면 알 수 있지만, 자원은 한정적이고 이 자원을 쓰려하는 프로세스들은 굉장히 많다. 따라서 이 자원들을 잘 분배해서 쓸 수 있도록 하는 것이 운영체제의 일 중 하나이다. 따라서 프로세스는 특정한 자원을 쓰려면 운영체제에 요청을 해야한다. 그렇게 프로세스는 운영체제로부터 자원을 할당받게 된다. 이렇게 여러 자원들이 프로세스에게 할당이 되고 하는데, "어떤 프로세스가 어떤 자원을 할당받기위해 기다리는가?" 에 대한 것을 그래프로 나타낸 것을 우리는 "자원 할당도(Resource Allocation graph)"라고 한다. 대충.......
우선 위키피디아에서는 말하는 "교착상태"를 한번 보자. 교착 상태(膠着狀態, 영어: deadlock)란 두 개 이상의 작업이 서로 상대방의 작업이 끝나기 만을 기다리고 있기 때문에 결과적으로 아무것도 완료되지 못하는 상태를 가리킨다. 위에서 본 것처럼 "여러 작업들이 서로 상대방의 작업이 끝나기만을 기다리는 상태" 를 교착상태라고 한다. 이게 무슨 이야기일까? 굉장히 유명한 문제 하나를 예시로 들겠다. 아래 그림을 보자. "식사하는 철학자 문제" 라고 유명한 문제이다. 이 문제에는 조건이 있다. 우선 위 사진과 같이 한 테이블이 있고, 가운데 밥이 있다고 해보자. 그 테이블에는 서로 대화할 수 없는 5.......
우리가 일반적으로 자바스크립트 코드를 작성하게 되면, 자바스크립트 엔진은 우리가 쓴 코드들을 분석하여 "AST" 라는 것으로 변환을 한다. 이 AST는 Abstract Syntax Tree의 약자로 한국말로 하면 "추상 구문 트리"인데, 이렇게 만든 AST를 기반으로 인터프리터는 바이트코드를 생성한다. 그래서 이 AST가 무엇인가 하면, 우리가 쓴 소스코드를 문법에 맞게 노드들로 쪼개서 만든 트리라고 생각하면 될 듯 하다. 그럼 우리가 코드를 쓰면 갑자기 뚝딱 하고 AST가 만들어지고 바이트코드까지 만들어지는것일까? 당연히 그럴 일은 없으니 대충 과정을 그림으로 그려보겠다. 위 그림을 보면 알 수 있지만, 우리가 쓴 코드가 A.......
이 글의 주제인 히든 클래스와 인라인 캐싱에 대해 설명하기 전에, 먼저 자바스크립트의 객체의 프로퍼티와 프로퍼티 값은 어떻게 저장이 될지 한번 생각해보자. 아래 코드를 예시로 들어 한번 생각해보자. 보다싶이 a 라는 객체에 x와 y라는 프로퍼티가 존재하고 그 안에1, 2라는 값이 들어가게 될 것이다. 그런데 이 객체의 프로퍼티와 값이 한 곳에 묶여 저장이 된다고 생각해보자.(실제로는 그렇지 않다.) 대충 위 그림같은 느낌으로 말이다. 그런데 이런 구조로 이루어져 있다면 문제가 하나 발생한다. 위 코드와 같이 같은 모양의 객체들을 막 생성해낸다면 각각의 객체들은 똑같은 프로퍼티 이름들을 다 가지고 있어야 하고, 그에 따른 값.......
'const' 라는 키워드가 'constant'의 약자라는 사실은 대부분 알고있는 사실이다. 위 사진처럼 'constant'는 불변의, 상수 등의 뜻을 가지고 있다. 일반적으로 C나 C++, Java같은 언어에서 "상수"라고 하면 데이터가 초기화됐을 때 그 값을 바꿀 수 없도록 하는 그런걸 말한다. 그러나 자바스크립트에서의 const는 다른 언어들과는 조금 다르다. 값을 변경할 수 없도록 하는 것이 아니라 "바인딩을 바꿀 수 없게" 만드는 것이다. 다시말해, 자바스크립트에서의 const는 값의 불변성과는 전혀 관련이 없다. 위 말이 사실인지 한번 확인해보자. 위 코드처럼 a라는 변수를 const를 이용해 선언하.......
우리말로 직역했을 때 "일시적 사각지대"인 이 TDZ(Temporal Dead Zone)가 무엇인지 이해하기 위해서는 우선 ES6의 let과 const, 그리고 호이스팅에 대한 개념이 선행되어야 한다. https://blog.naver.com/dlaxodud2388/222238394694 위 글에서 다뤘던 주제와 사실상 거의 비슷하다고 봐도 무방할 듯 하다. 이 글에서 가장 핵심적으로 짚고 넘어가야 할 부분이 있다. 바로 자바스크립트에서의 변수선언 3단게이다. 1. 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다. 2. 초기화 단계(Initialization phase) : 변수 객체에 등록되어 있는 변수를 위하여 메모리를 할당하는 단계이다. 여기서 변.......
자바스크립트 엔진이라고 하면 위 그림과 같이 메모리 힙과 콜 스택으로 나뉘게 된다. 자바스크립트 엔진 중 하나인 V8의 메모리 구조에 대해 알아보기 전에 Stack 메모리와 Heap 메모리에 대해 간단히 짚고 넘어가보자. 1. Stack 메모리 우선 스택 메모리이다. 스택 메모리는 주로 정적 메모리 할당에 이용된다. 이 스택 메모리에 함수에 대한 실행 데이터같은게 들어가는데, 이는 스택 프레임으로 저장된다. 각 스택 프레임은 해당 기능에 필요한 데이터가 저장되는 그런 블록으로, 실행 컨텍스트와 그 안의 변수 객체를 떠올리면 될 듯 하다. 다중 스레드 어플리케이션의 경우 스레드 당 스택메모리를 하나씩 가질 수 있다. (자바스크립트의 경.......
얼마전에 SNS를 보고있다가 자바스크립트에서는('b'+'a'+ +'a'+'a'). toLowerCase () 의 결과가 "banana"가 나온다는 이야기를 보았다. 심심해서 알아보다 뭔가 웃겨서 한번 포스팅해본다. 우선 간단하게 아래 코드를 한번 보자. 위 코드를 치면 당연히 1이 찍힐 것이다. 위의 -a의 '-'처럼 +, -, ++, --, 등등 하나의 피연산자만을 가지고 연산하는 연산자를 단항연산자(unary operator)라고 부른다는 사실은 익숙할 것이다. 이처럼 '+'도 단항연산자인데 자바스크립트에서는 +'hello', -'hello' 와 같은 코드를 단항 연산자와 문자열로 인식하여 연.......
https://programmers.co.kr/learn/courses/30/lessons/42578 clothes의 각 행이 의상의 이름, 의상의 종류 로 이루어져 있고, 같은 의상은 존재하지 않는다기에, 일단 그대로 map객체에 넣었다. 자바스크립트의 map 객체에서, value값으로 배열을 넣을 수 있기 때문에 배열에 push하는 식으로 옷의 이름들을 넣고 옷의 종류를 key로 하였다. 지금 생각해보면 그냥 옷 종류, 그 종류의 개수 느낌으로 넣는 것이 더 좋았을 듯 하다. 스파이는 최소 하루에 한 가지 옷을 입기 때문에, 특정한 종류의 옷은 안입을 수 있다. 모든 종류의 옷을 하나씩 입을 필요가 없기에, 특정 종류의 옷은 안입을 수 있는 경우의 수가 생긴다. 결론적으로 예를들어 상.......
알다싶이, Node.js 는 싱글스레드 형식이다. 이 싱글스레드인 node.js 를 이용하여 서버를 돌리다가 많은 요청들이 한꺼번에 들어온다면 문제가 발생할 수 있다. 멀티 스레딩이 불가능한 Node.js에서 이 문제를 해결하기 위해 고안된 방법은 CPU의 코어들을 여러 개 사용하는 것이다. 물론 이렇게 코어들을 여러 개 사용한다고 완전히 멀티스레딩처럼 동작하는 것은 아니고, 멀티스레딩처럼 동작할 수 있게 된다. (코어 하나당 프로세스 하나가 돌아가니깐 멀티 프로세싱에 좀더 가깝지 않을까 싶다.) 이를 "클러스터링(Clustering)"이라고 한다. CPU 코어를 하나만 사용할때의 예시를 들어보자. 일부러 딜레이를 넣어보았다. 여기서 3.......
1. 프로세스 동기화 프로세스는 일반적으로 2가지로 나눌 수 있다. 1. independent Process (독립적인 프로세스) 2. Cooperation Process (독립적이지 않은 프로세스) 이 2번째의 독립적이지 않은 프로세스는 실행되고 있는 다른 프로세스에게 영항을 주거나 영향을 받는 경우의 프로세스를 말하는 것이다. 2번(Cooperation Process)가 일반적으로 더 많은데, 이런 독립적이지 않은 프로세스는 이번에도 크게 두 가지로 나눌 수 있다. 1. 프로세스간 통신하는 경우 2. 서버컴퓨터의 하나의 리소스(디비 등..)에 여러 프로세스가 접근하는 경우. 2번의 경우 프로세스들이 데이터베이스를 공유하려다보니 서로 영항을 줄 수밖에 없는 구조이다. 이.......
우선 이터레이터가 무엇인지 알아보기 전에 이터레이터가 무슨 뜻인지부터 보고 생각해보자. 위 사진과 같이 "반복자"라는 뜻을 가지고 있는 것을 확인할 수 있다. 위 뜻과 같이 자바스크립트에서 "이터레이터(Iterator)"는 반복 처리가 가능한 객체를 의미한다. "반복 처리가 가능한 객체"인 이터레이터는 아래와 같은 조건을 만족해야한다. 1. next() 라는 메서드를 가져야 한다. 2. next()의 리턴값은 꺼낸 값이 저장된 "value"라는 프로퍼티와 반복이 끝났는지 확인하는 boolean값이 들어간 "done"이라는 프로퍼티를 가져야 한다. 그렇다면 이 조건에 맞추어 이터레이터 함수 예시를 한번.......
1. Spread 연산자 우선 이 Spread 연산자에 대해서 간단하게 설명하자면 이터러블 오브젝트의 요소들을 하나씩 다 분리해서 전개해버리는 연산자이다. 우선 간단하게 사용방법과 예시를 들어보자. 우선 결과는 아래와 같다. 배열 a가 다 분리되어 b에 들어간 것을 확인할 수 있다. 코드를 보면 ...a 와 같이 뭔가 쓴 것을 볼 수 있는데, 이게 Spread 연산자를 쓴 것이다. 위에서 말하긴 했지만 이 Spread 연산자는 꼭 이터러블 오브젝트와 사용해야한다. 예시로 배열을 들었는데, 이터러블 오브젝트인 Set, Map 등도 사용이 가능하다. 이터러블 오브젝트인지는 아래 그림과 같이 Symbol.iterator이 있는지 확인해 보면 된다. Array.prototype을 찍.......
일반적으로 우리가 Node.js를 떠올리면 생각하게되는 특징중 하나가 "Node.js는 싱글스레드다" 라는 것이다. 근데 정말로 싱글스레드일까? 스레드 하나가 정말 모든 일을 다 하게 되는걸까? 정확히 말하자면 싱글스레드가 맞긴한데 조금 애매하다. 우선 Node.js의 구조를 간단하게 다시한번 생각해보자. 위 사진과 같은데, 저기서 libuv라는 라이브러리에서 "이벤트 루프(Event Loop)"라는 기능을 제공한다. 자바스크립트를 작동시키는 스레드는 이벤트루프에 있는 스레드인데 이 이벤트루프 안의 스레드가 하나밖에 없어서 싱글스레드라고 불렸던 것이다. 그렇다면 비동기작업들(파일시스템 I/O, DB작업, 외부서비스 HTTP 통.......
Node.js를 하다보면 꼭 듣게되는 몇 가지 개념이 있다. 그 중에는 이벤트 루프(Event Loop), libuv, V8등이 있을 것이다. 이 개념들에 대해서 한번 알아보자. 우선 Node.js가 무엇인지에 대해 생각해보자. Node.js는 자바스크립트라는 언어를 브라우저 밖에서도 쓸 수 있게 해주는 런타임 즉, 자바스크립트로 만든 프로그램을 실행할 수 있는 하나의 환경이다. 이 환경은 거의 C++로 만들어졌기에, "Node.js는 C++로 만들어진 자바스크립트다"라고 생각해도 될 듯 하다. (Node.js의 엔진인 V8이 JS코드를 C++로 변환해준다.) 아래 사진은 Node.js의 구조를 대강 그린 그림이다. 여기서 봐야 할 것은 V8과 libuv이다. V8은 우선 자바스.......
우선 Node.js에는 "libuv"라는 비동기 라이브러리가 존재한다고 했었다. 이 비동기 라이브러리인 libuv에는 이벤트 루프 (Event Loop)라는 것이 존재한다고 했었는데, 이에 관한 내용은 이 글에서 다뤘었다. 그렇다면 이제 setTimeout(콜백,0), setImmediate(), process.nextTick() 세 가지의 차이점에 대해서 알아보자. 우선 아래 예시코드를 써보겠다. 우선 위와 같은 코드가 있다고 해보자. 결과는 아래와 같이 나올 것이다. 코드의 순서를 바꾸어보고 여러 번 실행해보아도 결과는 같을 것이다. 왜 이런 결과가 나오는 것일까? 이 이유는 Node.js의 libuv안에 있는 이벤트 루프의 동작 원리에 의해 이런 결과가 나오는 것이다. 이.......
Node.js 는 기본적으로 비동기로 동작한다. 그런데 이 Node.js로 웹 서비스를 개발하다 보면 서버에서 데이터를 가져온다던지, 비밀번호를 받아 암호화를 한다던지 등등 다양한 과정들이 있을 것이다. 이러한 작업들을 모두 비동기를 고려하여 처리하려고 한다면 결국 콜백 안에 콜백을 또 두고 그런 형태의 코드가 만들어질 수 밖에 없다. 간단하게 예시를 한번 들어보겠다. "안녕하세요"를 찍는 함수가 0.5초 걸린다고 가정하고 "제 이름은 임우찬입니다"를 찍는데 0.1초 걸린다고 가정하고 "피곤하네요"를 찍는데 0.01초가 걸린다고 가정해보자. Node.js의 비동기로 동작하는 특성을 고려하지 않고 아래와 같이.......
https://programmers.co.kr/learn/courses/30/parts/12244 javaScript의 Map객체를 이용하여 모든 학생들을 넣고 체육복의 수를 1로 모두 넣은 뒤 여분이 있는 경우 체육복의 수를 2로 늘렸다. 도난당한 학생은 0으로 내리고 문제대로 체육복을 빌려주었다. 이후 map객체를 돌면서 체육복이 1개 이상인 학생들을 카운트해주었다.
일반적으로 프로그래밍에서 스코프란, 변수가 유효한 범위를 뜻한다. 일반적으로, 자바스크립트를 포함한 대부분의 프로그래밍 언어(C, Java 등...)는 Lexical scope를 따른다. 그래서 Lexical Scope가 무엇인지 말하자면, 이는 함수를 어디서 선언했는지에 따라서 상위 스코프가 결정되는 것을 말한다. 반대로, 함수가 어디에서 호출되었는가에 따라서 스코프가 정해지는 것을 Dynamic Scope라고 한다. 예시를 들어보겠다. 위 코드의 결과는 어떻게 될까? 만약 자바스크립트가 Dynamic Scope를 따랐다면 1, 1234처럼 나왔을 것이다. 하지만 자바스크립트는 Lexical Scope를 따르기 때문에, 함수의 선언에 따라 상위 스코프가 정해졌으므로 결과.......
"eval() is evil"이란 말이 있다. 이런 말까지 나오면서 eval()을 쓰지 말라고 하는걸까? 우선 eval()함수에 대해서 한번 알아보자. 이 함수는 임의의 문자열을 받아서 자바스크립트 코드로 인식하게 만드는 함수이다. 예를들어 console.log(eval("4+4"))를 하게되면 8이 나오게 되는거고 다른 예로 html 요소의 id가 hi라는 변수에 들어가있다고 가정하고 eval("document."+hi+.........)와 같이 사용할 수 있는 그런 함수이다. 예시 코드를 들어보자면 아래와 같이 사용할 수 있다. 결과는 아래와 같다. 이 함수를 쓰지 말아야 하는 이유는 크게 네 가지가 있다. 1. 느리다. 2. 유지보수가 힘들다. 3. 보안상 문.......
FCFS알고리즘은 Ready Queue에 들어온 순서대로, SJF알고리즘은 CPU Burst Time 순서대로 스케줄링 해주는 방식이였다. 그에 반해 Priority Scheduling은 이름 그대로 Priority(우선순위)가 높은 순서대로 스케줄링해주는 방식이다. Priority를 정하는 기준은 그 프로세스의 중요도인데, 이는 내부적인 요소가 될 수도 있고, 외부적인 요소가 될 수도 있다. 내부적인 요소로는 메모리를 적게 차지하는 프로세스를 기준으로, CPU Burst가 짧은 애들을 기준으로 등 여러 이유가 있을 수 있다. 외부적인 요소로는 여러 사람이 사용하는 서버컴퓨터의 경우 돈을 많이 낸 순서로 우선순위를 부여할 수도 있다. 예시를 한번 들어보겠다. 위와 같은 프로.......
FCFS알고리즘은 Ready Queue에 들어온 순서대로, SJF알고리즘은 CPU Burst Time 순서대로 스케줄링 해주는 방식이였다. 그리고 Priority Scheduling은 Priority(우선순위)가 높은 순서대로 스케줄링해주는 방식이였다. RR스케줄링에 대해 알아보기 전에 왜 Round Robin인지 한번 알아보자. 이 이름은 Robin이라는 새에게서 따왔다고 한다. 이 Robin이라는 새는 새끼에게 밥을 줄 때 10마리가 있으면 조금씩 나누어 주고 조금씩 한바퀴 다 줬으면 다시 조금씩 주고를 반복하여 준다고 한다. 이 Robin이 새끼들에게 밥을 주는 것처럼 RR스케줄링은 특정한 시간을 기준을 잡아 그 시간만큼 CPU를 프로세스에게 할당해주고 시간이 지나면 다음 프로세.......
우선 이 글에서 다룰 모듈은 qrcode라는 모듈이다. https://www.npmjs.com/package/qrcode 간단하게 특정 문자열을 받으면 그 문자열을 이용하여 QR코드를 만들어 줄 수 있도록 해보자. 우선 npm init을 통해 프로젝트를 생성해주자. 이후 필요한 모듈들을 설치해주자. qrcode모듈도 아래와 같이 설치해주자. 이 외 아래 모듈들도 설치해주자. 템플릿엔진으로 EJS를 사용하였다. (package.json) 이후 만든 프로젝트 구조는 아래와 같다. 이제 ./index.js를 아래와 같이 작성해주자. (./index.js) 이제 EJS 파일을 작성해보자. (./views/index.ejs) 이후 라우터들을 작성해주자. 이 때, 설치했던 qrcode모듈을 가져와 구현해보자. 이후 서버를 실.......
이 오류의 경우 대부분 아래와 같이 함수를 재귀호출하여 발생하는 오류이다. 이 코드를 실행하게 되면 아래와 같은 에러가 발생하는 것을 확인할 수 있다. 그래서 이 코드를 아래와 같이 수정했더니 RangeError : Maxmum call stack size exceeded 는 나오지 않고 돌아가는 것을 확인할 수 있다. 왜 이런 상황이 발생하는지 자바스크립트 런타임을 그려 한번 알아보자. 이 오류의 발생 이유에 대해 알아보기 전에 자바스크립트 코드가 어떻게 돌아가는지부터 알아보자. 예시 코드가 아래처럼 있고, 런타임에서 어떻게 돌아가는지 확인해보자. 우선 자바스크립트 런타임이 위와 같다고 하자. 위에서 콜스택은 이 글에서 말했던 콜 스택이다. &quo.......
https://programmers.co.kr/learn/courses/30/lessons/67256 map객체를 이용하여 키패드의 좌표를 정해주고 풀었다. 처음에 풀 때 1번조건 "엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다."를 제대로 안읽고 좌표평면 두 점 사이 거리구하다가 안돼서 헤맸었다...ㅎ 문제 다시 확인하고 한칸당 1로 다시 풀었다. 문제를 잘 읽어야겠다...
이 Gzip을 사용하는 것은 웹페이지의 응답속도를 줄이는 가장 일반적인 방법 중 하나이다. GUNzip이라고도 불리는 이 Gzip은 파일 압축에 쓰이는 응용 소프트웨어이다. 그렇다면 이 Gzip은 왜 쓰는걸까? 우선 일반적인 트랜잭션이 일어났을 때의 상황을 가정하고 그림으로 나타내어보자. 위와 같은 상황이라고 해보자. 클라이언트가 hi.html을 서버로 요청했고, 서버가 이 요청을 읽었다. 이후 서버가 응답을 보내줬고, 이 응답을 띄우는데 이 응답이 500kb짜리인 상황이다. 500KB의 데이터가 전송되는 상황에 반해, Gzip을 사용한 경우를 예시로 들어보자. Gzip은 이 서버가 보내주는 응답을 압축해버리는 것이다. 위 사진과 같이 압축해서 보내.......
우선 이 코드에 대해서 먼저 생각해보자. 결과는 예상한 대로 10이 찍힐 것이다. 위와 같은 경우 또한 10이 찍히게 될 것이다. 왜 찍힐까? 잘 생각해보면 a라는 변수는 선언문이 없다. js 엔진은 a라는 변수를 우선적으로 hello실행 컨텍스트의 변수객체에서 a라는 변수가 존재하는지 확인할 것이다. 하지만, hello의 변수객체에서는 a라는 변수를 찾지 못할 것이고 이후 전역 객체로 스코프 체인을 따라 확인할 것이다. 그러나 a는 선언문이 없기에 전역에서도 찾지 못하여 reference Error가 발생하지 않을까 하고 생각할 수 있다. 아래 그림과 같이 말이다. 그럼에도 10이 출력되는 이유는 뭘까? 이렇게 되는 이유는 js엔진이 전역 객체에 a라.......
ES5부터 strict mode가 사용 가능하다. strict mode는 자바스크립트의 문법을 엄격히 적용하여 원래 무시되던 오류들이나 잠재적으로 오류를 발생시킬 수 있는 코드에 대해 오류를 발생시키는 모드이다. 적용 방법은 아래와 같다. 이는 아래와 같이 함수 단위로도 사용이 가능하다. 단, 주의할 점은 코드의 최상단에 사용하지 않는다면 strict 모드가 제대로 동작하지 않는다. 그렇다면 strict mode가 걸러내는 에러들에 대해 간단하게 몇가지만 알아보자. 1. 암묵적 전역 변수 2. delete 사용 3. arguments.callee 또는 arguments.caller 사용 불가능 이 외에 여러가지가 있다. MDN의 Strict mode에 들어가서 보면 확인할 수 있다.
두 개 뽑아서 더하고 나올 수 있는 모든 수를 배열에 갖다 넣으라길래 set에 넣었다가 배열로 다시 빼서 정렬했다. 다른 분의 풀이를 보면 코드가 굉장히 깔끔한데 그에 비하면 난 확실히 난잡하게 푼다. 비록 이 문제는 쉬운 문제이긴 하지만 많은 노력이 필요할 듯 하다... 아래는 다른 분들의 풀이이다.
https://programmers.co.kr/learn/courses/30/lessons/42576 단 한명의 선수를 제외하고 모두 마라톤에 참여하였기 때문에, 배열을 정렬하고 두 배열을 비교하여 풀었다.
https://programmers.co.kr/learn/courses/30/lessons/12901?language=javascript# 풀고나서 나중에 안건데 date를 써도 됐었다. 그냥 date를 썼으면 큰 생각 없이 편하게 풀 수 있었을 것 같다. 그냥 이렇게 노가다느낌으로 풀었다 아래처럼 Date써서 풀었으면 좋지 않았을 것 같았다. 그렇게 date로 풀고나서 보니 Date를 안쓴 앞에 풀었던 코드에 비해 코드 속도가 뭔가 훨씬 더 오래걸리는 걸 보았다. 왜 이게 앞선 코드에 비해 이렇게나 많이 시간이 더 걸리는걸까 좀 궁금했다.
https://programmers.co.kr/learn/courses/30/lessons/12910 Array의 sort()메서드를 이용하였다.
우선 간단하게 예시를 한번 들어보겠다. 우리가 여러 가지의 프로그램들을 실행했다고 가정해보자. 그리고 많은 프로세스들중 "프로세스1"이 CPU상에 올라가서 실행이 되고있는 상황이라고 가정해보자. 대략 아래 그림과 같은 상황일 것이다. 그리고 이 많은 프로세스들은 아래와 같은 상태(state) 존재한다. 이 프로세스들은 CPU상에 올라가서 Ready상태에서 Running상태가 되고나서 Time expired등의 이유로 waiting상태로 빠지게 되면 다른 프로세스가 Running 상태에 들어가고 하는 과정을 반복할 것이다. CPU상에 올라가지 못했으며 메모리에 load되어있는(ready상태) 프로세스들은 ready queue라는 곳에 쌓이게 된다. 이 ready q.......
우선 Ajax란 Asynchronous JavaScript And XML의 약자로, 서버와 클라이언트 사이의 비동기 통신을 하기 위한 일종의 방식이다. 기본적으로 HTTP는 connectless하고 stateless한데, 이러한 HTTP의 특성때문에 클라이언트에서 request를 보내고 서버에서 response를 보내면 이어졌던 연결이 끊어지게 된다. 그래서 화면의 일부 데이터만 수정하고 싶은 상황이 발생하더라도 다시 request를 보내고 response를 받아 전체 리소스를 다시 다 가져와야 하는 상황이 발생한다. 이를 해결하기 위해 만들어진 것이 AJAX라고 생각하면 된다. XMLHttpRequest 객체를 request해주는데, 이후 서버에서 JSON같은 형태의 데이터를 받아 페이지의 일부만 수정할.......
FCFS알고리즘을 보면, Ready queue에 들어오는 순서대로 CPU를 사용하게 된다. 이는 꼭 좋은 성능을 낼 수 없었고, 특히나 처음 Ready Queue에 들어오는 프로세스의 CPU 사용시간이 길 경우 AWT(평균 대기시간)이 굉장히 높아졌다. 이를 해결하기 위해 만들어진 것이 SJF(Shortest Job First)알고리즘이다. FCFS알고리즘의 문제점을 보면 알 수 있지만, 확실히 CPU Burst time이 적은 프로세스가 먼저 와야 전체적으로 AWT가 줄어든다는 것을 알 수 있다. 그래서 CPU Burst Time이 적은 프로세스 순서대로 CPU 스케줄링을 해주는 알고리즘이 바로 SJF 알고리즘이다. 예시를 들어 SJF 알고리즘의 AWT를 알아보자. 위와 같이 프로세스들이 Ready Qu.......
우선 아래와 같이 자바스크립트의 엔진이 있다. 자바스크립트 엔진은 당연히 코드를 해석하고 실행하는 역할을 할 것이다. 이 자바스크립트 엔진은 크게 메모리 힙과 콜 스택(호출 스택)으로 나뉘게 된다. 여기서 콜 스택이 하는 일은 실행 컨텍스트들을 차곡차곡 쌓는 것이다. EcmaScript 공식문서에서 정의한 실행 컨텍스트는 "실행 가능한 JS 코드블럭이 실행되는 환경" 이다. 그런데 이 글 에서 설명했던 것처럼, 자바스크립트는 함수 레벨 스코프 언어이다. 따라서 "실행 가능한 JS 코드블럭" 은 대부분의 경우 함수가 된다. (전역 코드, eval()함수로 실행되는 코드를 제외한 모든 경우이다.) 아무튼 콜 스택은 실행 컨.......
map(), filter(), reduce()는 배열 조작을 위해 사용되는 메서드들이다. 이들은 위와 같이 Arrays.prototype에 소속되어있다는 것을 확인할 수 있다. 1. Array.prototype.map() Array.prototype.map() 메서드는 배열의 요소들을 일괄적으로 변경하는 곳에 주로 사용한다. 기본 사용 방식은 아래와 같이 사용한다. 첫 번째 인자(value): 배열의 각 요소를 의미한다. 두 번째 인자(index): 배열 요소의 인덱스를 의미한다. 세 번째 인자(array): map함수가 적용되고 있는 배열을 의미한다.(자기자신) map()은 아래와 같이 사용할 수 있다. 2. Array.prototype.reduce() Array.prototype.reduce()메서드는 배열의 요소들을 다 돌면서 각 요소들을 모.......
우선 이 forEach()메서드는 for 문과 비슷하게 반복적인 기능을 구현할 때 사용한다. for 문과 forEach의 차이점이라고 한다면 forEach문은 for문의 index, 조건식, 증감연산을 정의하지 않아도 된다는 것이다. 우선 기본적인 사용방법은 아래와 같다. 1. 콜백의 첫 번째 인자(currentValue): 처리할 현재 요소 2. 콜백의 두 번째 인자(index): 처리할 현재 요소의 인덱스 3. 콜백의 세 번째 인자(array): forEach()를 호출한 배열 4. forEach()의 두 번째 인자(thisArg): 콜백 실행 시 this로 쓸 값 forEach()의 특징에는 콜백의 리턴값이 존재하지 않는것이 있다. 따라서 무언가를 리턴하더라도 undefined가 나오게 된다. 아래와 같이 사용하게.......
1. 자료구조 Set의 특징 1) 중복을 허용하지 않는다. 2) 비순차적 저장 3) 데이터가 존재하는지 탐색하는 작업을 할 때 사용. 2. Set 사용법 1) 인스턴스 생성 우선 사용방법은 아래와 같다. Set 인스턴스 생성은 아래와 같이 한다. 위 코드의 결과는 아래와 같을 것이다. 위 코드를 보면 알겠지만, value값으로 string, number 등을 모두 작성할 수 있다. 이 뿐만 아니라 아래와 같이 function, Object 등도 가능하다. 이 코드의 결과는 아래와 같을 것이다. 2) add() 메서드 new Set()키워드를 이용해 set 인스턴스를 만들고 value를 후에 추가하고 싶을 수도 있다. 이 경우 add()메서드를 이용하면 된다. 아래에 예시를 들겠다. 위와 같이 add.......
우선, ES6 부터는 Class라는 키워드를 사용함으로써, Class 오브젝트를 사용할 수 있다. 대강 아래와 같이 말이다. 하지만 이는 조금 자세히 보면 모두 prototype을 이용하여 결국 구현되었다는 것을 알 수 있다. 아래와 같은 코드의 결과를 한번 봐보자. 결국 함수가 생성되면 생기는 arguments객체, prototype객체가 class 키워드를 썼을 때에도 모두 존재하고 __proto__가 Function.prototype을 향해있는 사실또한 같다는 것을 확인할 수 있다. 아래와 같이 말이다. 그렇다면 이제 prototype을 이용하여 클래스와 비슷하게 동작하도록 코드로 만들어보자. 이렇게 만든다면 생성자 함수 Hello()에서 만든 인스턴스들은 모두 프로토타입 체이닝.......
우선 ES6부터는 Class키워드를 사용하여 클래스 정의가 가능하다. 사용법부터 간단하게 알아보자. 위와 같이 사용할 수 있다. 자바와 비교하여 한번 보자. 위를 보면 알 수 있겠지만, constructor()이 자바의 생성자와 비슷하다고 보면 된다. 이 외로는 별다를게 없어보인다. 그런데 알다싶이 자바스크립트는 프로토타입을 이용해 동작하기때문에, 자바와 전혀 다르게 동작한다. 그렇다면 이 Class키워드는 어떻게 동작하는 걸까? 아래는 아까와 같은 코드이다. 여기서 Hello클래스와 그 인스턴스인 a를 한번 콘솔로 찍어보자. 우선 console.dir(Hello)의 결과부터 먼저 보자. 결과는 아래와 같다. 위를 보면 알 수 있지만, 일반 함수가 생성되었.......
우선 클로저의 캡슐화에 대해 알아보기 전에 클로저가 무엇인지 먼저 알아보겠다. 위 사진은 자바스크립트 엔진이다. 보이는 것과 같이 메모리 힙과 콜 스택으로 나뉘게 된다. 여기서 콜 스택은 "실행 컨텍스트"라는 것들을 차곡차곡 쌓게 된다. EcmaScript 공식문서에서 정의한 "실행 컨텍스트"란 "실행 가능한 JS 코드블럭이 실행되는 환경" 이다. 이 때, 자바스크립트는 함수 레벨 스코프 언어이기 때문에, "실행 가능한 JS 코드블럭"이 의미하는 것은 대부분의 경우 함수가 된다. 여기서 예시 코드를 한번 들어보자. 위와 같은 코드가 있다고 가정해보고, 그림을 통해 어떻게 동작할지 잘 생각해보.......
1. 블록 레벨 스코프, 함수 레벨 스코프 let, var 이 두 변수선언방식의 차이점에 대해 설명하기 전에 스코프에 대해 간단하게 설명하겠다. 스코프는 말 그대로 범위이다. 변수의 접근 가능 범위정도로 생각하면 될 듯 하다. 대부분의 프로그래밍 언어는 "블록 레벨 스코프"라는 것을 따른다. 하지만 자바스크립트의 경우 "함수 레벨 스코프"라는 것을 따른다. 블록 레벨 스코프를 간단하게 설명하자면, 말 그대로 변수의 접근 가능 기준이 블록인것이다. 여기서 말하는 블록으로는 if문의 블록, for문의 블록, try-catch문의 블록 등이 될 수 있을것이다. C언어를 예시로 들어 설명하자면 다음과 같을 것이다. 위와 같은 코.......
"시스템 호출"이라고도 불리는 이 시스템 콜(System Call)은 일반적인 프로세스가 OS가 제공하는 서비스를 받기 위해 호출하는 상황을 일컫는 말이다.프로세스가 OS가 제공하는 서비스를 받기 위해 호출하는 경우의 예시를 간단하게 들어보겠다.A라는 자바 프로그램이 있다고 가정하자.A의 코드가 아래와 같이 이루어져 있다고 가정해보자.이 프로그램을 메인메모리에 올라간 뒤 이 프로세스는 hello 라는 인스턴스에 메모리를 할당해 줄 것이다.이 경우 메모리를 얻기 위해 OS에게 "Allocate" 라는 요청을 하게 된다.대략 위와 같은 그림처럼 되는 것이다.이처럼 OS가 제공하는 서비스(예를들자면 위처럼 메모리를 할당받.......
서버사이드 템플릿 엔진(Server Side Template Engine)인 EJS 를 설명하기에 앞서, 템플릿 엔진(Template Engine)이 무엇인지 먼저 설명하겠다.그림으로 간단하게 먼저 나타내어 보자면 다음과 같다.위 그림과 같이 템플릿과 데이터를 결합하여 원하는 결과를 출력해내도록 하는 소프트웨어 정도로 생각하면 된다. 여기서 템플릿은 HTML 같은 마크업같은 것들이라 보면 된다.결론적으로, 데이터와 화면을 분리하여 관리가 가능 할 수 있도록 해주는 것이다.이렇게 되면 확실히 유지보수에 용이할것이다.그렇다면 서버사이드 템플릿 엔진은 무엇일까?서버에서 DB나 API에서 데이터를 가져오고 이 가져온 데이터를 템플릿에 넣어 html을 만들어 띄.......
bcrypt모듈을 사용하려고 설치하다보면 종종 안될때가 있다.그럴 때 bcryptjs라는 모듈을 사용할 수 있다.적어도 설치하는것 때문에 스트레스받을일은 없을테니..설치는 당연히 위처럼 npm i bcryptjs를 쳐서 해준다.사용방법도 그냥 bcrypt와 사실상 똑같다.hash함수도 그대로다.저 경로로 접근하면 아래와 같이 나온다.잘 암호화 된다.위처럼 compare함수도 그대로다.비교도 무난히 잘 된다.genSalt()메서드도 bcrypt와 똑같이 사용 가능하다.그럼 bcrypt모듈에 비해 잘깔리고 잘 돌아가는 bcryptjs모듈의 단점은 뭘까?사실 bcryptjs가 bcrypt보다 훨씬 느리다.해시 암호 생성부터 bcrypt는 bcryptjs보다 3배 빠르다.따라서 bcrypt와 bcryp.......
카카오 api를 이용하기 위해 우선 아래 링크로 들어가준다. https://developers.kakao.com/들어가면 아래와 같은 화면을 볼 수 있다.로그인을 해주자.로그인을 해주고 내 어플리케이션으로 들어가면 아래와 같이 애플리케이션을 추가할 수 있다.만들면 아래처럼 나온다.들어가보면 키들이 막 떠있고 밑에 플랫폼이 있을것이다. 설정하기에 들어가준다.들어가서 아래와 같이 api를 쓸 사이트 도메인을 넣어주자.난 로컬호스트 8000번을 사용하고싶기 때문에 localhost:8000을 넣었다.이제 띄워줄 페이지에 코드를 작성해보자.<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발.......
우선 환경변수란 무엇일까?간단하게 이야기하자면 특정한 프로세스를 위하여 존재하는 키-값의 쌍 정도라고 보면 된다.이는 언제 사용할까?개발하는 도중에 정말 민감한 정보들이 코드에 들어갈 수가 있다.데이터베이스 패스워드라던가, 세션의 키값이라던가 많은 것들이 될 수 있다.이러한 정보들을 환경변수로 따로 빼놓아 사용하는것이다.우선 아래와 같이 설치해주자.그리고 .env라는 파일을 만들어주자.이 파일 내에는 아래와 같이 DB의 user명, 패스워드, db명 등을 넣어주자.환경변수를 사용하기 위해서 아래 코드를 꼭 사용해야 한다.이후 원하는 환경변수를 process.env.환경변수키값 과 같이 가져와 사용하면 된다. 예시로 아래.......
Error Code:1175mysql workbench를 사용하던 중 auto_increment 를 재정렬 하는 작업을 하다 아래와 같은 오류가 발생했다.해결 방안은 다음과 같다.workbench에서 Edit -> Preferences... 로 들어가면 다음과 같은 창이 나온다.거기서 SQL Editor로 들어간 뒤 위에 보이는 것처럼 Other에서 Safe Updates 체크를 풀어준다.이후 워크벤치를 껐다 켜면 오류가 해결된다.Error Code:1046아래와 같은 오류가 발생하였다.위와 같은 오류는 어떤 DB에 테이블을 만들 지 지정을 안해줬기 때문에 발생하는 오류이다.워크벤치를 사용할 경우 아래와 같이 스키마를 더블클릭 해준 뒤 테이블을 생성하면 된다.위 사진과 같이 그냥 생성하면 된다.
우선 프로세스란 무엇일까?컴퓨터의 구조를 대강 아래와 같이 나타내겠다.위 그림처럼 그렸을 때, 프로그램이 실행되기 위해서 우선 하드디스크에서 프로그램을 메인메모리상으로 올려야 한다.올린 뒤 CPU가 가져왔을 때 비로소 우리 눈앞에 보이는 것처럼 실행되는 것이다.일단 메인메모리에 올라가 있는 상태의 프로그램을 "프로세스"라고 한다.그리고 이런 프로세스에는 5가지 상태가 존재한다.이 다섯 가지 상태는 아래 그림과 같이 표현할 수 있다.1. New : 하드디스크에서 메인메모리로 일단 올라온 상태라고 보면 된다.2. Ready : 메인 메모리로 올라온 뒤 실행할 모든 준비가 완료 된 상태라고 생각하 면 된다.3. Running : .......
로컬 로그인 구현은 이 글 에서 다뤘었다.우선 kakao 로그인을 통한 인증을 구현하기 전에 아래 두 패키지를 설치해주자.이 kakao 인증을 사용하기 위해서는 아래 링크에 이 인증 기능을 사용하겠다고 등록을 해야한다.https://developers.kakao.com/들어가서 로그인을 해주고, 우측 상단에 "내 애플리케이션"을 눌러주자.그럼 아래와 같은 화면을 볼 수 있다.여기서 애플리케이션을 추가해주자.그리고 위 빈칸을 작성해주자.만들고 나면 아래와 같은 화면을 볼 수 있다.들어가면 아래와 같은 화면을 볼 수 있다.여기서 Rest API키를 사용 할 것이다.이제 왼쪽에 플랫폼을 누르고 웹 플랫폼을 등록해주자.아래 사진처럼 로컬호스트로 지.......
* 예전 글을 다시 작성한 글입니다.HTTP 404 Not Found는 굉장히 자주 봤을법한 오류이다.404 Not Found 오류는 접근한 URL에 리소스가 없을 경우에 발생하는 오류이다.여기서 리소스란 웹으로 따지자면 웹 콘텐츠들의 원천으로, 웹 서버 파일 시스템의 정적 파일들이라고 생각하면 된다. 리소스가 꼭 정적 파일이여야만 할 필요는 없으나, 주로 HTML파일, CSS파일, 텍스트파일, JPEG파일 등의 파일들을 말한다고 보면 된다.URL은 Uniform Resource Location의 약자로, 보이는것처럼 Location이라는 단어가 들어간다. 즉, 리소스들에게 주소(경로)를 할당하고 이를 그 주소에 맞게 찾아가는 방식으로 돌아간다고 생각하면 될 것 같다.이러한 정적.......
예전부터 종종 궁금했던 것인데, 그냥 서버를 대강 짜고 켠 후 바로 로컬호스트에 짜놓은 포트로 접근하면 HTTP 상태코드가 처음에는 200이 뜨고 그 뒤로는 304가 뜨는 이유가 궁금했었다.위 그림처럼 처음에는 상태코드가 200이 뜨는데 새로고침하면 아래 그림처럼 상태코드가 304가 뜬다.나중에 알고보니 이 이유는 브라우저의 리소스 캐싱과 관련이 있었다. 네트워크를 통하여 무언가를 가져오도록 하는 작업은 느린데다가 당연히 비용이 많이 들수밖에 없다. 따라서, 요즘의 모든 브라우저는 HTTP 캐시가 구현이 되어있다. 예전에 가져온 리소스를 캐시했다가 같은 리소스를 요청할경우 재활용하여 성능을 최적화하는 것이다. 즉, 맨 처음.......
VSCode와 Node.js 를 설치하고 간단한 프로젝트를 생성하기 위해 npm init을 쳤는데 다음과 같은 오류가 발생하였다.이는 아래와 같이 VSCode의 기본 터미널이 powershell로 설정되어 있기 때문이다.이는 기본 터미널의 종류를 바꿔주면 해결이 가능하다.우선 ctrl + Shift + P 를 눌러 아래와 같은 창을 띄워준다.이후 Terminal : Select Default Shell을 입력한다.그 뒤 위와 같은 창에서 Command Prompt를 선택해준다.이 후 터미널을 닫았다가 다시 실행하면 위와 같이 잘 되는것을 확인할 수 있다.출처 : https://somjang.tistory.com/entry/Windows-Visual-Studio-Code-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%E.......
우선 github profile을 만든다.이후 repository를 새로 만드는데 여기서 레포지토리의 이름은 닉네임과 같게 한다.그럼 위처럼 고양이가 나올것이다.그리고 위와 같이 readme를 add 해주자.그럼 위와 같이 Hi there라는 문구와 함께 아래와 같이 맨 처음 문구에 뜨게 된다.이제 프로필에 방문자 수를 띄워보자.우선 이 링크 에 들어가 아래와 같이 본인 깃허브 링크를 걸어준다.그리고 아래와 같이 마크다운을 복사하자.이를 복사해 위와 같이 아까 그 프로필 레포지토리에 복붙해넣으면 끝이다.그럼 위와 같이 나오게 된다.방문자수는 [today/total]로 표현된다고 한다.출처링크
우선 부트스트랩 로더(Bootstrap Loader)는 부트 로더(Boot Loader)라고도 불린다.설명을 위해 컴퓨터의 구조를 대강 아래 그림과 같이 그리겠다.위와 같은 상황에서 컴퓨터의 전원을 켠다고 가정해보자.처음 컴퓨터를 켤 때는 메인 메모리가 다 비워져있다. 가장 먼저 메인 메모리의 ROM 안의 코드가 동작한다.위와 같이 Bootstrap Loader라는 코드가 먼저 동작하게 된다.CPU가 이 ROM의 Bootstrap Loader라는 코드를 실행시키면 이 Bootstrap Loader는 하드디스크를 뒤져서 OS를 찾아와 메인메모리로 가져오게 된다.이 과정을 우리는 "부팅(booting)"이라고 한다.대략 과정을 그려보자면 아래와 같이 되는 것이다.결론적으로, 부트.......
우선 간단하게 컴퓨터의 구조를 아래와 같이 그려보겠다.Windows 운영체제 기준으로 컴퓨터를 부팅시킨 뒤 아이콘이 뜨고 아무것도 안하고 가정하자. CPU도 아무것도 안한다는 가정하자.우리가 이러다가 마우스를 깔짝 움직였다고 해보자.그럼 마우스에 전기 신호가 발생하는데, 이 전기신호는 CPU로 가게된다.전기 신호를 받게 된 CPU는 하던 일을 모두 중지하고 이 전기신호를 메인메모리에 적재되어있는 OS로 보내게 된다.정확히는 OS 안의 마우스에 관한 신호를 받으면 어떤 동작을 할지 나와있는 코드로 보내게 된다.우리는 마우스를 움직였으므로 마우스가 움직이는대로 모니터의 커서 화면을 옮기는 코드로 전기신호가 보내졌을 것이다.이.......
위와 같은 오류는 어떤 DB에 테이블을 만들 지 지정을 안해줬기 때문에 발생하는 오류이다.워크벤치를 사용할 경우 아래와 같이 스키마를 더블클릭 해준 뒤 테이블을 생성하면 된다.
위와 같이 id를 auto_increment로 지정한 테이블이 있다고 가정하자.그런데 이렇게 데이터를 막 넣다가 중간에 몇몇 내용이 잘못되어 중간 데이터를 삭제 후 다시 데이터를 삽입했다.그랬더니 위와 같이 2, 3을 빼먹고 4부터 시작됐다.따라서 위와 같은 경우에는, 삭제 시 재정렬을 해 주어야 한다.위와 같이 @cnt를 0으로 만든 뒤 위와 같이 update문으로 id 컬럼을 재정렬해준다. 그런 뒤 확인해보면 위와 같이 재정렬이 되어있다.이후 시작번호를 다시 지정해 (예시에서는 5) 지정한 시작번호부터 입력되게 설정한다.
1. 트랜잭션 순서 일단 간단하게 트랜잭션이 일어날 때의 순서를 나열해보겠다. 1) URL에서 브라우저가 호스트명을 추출한 뒤 이 호스트명에 대한 IP주소를 찾고 포트번호를 가져온다. 2) 이후 이 가져온 ip주소와 포트번호로 tcp커넥션을 생성한다. 3) 브라우저가 이 TCP커넥션을 이용하여 요청 메시지를 보낸다. 4) 위에서 보낸 요청 메시지에 맞는 응답을 브라우저가 읽는다. 5) 브라우저가 커넥션을 끊는다.일단 간단하게 HTTP트랜잭션의 순서를 나타내자면 다음과 같이 나타낼 수 있다.이 글의 주제인 TCP커넥션의 핸드셰이크는 위 1-2번에 속하는 내용이다.2. IP패킷, TCP세그먼트란?HTTP가 메시지를 서버로 보내려 한다고 가정하면 위.......
우선, 이 글에서 TCP 커넥션의 핸드셰이크에 대해서 설명했었다.이 글에서 말했던 것처럼, TCP커넥션 맺기를 성공한 뒤, 클라이언트가 커넥션이 잘 맺어졌음을 알리기 위해 서버에게 다시 확인 응답 신호를 보낸다고 하였다.이 때, 오늘날의 TCP는 클라이언트가 이 확인응답을 IP패킷과 함께 데이터를 보내는게 가능하다.위 사진과 같이 확인응답을 편승(piggyback)하여 IP패킷과 함께 데이터를 보낸다.1. 확인응답이란?우선, 인터넷 자체가 패킷전송을 완벽하게 보장하지는 않는다. 무슨 말이냐면, 인터넷 라우터는 과부하가 걸렸을 경우 IP패킷을 마음대로 파기가 가능하다.따라서, TCP는 성공적인 데이터 전송을 보장하기 위해 자체적인 확.......
우선, TCP의 데이터 전송속도는 TCP 커넥션이 만들어진지 얼마나 지났는가?에 따라 달라지게 된다.TCP 커넥션은 처음에는 커넥션의 최대 속도를 제한하고, 데이터가 성공적으로 전송됨에 따라 속도제한을 높여나가는데, 이를 TCP의 느린 시작이라고 한다.이 TCP의 느린 시작은 인터넷의 급작스러운 부하와 혼잡 방지를 위해 사용된다.TCP의 느린 시작은 처음에는 TCP가 한 번에 전송할 수 있는 패킷의 수를 제한하는데, 패킷이 성공적으로 전달된다면 송신자는 패킷을 추가로 더 전송할 수 있게 되는 것이다.여기서 "패킷이 성공적으로 전달된다"의 의미는 편승(piggyback)된 확인 응답을 받았는가에 대한 여부이다."편승(piggy.......