dlaxodud2388의 등록된 링크
dlaxodud2388로 등록된 네이버 블로그 포스트 수는 395건입니다.
[회고] 23.06.10 ~ 23.08.18 (우테코 레벨3 회고) [내부링크]
벌써 우테코 레벨 3가 끝나버렸다. 레벨 3는 배정받은 팀원들과 프로젝트를 2달간 진행하게 된다. 우리 팀은 여행 기록 서비스를 만들었고, 최종적으로는 아래와 같은 결과물을 만들었다. (https://hanglog.com/) 자잘한 버그들도 조금 남아있긴 하지만, 이는 레벨4때 성능최적화 관련해서도 많이 배우는지라 그 때 최적화하면서 함께 개선해나갈 듯 하다. https://github.com/woowacourse-teams/2023-hang-log/tree/main GitHub - woowacourse-teams/2023-hang-log at main 장소 기반 여행 기록 서비스, "행록"️. Contribute to woowacourse-teams/2023-hang-log development by creating an account on GitHub. github.com (스타 하나씩만 눌러주십쇼...) 아무튼, 레벨3는 지금까지 우테코를 하면서 레벨1, 레벨2와는 비교도 안되
[React] Fiber 아키텍처의 개념과 Fiber Reconcilation 이해하기 [내부링크]
다들 React를 사용하다 보면 React Fiber 라는 이름을 들어봤을 것이다. React는 Fiber라는 아키텍처를 React 16버전부터 채택하였고, 지금도 지속적으로 업데이트되고 있다. 기존의 아키텍처에 어떤 문제가 있었길래 16버전부터 갑자기 Fiber 아키텍처를 채택한 이유가 뭘까? 이 글에서는 React의 Fiber라는 것에 대해 포스팅을 해보려 하는데, 이를 이해하기 위해선 먼저 Reconcilation이 무엇인지, 15버전까지의 Stack Reconcilation이 무엇인지 알아야 한다. 1. Reconcilation이란? 먼저 React의 Reconcilation이 대체 무엇인지 한번 알아보자. 아래 코드를 보자. React 코드를 작성하다 보면 한번쯤은 반드시 만나봤을 코드일 것이다. ReactDOM.render(<App />, document.getElementById('root')) <App/>은 우리가 작성한 엘리먼트일텐데, 이 "엘리먼트" 라는건 정확하게
[React] 성능을 최적화할 수 있는 10가지 방법 [내부링크]
React 코드로 작성된 서비스를 사용자가 쓴다고 해보자. 사용자가 느꼈을 때 어떤 부분들이 불편하다고 느낄 수 있을까? 이를 최적화하기 위해 어떤 개선점들을 찾을 수 있을까? 우아한테크코스 레벨4 미션에서 다루는 내용들을 기반으로 학습한 내용과 해결한 방법에 대해 작성해보고자 한다. 0. 최적화 작업을 하기 전 고려해야 할 점 내용들을 본격적으로 다루기 전에, 미션을 통해 가장 크게 얻은 내용부터 써보고자 한다. 당장 최적화를 하는것에 내 노력과 시간을 쏟기 전에 "꼭 최적화가 필요한가?"를 고민해보는게 좋을 것 같다는 생각이 들었다. 결국 우리가 최적화를 하고자 하는 이유는 "사용자 입장에서 불편함"을 개선하기 위함이기 때문이다. 프론트엔드 개발자로서, 어쩌면 이론상 너무 비효율적으로 동작한다고 하더라도 사용자가 전혀 불편함을 느끼지 못한다면, 최적화에 내 노력과 시간을 쏟는 것이 언제나 정답이 아닐 수도 있다는걸 항상 염두에 둬야한다는 생각이 들었다. * 최적화를 하며 고려할
[Docker] Let's Encrypt를 이용한 Docker 컨테이너 내 Nginx에 SSL/TLS 인증서 적용하기 [내부링크]
우테코 프로젝트에서 Nginx를 Docker 컨테이너에 올려 사용하려고 개인 ec2에서 공부하던 도중 https 접속은 불가능한 것을 확인했다. https 접속을 위해서는 독립된 인증 기관(CA)에서 SSL/TLS 인증서를 획득해야 한다. 웹 사이트가 신뢰를 구축하기 위해 데이터를 교환하기 전에 브라우저와 인증서를 공유하기 때문이다. 우리가 사용하고자 하는 도커 컨테이너 내 nginx에 SSL/TLS 인증서를 적용하는 방법은 크게 두 가지로 나뉜다. 1. 자체 서명된 인증서를 사용하는 방법 2. 신뢰할 수 있는 인증 기관에서 발급된 인증서 사용 이 두 가지 방법 중 "신뢰할 수 있는 인증 기관에서 발급된 인증서 사용"으로 https 접속을 가능하게 만들어보자. 우선 신뢰할 수 있는 SSL 인증서를 생성은 "Let's Encrypt"를 사용하여 생성할 수 있다. "Let's Encrypt"가 바로 CA(Certificate Authority)이다! 우리는 Let's Encrypt에서
[Docker] Docker 환경에 Nginx를 Reverse Proxy로 구축하기 [내부링크]
최근 우테코에서 팀 프로젝트를 진행하며 프론트엔드 배포 환경을 구축해보았다. 팀당 EC2가 3대씩 주어지는 상황으로(public 두 대, private 한 대), 백엔드 팀원들과 합의 하에 CI/CD를 담당할 Jenkins, 백엔드 + 프론트엔드, DB 이렇게 EC2 각 3대를 할당했다. 그래서 우선 ec2 한 대에 nginx를 깔아두고 막 이것저것 설정해두고 했었는데, 하다보니 보기에 아주 어지러웠다. 어떤 파일은 /etc/nginx/conf.d/nginx.conf에, 어떤 파일은 /etc/nginx/sites-available/default에, 서빙해줄 파일들은 /var/www/html에 있고 로그들이 들어가있는 파일은 또 다른 경로에 있었다. Nginx를 설치하니 이 못된 Nginx는 필요한 파일들을 여기저기 흩뿌리고 다니니, 이런 경로들을 하나하나 찾아서 막 수정해주려니 아주 어지러웠다. 그래서 EC2의 Docker에 Nginx를 올렸다. 이후 Docker 컨테이너에 올라간
[오류 모음] Jenkins를 이용한 빌드 작업 도중 EC2가 멈추는 문제 해결 (스왑메모리 할당) [내부링크]
프론트엔드 CI/CD를 위해 개인 ec2에 jenkins를 깔고 빌드 작업을 하던 도중 ec2가 멈췄다. RAM 설정을 아주 낮게 해뒀기 때문이다. 아래 명령어를 치면 확인할 수 있다. $ free -h 램 1.8으로는 어림도 없다. 스왑메모리를 설정해 주어야 한다. 먼저 스왑메모리 파일부터 생성해주자. 프론트엔드 코드를 빌드할거니 2기가정도면 된다. $ sudo dd if=/dev/zero of=/swapfile bs=1M count=2048 이후 스왑 파일의 권한을 수정해주자. $ sudo chmod 600 /swapfile 이렇게 만든 스왑 파일을 스왑 영역으로 설정해야 한다. $ sudo mkswap /swapfile 이후 변경사항을 /etc/fstab에 반영해야 한다. $ sudo vi /etc/fstab 아래 내용을 파일 맨 아래에 추가해주자. $ /swapfile none swap sw 0 0 이후 free -h 를 확인하면 아래와 같이 스왑메모리가 잘 할당된것을 확인할
[Jenkins] Jenkins + Docker를 이용한 Web Hook 방식의 CI/CD 구축하기 [내부링크]
최근 우테코 팀 프로젝트에서 프론트엔드 CI/CD 파이프라인을 구축하고 있다. 아래와 같은 구조로 구축해보려 하는데, 공부한 내용을 간단하게 정리해보고자 한다. 위와 같은 구조는 아니고, 이 글에서는 간단하게 클론/빌드하는 파이프라인 만들고 push 시 webhook으로 트리거하는 과정까지 작성해보았다. 1. Docker 컨테이너 내 Jenkins 설치 먼저 docker가 깔려있다는 가정 하에 진행하겠다. docker jenkins 이미지를 받아오자. $ sudo chmod 006 /var/run/docker.sock $ docker pull jenkins/jenkins:jdk17 이후 Docker 이미지를 빌드하기 위한 지시사항을 담고 있는 파일인 ./dockerfile/Dockerfile을 함께 만들어준다. FROM jenkins/jenkins:jdk17 USER root RUN apt-get update &&\ apt-get upgrade -y &&\ apt-get instal
[Jenkins] 특정 Label의 PR이 Merge되었을 때만 CI/CD 파이프라인 트리거하기 [내부링크]
우테코 프로젝트에서 CI/CD 파이프라인을 구축한 뒤 "FE"가 달린 PR이 머지되었을 때만 CI/CD 파이프라인이 트리거되도록 하고 싶었다. 아래와 같이 설정했다. 가장 먼저 해야 할 것은 Generic webhook trigger 플러그인을 받아야 한다. Jenkins설정에 들어가서 Plugins 에 들어가 Generic webhook trigger 플러그인을 받자. Available plugins들어가서 받아주자. 그 다음은 우리가 작성했던 파이프라인의 Configuration에서 Build Trigger 부분을 찾아간다. 위와 같이 클릭해주고 "Post content parameters" 를 추가해 주어야 한다. 위 3가지를 집어넣어주어야 한다. Label과 Branch, Merge가 된 상태인지를 webhook에서 알아내야 하기 때문이다. 이제 CI/CD가 트리거될 조건을 작성해주자. 위에서는 머지되었으며, 브랜치가 develop브랜치이며 Label에 "FE" label이
[React + Express] JWT를 이용한 토큰 인증 방식 구현하기 [내부링크]
JWT를 이용하여 토큰 인증 방식을 구현하는 글을 작성해보려 한다. 먼저, 토큰 방식을 왜 쓰는지부터 알아보자. 1. 토큰 기반의 인증을 사용하는 이유? 이를 이해하기 위해서는, 세션 기반의 인증 방식이 어떻게 이루어지는지에 대해 알아야 한다. 세션 기반의 인증 방식의 단점을 보완하고자 생긴 방식이 토큰 기반 인증 방식이기 때문이다. 물론 세션 기반 인증 방식의 단점을 보완하고자 토큰 방식이 생겼다고, 토큰 방식이 세션 방식보다 좋다는 이야기는 절대 아니다. 각각 장단점이 존재하며, 프로젝트의 규모나 특성에 따라 방식은 정해가면 되지 않을까 싶다. 아래는 세션 기반의 인증 방식을 정리한 그림이다. 세션 기반 인증 방식 위와 같이 클라이언트가 로그인 요청을 보내면, 로그인된 사용자들에 대한 정보들을 백엔드 내의 세션 스토리지에서 유지하고 있는 형식이다. 이렇게 되면 백엔드에서는 어떤 사용자들이 로그인되어있는지 확인하기 쉽고, 사용자에 대한 데이터가 클라이언트의 변조에 영향을 받기 어렵
[AWS] S3 + CloudFront + ACM으로 이미지 배포환경 구축하기(Route 53 사용 X) [내부링크]
우테코에서 프로젝트를 진행 도중, 원래는 S3 사용 허락을 받지 못한 상황이라 원래는 아래와 같은 이미지 배포환경을 구축했었다. 위에 보이는 EC2들의 디스크 용량은 20GiB이다. 그런데, 서비스 정책 상 이미지를 한 장에 최대 10MiB까지 올릴 수 있었다. 여기서 한 사용자가 올릴 수 있는 사진의 양이 한두장 수준이 아닌지라, 이미지가 올라갈 일이 굉장히 잦았다. 10MiB크기의 사진이 2000장만 올라가도 EC2가 디스크 용량 초과로 실서버에 지장이 갈 수 있는 상황이었기에, 요청을 해서 S3, CloudFront, ACM을 얻어냈다. 다만, Route 53은 사용할 수 없었다. 결론적으로 EC2 + Nginx를 이용한 이미지 배포 환경에서 S3 + CloudFront + ACM을 사용한 이미지 배포 아키텍처로 전환하였다. 여기서 사용했던 방법을 개인 aws계정에서 다시 해보는 방식으로 포스팅을 해보려 한다. 1. s3 버켓 생성하기 이런 식으로 만들어주고, 이미지 저장소로
[React] 함수 컴포넌트와 클래스 컴포넌트의 근본적 차이 [내부링크]
우리는 React를 사용하며 일반적으로 함수 컴포넌트를 자주 사용하곤 한다. 함수에서 hook을 사용할 때 말고, 함수 컴포넌트와 클래스 컴포넌트는 근본적으로 어떤 차이점이 있는걸까? 각 컴포넌트들이 state, props같은 데이터들을 조작할 때의 패러다임을 기준으로 한번 비교해보고자 한다. 아래 글을 많이 참고했다. https://overreacted.io/how-are-function-components-different-from-classes/ 위 글에도 그대로 있는 내용인데, 이 글의 결론은 이 한줄로 모든 게 설명 가능하다. "함수 컴포넌트는 렌더될 값을 캡쳐한다" 1. 서론 이 한 줄의 글만 보면 이해하기 쉽지 않을테니, 예제로 어떤 차이인지 간단하게 알아보자. 아래와 같은 함수 컴포넌트가 있다고 해보자. 버튼을 누르면 상태가 변경되고 2초뒤에 상태가 콘솔에 찍히는 예제이다. import React, { useState } from "react"; const App =
[회고] 2023년 05.01 ~ 06.09 회고 (우테코 레벨2 회고) [내부링크]
저번 회고글에서 자주 회고글이라도 포스팅해야겠다 생각해놓고 무려 한달이 훌쩍 넘어 레벨 2가 끝나고 나서야 회고 포스팅을 쓰게 되었다. 나는 미션에 치여사는편이었는데 자주 포스팅하는분들 보면 항상 대단하다 느꼈다. 그래도 매일 간단한 형식으로의 회고는 자주 했다. (한두번 빼먹기도 했지만 ㅎㅎ..) 1. 레벨 2 회고 레벨 2를 전체적으로 돌아보자면, React를 다루는 것 자체에 대한 점은 많이 성장했다고 생각한다. 다만 아직 많이 부족하다고 느끼며, 각 미션에서 추구하고자 했던 학습 목표들을 온전히 내 것으로 만들었다고 생각하기에는 조금 부족했다고 생각한다. 전반적으로는 나 스스로에게 아쉬움이 좀 많이 남는 레벨이었던 것 같다. 아래는 5월 이후 레벨2 회고를 하며 어떤 점들을 고민하거나 공부했을까 간단하게만 돌아봤다. 1) UX 정말 사소한 점에서 사용자 경험을 증가시킬 수 있다는 점을 느꼈는데, 바로 텍스트였다. 아래 두 글이 정말 인상깊었다. https://toss.tech
[Node.js] CommonJS 방식은 왜 트리쉐이킹이 일어나지 않는걸까? [내부링크]
CommonJS 방식 (require)과 ESModule 방식(import)의 차이는 뭘까? 왜 기존의 CommonJS 를 두고 ESModule 방식을 채택하고자 하는걸까? "CommonJS 방식은 트리쉐이킹이 일어나지 않는다" 라는 이야기를 어쩌면 들어봤을 수도 있다. 왜 트리쉐이킹이 일어나지 않는다는걸까? 아니면 좀 더 근본적으로, 트리쉐이킹이 일어나지 않았을 때 뭐가 문제가 된다는 걸까? cjs 방식이 무엇인지에 대해 먼저 다룬 뒤, 아래 목차대로 글을 써 보려 한다. CJS(Common JS) 방식이란? module.exports 와 exports 모듈 require : 동기와 캐싱 그래서 왜 tree shaking이 일어날 수 없는건데? 그렇다면 왜 Node.js는 tree shaking이 불가능한 형태로 cjs를 만들었을까? 결론 1. CJS 방식이란? CJS(CommonJS) 방식에 대해 이야기하기 전에, 먼저 "모듈"이란 뭘까? Node.js에서의 모듈은 그냥 각각의
[오류모음] Next.js13 Github Actions 배포 시 Module not found: module.css 오류 해결(오타 문제 아닐 경우) [내부링크]
Next.js 13버전 이번에 처음 써보고 있는데, 쓰면서 Github Actions로 gh-pages에 자동 배포를 걸어놨다. 근데 어느 순간부터 배포시 빌드 오류가 계속해서 발생하는 걸 확인할 수 있었다. 로컬에서 돌아가는것도 전혀 문제 없고, 오타도 아무리 찾아봐도 없었다. (react쓸 때 별 문제 없던 부분인데...) 로컬에서 build 할 때도 문제가 없고, 개발하면서는 잘 import 해와서 '왜 module not found지?' 생각하는데 시간을 많이 쏟아봤다. 웃긴건 어떤때는 잘 찾아오고 다른 module css를 못찾는 경우가 있었다. 우선 이는 module css 명을 styles.module.css로 수정하여 해결하긴 했다. (그냥 next 13이 이런건지...) 컴포넌트에서 import 해올 때 import styles from '~~~' 처럼 해와서 그런건지... 불러오는 이름이랑 같아야하는건가 싶기도 하다.
[도서 리뷰] <쉽게 시작하는 타입스크립트> 리뷰 [내부링크]
최근 커리어리에서 어쩌다 아래 글을 읽은 적이 있었다. https://joshua1988.github.io/web-development/tech-book-makes-money/ 기술 서적은 돈이 되는가? 기술 서적 집필에 관한 모든 것. 저자 인세에 대한 비밀. 집필 후기. 쉽게 시작하는 타입스크립트 도서 소개 joshua1988.github.io 그래서 '캡틴판교님이 서적을 출간하셨구나' 알고만 있었는데, 좋은 기회가 생겨 이 책을 리뷰할 수 있게 되었다. 시중에 있는 타입스크립트 책을 몇 권 읽어본 적이 있는데, 읽어봤던 책들과는 다른 이 책만의 특징을 몇 가지를 추릴 수 있었다. 1. 실습할 수 있는 내용이 많다. 2. 문법상으로 가능은 하나 좋지 않은 경우, 코드 작성 시 좋은 방향을 함께 알려준다. 3. 그림 자료를 이용한다. 1. 실습할 수 있는 내용이 많다 개발 공부를 했던 분들이면 잘 알겠지만, 특히 프로그래밍 언어의 경우 단순히 책만 보고 해서는 체화가 안된다. 본인
[React] CRA 없이 React 개발환경 구축하기 [내부링크]
React를 CRA 없이 구축하는 내용을 포스팅해보고자 한다. 서론은 건너뛰고 구축 순서부터 나열해보겠다. 구축 순서 1. package.json 생성 2. React, Typescript 설치 3. tsconfig 생성 및 설정 4. webpack 설정 5. package.json 설정 6. public에 index.html 넣어주기 7. css 사용하기 (번외). msw 설정 (선택) 1. package.json 생성 package.json부터 생성해주자. > yarn init -y 설명은 생략하겠다. 2. React, Typescript 설치 react와 typescript를 쓸 것이니 설치해주자. yarn add react react-dom yarn add -D typescript @types/react @types/react-dom 3. tsconfig.json 생성 및 설정 먼저 ts-loader를 받아주자. yarn add ts-loader 이후 Typescript를 사
[오류 모음] Storybook에서 SVG 사용 시 Failed to execute 'createElement' on 'Document': The tag name~~ 오류 해결 [내부링크]
webpack으로 설정한 프로젝트에서 svg를 사용하려니 오류가 나서 "@svgr/webpack" 플러그인을 설치한 후 웹팩 설정을 해 주었다. module: { rules: [ { test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }, // ... 이후 d.ts에서 타입도 다 지정해주었다. declare module '*.svg' { import React from 'react'; const SVG: React.VFC<React.SVGProps<SVGSVGElement>>; export default SVG; } 로컬 그랬더니 로컬에서는 잘 돌아가는데, 스토리북에서 아래와 같은 문제를 만났다. 로컬에서는 웹팩 설정을 해주어 svg를 잘 읽어오지만, 스토리북에서는 이상하게 경로명으로 읽어오는 상황이었다. 결론부터 이야기하자면 storybook의 main.ts에서 webpackFinal 속성을 수정하여 해결할 수 있었다.
[도서 리뷰] <현장에서 바로 써먹는 리액트 with 타입스크립트> 리뷰 [내부링크]
우테코 레벨3가 진행되는 도중, 좋은 기회가 생겨 이 책을 리뷰할 수 있게 되었다. 제목은 현장에서 바로 써먹는 리액트 with 타입스크립트이다. Previous image Next image 책 표지를 보면 알 수 있지만, 부제목이 있다. 바로 "리액트와 스토리북으로 배우는 컴포넌트 주도 개발"이다. 결론부터 이야기하자면 정말 "현장에서 바로 써먹는" 이라는 제목에 어울리는 것 같다. 어느정도 리액트에 대해 알고 있으면 좋은 내용들을 많이 얻을 수 있을 것 같다. 물론 리액트를 모른다고 읽기 힘들거나 그런 건 아니다. 위에서 말한 것과 같다보니 책에서 js나 html, css같은 기초적인 내용은 다루지 않는다. Typescript 자체도 깊게 다루지는 않는다. 다만, html, css, js정도를 알고 Typescript만 모르는 상태라면, 충분히 읽고 이해할만 하다. 책 초반부에 보면 React에 관한 내용이 나오긴 한다. 리액트를 아예 모르더라도 읽지 못할 정도는 아닐 것 같다
[Nginx] EC2+Nginx로 배포된 React(SPA) 프로젝트에서 Route 지정 문제 해결하기 [내부링크]
요즘 우테코 팀 프로젝트에서 React 코드도 짜고 백엔드 팀원들과 배포환경 세팅 및 CI/CD도 구축해보고 있다. 기본적으로 팀당 EC2가 3대씩 주어지고(public 두 대, private 한 대), 이 3대를 이용하여 CI/CD와 백엔드 프론트엔드, DB를 구축해야 하는 상황인데, S3를 부여받을 수 있는 확률이 매우 낮은 듯 하다. EC2를 DB 한 대에 부여하고 Jenkins에도 EC2 한 대를 부여해야 하는 상황이기에, 남은 한 대에 React 배포와 백엔드 서버를 배포해야 하는 상황이 되었다. 따라서 남은 EC2 한대는 프론트에서 api 요청 시 Nginx를 통해 포트 포워딩을 하여 리버스 프록시 형태의 인프라를 구축하지 않을까 싶다. (나머지 ec2들끼리는 ssh통신으로 어찌저찌 되지 않을까...아님말고...) 대충 한 대는 이런느낌...? 그렇기에 React 프로젝트 배포를 연습삼아 먼저 EC2 한 대에 Nginx를 깔아 사용하게 되었다. (당장 CI/CD 파이프라인
[Nginx] Nginx를 이용한 React 배포 및 Reverse Proxy 서버 구축하기 (EC2 + Nginx + express) [내부링크]
1. Reverse Proxy란? EC2 한 대에 백엔드 코드와 프론트엔드 코드가 동시에 올라간다고 해보자. 보안 그룹 설정에서 22번 포트, 80번 포트, 443번 포트를 제외한 모든 포트는 기본적으로 거부 정책이 적용되어 있다. ec2의 public IP가 1.2.3.4라 가정한다면, 1.2.3.4:80 혹은 1.2.3.4:443으로 접근했을 때 Nginx는 React의 빌드된 파일들을 사용자에게 서빙해줄 것이다. 사용자가 웹 페이지를 볼 수 있게 되는 것이다. 그런데 만약 빌드된 React 파일에 백엔드로 보내는 fetch요청이 있었다고 해보자. 그런데 위에서 이야기했던 것처럼 백엔드는 프론트 코드가 올라가 있는 같은 EC2에 서버를 켜게 된다. 8080 포트에 백엔드 코드를 돌리기 시작했다고 해보자. 그럼 fetch요청은 코드에서 fetch('1.2.3.4:8080/~~~~') 와 같이 요청을 해야 할 것이다. 그러나 가장 처음 이야기했던 조건처럼, 22번 포트, 80번 포트
[회고/계획] 2023년 01월 회고 [내부링크]
한달만에 쓰는 회고글인데, 우테코가 시작하기 거의 직전이기에 1월 회고글을 한 번 쓰려고 한다. 아래는 저번 회고글 내용 중 일부이다. 2022년 회고글을 작성하며 23년 1월에 대한 계획을 세웠었었다. 저번 회고글 내용 1달 전에 작성했던 내용들을 보면, 브라우저인 chromium과 엮어서 react를 한 번 공부해볼 계획을 세웠었다. 결론적으로는 미루고 미루다 1월 말이 되어서야 공부한 내용을 포스팅할 수 있었다. 1월 초에 반짝 열심히 하다가 1월 말에 또 반짝 열심히 하고 1월 중순은 그냥 편하게 공부했던 것 같다. 사실 공부하면서 포스팅하고 싶던 내용이 몇 개 있었는데 막상 쓰려하면 자꾸 내용의 흐름들이 안잡히거나, 의문점 해결이 안돼서 포스팅을 할 수가 없었다. 머릿속에서 의문이 해결되지 않으니 자연스럽게 포스팅하다 임시저장하고 미루고, 침대에 누워버리기를 반복했던 것 같다...ㅎ 그렇게 임시저장 포스팅만 5개다. 알고리즘 공부는 이전 회고글에서 잠시 쉬어야겠다고 했었고,
[JavaScript] 프로토타입(Prototype)과 프로토타입 체인(Prototype Chain) [내부링크]
무려 3년 4개월만에 다시 작성하는 Prototype에 관한 글이다. 최근에 다른 사람과 Prototype에 관한 이야기를 잠깐 할 일이 생겨 예전에 내가 썼던 글을 어쩌다 볼 일이 있었다. 그런데 지금 보니 글의 흐름도 너무 마구잡이처럼 느껴지기도 하고, 공개해두기 부끄럽기도 했던지라 이 참에 다시 한 번 작성해 보려고 한다. 1. 선행 지식 먼저 JS의 prototype에 대해 이해하기 위해, 선행되어야 하는 지식이 몇 가지 있다. 왜 이런지에 대해 이해해야 하는 내용이라기보단, 그냥 '그렇구나~' 하고 넘어가면 되는 내용들이다. 자바스크립트에 존재하는 모든 Reference Type은 모두 "객체"이다. 자바스크립트의 함수 또한 객체이며, JS의 함수는 "일급 객체"이다. 자바스크립트의 모든 객체는 "반드시" 함수를 통해 생성된다. 위 딱 세 가지만 짚고 넘어가자. 먼저 자바스크립트는 크게 2가지 타입으로 분류된다. number, string과 같은 Primitive Type과
[BOJ 13418] 학교 탐방하기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/13418 13418번: 학교 탐방하기 문제 국민대학교 홍보대사 국희는 여름방학을 맞아 고등학생들을 대상으로 학교 내부에 있는 건물을 소개해주는 일을 하게 되어 학교 건물을 차례로 소개할 수 있는 이동 경로를 짜보기로 하였다. 국민대학교는 북한산의 정기를 받는 위치에 있어 건물 간 연결된 길이 험난한 오르막길일 수도 있고, 내리막길일 수도 있다. 국희는 먼저 입구를 기준으로 건물 간 연결된 도로가 오르막길인지, 내리막길인지를 파악하여 오르막길인 경우 점선, 내리막길인 경우 실선으로 표시하였다. 그림 1 건물을 구분하기 쉽도록 번호를 붙였고, 입구에는 숫자 0 을 붙이기로... www.acmicpc.net 일반적인 MST 문제였다. 최대 스패닝트리를 하나 구성하고, 최소 스패닝트리를 하나 구성한 뒤, 오르막 길의 수를 카운트한다. 카운트한 값들을 제곱하여 최대 - 최소 를 하면 결과를 얻어낼 수 있다. const [[N, M],
[우아한테크코스 학습로그] 초기 페이지 로딩 시 CSS 깨짐 현상 발생 원인 - 레벨 1 로또미션 [내부링크]
이번 글은 우아한테크코스 활동 중 하나인 학습로그에 관한 글이다. 1레벨 로또미션 도중 발생했던 경험에 대해 작성해보려 한다. 로또 미션에서 도메인 로직을 유지한다는 조건으로 콘솔에서 웹뷰로 옮겨 진행하는 미션을 진행하였다. 많은 크루원들이 굉장히 다양한 방식으로 코드를 작성하였는데, 그 중 일부 케이스에서는 페이지를 최초 로딩했을 때 CSS가 약 0.5초간 깨지는 현상이 발생하는 케이스들이 있었다. 이 원인에 대해 작성하고 내 해결방법에 대해 작성할 계획이다. 1. 초기 페이지 로딩 시 CSS가 잠시 깨져보이던 상황에 대한 원인 결론부터 말하자면 이는 웹팩 플러그인인 style-loader, css-loader 때문이다. step2.config.js 부분을 보면 style-loader와 css-loader를 사용한 것을 알 수 있다. 각 플러그인들에 대해서 간단하게만 알아보자. css-loader : js 파일에서 css를 불러오기 위해 사용되는 플러그인. 각 css들이 컴포넌트
[FE] 브라우저의 렌더링 파이프라인 (Chromium) [내부링크]
최근 브라우저 렌더링 파이프라인을 주제로 테코톡 발표를 했다. 사실 예전에 썼던 글이 하나 있긴 한데, 발표를 위해 다시 공부를 하다 보니 예전에 썼던 글에 미흡한 부분이 많다는 점을 느꼈다. 무엇보다 과정 중 일부가 바뀌었는데, 공식 자료 중 일부가 레거시가 된 사실을 모르고 작년에 공부를 했던 것을 확인했다. 테코톡 발표에서 한정된 시간으로 인해 제대로 다루지 못한 내용들이 많았기도 해서, 이참에 새로 글을 작성해보려 한다. 1. Chromium의 멀티 프로세스 아키텍처 Chromium의 렌더링 파이프라인에 관한 내용을 이야기하기 전에, 먼저 Chromium의 멀티 프로세스 아키텍처에 대한 이야기를 해야한다. 위 사진에서 보이는 것처럼, 크로미움을 하나 켰다. 일반적인 하나의 프로그램을 실행한다면 하나의 프로세스가 생기는게 일반적이다. 그런데 작업관리자에서 보면 우리는 하나의 크로미움을 켰음에도 여러 개의 프로세스가 생긴 걸 확인할 수 있다. 브라우저는 기본적으로 정말 많은 동작
[회고/계획] 23.02.01 ~23.03.31 회고 [내부링크]
우테코 시작 직전에 작성했던 회고글을 마지막으로, 두 달 만에 작성하는 회고글이다. 우테코 시작한게 엊그제 같은데, 벌써 레벨 1이 끝났다. 시간 흐르는 속도가 빨라도 너무 빠르게 느껴진다. 저번 회고글에 썼던 내용인데, 당시에는 제대로 성장하지 못할지도 모른다는 두려움이 컸었다. 레벨 1을 마친 지금은 당시 걱정했던 부분이 크게 느껴지지 않는다. 직접 우테코를 겪어보니, 반드시 성장할 수 밖에 없는 환경이라는 생각이 들었다. 생활적인 면에 있어서는, 우테코 일정이 전반적으로 매우 빡빡해서 놀 생각을 할 수도 없었다. (주 5일중 정시퇴근을 2일정도 하면 많이 한 게 아닌가 싶다.) 공부하는걸 놓을 수 없는 환경인데, 주변 크루원들이 워낙 열심히 공부하다보니 전반적으로 자극을 많이 받았던 것 같다.(경쟁과는 거리가 먼 자극이다.) 환경의 중요성을 정말 크게 느꼈던 두 달이었다. 이전 회고글에서 작성하지 않았던 내용인데, 닉네임은 슬링키로 정했다. 큰 뜻이 있는 건 아니고, 그냥 우테
[회고] 2023년 04월 회고 [내부링크]
1. 회고 관련한 고민 저번 레벨1 회고글을 쓰면서 느낀 점이 하나 있다. 2달만에 회고를 쓰려니깐 뭘 했었는지 하나도 기억이 안나더라. 그렇게 또 정신없이 살고 있었는데 갑자기 크루원들이 포스팅스터디 하자고 하더라. 주기는 최소 2주에 한 번이다. 블로그를 공부할겸 쓰기 시작한지 4년이 넘었는데, 어느 순간부터는 '퀄리티가 낮은 글은 쓸 바에는 좀 더 다듬고 좋은 글을 쓰기 위해 노력하자' 는 생각이 많이 들었다. 이 생각은 여전하긴 한데, 뭘 써야 좋을지 주제를 찾기 쉽지 않더라... 이 때문에 2주에 한번씩 쓰자는 게 너무 부담스러워서 거절했었다. (다른 한 편으로는 공부할때 써먹을라고 블로그 시작해서 군대에서도 생각없이 공부한거 써댔었는데, 지금은 너무 자의식이 강해진 것 같다.) 그러다 밤에 누워서 생각해보다 문득 이런 생각이 들었다. '레벨1 회고 하면서 뭐했었는지 하나도 기억 안났었는데, 과연 레벨 2 끝나고 이게 개선될까?' 레벨 1 끝나고 회고글을 쓰며 뭘 했는지 꾸
[TypeScript] 타입스크립트 컴파일러의 동작 방식 [내부링크]
최근 우테코에서 미션을 진행하며 TypeScript + React를 사용하고 있다. 자주 사용하다보니 타입스크립트 컴파일러의 동작 방식이 궁금해졌다. "tsc" 라는 명령어를 사용해 .ts파일에서 .js파일이 만들어지는 전반적인 과정을 한번 정리해 보려고 한다. 간단하게 컴파일 과정에 대해 요약하자면 아래와 같은 순서로 이루어진다. 1. tsconfig.json 파일 읽기 2. PreProcess 과정 (import 된 파일들 다 읽어오기) 3. Parse (타입스크립트 파일 AST로 변환) 4. Binder (타입스크립트 AST 기반으로 symbol table 생성, flow node 데이터 생성) 5. Checker (AST, Symbol Table 이용하여 타입 체킹(binder에서 생성) ) 6. Transform & Emit (타입스크립트 AST 재변환 후 결과 파일 반환) 1. tsconfig.json 파일 읽기 먼저, 타입스크립트 컴파일러는 tsconfig.json 파일
[React] Class형 컴포넌트에서 Event 바인딩을 해주지 않으면 왜 오류가 날까? : React.createElement의 동작방식 [내부링크]
React에서 Class를 사용한 컴포넌트 기준의 라이프사이클에 대해 포스팅을 하나 하려고 예제를 짜던 중, 궁금한 점이 하나 생겼다. React에서 Class형 컴포넌트를 이용해 코드를 짜 봤다면 알겠지만(요즘은 대부분 함수형 컴포넌트를 쓰지만...), Class형 컴포넌트의 constructor의 경우 아래 코드와 같이 초기 state와 event를 바인딩 해줘야 한다. class Example extends React.Component { constructor(props) { super(props); this.state = { number: 0, }; this.handleNumber = this.handleNumber.bind(this); } handleNumber() { console.log(this.state.number); this.setState({ number: this.state.number + 1, }); } render() { return <button onCli
[React] Class형 컴포넌트와 함수형 컴포넌트의 생명주기(LifeCycle) [내부링크]
React UI 구성 단위는 Component이다. 이 Component는 생명 주기(Life Cycle)를 가진다. 크게 Mount -> Update -> Unmount 의 생명주기를 가지는데, 각각에 과정에서 다른 메서드들이 호출된다. Class로 생성한 Component와 함수로 생성한 Component의 생명주기 메서드들에 대해 가볍게 정리해보려 한다. 1. Class형 컴포넌트 먼저 class형 컴포넌트이다. 아래 그림을 참고하며 알아보자. 1-1. Mount 먼저 Mount이다. Mount 과정의 경우 Component가 새롭게 생성되는 과정이다. import React from 'react'; class MountExample extends React.Component {} 위처럼 class로 정의된 component의 결과로 나온 Element들은 최종적으로 Virtual DOM에 삽입되고, Virtual DOM을 이용해 실제 DOM까지 업데이트 하게 된다. 이런 일련
[BOJ 1939] 중량제한 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1939 1939번: 중량제한 1939번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 게시판 중량제한 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 128 MB 28611 7540 4672 25.178% 문제 N(2 ≤ N ≤ 10,000)개의 섬으로 이루어진 나라가 있다. 이들 중 몇 개의 섬 사이에는 다리가 설치되어 있어서 차들이 다닐 수 있다. 영식 중공업에서는 두 개의 섬에 공장을 세워 두고 물품을 생산하는 일을 하고 있다. 물품을 생산하다 보면 공장에서 다른 공장으로 생산 중이던 물품을 수송해야 할 일이 생기곤 한다. 그런데... www.acmicpc.net 마지막 줄에 넣어주는 출발섬에서 종착섬까지 갈 때, 옮길 수 있는 최대한의 중량을 구하는 문제다. 문제를 보면 알 수 있겠지만, 두 섬을 연결하는 경로는 항상 존재한다고 했다. 연결이 끊겨져 있는 경우는 없다는 말이다. 이 문제는 최소
[BOJ 1245] 농장 관리 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1245 1245번: 농장 관리 1245번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 게시판 농장 관리 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 1977 835 680 44.386% 문제 농부 민식이가 관리하는 농장은 N×M 격자로 이루어져 있다. 민식이는 농장을 관리하기 위해 산봉우리마다 경비원를 배치하려 한다. 이를 위해 농장에 산봉우리가 총 몇 개 있는지를 세는 것이 문제다. 산봉우리의 정의는 다음과 같다. 산봉우리는 같은 높이를 가지는 하나의 격자 혹은 인접한 격자들의 집합으로 이루어져 있다. (여기서 "인... www.acmicpc.net 그래프 탐색 문제다. 8방향 모두 탐색해야 한다는 점에 유의하며 풀면 된다. 일단 모든 위치를 탐색하는 방식으로 문제를 풀되, 한번 방문한 위치는 다시 탐색할 필요가 없기 때문에 들어간 위치는 무조건 체크해둔다. DFS를 탐색할 때
[BOJ 14923] 미로 탈출 (Node.js) [내부링크]
https://www.acmicpc.net/problem/14923 14923번: 미로 탈출 문제 홍익이는 사악한 마법사의 꾐에 속아 N x M 미로 (Hx, Hy) 위치에 떨어졌다. 다행히도 홍익이는 마법사가 만든 미로의 탈출 위치(Ex, Ey)를 알고 있다. 하지만 미로에는 곳곳에 마법사가 설치한 벽이 있어 홍익이가 탈출하기 어렵게 하고 있다. 홍익이는 마법사의 연구실에서 훔친 지팡이가 있어, 벽을 길로 만들 수 있다. 그렇지만, 안타깝게도 마법의 지팡이는 단 한 번만 사용할 수 있다. 이때, 홍익이를 도와 미로에서 탈출할 수 있는지 알아보고, 할 수 있다면 가장 빠른 경로의 거리 D는 얼마인지 알아보자. 인접한 칸으로... www.acmicpc.net 2206번 벽 부수고 이동하기 와 거의 동일한 문제다. 사실상 아예 똑같은 문제인데 왜 난이도가 다르게 측정되어있는지 의문이다. 출발점과 도착점이 정해져 있고, 한번 벽을 부술 수 있을 때 최단거리를 찾는 문제다. 벽을 부순 경우
[BOJ 2098] 외판원 순회 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2098 2098번: 외판원 순회 2098번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 게시판 외판원 순회 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 128 MB 38828 10005 5967 27.797% 문제 외판원 순회 문제는 영어로 Traveling Salesman problem (TSP) 라고 불리는 문제로 computer science 분야에서 가장 중요하게 취급되는 문제 중 하나이다. 여러 가지 변종 문제가 있으나, 여기서는 가장 일반적인 형태의 문제를 살펴보자. 1번부터 N번까지 번호가 매겨져 있는 도시들이 있고, 도... www.acmicpc.net TSP 문제로 비트마스킹, DFS, DP를 이용해 풀 수 있었다. 1번부터 N번까지 한번씩 돌며 시작 도시로 돌아올 때 최소비용을 구하는 문제인데, 사실 이 문제는 브루트포스로 풀 수 있다. 하지만 이 경우 N!만큼의 시간복잡도가
[BOJ 1520] 내리막 길 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1520 1520번: 내리막 길 문제 여행을 떠난 세준이는 지도를 하나 구하였다. 이 지도는 아래 그림과 같이 직사각형 모양이며 여러 칸으로 나뉘어져 있다. 한 칸은 한 지점을 나타내는데 각 칸에는 그 지점의 높이가 쓰여 있으며, 각 지점 사이의 이동은 지도에서 상하좌우 이웃한 곳끼리만 가능하다. 현재 제일 왼쪽 위 칸이 나타내는 지점에 있는 세준이는 제일 오른쪽 아래 칸이 나타내는 지점으로 가려고 한다. 그런데 가능한 힘을 적게 들이고 싶어 항상 높이가 더 낮은 지점으로만 이동하여 목표 지점까지 가고자 한다. 위와 같은 지도에서는 다음과 같은 세 가지 경로가 가... www.acmicpc.net 인접행렬로 이루어진 그래프를 탐색하는 문제로, DFS+DP로 풀 수 있는 문제다. 먼저, 내리막길로만 가야 하기 때문에 (0, 0) 에서 값이 점차 감소하도록 탐색해야 한다. 얼핏 보고 단순 DFS로 하면 될 것 같지만, 제한사항을
[React] CRA로 만든 React 프로젝트가 브라우저에 렌더링 되기까지의 과정 : blink 엔진과 V8, 그리고 React [내부링크]
이 글에서는 우리가 만든 React 프로젝트가 브라우저에 어떤 순서로 렌더링 되는지 한번 정리해 보려고 한다. (브라우저는 Chromium 기준, React는 CRA로 만든 프로젝트 기준이다.) 우리가 주소창에 주소를 쳤을 때부터 우리 눈에 보이기까지, 렌더링 엔진인 blink와 자바스크립트 엔진인 V8을 거쳐 어떻게 화면에 띄워지는지를 정리해 본 글이다. 각 내용들을 따로 정리하는 것이 아닌 react가 브라우저에 띄워지기까지의 "흐름을" 정리해 보고 싶었기에, 렌더링 파이프라인이 진행되다 V8 엔진이 자바스크립트 코드를 읽기도 하는 등 왔다 갔다 하는 방식으로 글을 작성하였다. 나름 열심히 작성하긴 했지만, 많이 난잡해 보일까 걱정이긴 하다... ㅎ 글 시작 전에 먼저, 이 글의 주제와 연계되는 다른 주제의 내용들은 이 글에서 깊게 다루지 않은 내용이 꽤 있다. 이에 관한 내용은 예전에 정리했던 아래 글들에서 다뤘었다! [HTTP] TCP 커넥션의 핸드 셰이크와 TCP 커넥션 핸
[회고] 우테코 프리코스 3주차 회고 [내부링크]
우테코 프리코스 3주차 과제가 끝났다. 3주차 과제는 로또 프로그램을 만드는 것이었다. 1. 과제를 진행하며 코드적인 부분에서 신경썼던 점 3주차 추가 요구 사항들을 보면 함수가 한 가지 일만 잘 하도록 구현하라는 말이 있었다. 또한 JS의 Class문법으로 틀이 짜여있는 Lotto클래스를 반드시 사용하여야 했고, 테스트 코드도 동일하게 작성하여야 했다. Class문법을 반드시 사용해 Lotto Class를 채워나가며 함수 또는 메서드가 한 가지 일만 하도록 구현하라는 조건을 통해 객체지향 프로그래밍의 패러다임과 함수형 프로그래밍의 패러다임을 적절하게 엮어 코드를 작성하고자 하였다. 무엇보다 과제를 진행하며 나 스스로의 목표였던 코드의 가독성과 유지보수가 좋은 코드 작성을 하기 위해 열심히 끄적인 것 같다. 그러다 보니, 함수 하나를 만들 때, 그 함수의 목적성이 명확해 보이고 싶어 네이밍을 어떻게 할까 고민을 정말 많이 했었고 시간도 많이 쏟았었다. 아무튼 그렇게 코드를 짜 봤는데
[회고/계획] 우테코 프리코스 4주차 회고 및 계획 [내부링크]
우테코 프리코스가 4주차까지 해서 모두 끝났다. 4주차 과제는 다리건너기 게임을 만드는 것이었다. 1. 4주차 회고 4주차 미션은 함수 10라인 제한 요구사항이 있었다. 조금 더 빡빡한 느낌이 있었다. 그리고 3주차 공통 피드백 파일을 받으니 아래와 같은 말이 있었다. 테스트 코드도 코드이기에, 테스트 코드도 리팩토링을 하며 개선해가야 한다는 말이었다. 이 글을 읽고 이번 미션은 jest를 확실하게 공부해서 잘 테스트코드를 리팩토링 해봐야겠다고 생각했었다. 그러나 막상 미션이 시작하고 나니 코드짜느라 바빴고, 결국 jest가 확실하게 체화되지 않은 채로 테스트 코드를 짜고, 리팩토링하게 되었다. 그렇다보니 리팩토링 하기가 쉽지 않았던 듯 하다. 저번 주차 까지는 코치분들이 작성해뒀던 테스트코드 적당히 눈으로 훑으면서 갖다 짜집기하며 테스트 코드를 작성했었다. 그러다 이번 4주차때 늦게라도 jest를 공부하며 느낀 점이 몇 가지 있다. 먼저 jest는 많은 기능이 있다는 걸 확실히 느
[우테코 프리코스 5기 후기] MissionUtils.Console.readLine() 사용 시비동기 처리 방식과 콜백 처리 방식의 동작 원리 [내부링크]
이번 우테코 프리코스 5기를 미션들을 진행하다 쓰고싶었던 글이 하나 있는데 이제야 쓰게 되었다. (카테고리 고민하다가 그냥 기타에 넣었다.) 우테코 프리코스 5기 미션에서는 아래와 같은 조건이 있었다. 반드시 MissionUtils 라이브러리를 사용해야 했다. MissionUtils 라이브러리에는 readLine이라는 이름의 말 그대로 readline을 받는 기능이 있었다. 이 MissionUtils를 사용하는 과정에서 이 MissionUtils를 비동기처리하여 사용하면 테스트 케이스를 맞출 수 없었고, 이를 어떻게 처리하느냐 하는 부분이 지원자들 사이에서 굉장히 핫한 주제였다. 굉장히 핫한 주제였던 MissionUtils.Console.readLine 처리방법 그리고 이 문제는 대부분의 지원자들이 콜백 방식을 이용해 해결했다. Promise나 async await을 이용한 방식에서 테스트코드가 실패했던 이유, 콜백 방식이 테스트에서 정답으로 되었던 부분에 대해 코드의 동작을 하나하
[BOJ 2638] 치즈 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2638 2638번: 치즈 문제 N×M의 모눈종이 위에 아주 얇은 치즈가 <그림 1>과 같이 표시되어 있다. 단, N 은 세로 격자의 수이고, M 은 가로 격자의 수이다. 이 치즈는 냉동 보관을 해야만 하는데 실내온도에 내어놓으면 공기와 접촉하여 천천히 녹는다. 그런데 이러한 모눈종이 모양의 치즈에서 각 치즈 격자(작 은 정사각형 모양)의 4변 중에서 적어도 2변 이상이 실내온도의 공기와 접촉한 것은 정확히 한시간만에 녹아 없어져 버린다. 따라서 아래 <그림 1> 모양과 같은 치즈(회색으로 표시된 부분)라면 C로 표시된 모든 치즈 격자는 한 시간 후에 사라진... www.acmicpc.net 2636번 치즈 문제랑 거의 비슷한 문제였지만, 개인적으로는 조금 더 꼬인 문제라고 생각한다. 문제 자체는 읽어보면 bfs를 이용한 그래프 탐색임을 금방 확인할 수 있으나, 바깥 공기와 닿아있는 부분이 2면 이상이여야 녹는다는 점을 처리하
[회고/계획] 22.11.23 ~ 22.12.03 회고 및 계획 [내부링크]
저번 프리코스 끝나고 회고글 쓴지 얼마 안됐는데, 어쩌다 보니 11일만에 회고글을 하나 더 쓰게 되었다. 프리코스 제외하고 주단위로 회고를 처음 써보는 것 같은데, 어쩌다보니 쓰게 된 이유가 있다. 회고부터 작성한 뒤 마지막에 쓰게 된 이유에 대해 이야기하겠다. 1. 회고 1-1) 저번 회고에서 작성했던 계획 저번 회고에서 작성했던 계획 위 사진은 저번 프리코스 4주차 회고글 중 일부이다. jest를 제대로 못다루니 내가 받은 미션의 코드를 짜도 테스트하기 좋은 코드인지를 확인 하기 힘들었고, 그게 아쉬웠다는 내용이다. 그래서 일단 프리코스 끝나고 jest 사용에 관해서부터 공부했다. 이후 테스트코드 짜보는 연습을 하기 위해 그냥 되는대로 프리코스 미션들 한번 다시 짜봤다. 두 번째 짜보는 미션 코드였는데, 두 번째라 그런건지 맘편하게 해서 그런건지 굉장히 편하게 구현했던 것 같다. 저번 회고에서 어떤 코드가 테스트코드 짜기 쉬운 코드일지 감을 잡고 싶다고 작성했었는데, 이를 차차
[2022 마이 블로그 리포트] 올해 활동 데이터로 알아보는 2022 나의 블로그 리듬 [내부링크]
2023년도 화이팅~! 2022 마이 블로그 리포트 2022년 올해 당신의 블로그 리듬을 알아볼 시간! COME ON! campaign.naver.com
우아한테크코스 5기 프론트엔드 최종 코딩테스트 후기 [내부링크]
이전 기수인 4기와는 다르게 이번 우테코 5기는 프리코스를 모두 참가할 수 있었다. 그렇기에 선발 과정이 4기와는 조금 달랐다. 프리코스가 종료된 뒤 1차심사를 통과해야 최종 코딩테스트를 볼 수 있었다. 프리코스 종료일은 11월 23일, 1차심사 발표일은 12월 14일, 최종 코딩테스트 진행일은 12월 17일로 1차 발표 후 최종 코테를 준비할 수 있는 기간이 길지 않았다. 그리고 나는 12월 14일에 1차심사 통과 메일을 받게 되어 최종 코딩테스트를 보고 왔다. 최종 코딩테스트는 선릉, 잠실의 우테코 캠퍼스 내에서 대면으로 진행되었고, 프리코스에서 진행했던 마지막 주차 미션과 비슷한 난이도로 나온다. 1. 최종 테스트 준비 과정 프리코스가 확정되면 무조건 최종 코딩테스트까지는 보장되는 이전 기수와는 다르게, 이번 기수는 본인이 1차 심사를 통과해 최종 코딩테스트에 참가할 수 있다는 보장이 없었다. 프리코스가 11월 23일에 종료되었고 12월 14일에 1차 심사 결과가 나왔다. 프리
우아한테크코스 5기 프론트엔드 최종 합격 [내부링크]
우아한테크코스에 최종 합격했다! 2022년 개인적으로는 정말 하는일마다 일의 마무리와 결과가 아쉬웠다. 올 해 마지막이었던 우테코는 꼭 붙고싶었는데, 좋은 결과를 얻어 매우 기쁘다. 2023년 정말 기대되고 화이팅 해봐야겠다! 아래는 프리코스, 프리코스 종료 이후 작성했던 글, 최종 코딩테스트 후기이다. 1, 2주차 회고 : https://blog.naver.com/dlaxodud2388/222923806991 3주차 회고 : https://blog.naver.com/dlaxodud2388/222929708117 4주차 회고 : https://blog.naver.com/dlaxodud2388/222935823950 프리코스 진행하며 이슈였던 내용 (readLine 사용)정리 : https://blog.naver.com/dlaxodud2388/222938069692 프리코스 종료 후 11.23~12.03 회고 : https://blog.naver.com/dlaxodud2388/2229
[회고/계획] 2022년 회고 및 계획 [내부링크]
2022년 회고글을 쓸 시기가 되어버렸다. 연 단위 회고글을 쓰기 시작한게 2020년인데, 벌써 3번째라는게 믿기지가 않는다. 먼저 2021년 회고글에서 2022년을 계획했던 내용들을 보며 지나온 2022년을 한번 회고해보려고 한다. 1. 회고 [회고/계획] 2021년 회고 및 계획 먼저 21년 말은 공부하고자 하는 방향에 있어 혼란이 조금 있던 시기이다. 그렇게 프론트엔드쪽으로 방향을 어느정도 바꾼 뒤, 22년은 확실히 프론트엔드 위주로 공부했다. 아무래도 자바스크립트로 백엔드를 시작했다보니, 21년 전역 이후에는 해보고 싶기도 했고 현실적인 이유도 있어 분야를 바꿨었다. [회고/계획] 2021년 회고 및 계획 21년 회고글에서 일단은 알고리즘 공부를 꾸준히 하겠다 계획했었다. 저때는 위 글의 내용대로 엄두가 안나 백준문제를 풀지 않았었는데, 프로그래머스, leetcode로만 종종 풀다가 22년 7월 이후부터 본격적으로 백준으로 꾸준히 풀기 시작했었다. 사유는 7월에 떨어졌던 네이
[BOJ 17472] 다리 만들기2 (Node.js) [내부링크]
https://www.acmicpc.net/problem/17472 17472번: 다리 만들기 2 섬으로 이루어진 나라가 있고, 모든 섬을 다리로 연결하려고 한다. 이 나라의 지도는 N×M 크기의 이차원 격자로 나타낼 수 있고, 격자의 각 칸은 땅이거나 바다이다. 섬은 연결된 땅이 상하좌우로 붙어있는 덩어리를 말하고, 아래 그림은 네 개의 섬으로 이루어진 나라이다. 색칠되어있는 칸은 땅이다. 다리는 바다에만 건설할 수 있고, 다리의 길이는 다리가 격자에서 차지하는 칸의 수이다. 다리를 연결해서 모든 섬을 연결하려고 한다. 섬 A에서 다리를 통해 섬 B로 갈 수 있을 때, 섬 A와 B를 연결되었다고 한다. 다리의 양 끝은 섬과 인... www.acmicpc.net 브루트포스 + DFS + BFS + MST 문제였다. 이 문제에서 조금 응용된 문제다. 각 섬들이 연결될 수 있는 다리들을 구한 뒤, [섬 번호1, 섬 번호2, 다리길이] 데이터들을 기반으로 MST를 구현하면 되는 문제이다.
[React] 무한 스크롤 (Infinite Scroll) 구현하기 [내부링크]
간단한 무한스크롤 예제를 통해 구현 방법에 대해 정리해보려 한다. redux와 redux-toolkit을 이용하여 구현하였다. 1. 예제 설명 // ./components/List.js import React from "react"; const List = ({ nick, content }) => { return ( <> <div className="List"> <div className="name">name: {nick}</div> <div className="content">content: {content}</div> </div> <br /> </> ); }; export default List; 이런 식으로 데이터가 들어가있는 리스트들이 스크롤을 내릴 때마다 10개씩 추가되어 나오는 예제라고 해보자. 데이터베이스에 이런 데이터들이 저장되어있고, 이 데이터들을 10개씩 받아와 리스트들을 만들어 준다고 해보자. 백엔드는 express로 짰으며, API 코드는 아래와 같다. (단순히
[Next.js + Express] JWT를 이용한 인증 구현과 토큰 인증 시스템에 대한 개인적 고찰 [내부링크]
Express 백엔드와 Next.js 프론트엔드에서 JWT를 이용한 인증 구현과 처리에 관하여 포스팅을 해보려고 한다. 이 포스팅에서는 JWT를 이용한 인증을 구현하는 내용을 작성할 계획이기에, JWT가 무엇인지와 같은 내용은 다루지 않겠다. 1. JWT(JSON Web Token)를 이용한 토큰 기반 인증 시스템을 사용하는 이유? 토큰 기반 인증 시스템을 쓰는 이유를 다루기 전에 먼저 전통적인 방법인 세션 기반 인증의 동작 방식부터 정리해보자. 1.1) 세션 기반 인증의 동작 먼저 로그인 요청이 가면, 로그인하고자 하는 사용자 정보를 먼저 확인한다. 정보 확인이 되면 로그인 할 회원정보를 세션스토리지에 저장한다. 이 세션정보를 클라이언트도 갖고 있게 하기 위해 성공 응답과 함께 세션정보를 함께 보내준다. 클라이언트는 이 세션정보를 쿠키에 담아 관리한다. 이후로는 이 세션정보가 담긴 쿠키를 포함하여 요청하게 된다. 이와 같은 세션 인증은 서버 쪽에서 어떤 사용자들이 로그인되어있는지
[BOJ 10423] 전기가 부족해 (Node.js) [내부링크]
https://www.acmicpc.net/problem/10423 10423번: 전기가 부족해 문제 세계에서 GDP가 가장 높은 서강 나라는 소프트웨어와 하드웨어 기술이 모두 최고라서 IT강국이라 불리고, 2015년부터 세상에서 가장 살기 좋은 나라 1등으로 꼽히고 있다. 살기 좋은 나라 1등으로 꼽힌 이후 외국인 방문객들이 많아졌고, 그에 따라 전기 소비율이 증가하여 전기가 많이 부족한 상황이 되었다. 따라서 서강 나라의 대통령은 최근 개발이 완료된 YNY발전소 프로젝트를 진행 하기로 하였다. 발전소를 만들 때 중요한 것은 발전소 건물과 도시로 전기를 공급해 줄 케이블이다. 발전소는 이미 특정 도시에 건설되어 있고, 따라... www.acmicpc.net 발전소가 여러 개인 것이 핵심인 문제였고, 문제를 보면 알 수 있지만 MST문제로 크루스칼을 이용하여 풀었다. 이 문제의 핵심은 발전소가 여러개더라도 모든 도시에 전기가 연결되기만 한다면, 발전소 하나가 어떤 도시에도 연결 안되
[회고] 우테코 프리코스 1, 2주차 회고 [내부링크]
최근에 우테코를 지원했었다. 원래 몇달에 한번 회고를 몰아쓰는편이라 프리코스 이야기도 한번에 몰아쓰려했는데, 저번주에 다른 참가자분들 주별로 회고쓰는 모습을 보니 나도 쓰고싶어지기도 했고 2주차를 진행하며 새롭게 느끼게 된 내용도 있어 쓴다. 따라서 1, 2주차 회고를 한번에 쓰려고 한다. 1주차 1주차는 알고리즘 문제가 7개 주어졌다. 단, 진행 방식에 "기능을 구현하기 전에 기능 목록을 만들고, 기능 단위 커밋을 해라" 라는 부분을 지켜야했다. 기능 요구사항이 각 알고리즘 7문제였기에 각 문제별로 커밋을 하였다. 평소에 js로 문제를 풀어와서 그런지 문제의 난이도 자체는 크게 어렵게 느껴지지 않았던 것 같다. (라고 말하지만 2번문제에서 아주 크나큰 실수를 했다..) 다만 문제들이 써있는게 굉장히 모호했었다. 그래서 평소 알고리즘 문제 풀던것처럼 써있는 조건만 딱 맞췄었는데, 오히려 그런 조건을 찾아서 예외처리들을 해나가는 부분을 원하셨던 것 같다..ㅜ 너무 알고리즘 문제풀이 자
[BOJ 1766] 문제집 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1766 1766번: 문제집 1766번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 문제집 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 19405 9306 7096 47.939% 문제 민오는 1번부터 N번까지 총 N개의 문제로 되어 있는 문제집을 풀려고 한다. 문제는 난이도 순서로 출제되어 있다. 즉 1번 문제가 가장 쉬운 문제이고 N번 문제가 가장 어려운 문제가 된다. 어떤 문제부터 풀까 고민하면서 문제를 훑어보던 민오는, 몇몇 문제들 사이에는 '먼저 푸는 것이 좋은 문제'가 있다는 것을 알게 되었다. 예를 들... www.acmicpc.net 정해진 순서대로 문제를 풀어야 한다는 전형적인 위상정렬 문제였다. 단, 문제집이 난이도 순서대로 출제되어있다고 했다. 높은 번호의 문제가 어려운 문제이기에, 이는 최소힙을 함께 사용해야 하는 문제였다. 일반적인 위상정렬 문제처럼 진입차수
[BOJ 2887] 행성 터널 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2887 2887번: 행성 터널 2887번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 행성 터널 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 128 MB 16947 6268 4386 35.246% 문제 때는 2040년, 이민혁은 우주에 자신만의 왕국을 만들었다. 왕국은 N개의 행성으로 이루어져 있다. 민혁이는 이 행성을 효율적으로 지배하기 위해서 행성을 연결하는 터널을 만들려고 한다. 행성은 3차원 좌표위의 한 점으로 생각하면 된다. 두 행성 A(x A , y A , z A )와 B(x B , y B , z B )를 터널로 ... www.acmicpc.net MST 문제였다. 크루스칼 알고리즘을 이용하여 풀 수 있었다. 3차원 좌표가 주어지는데, 두 행성 A(xA, yA, zA)와 B(xB, yB, zB)를 연결할 때 드는 비용은 min(|xA-xB|, |yA-yB|, |zA-zB|)라고
[BOJ 2146] 다리 만들기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2146 2146번: 다리 만들기 문제 여러 섬으로 이루어진 나라가 있다. 이 나라의 대통령은 섬을 잇는 다리를 만들겠다는 공약으로 인기몰이를 해 당선될 수 있었다. 하지만 막상 대통령에 취임하자, 다리를 놓는다는 것이 아깝다는 생각을 하게 되었다. 그래서 그는, 생색내는 식으로 한 섬과 다른 섬을 잇는 다리 하나만을 만들기로 하였고, 그 또한 다리를 가장 짧게 하여 돈을 아끼려 하였다. 이 나라는 N×N크기의 이차원 평면상에 존재한다. 이 나라는 여러 섬으로 이루어져 있으며, 섬이란 동서남북으로 육지가 붙어있는 덩어리를 말한다. 다음은 세 개의 섬으로 이루어진 나... www.acmicpc.net DFS와 BFS를 이용한 그래프 탐색 문제였다. 먼저 그래프를 DFS탐색을 하며 섬의 번호를 붙여줬다. [ [ 2, 2, 2, 0, 0, 0, 0, 3, 3, 3 ], [ 2, 2, 2, 2, 0, 0, 0, 0, 3, 3 ], [
[BOJ 1948] 임계경로 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1948 1948번: 임계경로 문제 월드 나라는 모든 도로가 일방통행인 도로이고, 싸이클이 없다. 그런데 어떤 무수히 많은 사람들이 월드 나라의 지도를 그리기 위해서, 어떤 시작 도시로부터 도착 도시까지 출발을 하여 가능한 모든 경로를 탐색한다고 한다. 이 지도를 그리는 사람들은 사이가 너무 좋아서 지도를 그리는 일을 다 마치고 도착 도시에서 모두 다 만나기로 하였다. 그렇다고 하였을 때 이들이 만나는 시간은 출발 도시로부터 출발한 후 최소 몇 시간 후에 만날 수 있는가? 즉, 마지막에 도착하는 사람까지 도착을 하는 시간을 의미한다. 어떤 사람은 이 시간에 만나... www.acmicpc.net 정방향으로 위상정렬 이후 역으로 BFS 탐색을 해야하는 문제였다. 가장 먼저 구해야 하는 것은 "모든 사람이 만나는 시간" 이다. 한명을 제외한 나머지가 모두 도착했다고 하더라도 오지 않은 한명을 계속 기다려야 하는 것이다. 따라서 도
[BOJ 12837] 가계부(Hard) (Node.js) [내부링크]
https://www.acmicpc.net/problem/12837 12837번: 가계부 (Hard) 12837번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 가계부 (Hard) 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 512 MB 3596 1534 1308 43.585% 문제 살아있는 화석이라고 불리는 월곡이는 돈에 찌들려 살아가고 있다. 그에게 있어 수입과 지출을 관리하는 것은 굉장히 중요한 문제이다. 스마트폰에 가계부 어플리케이션을 설치해서 사용하려 했지만, 월곡이는 굉장히 오래 살았기에 원하는 정보를 얻기에는 동작 속도가 너무나도 느렸다. 가끔 입력을 빼먹은 것이 생기면 다시 추가하고 계산하... www.acmicpc.net 누적합을 구하는 문제로, 세그먼트 트리를 이용하여 풀 수 있었다. 2 p q 형태로 입력값이 들어왔을 때 잔고가 변경되는것이 아닌 추가된다는 점을 유의해서 연산시켜 풀어야 한다. (이 부분을 생각없이 풀다가 많이 틀렸다.
[BOJ 25187] 고인물이 싫어요 (Node.js) [내부링크]
https://www.acmicpc.net/problem/25187 25187번: 고인물이 싫어요 문제 재형이는 청정수를 좋아하고 고인물을 싫어한다. 오늘도 청정수를 구하기 위해 물탱크들이 있는 마을에 방문한다. 마을에는 N $N$ 개의 물탱크가 존재하고, 각 물탱크는 청정수 또는 고인물을 저장하고 있다. 그리고 물탱크는 공급의 편의를 위해 M $M$ 개의 파이프로 서로 연결되어 있다. 청정수를 얻기 위해 K $K$ 번 물탱크에 방문했을 때, K $K$ 번 물탱크와 K $K$ 번 물탱크에서 0 $0$ 개 이상의 파이프를 거쳐 이동 가능한 물탱크 중, 청정수가 담긴 물탱크의 수가 고인물이 담긴 물탱크의 수보다 더 많은 경우 청정수... www.acmicpc.net 유니온 파인드 문제였다. 2번째 줄에 받게되는 물탱크들의 정보를 통해 청정수와 고인물의 수를 먼저 정리한다. 이후 물탱크 연산은 그대로 유니온연산을 하면 된다. 유니온 연산을 할 떄 청정수와 고인물의 수도 같이 계산해준다.
[BOJ 1275] 커피숍2 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1275 1275번: 커피숍2 1275번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 커피숍2 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 256 MB 13993 4227 3174 29.515% 문제 모두 알다시피 동호는 커피숍의 마담이다. (마담이 무엇인지는 본인에게 물어보도록 하자.) 어느 날 커피숍의 손님 A씨가 동호에게 게임을 하자고 했다. 그 게임은 다음과 같은 규칙을 갖는다. N개의 정수가 있으면, 동호는 다음과 같이 말한다. “3~7번째 수의 합은 무엇이죠?” 그러면 상대방은 “그 답은 000입니다. 그리고 8번째 수를... www.acmicpc.net 2번째 줄에 한 배열이 들어온 뒤, 3번째 줄부터는 x, y, a, b 순서로 들어온다. a번 인덱스를 b번으로 바꾼 뒤 x~y의 누적합을 구하면 되는 문제이다. 누적합 문제이기에 세그먼트 트리를 이용하여 문제를 풀 수 있다. 꼭 봐야
[BOJ 1647] 도시 분할 계획 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1647 1647번: 도시 분할 계획 문제 동물원에서 막 탈출한 원숭이 한 마리가 세상구경을 하고 있다. 그러다가 평화로운 마을에 가게 되었는데, 그곳에서는 알 수 없는 일이 벌어지고 있었다. 마을은 N개의 집과 그 집들을 연결하는 M개의 길로 이루어져 있다. 길은 어느 방향으로든지 다닐 수 있는 편리한 길이다. 그리고 각 길마다 길을 유지하는데 드는 유지비가 있다. 마을의 이장은 마을을 두 개의 분리된 마을로 분할할 계획을 가지고 있다. 마을이 너무 커서 혼자서는 관리할 수 없기 때문이다. 마을을 분할할 때는 각 분리된 마을 안에 집들이 서로 연결되도록 분할해야 한다... www.acmicpc.net MST 문제였다. 마을의 최소 스패닝 트리를 만들고 거기서 가장 유지비가 큰 길을 끊어내면 되는 문제이다. 크루스칼 알고리즘을 이용하여 마을 유지비의 합을 구해낸 뒤 가장 큰 유지비를 빼면 된다. 간략하게 풀이 방법을 정리하면
[BOJ 2568] 전깃줄 - 2 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2568 2568번: 전깃줄 - 2 문제 두 전봇대 A와 B 사이에 하나 둘씩 전깃줄을 추가하다 보니 전깃줄이 서로 교차하는 경우가 발생하였다. 합선의 위험이 있어 이들 중 몇 개의 전깃줄을 없애 전깃줄이 교차하지 않도록 만들려고 한다. 예를 들어, <그림 1>과 같이 전깃줄이 연결되어 있는 경우 A의 1번 위치와 B의 8번 위치를 잇는 전깃줄, A의 3번 위치와 B의 9번 위치를 잇는 전깃줄, A의 4번 위치와 B의 1번 위치를 잇는 전깃줄을 없애면 남아있는 모든 전깃줄이 서로 교차하지 않게 된다. <그림 1> 전깃줄이 전봇대에 연결되는 위치는 전봇대 위에서부터 ... www.acmicpc.net 전깃줄이 겹치지 않도록 제거해야할 전깃줄의 수와 전깃줄의 번호를 출력하는 문제였다. 먼저 받은 값들 [1, 8], [3, 9] 와 같은 값들을 먼저 0번인덱스들 기준으로 sort해준다. 이후 1번 인덱스 값들을 기준으로 최장 증가
[BOJ 14621] 나만 안되는 연애 (Node.js) [내부링크]
https://www.acmicpc.net/problem/14621 14621번: 나만 안되는 연애 문제 깽미는 24살 모태솔로이다. 깽미는 대마법사가 될 순 없다며 자신의 프로그래밍 능력을 이용하여 미팅 어플리케이션을 만들기로 결심했다. 미팅 앱은 대학생을 타겟으로 만들어졌으며 대학교간의 도로 데이터를 수집하여 만들었다. 이 앱은 사용자들을 위해 사심 경로를 제공한다. 이 경로는 3가지 특징을 가지고 있다. 사심 경로는 사용자들의 사심을 만족시키기 위해 남초 대학교와 여초 대학교들을 연결하는 도로로만 이루어져 있다. 사용자들이 다양한 사람과 미팅할 수 있도록 어떤 대학교에서든 모든 대학교로 이동이 가능한 경로이다. 시간을 낭비하... www.acmicpc.net 이 문제는 MST문제였다. 먼저 다른 MST 문제처럼 도로의 거리들을 오름차순으로 정렬해준다. 이후 사이클이 생기지 않는다는 가정 하에 2번째 줄의 M, W에 따라 다른 성의 학교끼리 맞닿은 길의 경우만 union연산을 해
[BOJ 20040] 사이클 게임 (Node.js) [내부링크]
https://www.acmicpc.net/problem/20040 20040번: 사이클 게임 문제 사이클 게임은 두 명의 플레이어가 차례대로 돌아가며 진행하는 게임으로, 선 플레이어가 홀수 번째 차례를, 후 플레이어가 짝수 번째 차례를 진행한다. 게임 시작 시 0 부터 n − 1 까지 고유한 번호가 부여된 평면 상의 점 n 개가 주어지며, 이 중 어느 세 점도 일직선 위에 놓이지 않는다. 매 차례 마다 플레이어는 두 점을 선택해서 이를 연결하는 선분을 긋는데, 이전에 그린 선분을 다시 그을 수는 없지만 이미 그린 다른 선분과 교차하는 것은 가능하다. 게임을 진행하다가 처음으로 사이클을 완성하는 순간 게임이 종료된다. 사이클... www.acmicpc.net 이 문제는 유니온 파인드 문제였다. 들어온 입력값대로 유니온 연산을 하다가 사이클이 만들어지는 순간 값을 출력하면 된다. 사이클이 만들어지지 않은 채로 게임이 진행중일 경우 0을 출력해야 하기에 사이클이 만들어지기 전까지의 계산
[회고/계획] 22.07.13 ~ 22.08.30 회고 [내부링크]
저번 회고글을 작성할 때 이미 방학중이였는데, 그 이후 방학동안의 회고글을 작성해보려고 한다. 저번 글에서 썼던 내용인데, 저 때 부스트캠프 1, 2차코테까지 본 이후 알고리즘 공부를 꾸준히 해야겠다고 느꼈었다. 원래 Javascript로 문제를 풀다보니 백준으로 풀면 입력값 받는게 피곤해서 그동안 백준 대신 프로그래머스랑 leetcode만 풀었었다. 그러다 방학 시작하고 본격적으로 백준을 풀기 시작했다. 많이는 아니고 꾸준히 한두문제씩만 풀었더니 100문제 조금 넘게 풀었다. 이 외로는 브라우저의 렌더링 동작원리에 대해 한동안 깊게 공부하려 했었다. v8의 libuv 공부하다가 Chromium의 libevent에 대해 잠깐 공부했었는데, 보다가 렌더링 파이프라인이라는 개념의 존재에 대해 알게 되었었다. 렌더링 파이프라인의 동작들을 이해하려다보니 Chromium의 프로세스 아키텍쳐와 렌더링 엔진인 blink엔진에 대해 공부해야 했다. 그래서 7월 말 까지는 이 내용들을 공부했었다.
[BOJ 12738] 가장 긴 증가하는 부분 수열 3 (Node.js) [내부링크]
https://www.acmicpc.net/problem/12738 12738번: 가장 긴 증가하는 부분 수열 3 12738번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 가장 긴 증가하는 부분 수열 3 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 3 초 512 MB 9345 5279 4282 62.484% 문제 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = { 10 , 20 , 10, 30 , 20, 50 } 이고, 길이는 4이다. 입력 첫째 줄에 수열 ... www.acmicpc.net 이 문제는 LIS와 이분탐색이 섞인 문제였다. 아래 문제와 동일한 문제지만 제한조건이 늘어난 문제이다. https://www.acmicpc.net/problem/11053 11053번: 가장 긴 증가하는 부분 수열
[BOJ 4195] 친구 네트워크 (Node.js) [내부링크]
https://www.acmicpc.net/problem/4195 4195번: 친구 네트워크 4195번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 친구 네트워크 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 3 초 256 MB 33837 8987 5476 25.762% 문제 민혁이는 소셜 네트워크 사이트에서 친구를 만드는 것을 좋아하는 친구이다. 우표를 모으는 취미가 있듯이, 민혁이는 소셜 네트워크 사이트에서 친구를 모으는 것이 취미이다. 어떤 사이트의 친구 관계가 생긴 순서대로 주어졌을 때, 두 사람의 친구 네트워크에 몇 명이 있는지 구하는 프로그램을 작성하시오. 친구 네트워크란 친구 관계만... www.acmicpc.net 유니온파인드와 해시맵을 사용해야 하는 문제였다. Node.js 특성상 이 문제는 입력값 받는 부분이 매우 피곤했다. const [length, ...input] = require("fs") .readFileSync("./dev/s
[BOJ 14003] 가장 긴 증가하는 부분 수열 5 (Node.js) [내부링크]
https://www.acmicpc.net/problem/14003 14003번: 가장 긴 증가하는 부분 수열 5 14003번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 가장 긴 증가하는 부분 수열 5 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 3 초 512 MB 19081 6383 4588 34.726% 문제 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = { 10 , 20 , 10, 30 , 20, 50 } 이고, 길이는 4이다. 입력 첫째 줄... www.acmicpc.net O(NlogN)LIS 와 이분탐색, DP를 섞어 풀 수 있는 문제였다. 12738 가장 긴 증가하는 부분수열 3과 매우 유사한 문제였다. https://www.acmicpc.net/problem/12738 1273
[BOJ 1922] 네트워크 연결 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1922 1922번: 네트워크 연결 문제 도현이는 컴퓨터와 컴퓨터를 모두 연결하는 네트워크를 구축하려 한다. 하지만 아쉽게도 허브가 있지 않아 컴퓨터와 컴퓨터를 직접 연결하여야 한다. 그런데 모두가 자료를 공유하기 위해서는 모든 컴퓨터가 연결이 되어 있어야 한다. (a와 b가 연결이 되어 있다는 말은 a에서 b로의 경로가 존재한다는 것을 의미한다. a에서 b를 연결하는 선이 있고, b와 c를 연결하는 선이 있으면 a와 c는 연결이 되어 있다.) 그런데 이왕이면 컴퓨터를 연결하는 비용을 최소로 하여야 컴퓨터를 연결하는 비용 외에 다른 곳에 돈을 더 쓸 수 있을 것이다.... www.acmicpc.net 모든 컴퓨터를 연결하는데 필요한 최소 비용을 출력해야 하는 문제였다. 따라서 이 문제는 MST를 구현해야 하는 문제로, 크루스칼 알고리즘을 이용하여 풀었다. 간단하게만 설명하자면 1. 먼저 비용 순으로 정렬한다. 2. 가중치가 작
[BOJ 1715] 카드 정렬하기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1715 1715번: 카드 정렬하기 1715번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 카드 정렬하기 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 34238 11516 8944 33.793% 문제 정렬된 두 묶음의 숫자 카드가 있다고 하자. 각 묶음의 카드의 수를 A, B라 하면 보통 두 묶음을 합쳐서 하나로 만드는 데에는 A+B 번의 비교를 해야 한다. 이를테면, 20장의 숫자 카드 묶음과 30장의 숫자 카드 묶음을 합치려면 50번의 비교가 필요하다. 매우 많은 숫자 카드 묶음이 책상 위에 놓여 있다. 이들을 두 묶음씩... www.acmicpc.net 그리디 문제였다. 작은 수끼리 계속해서 더한 값이 가장 적게 비교한 값으로 이 값을 구하면 되는 문제였다. 예를들어, [10, 20, 25, 40] 이렇게 있다면 10+20을 먼저 한 뒤, 그 값에 25를 더하고 그 값에 40을
[프로그래머스] 성격 유형 검사하기 (JavaScript) [내부링크]
https://school.programmers.co.kr/learn/courses/30/lessons/118666?language=javascript 코딩테스트 연습 - 성격 유형 검사하기 지표 번호 성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n 개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 school.programmers.co.kr 문자열 구현 문제였고, 문제 그대로 구현하면 되는 구현문제였다. function solution(survey, choices) { let scores =
[프로그래머스] 입국심사 (JavaScript) [내부링크]
https://school.programmers.co.kr/learn/courses/30/lessons/43238 코딩테스트 연습 - 입국심사 n명이 입국심사를 위해 줄을 서서 기다리고 있습니다. 각 입국심사대에 있는 심사관마다 심사하는데 걸리는 시간은 다릅니다. 처음에 모든 심사대는 비어있습니다. 한 심사대에서는 동시에 한 명만 심사를 할 수 있습니다. 가장 앞에 서 있는 사람은 비어 있는 심사대로 가서 심사를 받을 수 있습니다. 하지만 더 빨리 끝나는 심사대가 있으면 기다렸다가 그곳으로 가서 심사를 받을 수도 있습니다. 모든 사람이 심사를 받는데 걸리는 시간을 최소로 하고 싶습니다. 입국심사를 기다리는 사람 수 n, 각 심사관이 한 명을 심사하는데 걸리는 시간이 담긴 ... school.programmers.co.kr 이분탐색 문제였다. 이분탐색 문제이기에 가장 오래 걸릴 수 있는 시간을 max로, 1을 min으로 먼저 잡는다. 이후 while문을 돌며 mid값을 잡은 뒤 sum
[BOJ 14002] 가장 긴 증가하는 부분 수열 4 (Node.js) [내부링크]
https://www.acmicpc.net/problem/14002 14002번: 가장 긴 증가하는 부분 수열 4 14002번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 가장 긴 증가하는 부분 수열 4 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 25637 10061 7620 39.398% 문제 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = { 10 , 20 , 10, 30 , 20, 50 } 이고, 길이는 4이다. 입력 첫째 ... www.acmicpc.net LIS 유형의 문제였다. 먼저 dy 배열을 하나 만든다. 케이스가 10 20 10 30 20 50 이렇게 있다면 10기준 왼쪽으로 10보다 작은수를 쭉 찾고(없음) 20기준 왼쪽으로 20보다 작은 수를 쭉 찾
[BOJ 1744] 수 묶기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1744 1744번: 수 묶기 문제 길이가 N인 수열이 주어졌을 때, 그 수열의 합을 구하려고 한다. 하지만, 그냥 그 수열의 합을 모두 더해서 구하는 것이 아니라, 수열의 두 수를 묶으려고 한다. 어떤 수를 묶으려고 할 때, 위치에 상관없이 묶을 수 있다. 하지만, 같은 위치에 있는 수(자기 자신)를 묶는 것은 불가능하다. 그리고 어떤 수를 묶게 되면, 수열의 합을 구할 때 묶은 수는 서로 곱한 후에 더한다. 예를 들면, 어떤 수열이 {0, 1, 2, 4, 3, 5}일 때, 그냥 이 수열의 합을 구하면 0+1+2+4+3+5 = 15이다. 하지만, 2와 3을 묶... www.acmicpc.net 그리디 문제였다. 음수의 경우 두 수를 곱하면 양수가 된다. 따라서 음수를 2개씩 묶어 곱셈 연산을 해주고 하나가 남으면 이는 +해준다. 값이 0일경우는 그냥 더해준다. 양수의 경우 값이 1일 경우만 제외하고 모두 2개씩 묶어 곱해준다
[BOJ 5430] AC (Node.js) [내부링크]
https://www.acmicpc.net/problem/5430 5430번: AC 문제 선영이는 주말에 할 일이 없어서 새로운 언어 AC를 만들었다. AC는 정수 배열에 연산을 하기 위해 만든 언어이다. 이 언어에는 두 가지 함수 R(뒤집기)과 D(버리기)가 있다. 함수 R은 배열에 있는 수의 순서를 뒤집는 함수이고, D는 첫 번째 수를 버리는 함수이다. 배열이 비어있는데 D를 사용한 경우에는 에러가 발생한다. 함수는 조합해서 한 번에 사용할 수 있다. 예를 들어, "AB"는 A를 수행한 다음에 바로 이어서 B를 수행하는 함수이다. 예를 들어, "RDD"는 배열을 뒤집은 다음 처음 두 수를 버리는 함수이다. 배열... www.acmicpc.net 문자열을 이용한 단순 구현문제였다. 받은 입력값(문자열) 을 JSON.parse()로 배열화한 뒤 R, D들을 계산하면 되는 문제였다. 다시 출력 시 JSON.Stringify(arr.reverse())와 같이 출력 해 주어야했다. con
[BOJ 11054] 가장 긴 바이토닉 부분 수열 (Node.js) [내부링크]
https://www.acmicpc.net/problem/11054 11054번: 가장 긴 바이토닉 부분 수열 11054번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 가장 긴 바이토닉 부분 수열 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 37490 19129 14945 50.833% 문제 수열 S가 어떤 수 S k 를 기준으로 S 1 < S 2 < ... S k-1 < S k > S k+1 > ... S N-1 > S N 을 만족한다면, 그 수열을 바이토닉 수열이라고 한다. 예를 들어, {10, 20, 30 , 25, 20}과 {10, 20, 30, 40 }, { 50 , 40, 25, 1... www.acmicpc.net 이 문제도 LIS 유형 문제였다. https://blog.naver.com/dlaxodud2388/222861674928 [BOJ 14002] 가장 긴 증가하는 부분 수열 4 (Node.js) https://ww
[BOJ 1976] 여행 가자 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1976 1976번: 여행 가자 1976번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 여행 가자 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 24546 9523 7086 37.772% 문제 동혁이는 친구들과 함께 여행을 가려고 한다. 한국에는 도시가 N개 있고 임의의 두 도시 사이에 길이 있을 수도, 없을 수도 있다. 동혁이의 여행 일정이 주어졌을 때, 이 여행 경로가 가능한 것인지 알아보자. 물론 중간에 다른 도시를 경유해서 여행을 할 수도 있다. 예를 들어 도시가 5개 있고, A-B, B-C, A-D, B-D, E-... www.acmicpc.net 이 문제는 유니온 파인드를 이용해 풀 수 있었다. union연산을 하기 전에 union연산을 할 수 있도록 그래프를 변환해준 뒤 union연산을 해 주었다. // find 연산 function finds(find) { if (set[
[BOJ 2470] 두 용액 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2470 2470번: 두 용액 2470번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 두 용액 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 (추가 시간 없음) 128 MB 31797 9791 7093 30.515% 문제 KOI 부설 과학연구소에서는 많은 종류의 산성 용액과 알칼리성 용액을 보유하고 있다. 각 용액에는 그 용액의 특성을 나타내는 하나의 정수가 주어져있다. 산성 용액의 특성값은 1부터 1,000,000,000까지의 양의 정수로 나타내고, 알칼리성 용액의 특성값은 -1부터 -1,000,000,000까지의 음... www.acmicpc.net 이 문제는 투포인터 문제였다. 0에 가까운 값을 찾아야 하기에 먼저 용액들의 성질은 오름차순으로 정렬을 해둔다. 이후 left를 0, right를 용액들 들어가있는 배열 길이 -1로 지정해둔다. left -> <- right -99 -2
[BOJ 1644] 소수의 연속합 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1644 1644번: 소수의 연속합 문제 하나 이상의 연속된 소수의 합으로 나타낼 수 있는 자연수들이 있다. 몇 가지 자연수의 예를 들어 보면 다음과 같다. 3 : 3 (한 가지) 41 : 2+3+5+7+11+13 = 11+13+17 = 41 (세 가지) 53 : 5+7+11+13+17 = 53 (두 가지) 하지만 연속된 소수의 합으로 나타낼 수 없는 자연수들도 있는데, 20이 그 예이다. 7+13을 계산하면 20이 되기는 하나 7과 13이 연속이 아니기에 적합한 표현이 아니다. 또한 한 소수는 반드시 한 번만 덧셈에 사용될 수 있기 때문에, 3+5+5+7과 같은 표... www.acmicpc.net 주어진 수를 연속된 소수의 합으로 구할 수 있는지 구하는 문제였다. 이 문제를 풀기 위해선 먼저 소수부터 구해야했다. 입력값을 소수의 합으로 나타내는 문제이기에 입력값보다 작은 소수들부터 추려내 배열에 넣는 것이 먼저였다. 소수들
[BOJ 17845] 수강 과목 (Node.js) [내부링크]
https://www.acmicpc.net/problem/17845 17845번: 수강 과목 17845번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 수강 과목 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 512 MB 1076 605 518 58.664% 문제 유니스트 컴퓨터공학과에 다니는 서윤이는 이번에 어떤 과목을 들을지 고민중이다. 학점을 잘 받을 수 있으면서도 중요한 과목을 듣고 싶은 서윤이는 모든 과목의 중요도와, 일정 이상의 학점을 받기 위해 필요한 공부시간을 다 적었다. 처음에는 모든 과목을 들으려고 했던 서윤이는 자신의 공부 시간에 한계가 있다는 것을 깨달았다. 그래서, ... www.acmicpc.net 공부 시간의 한계를 초과하지 않으며 최대가 되는 합을 구해야 하기에, 이 문제는 냅색문제였다. 입력값이 8 3 65 4 70 6 60 4 와 들어왔다고 했을 때 아래 식을 애용하여 dy배열을 그림과 같이 만들어 풀 수 있었다. d
[BOJ 2473] 세 용액 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2473 2473번: 세 용액 2473번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 세 용액 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 17345 4768 3415 26.153% 문제 KOI 부설 과학연구소에서는 많은 종류의 산성 용액과 알칼리성 용액을 보유하고 있다. 각 용액에는 그 용액의 특성을 나타내는 하나의 정수가 주어져있다. 산성 용액의 특성값은 1부터 1,000,000,000까지의 양의 정수로 나타내고, 알칼리성 용액의 특성값은 -1부터 -1,000,000,000까지의 음의 정수로 나타낸다.... www.acmicpc.net leetCode의 3Sum이라는 문제와 매우 비슷한 문제였다. 0에 가까운 세 용액의 합을 구해야 했기에 이 문제는 투포인터 문제였다. 먼저 용액들을 오름차순으로 정렬해준다. 이후 첫 for문을 통해 한 용액을 잡아두고 그 용액을 기준으
[BOJ 9935] 문자열 폭발 (Node.js) [내부링크]
https://www.acmicpc.net/problem/9935 9935번: 문자열 폭발 9935번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 문자열 폭발 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 (추가 시간 없음) 128 MB 44835 10623 7382 23.864% 문제 상근이는 문자열에 폭발 문자열을 심어 놓았다. 폭발 문자열이 폭발하면 그 문자는 문자열에서 사라지며, 남은 문자열은 합쳐지게 된다. 폭발은 다음과 같은 과정으로 진행된다. 문자열이 폭발 문자열을 포함하고 있는 경우에, 모든 폭발 문자열이 폭발하게 된다. 남은 문자열을 순서대로 이어 붙여 새로운 문자... www.acmicpc.net 스택을 활용한 문자열 문제였다. 먼저 문자들을 하나씩 스택에 넣어준다. 이후 C4라는 문자열이 폭발 문자열일 때, 스택을 계속 확인하며 마지막 글자가 4라면 C4인지 확인하고 맞다면 빼주는 방식으로 풀어주었다. 이 과정에서 배열 상
[BOJ 5582] 공통 부분 문자열 (Node.js) [내부링크]
LCS유형의 DP문제였다. 연속된 LCS를 구하는 문제였기에 dy배열을 만든 뒤 같은 글자가 나왔을 때 dy[i][k] = dy[i-1][k-1] + 1임을 이용하였다. 이후 if ( dy[i][k] > answer ) answer = dy[i][k]; 를 이용하여 문제를 풀 수 있었다. const [A, B] = require("fs").readFileSync("/dev/stdin").toString().split("\n"); let dy = Array.from({ length: B.length + 1 }, () => Array.from({ length: A.length + 1 }, () => 0) ); let answer = 0; for (let i = 1; i < dy.length; i++) { for (let k = 1; k < dy[0].length; k++) { if (B[i - 1] === A[k - 1]) { dy[i][k] = dy[i - 1][k - 1] + 1;
[BOJ 15681] 트리와 쿼리 (Node.js) [내부링크]
https://www.acmicpc.net/problem/15681 15681번: 트리와 쿼리 문제 간선에 가중치와 방향성이 없는 임의의 루트 있는 트리가 주어졌을 때, 아래의 쿼리에 답해보도록 하자. 정점 U를 루트로 하는 서브트리에 속한 정점의 수를 출력한다. 만약 이 문제를 해결하는 데에 어려움이 있다면, 하단의 힌트에 첨부한 문서를 참고하자. 입력 트리의 정점의 수 N과 루트의 번호 R, 쿼리의 수 Q가 주어진다. (2 ≤ N ≤ 10 5 , 1 ≤ R ≤ N, 1 ≤ Q ≤ 10 5 ) 이어 N-1줄에 걸쳐, U V의 형태로 트리에 속한 간선의 정보가 주어진다. (1 ≤ U, V ≤ N, U ≠ V) 이는 U와 V를... www.acmicpc.net 이 문제는 트리DP문제였다. 특정 정점을 루트로 하는 서브트리에 속한 정점의 수를 출력하는 문제였다. let dy = Array.from({ length: N + 1 }, () => 1); 이처럼 dy배열 하나를 초기화 해두고
[BOJ 1759] 암호 만들기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1759 1759번: 암호 만들기 1759번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 암호 만들기 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 48912 22968 15940 44.571% 문제 바로 어제 최백준 조교가 방 열쇠를 주머니에 넣은 채 깜빡하고 서울로 가 버리는 황당한 상황에 직면한 조교들은, 702호에 새로운 보안 시스템을 설치하기로 하였다. 이 보안 시스템은 열쇠가 아닌 암호로 동작하게 되어 있는 시스템이다. 암호는 서로 다른 L개의 알파벳 소문자들로 구성되며 최소 한 개의 모음(a, e, i, o... www.acmicpc.net 이 문제는 백트래킹을 이용하여 풀 수 있었다. 최소 한 개 이상의 모음이 들어가야했기에, 가능한 문자열의 경우의 수 들을 모으다 한 개 이상의 모음이 들어간, 암호가 가능한 문자열이라면 answer배열에 넣고, 이를 마지막에 출력하
[프로그래머스] 2 x n 타일링 (JavaScript) [내부링크]
https://school.programmers.co.kr/learn/courses/30/lessons/12900 코딩테스트 연습 - 2 x n 타일링 가로 길이가 2이고 세로의 길이가 1인 직사각형모양의 타일이 있습니다. 이 직사각형 타일을 이용하여 세로의 길이가 2이고 가로의 길이가 n인 바닥을 가득 채우려고 합니다. 타일을 채울 때는 다음과 같이 2가지 방법이 있습니다. 타일을 가로로 배치 하는 경우 타일을 세로로 배치 하는 경우 예를들어서 n이 7인 직사각형은 다음과 같이 채울 수 있습니다. 직사각형의 가로의 길이 n이 매개변수로 주어질 때, 이 직사각형을 채우는 방법의 수를 return 하는 solution 함수를 완성해주세요. 제한사항 가로의 길이 n은 60,000이하의... school.programmers.co.kr 이 문제는 dp문제이다. 이 문제는 피보나치 수열과 비슷한 방법으로 풀이된다. 가로의 길이가 1일때 들어갈 수 있는 경우의 수는 ㅣ 밖에 없다. 가로의 길
[BOJ 2294] 동전 2 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2294 2294번: 동전 2 2294번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 동전 2 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 (추가 시간 없음) 128 MB 50763 14953 10475 28.783% 문제 n가지 종류의 동전이 있다. 이 동전들을 적당히 사용해서, 그 가치의 합이 k원이 되도록 하고 싶다. 그러면서 동전의 개수가 최소가 되도록 하려고 한다. 각각의 동전은 몇 개라도 사용할 수 있다. 사용한 동전의 구성이 같은데, 순서만 다른 것은 같은 경우이다. 입력 첫째 줄에 n, k가 주어진다. (1 ≤ ... www.acmicpc.net https://blog.naver.com/dlaxodud2388/222806301056 [BOJ 12865] 평범한 배낭 (Node.js) https://www.acmicpc.net/problem/12865 이 문제는 냅색 유형의 dp
[FE] 브라우저의 렌더링 과정 : Chromium의 렌더링 파이프라인(Rendering Pipeline) [내부링크]
우리가 브라우저의 주소창에서 특정한 주소를 쳤다고 해보자. 그 주소가 http://www.hello12321.com:80/index.html 라고 쳐보자. 클라이언트의 브라우저가 웹 페이지를 띄우기까지의 아주 간략하게만 이야기하자면 다음과 같은 과정을 거칠 것이다. 1. 브라우저가 www.hello12321.com이라는 호스트 명을 추출한다. 2. 브라우저가 이 호스트 명에 대한 IP 주소를 찾는다. ex) 202.43.78.3 3. 브라우저가 포트번호(80)을 얻는다. 4. 브라우저가 202.43.78.3 의 80번 포트로 TCP 커넥션을 생성한다. 5. 브라우저가 서버로 HTTP GET 요청 메시지를 보낸다. 6. 브라우저가 서버에서 온 HTTP 응답 메시지를 읽는다. 7. 브라우저가 커넥션을 끊는다. 우리가 봐야 할 부분은 6번의 응답 부분이다. 응답으로 온 html과 css는 화면을 띄워내야 하는 브라우저 입장에서 보기에는 결국 단순한 텍스트들에 불과하다. 이 텍스트들과 사진
[BOJ 17404] RGB거리2 (Node.js) [내부링크]
https://www.acmicpc.net/problem/17404 17404번: RGB거리 2 문제 RGB거리에는 집이 N개 있다. 거리는 선분으로 나타낼 수 있고, 1번 집부터 N번 집이 순서대로 있다. 집은 빨강, 초록, 파랑 중 하나의 색으로 칠해야 한다. 각각의 집을 빨강, 초록, 파랑으로 칠하는 비용이 주어졌을 때, 아래 규칙을 만족하면서 모든 집을 칠하는 비용의 최솟값을 구해보자. 1번 집의 색은 2번, N번 집의 색과 같지 않아야 한다. N번 집의 색은 N-1번, 1번 집의 색과 같지 않아야 한다. i(2 ≤ i ≤ N-1)번 집의 색은 i-1, i+1번 집의 색과 같지 않아야 한다. 입력 첫째 줄에 집의 수 N... www.acmicpc.net 이 문제는 DP문제로, 9465 스티커 문제와 유사한 문제였다. 연속된 층은 RGB가 겹치면 안되고, 처음과 마지막은 무조건 다른 색이여야 하기에 정답을 찾아낼 배열을 3개(R,G,B) 만든다. 맨 윗층에서 R을 선택했을 때의
[BOJ 5639] 이진 검색 트리 (Node.js) [내부링크]
https://www.acmicpc.net/problem/5639 5639번: 이진 검색 트리 문제 이진 검색 트리는 다음과 같은 세 가지 조건을 만족하는 이진 트리이다. 노드의 왼쪽 서브트리에 있는 모든 노드의 키는 노드의 키보다 작다. 노드의 오른쪽 서브트리에 있는 모든 노드의 키는 노드의 키보다 크다. 왼쪽, 오른쪽 서브트리도 이진 검색 트리이다. 전위 순회 (루트-왼쪽-오른쪽)은 루트를 방문하고, 왼쪽 서브트리, 오른쪽 서브 트리를 순서대로 방문하면서 노드의 키를 출력한다. 후위 순회 (왼쪽-오른쪽-루트)는 왼쪽 서브트리, 오른쪽 서브트리, 루트 노드 순서대로 키를 출력한다. 예를 들어, 위의 이진 검색 트리의 전위 ... www.acmicpc.net 이 문제는 BST를 구현하여 풀 수 있었다. 노드 값 추가만 필요하였기에, 그 기능만 구현해도 풀 수 있는 문제였다. BST 구현은 아래 글에서 설명했었다. https://blog.naver.com/dlaxodud2388/222
[BOJ 12865] 평범한 배낭 (Node.js) [내부링크]
https://www.acmicpc.net/problem/12865 12865번: 평범한 배낭 12865번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 평범한 배낭 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 512 MB 69352 25440 16557 35.249% 문제 이 문제는 아주 평범한 배낭에 관한 문제이다. 한 달 후면 국가의 부름을 받게 되는 준서는 여행을 가려고 한다. 세상과의 단절을 슬퍼하며 최대한 즐기기 위한 여행이기 때문에, 가지고 다닐 배낭 또한 최대한 가치 있게 싸려고 한다. 준서가 여행에 필요하다고 생각하는 N개의 물건이 있다. 각 물건은 무게 W와 가치 V를 가지... www.acmicpc.net 이 문제는 냅색 유형의 dp문제였다. 아래와 같은 방법으로 풀 수 있다. 먼저 dy배열을 가방의 용량만큼 만들어 0으로 초기화해주자. 6, 13을 만났다면 0 1 2 3 4 5 6 7 0 0 0 0 0 0 13 13 이런 방식으
[BOJ 14502] 연구소 (Node.js) [내부링크]
https://www.acmicpc.net/problem/14502 14502번: 연구소 문제 인체에 치명적인 바이러스를 연구하던 연구소에서 바이러스가 유출되었다. 다행히 바이러스는 아직 퍼지지 않았고, 바이러스의 확산을 막기 위해서 연구소에 벽을 세우려고 한다. 연구소는 크기가 N×M인 직사각형으로 나타낼 수 있으며, 직사각형은 1×1 크기의 정사각형으로 나누어져 있다. 연구소는 빈 칸, 벽으로 이루어져 있으며, 벽은 칸 하나를 가득 차지한다. 일부 칸은 바이러스가 존재하며, 이 바이러스는 상하좌우로 인접한 빈 칸으로 모두 퍼져나갈 수 있다. 새로 세울 수 있는 벽의 개수는 3개이며, 꼭 3개를 세워야 한다. 예를 ... www.acmicpc.net 1이 벽, 2가 바이러스, 0이 전염 가능한 공간인 그래프에 벽을 3개 필수로 세운다. 이후 바이러스가 퍼졌을 때 안전한 공간 개수의 최대값을 구하는 문제였다. 조건을 보면 연구소의 가로 세로가 3~8 사이까지만 나올 수 있기에 이 문
[회고/계획] 2022년 상반기 회고 및 계획 [내부링크]
대략 7개월만에 작성하는 회고글이다. 6월이 끝난지는 조금 되었지만 상반기 회고글을 한번 작성해보려 한다. 2021년 회고글 위 사진은 2021년 회고글에서 작성했던 내용인데, 저 때 했던 말대로 요즘은 프론트엔드 쪽으로 공부를 하고 있다. React나 Next.js를 끄적끄적 다뤄보고 있는데, 너무 기본기가 없어 걱정이다. 정확히는 어디부터 어떤 개념들을 잡아 가야 할 지 조금 막막한 것이 걱정이다. 이러한 문제는 일단 기본기가 될법한 지식들을 찾아보며 보이는대로 공부해볼 계획이다. 언젠가는 퍼즐처럼 하나 둘 공부한 내용들이 맞춰지지 않을까 하는 마음으로 말이다. 3월에는 복학을 했다. 3학년 1학기로 복학을 했는데, 오랜만에 학교를 다녀서 그런가 개인 공부를 한동안 쉬엄쉬엄 했었다. 확실히 반성해야 할 점이라고 생각한다. 학교를 다니며 전공 필수 과목 중 하나로 네트워크 수업을 들었는데, 확실하게 공부했다고는 생각이 들지 않는다. 기본기가 되는 과목인 만큼 앞으로 시간을 내서 더
[FE] Chrome이 RAM 사용량을 많이 차지하는 이유 : Chrome의 멀티 프로세스 아키텍처(Multi-Process Architecture) [내부링크]
흔한 이야기지만 Chrome은 RAM을 정말 많이 사용한다. RAM을 많이 사용 할 수밖에 없는 Chrome의 멀티 프로세스 아키텍처에 대해 공부한 내용을 정리해 보려고 한다. 먼저 브라우저를 만드는 방법의 표준은 딱히 정해져 있지 않다. 그렇기에 브라우저를 만드는 방법에 대한 접근은 모두 다를 수밖에 없다. 그 중 크롬은 제작 방법을 멀티 프로세스 아키텍처(Multi-Process Architecture) 라는 방식으로 접근을 한 것이다. 먼저 브라우저의 구성 요소부터 보자. 1. 사용자 인터페이스 : 주소 표시줄, 이전/ 다음 페이지 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어. 3. 렌더링 엔진 : 요청한 콘텐츠를 표시 4. 네트워킹 : HTTP 요청과 같은 네트워크 호출에 사용 5. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. 6. JS 해석기 : JS
[BOJ 2667] 단지번호붙이기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2667 2667번: 단지번호붙이기 2667번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 단지번호붙이기 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 128 MB 123449 52939 33401 40.734% 문제 <그림 1>과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된... www.acmicpc.net 이 문제는 그래프 탐색 문제였다. 그래프를 모두 확인하며 1이 나오면 그래프를 한번 탐색하고 answer++해주는 방식으로 문제를 풀었다. 그래프 탐색을 하며 발견하는 1들은 모두 '0'으로 수정해주며 탐색하였다. const [l
[BOJ 1987] 알파벳 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1987 1987번: 알파벳 문제 세로 R칸, 가로 C칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1행 1열) 에는 말이 놓여 있다. 말은 상하좌우로 인접한 네 칸 중의 한 칸으로 이동할 수 있는데, 새로 이동한 칸에 적혀 있는 알파벳은 지금까지 지나온 모든 칸에 적혀 있는 알파벳과는 달라야 한다. 즉, 같은 알파벳이 적힌 칸을 두 번 지날 수 없다. 좌측 상단에서 시작해서, 말이 최대한 몇 칸을 지날 수 있는지를 구하는 프로그램을 작성하시오. 말이 지나는 칸은 좌측 상단의 칸도 포함된다. 입력 첫째... www.acmicpc.net 이 문제는 단순한 백트래킹 문제였다. 다만 한 번 나온 알파벳은 다시 나오면 안됐기에 Set을 이용해야했다. 시작하자마자 움직일 수 없는 경우 알파벳 하나는 들어가기에 1을 출력해주는 예외처리가 필요했다. Set과 백트래킹을 이용하여 문
[BOJ 1309] 동물원 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1309 1309번: 동물원 1309번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 동물원 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 22305 11131 8750 48.006% 문제 어떤 동물원에 가로로 두칸 세로로 N칸인 아래와 같은 우리가 있다. 이 동물원에는 사자들이 살고 있는데 사자들을 우리에 가둘 때, 가로로도 세로로도 붙어 있게 배치할 수는 없다. 이 동물원 조련사는 사자들의 배치 문제 때문에 골머리를 앓고 있다. 동물원 조련사의 머리가 아프지 않도록 우리가 2*N 배열에 사자를 배치하는 경우의 수... www.acmicpc.net 이 문제는 DP문제였다. 9465번 스티커 문제와 매우 유사한 문제이다. 1 (1번에 뒀을때) 2 (2번 + 없을 때) 5 (2번 + 없을 때) 12 (2번 + 없을 때) 29 (2번 + 없을 때) 1 (2번에 뒀을때) 2 (1번 + 없
[BOJ 10026] 적록색약 (Node.js) [내부링크]
https://www.acmicpc.net/problem/10026 10026번: 적록색약 10026번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 적록색약 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 128 MB 34704 19970 15538 56.903% 문제 적록색약은 빨간색과 초록색의 차이를 거의 느끼지 못한다. 따라서, 적록색약인 사람이 보는 그림은 아닌 사람이 보는 그림과는 좀 다를 수 있다. 크기가 N×N인 그리드의 각 칸에 R(빨강), G(초록), B(파랑) 중 하나를 색칠한 그림이 있다. 그림은 몇 개의 구역으로 나뉘어져 있는데, 구역은 같은 색으로 이루어져 있... www.acmicpc.net 이 문제는 DFS를 이용한 그래프 탐색을 이용하여 풀 수 있었다. 적록색약인 그래프와 적록색약이 아닌 그래프로 나눈 뒤 DFS탐색을 하여 문제를 풀었다. let input = require("fs") .readFileSync("./
[Node.js] Node.js와 Chrome의 이벤트 루프(Event Loop) 차이 [내부링크]
JavaScript와 관련된 공부를 하다보면 이벤트 루프라는 말을 종종 마주하곤 한다. Chrome같은 브라우저나 JavaScript 런타임인 Node.js에는 이벤트 루프라는 개념이 존재한다. 이 개념을 위하여 Node.js의 경우 libuv라는 라이브러리를 사용하고, Chrome의 경우 libevent라는 라이브러리를 사용한다. 이 글에서는 각 이벤트 루프들에 대한 내용과 Node.js, Chrome 에서의 이벤트루프의 차이에 대해 공부한 내용을 정리해보려 한다. 1.이벤트 루프(Event Loop)의 개념 이벤트 루프는 굉장히 추상적인 개념이다. 이벤트 처리를 위한 일련의 방법을 "이벤트 루프(Event Loop)" 라고 부른다. 따라서 "이벤트 루프"라는 개념을 코드로서 구현 할 수는 있지만, "이벤트 루프" 그 자체는 코드가 아니다. 예시로, V8엔진은 자바스크립트 코드를 읽기 위해서 존재하는 엔진이다. 파일 읽어오기 등과 같은 비동기로 동작해야할 특정한 이벤트를 만난다면,
[BOJ 11053] 가장 긴 증가하는 부분 수열 (Node.js) [내부링크]
https://www.acmicpc.net/problem/11053 11053번: 가장 긴 증가하는 부분 수열 11053번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 가장 긴 증가하는 부분 수열 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 107479 42283 27769 37.320% 문제 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = { 10 , 20 , 10, 30 , 20, 50 } 이고, 길이는 4이다. 입력 첫째 줄에 수열 A... www.acmicpc.net 이 문제는 dp문제였다. 먼저 dp배열을 만든다. 이후 10 20 10 30 20 50이 들어왔다고 했을 때 아래와 같은 방법으로 풀이한다. 첫 번째 값인 10부터 보자. 원소가 10만 있다고 했을 때 부분 증가
[BOJ 1697] 숨바꼭질 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1697 1697번: 숨바꼭질 1697번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 숨바꼭질 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 156675 44590 27941 25.050% 문제 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ 100,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 때 걷는다면 1초 후에 X-1 또는 X+1로 이동하게 된다. 순간이동을 하는 경우에는 1초 후에... www.acmicpc.net 최단거리를 구하는 문제였기에 이 문제는 BFS를 이용하여 풀 수 있었다. queue.shift()는 O(N)의 시간이 소요되기에 시간 초과가 나고, 대신 head와 tail을 지정해주어 풀 수 있었다. const [subin, sist
[BOJ 1931] 회의실 배정 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 1931번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 회의실 배정 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 123549 38138 27155 29.445% 문제 한 개의 회의실이 있는데 이를 사용하고자 하는 N개의 회의에 대하여 회의실 사용표를 만들려고 한다. 각 회의 I에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하면서 회의실을 사용할 수 있는 회의의 최대 개수를 찾아보자. 단, 회의는 한번 시작하면 중간에 중단될 수 없으며 한 회의가 끝나는 것과 동... www.acmicpc.net 이 문제는 그리디 문제였다. 먼저 받은 값들을 정렬을 해준다. 회의가 끝나는 순으로 정렬을 하되 같은 시간에 끝나는 회의가 있다면 시작하는 시간이 빠른 순으로 오름차순 정렬을 해준다. 이후 정렬된 값을 이용하여 answer 값을 늘
[BOJ 11000] 강의실 배정 (Node.js) [내부링크]
https://www.acmicpc.net/problem/11000 11000번: 강의실 배정 11000번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 강의실 배정 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 20073 5987 4385 29.527% 문제 수강신청의 마스터 김종혜 선생님에게 새로운 과제가 주어졌다. 김종혜 선생님한테는 S i 에 시작해서 T i 에 끝나는 N개의 수업이 주어지는데, 최소의 강의실을 사용해서 모든 수업을 가능하게 해야 한다. 참고로, 수업이 끝난 직후에 다음 수업을 시작할 수 있다. (즉, T i ≤ S j 일 경우 i 수업과 j 수업은 같이 들을... www.acmicpc.net 이 문제는 그리디 문제였다. 먼저 값을 받은 뒤 그 값을 [시작시간, 1] [종료시간, -1] 로 바꾼 뒤 시간을 기준으로 정렬하였다. 이후 1과 -1값을 순서대로 계산해주어 문제를 풀 수 있었다. let input = requir
[BOJ 9465] 스티커 (Node.js) [내부링크]
https://www.acmicpc.net/problem/9465 9465번: 스티커 9465번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 스티커 다국어 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 49394 22962 15578 47.103% 문제 상근이의 여동생 상냥이는 문방구에서 스티커 2n개를 구매했다. 스티커는 그림 (a)와 같이 2행 n열로 배치되어 있다. 상냥이는 스티커를 이용해 책상을 꾸미려고 한다. 상냥이가 구매한 스티커의 품질은 매우 좋지 않다. 스티커 한 장을 떼면, 그 스티커와 변을 공유하는 스티커는 모두 찢어져서 사용할 수 없게 된다. 즉, 뗀... www.acmicpc.net 이 문제는 DP문제였다. 먼저 위의 스티커를 골랐을 때, 아래의 스티커를 골랐을 때, 아무것도 고르지 않았을 때 이렇게 총 3가지로 dp배열을 만들었다. 이후 아래와 같은 방법을 이용하여 문제를 풀 수 있었다. (dy 배열) (0번 값)
[BOJ 1717] 집합의 표현 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1717 1717번: 집합의 표현 1717번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 집합의 표현 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 60384 19012 11515 28.173% 문제 초기에 {0}, {1}, {2}, ... {n} 이 각각 n+1개의 집합을 이루고 있다. 여기에 합집합 연산과, 두 원소가 같은 집합에 포함되어 있는지를 확인하는 연산을 수행하려고 한다. 집합을 표현하는 프로그램을 작성하시오. 입력 첫째 줄에 n(1 ≤ n ≤ 1,000,000), m(1 ≤ m ≤ 100,00... www.acmicpc.net 이 문제는 유니온파인드 문제였다. 아래와 같이 집합의 union연산과 find연산을 구현하여 문제를 풀 수 있었다. let set = Array.from({ length: nodes + 1 }, (v, i) => i); functi
[BOJ 2252] 줄 세우기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/2252 2252번: 줄 세우기 2252번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 줄 세우기 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 30406 17262 11349 55.240% 문제 N명의 학생들을 키 순서대로 줄을 세우려고 한다. 각 학생의 키를 직접 재서 정렬하면 간단하겠지만, 마땅한 방법이 없어서 두 학생의 키를 비교하는 방법을 사용하기로 하였다. 그나마도 모든 학생들을 다 비교해 본 것이 아니고, 일부 학생들의 키만을 비교해 보았다. 일부 학생들의 키를 비교한 결과가 주어졌을 때, 줄... www.acmicpc.net 이 문제는 위상정렬 문제였다. 먼저 graph배열을 만들었고 4가 2보다 작고, 3이 1보다 작다면 [ [], [], [], [ 1 ], [ 2 ] ] 같이 4번 인덱스에 2, 3번 인덱스에 1을 넣어 주었다. 이후 check배열을
[자료구조] 힙(Heap)의 개념 및 구현 (JavaScript) [내부링크]
1.힙(Heap)이란? 힙(Heap)이란 우선순위 큐(Priority Queue)를 위해 만들어진 자료구조이다. 완전 이진트리의 일종으로, 최대값과 최소값을 빠르게 찾기 위해 만들어진 자료구조이다. * 우선순위 큐는 말 그대로 큐에 우선순위 개념을 도입한 큐이다. 우선순위가 높은 데이터가 먼저 나가는 자료구조이다. 힙은 두 종류로 나눠진다. 최소 힙 : 부모 노드의 키 값이 자식 노드의 키 값보다 작은 힙 최대 힙 : 부모 노드의 키 값이 자식 노드의 키 값보다 큰 힙 여기서 키 값의 대소관계는 부모와 자식관계만 성립하고 형제 사이에는 대소관계가 정해지지 않는다. 아래 그림은 최소힙 예시이다. 2. 최소 힙(Min-Heap) 구현방법 힙은 배열을 이용하여 구현할 수 있다. 아래 그림과 같이 구현된다. 각 자식 노드들의 인덱스는 아래와 같이 계산한다. 왼쪽 자식노드 (부모 노드의 인덱스*2) + 1 오른쪽 자식노드 (부모 노드의 인덱스*2) + 2 먼저 아래처럼 최소힙 생성자 함수부터
[FE] Gulp+babel을 이용한 SCSS 컴파일 자동화 [내부링크]
SCSS는 CSS 전처리기 언어이기에 결국 CSS로 변환하는 과정을 거쳐야 한다. scss를 css로 변환하는 방법은 아래와 같다. $ npm install sass -g $ sass example.scss example.css sass가 전역 설치되었다는 가정 하에 "sass scss파일명 css파일명" 과 같이 해서 컴파일을 해줘야 사용할 수 있다. 이걸 매번 해준다면 매우 피곤할 것이다. 편하게 사용할 수 있는 방법이 있는데, 바로 gulp를 사용하는 것이다. 1. gulp란? gulp는 자동화 빌드 도구 중 하나이다. scss -> css 등의 반복적으로 수행되어야 하는 일들을 자동화해주는 툴이라고 보면 된다. 일련의 반복 작업들을 대신 처리해주다보니 개발 시간 단축에 도움을 준다. 앞서 말한 "반복적으로 수행되어야 할 일" 을 gulp에서는 "task"라고 부른다. (공식문서) https://gulpjs.com/docs/en/getting-started/async-compl
[BOJ 9251] LCS (Node.js) [내부링크]
https://www.acmicpc.net/problem/9251 9251번: LCS 9251번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 LCS 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 0.1 초 ( 하단 참고 ) 256 MB 50747 20308 14952 40.296% 문제 LCS(Longest Common Subsequence, 최장 공통 부분 수열)문제는 두 수열이 주어졌을 때, 모두의 부분 수열이 되는 수열 중 가장 긴 것을 찾는 문제이다. 예를 들어, ACAYKP와 CAPCAK의 LCS는 ACAK가 된다. 입력 첫째 줄과 둘째 줄에 두 문자열이 주어진다. 문자열은 알파... www.acmicpc.net 최장 공통 부분 수열의 길이를 출력하는 문제로, DP를 이용하여 풀 수 있었다. 이런 LCS문제의 경우 아래와 같이 2차원배열인 dy배열을 만들어 풀 수 있다. 모두 탐색하며 확인하는 문자열이 다른 경우 dy[i-1][k] 와 dy[i][
[BOJ 9252] LCS2 (Node.js) [내부링크]
https://www.acmicpc.net/problem/9252 9252번: LCS 2 9252번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 질문 검색 LCS 2 스페셜 저지 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 0.1 초 ( 하단 참고 ) 256 MB 23286 8166 6299 39.051% 문제 LCS(Longest Common Subsequence, 최장 공통 부분 수열)문제는 두 수열이 주어졌을 때, 모두의 부분 수열이 되는 수열 중 가장 긴 것을 찾는 문제이다. 예를 들어, ACAYKP와 CAPCAK의 LCS는 ACAK가 된다. 입력 첫째 줄과 둘째 줄에 두 문자열이 주어진다. ... www.acmicpc.net 9251번 LCS문제와 거의 똑같은 문제였다. LCS의 길이와 LCS 자체를 출력하는 문제였다. DP를 이용하여 풀 수 있는 문제였고, 모두 탐색하며 확인하는 문자열이 다른 경우 dy[i-1][k] 와 dy[i][k-1] 중 큰 값을
[BOJ 17212] 달나라 토끼를 위한 구매대금 지불 도우미(Node.js) [내부링크]
https://www.acmicpc.net/problem/17212 17212번: 달나라 토끼를 위한 구매대금 지불 도우미 17212번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 질문 검색 달나라 토끼를 위한 구매대금 지불 도우미 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 1 초 256 MB 1587 751 621 49.640% 문제 달나라 토끼들이 사용하는 화폐는 동전뿐이다. 동전의 종류는 1원, 2원, 5원, 7원 이렇게 4종류가 있다. 물건을 사고 동전으로 계산을 하는데 동전의 개수가 최소가 되도록 지불하지 않는 것은 불법이다. 예를 들어, 17원을 지불할 때 7원짜리 동전 1개와 5원짜리 동전 2개로 지불해야 합법이고, 7원짜리 ... www.acmicpc.net 제한사항에서 지불해야하는 금액이 최대 100000 이기에 이 문제는 dp를 이용하여 풀 수 있었다. 먼저 dy배열과 돈의 단위인 1,2,5,7이 들어있는 배열을 만들어준 뒤, 지불 금액으로 다 초기화
[CSS] CSS Flex (Flexbox) [내부링크]
1. flexbox 사용 이유 flexbox란 화면의 크기가 동적으로 변할 때에도 효율적으로 요소를 배치할 수 있게 해주는 css3의 레이아웃 방식이다. 사용하는 이유를 확실하게 보고 가자. 아래와 같은 박스들이 있다고 해보자. 이를 flexbox 없이 같은 간격으로 나눈다고 해보자. 아래와 같이 margin-left를 사용하여 잘 나눴다. .p1 { height: 500px; } .c1 { width: 300px; height: 300px; background-color: yellow; border: 1px solid black; display: inline-block; } .c1:nth-child(2) { margin-left: 250px; } .c1:nth-child(3) { margin-left: 250px; } 얼핏 보기에는 잘 나눈 것 같지만, 사실 여기에는 큰 문제가 하나 있다. 작업하고있는 내 컴퓨터 안에서만 이렇게 보인다는 점이다. 픽셀로 margin-left를 준
[오류모음] Error: Node Sass does not yet support your current environment : OS X Unsupported architec... [내부링크]
맥북 m1에서 node-sass를 사용하려고 했는데 위와 같은 오류가 발생하였다. https://stackoverflow.com/questions/64612707/node-sass-does-not-yet-support-your-current-environment-windows-64-bit-with-uns Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88) I have tried to install gulp-sass latest version with npm i gulp-sass --save-dev in the begining I got a lot of errors but later solved them. But whenever I try to run gulp I got this error: Error... stackoverflow.com 위 링크를 보니
[LeetCode] 75. Sort Colors (JavaScript) [내부링크]
https://leetcode.com/problems/sort-colors/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com sort메서드 없이 정렬을 하는 문제였다. 단 nums 레퍼런스는 유지해야하는 문제였다. 특정 소트를 짜서 풀려 하였으나 들어올 수 있는 원소가 0,1,2밖에 없는 것 때문에 그렇게 하지 않아도 풀 수 있는 문제였다. /** * @param {number[]} nums * @return {void} Do not return anything, modify nums in-place instead. */ let sortColors = function (nums) { let zero = 0; let one = 0; let two = 0; le
[LeetCode] 784. Letter Case Permutation (JavaScript) [내부링크]
https://leetcode.com/problems/letter-case-permutation/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문자열이 들어오면 대문자와 소문자 조합으로 나올 수 있는 모든 케이스를 리턴하는 문제였다. DFS를 이용하여 풀 수 있는 문제였다. /** * @param {string} s * @return {string[]} */ let letterCasePermutation = function (s) { let answer = []; s = s.split(""); let numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; function DFS(str, idx) {
[LeetCode] 198. House Robber (JavaScript) [내부링크]
https://leetcode.com/problems/house-robber Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 강도가 인접한 집을 털지 않고 가장 많은 금액을 털었을 때의 최대 금액을 리턴하는 문제였다. 각 집들은 배열로 주어졌다. 재귀로 풀 수는 있지만 그렇게 풀면 시간복잡도가 매우 커질 문제였기에 이 문제는 DP를 이용하여 풀 수 있는 문제였다. /** * @param {number[]} nums * @return {number} */ let rob = function (nums) { let curr = 0; let prev = 0; let temp; nums.forEach((v) => { temp = curr; curr = Math.max
[LeetCode] 200. Number of Islands (JavaScript) [내부링크]
https://leetcode.com/problems/number-of-islands/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 0이 물이고 1이 땅일 때 상하좌우로 인접해있으면 하나의 섬으로 인식한다고 한다. 총 몇 개의 섬이 있는지 찾는 문제였다. DFS를 이용하여 1을 0으로 바꿔가며 풀 수 있는 문제였다. /** * @param {character[][]} grid * @return {number} */ let numIslands = function (grid) { let answer = 0; let dx = [1, 0, -1, 0]; let dy = [0, -1, 0, 1]; function DFS(x, y) { grid[y][x] = "0"
[Linux] M1에서 UTM을 이용한 Ubuntu 설치 [내부링크]
https://mac.getutm.app/ UTM Securely run operating systems on your Mac mac.getutm.app https://releases.ubuntu.com/20.04/ Ubuntu 20.04.4 LTS (Focal Fossa) Select an image Ubuntu is distributed on three types of images described below. Desktop image The desktop image allows you to try Ubuntu without changing your computer at all, and at your option to install it permanently later. This type of image is what most people will want to use. You will need... releases.ubuntu.com 먼저 두 링크에서 utm과 ubuntu 이미
[LeetCode] 283. Move Zeroes (JavaScript) [내부링크]
https://leetcode.com/problems/move-zeroes/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 배열이 주어지면 0을 무조건 맨 끝으로 옮기는 아주 간단한 문제였다. splice와 push를 이용해 풀어주었다. /** * @param {number[]} nums * @return {void} Do not return anything, modify nums in-place instead. */ let moveZeroes = function (nums) { for (let i = nums.length - 1; i >= 0; i--) { { if (nums[i] === 0) { nums.push(0); nums.splice(i, 1);
[프로그래머스] 큰 수 만들기 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42883 코딩테스트 연습 - 큰 수 만들기 문제 설명 어떤 숫자에서 k개의 수를 제거했을 때 얻을 수 있는 가장 큰 숫자를 구하려 합니다. 예를 들어, 숫자 1924에서 수 두 개를 제거하면 [19, 12, 14, 92, 94, 24] 를 만들 수 있습니다. 이 중 가장 큰 숫자는 94 입니다. 문자열 형식으로 숫자 number와 제거할 수의 개수 k가 solution 함수의 매개변수로 주어집니다. number에서 k 개의 수를 제거했을 때 만들 수 있는 수 중 가장 큰 숫자를 문자열 형태로 return 하도록 solution 함수를 완성하세요. 제한 조건 number는 2... programmers.co.kr 스택을 만들어두고 하나씩 넣어두면서 뒤 수와 비교하며 문제를 풀 수 있는 그리디 문제였다. 1924의 경우 ['1'] -> ['9'] -> ['9', '2'] -> ['9', '4']
[LeetCode] 242. Valid Anagram (JavaScript) [내부링크]
https://leetcode.com/problems/valid-anagram Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com t로 들어온 문자열이 s로 들어온 문자열과 동일한 알파벳 구성으로 이루어져있는지 확인하는 문제였다. 해시를 이용하여 풀 수 있는 문제였다. let isAnagram = function (s, t) { if (s.length !== t.length) return false; let answer = true; let hash = {}; s = s.split(""); t = t.split(""); s.forEach((v) => { if (hash.hasOwnProperty(v)) { hash[v] += 1; } else { hash[v]
[BOJ 1463] 1로 만들기 (Node.js) [내부링크]
https://www.acmicpc.net/problem/1463 1463번: 1로 만들기 1463번 제출 맞힌 사람 숏코딩 재채점 결과 채점 현황 강의 1로 만들기 시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 0.15 초 ( 하단 참고 ) 128 MB 191033 61763 39281 32.033% 문제 정수 X에 사용할 수 있는 연산은 다음과 같이 세 가지 이다. X가 3으로 나누어 떨어지면, 3으로 나눈다. X가 2로 나누어 떨어지면, 2로 나눈다. 1을 뺀다. 정수 N이 주어졌을 때, 위와 같은 연산 세 개를 적절히 사용해서 1을 만들려고 한다. 연산을 사용하는 횟수의 최솟값을 출력하시오. 입력 첫째 ... www.acmicpc.net 이 문제는 dp문제였다. 1을 빼는경우 dy[N] = dy[n-1]+1 2로 나누어지는경우 dy[n] = dy[n/2] + 1 3로 나누어지는경우 dy[n] = dy[n/3] + 1 임을 이용하여 문제를 풀 수 있었다. const f
[LeetCode] 1415. The k-th Lexicographical String of All Happy Strings of Length n (JavaScript) [내부링크]
https://leetcode.com/problems/the-k-th-lexicographical-string-of-all-happy-strings-of-length-n/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com a, b, c의 알파벳만 사용해서 문자를 만들 때, 연속되는 알파벳이 없는 문자열을 happy string이라고 한단다. n자리수까지 가능한 알파벳들을 구한 뒤, 그 알파벳들 중 k번째 문자열을 리턴하는 문제였다. 백트래킹을 이용하여 문제를 풀 수 있었다. 동일 문자열이 들어가지 않게 막고, k번째 문자열까지만 구할 수 있도록 하여 풀 수 있었다. /** * @param {number} n * @param {number} k * @return
[LeetCode] 695. Max Area of Island (JavaScript) [내부링크]
https://leetcode.com/problems/max-area-of-island/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 0과 1로 이루어진 2차원 배열이 있을 때, 상하좌우 1로 이어진부분이 섬이다. 가장 큰 섬의 너비를 리턴하면 되는 문제였다. 깊이탐색을 통하여 풀 수 있는 문제였다. let maxAreaOfIsland = function (grid) { let answer = 0; let check = 0; let dy = [0, -1, 0, 1]; let dx = [1, 0, -1, 0]; function DFS(x, y, L) { check++; grid[y][x] = 0; for (let i = 0; i < 4; i++) { let
[LeetCode] 64. Minimum Path Sum (JavaScript) [내부링크]
https://leetcode.com/problems/minimum-path-sum/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 좌측 상단에서 우측 하단의 배열까지 이동하며, 가장 작은 합의 값을 가지고 이동하도록 하는 문제였다. 조건에서 2차원 배열의 크기가 200*200까지 될 수 있었기에 이 문제는 DP문제였다. 위 모서리부분과 왼쪽 모서리부분은 무조건 한 방향으로만 더할 수 있기에, 먼저 더해준다. [ [ 1, 4, 5 ], [ 2, 5, 1 ], [ 6, 2, 1 ] ]과 같은 형태로 말이다. 이후 남은 칸들을 위와 왼쪽 칸 중 더했을 때 작은 값인 경우만 더해나가는 방법으로 풀 수 있었다. /** * @param {number[][]} gri
[프로그래머스] 점프와 순간이동(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12980 코딩테스트 연습 - 점프와 순간 이동 OO 연구소는 한 번에 K 칸을 앞으로 점프하거나, (현재까지 온 거리) x 2 에 해당하는 위치로 순간이동을 할 수 있는 특수한 기능을 가진 아이언 슈트를 개발하여 판매하고 있습니다. 이 아이언 슈트는 건전지로 작동되는데, 순간이동을 하면 건전지 사용량이 줄지 않지만, 앞으로 K 칸을 점프하면 K 만큼의 건전지 사용량이 듭니다. 그러므로 아이언 슈트를 착용하고 이동할 때는 순간 이동을 하는 것이 더 효율적입니다. 아이언 슈트 구매자는 아이언 슈트를 착용하고 거리가 N 만큼 떨어져 있는 장소로 가려고 합니다. 단, 건전지 사용량을 ... programmers.co.kr 이 문제는 DP문제였다. 짝수일경우 절반으로 나누고 홀수일경우 -1을 해주는 방법으로 진행해주어 풀 수 있었다. function solution(n) { let answer = N
[프로그래머스] 네트워크 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/43162 코딩테스트 연습 - 네트워크 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있을 때 컴퓨터 A와 컴퓨터 C도 간접적으로 연결되어 정보를 교환할 수 있습니다. 따라서 컴퓨터 A, B, C는 모두 같은 네트워크 상에 있다고 할 수 있습니다. 컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 네트워크의 개수를 return 하도록 solution 함수를 작성하시오. 제한사항 컴퓨... programmers.co.kr 문제 설명 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로
[프로그래머스] 2개 이하로 다른 비트 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/77885 코딩테스트 연습 - 2개 이하로 다른 비트 양의 정수 x 에 대한 함수 f(x) 를 다음과 같이 정의합니다. x 보다 크고 x 와 비트가 1~2개 다른 수들 중에서 제일 작은 수 예를 들어, f(2) = 3 입니다. 다음 표와 같이 2보다 큰 수들 중에서 비트가 다른 지점이 2개 이하이면서 제일 작은 수가 3이기 때문입니다. 수 비트 다른 비트의 개수 2 000...0010 3 000...0011 1 f(7) = 11 입니다. 다음 표와 같이 7보다 큰 수들 중에서 비트가 다른 지점이 2개 이하이면서 제일 작은 수가 11이기 때문입니다. 수 비트 다른 비트의 개수 7 000... programmers.co.kr 들어온 숫자보다 크고 비트가 1~2개만 다른 수 중 제일 작은 수를 리턴해야 하는 문제였다. 들어온 수가 짝수일 경우 마지막 비트는 무조건 0이기때문에 이 비트만 바꿔주고 계
[LeetCode] 202. Happy Number (JavaScript) [내부링크]
https://leetcode.com/problems/happy-number/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 어떤 숫자가 주어진다면 그 숫자를 자리별 숫자들을 제곱해서 더하기를 반복합니다. 위 동작을 계속 반복하여 1이 된다면 happy number란다. happy number인지 확인하는 함수를 만들면 되는 문제였다. happy number가 아닌 2같은경우 2 -> 4 -> 16 -> 37 -> 58 -> 89 -> 145 -> 42 -> 20 -> 4 -> 16 과 같은 형태로 반복되어 happy number가 아니게 된다. 계속 재귀로 반복호출하며 만약 이미 나온숫자가 또나온다면 false, 1이 끝내 나온다면 true로 나오게하여
[회고/계획] 07.06~09.20 회고 및 계획 [내부링크]
07.06 ~ 09.20까지의 회고 및 계획이다. 굉장히 오랜만의 회고글이다. 일단 군생활은 36.2퍼정도?했는데 이쯤 되니 군생활은 완전히 적응된 듯 하다. 개발공부와 운동 모두 꾸준히 하려하고있긴 하다. 개발공부는 연등시간(22:00 이후)을 이용해 공부하고있다. 군에서 자기개발비용이라고 돈 지원해주는게 있는데 그 돈으로 토비의 스프링과 운영체제(공룡책)를 샀다. 토비의 스프링은 사고나서 보니 어차피 효율도 안날텐데 왜샀는지 모르겠다. 거의 공짜돈이라고 생각하고 써서그런가 충동구매를 한 듯 하다. 운영체제 책은 자바 성능 튜닝이야기 라는 책을 읽다가 jvm을 상세하게 파놓은 내용 등과 같은 이론적인 내용이 나올때마다 벽이 느껴지고, 이론공부가 확실히 효율이 잘나오면서 결국 나중에 큰 힘이될거같다는게 크게 느껴져 사서 공부하게 되었다. 그래서 요즘은 연등시간에 운영체제를 공부해보고 있다. 학교다닐때 별로 열심히 안들었었는데 잘좀 들었으면 훨씬 이해가 빨랐을텐데 하면서 아주 크게 후
[회고/계획] 09.21~11.13 회고 및 계획 [내부링크]
2020.09.21~2020.11.13까지의 회고 및 계획입니다. 약 두달?만의 회고글인것 같다. 군생활은 50퍼센트정도를 향해 달려가고있다. 대략 절반정도 했으니 지금까지 했던 걸 한번 더 하면 전역인 셈이다. 그런 의미에서 예전에 썼던 회고글들을 한번 보았다. 군대가기 직전 썼던 글에서 썼던 글에는 분명 코딩을 하기엔 효율이 잘 안나올테니 cs위주의 공부를 하고싶다고 했었고 클린코드도 읽어보고싶다고 썼었는데 지금보면 참 뻘짓도 많이한것 같다. (스프링책을사고 그랬으니...) 처음에 계획했던 http 동물책은 2번정도 깔짝 읽었다. 몇번 반복해서 읽어서 이해가 잘 간다 싶은 내용들도 있지만 사실 볼때마다 새로운 내용도 많고, 아직도 이해가 안가는 내용들도 많다. 무엇보다 공부를 연등시간을 이용해서만 하다보니 굉장히 자주 까먹는다...ㅎ 요즘은 cs공부에서 운영체제를 하고있다. os책중 공룡책을사서 책보고하려했는데 책으로는 도저히 안읽히고 재미도 없어서 책 사놓고 인터넷에서 강의를
[회고/계획] 2020년 회고 [내부링크]
2020년 회고글입니다. 2020년은 거의 대부분을 군대 안에서 보낸 해였다. 입대 전에는 군대 안에서 어떻게 시간을 보내야 군생활이 나중에 좋은 개발자로 성장하는데 밑거름이 될 수 있을까 고민을 정말 많이 했었다. 군대 자체가 공부하기 힘든 환경이라고 많이 들었던지라 확실하게 공부계획을 짜고 입대를 해야 많이는 아니더라도 어느정도는 얻어갈 수 있지 않을까 하는 생각이 컸었다. 이 때문에 입대 전부터 꾸준히 공부하는 습관을 이어나가야 군대에서도 할 수 있지 않을까 하는 생각으로 입대 전까지 안놓고 꾸준히 했던거 같긴 하다. 3월3일 입대였다. 지금 생각해보면 저때 그래도 안놓고 했던게 큰 도움이 됐던것 같다. 아마 저때 안했으면 입대 후 지금까지 안해왔을수도 있지 않을까 싶다. 이 외로, 아는 선배분들에게 따로 연락해 조언도 얻어보고 이곳저곳 알아보고 했었다. 그러다 결론적으로 하고자 했던 것은 예전 이 글 개발 공부 블로그 : 네이버 블로그 군대 2020.03.03 ~ 2021.0
[회고/계획] 21.02.16~21.03.28 회고 [내부링크]
코로나때문에 현지전역을 하는지라 전역이 대략 4달정도 남았다. 근 한달동안은 계속 부대에서 뭐가 있기도 하고 의욕도 예전만큼은 못한지라 쉬엄쉬엄 공부하는 느낌이다. 시간이나 빨리 가서 전역하고싶다는 생각이 자주 드는 요즘이다. 요즘은 계속 자바스크립트 관련해서 좀 깊숙하게 공부해보려 하고있다. 사실 공부라고 하기도 모호한게 그냥 궁금한거나 처음보는내용 있으면 적어놨다가 주구장창 서핑해보고 이런내용 저런내용 공책에 정리했다가 나중에 엮어서 이해해보려 하는? 느낌이다. 최근에는 자바스크립트 엔진 동작하는 것 같은거나 가비지컬렉션 원리 이런거 보고있는데, 막상 하려고 앉으면 그냥 궁금해서 알아보게 된다. 그러다보니 요즘 드는 생각인데 이렇게 시간에 쫒기지 않으면서 그냥 궁금했던 내용이나 원리같은 내용들을 찾아보고 알아볼 수 있는 때가 이런 군생활 하고있을 때 말고 또 올까 싶긴 하다. 공부양이 많지는 않지만 이것도 정말 나쁘진 않은 것 같다. 저번에 자바스크립트 엔진의 히든클래스 관련해서
[OS] 메모리 관리기법 페이징(Paging) [내부링크]
1. 페이징이란? https://blog.naver.com/dlaxodud2388/222399647477 [OS] 외부 메모리 단편화(External Fragmentation)과 연속 메모리 할당방식 최초적합(First-fit) 최적적합(Best-fit) 최악적합(Worst-fit) 일반적으로 우리가 컴퓨터를 부팅을 하고 나면 메인메모리의 상태는 아래와 같을것이다. 운영체제를 제외하... blog.naver.com 위 글에서 나왔던 내용처럼, 연속 메모리 할당(Contiguous Memory Allocation) 방식으로 메모리를 할당하게 되면 외부 메모리 단편화(External Fragmentation)라는 문제를 해결하기 어려워 메모리를 제대로 사용하지 못하는 현상들이 발생한다고 했었다. 이 문제는 "프로세스는 꼭 하나로 통째로 넣어야 한다"는 생각을 깨뜨리고, 프로세스를 잘게 잘라 메모리에 할당한 뒤 프로세스가 하나로 붙어있는 것처럼 보이게 CPU를 속이는 방법으로 문제를 해결
[프로그래머스] JadenCase 문자열 만들기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12951 코딩테스트 연습 - JadenCase 문자열 만들기 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상인 문자열입니다. s는 알파벳과 공백문자(" ")로 이루어져 있습니다. 첫 문자가 영문이 아닐때에는 이어지는 영문은 소문자로 씁니다. ( 첫번째 입출력 예 참고 ) 입출력 예 s return "3people unFollowed me" "3people Unfollowed Me" "for ... programmers.co.kr 코드는 아래와 같다. function solution(s) { let a; let word = s.split(" "); for(let i = 0;i<word.leng
[OS] TLB(Translation Lookaside Buffer)와 유효 접근 시간(Effective Access Time) [내부링크]
우리는 외부 메모리 단편화 현상을 막기 위해 페이징(Paging)이라는 기술을 사용한다. 이 페이징이라는 기술을 사용하기 위해서는 CPU가 내는 논리 주소를 물리 주소로 바꾸는 이런 주소 변환 과정이 필요하다. 이러한 일을 하는 MMU를 "페이지 테이블(Page Table)" 이라고 하는데, 우선 이 페이지 테이블을 어떻게 만들었을지부터 한번 생각해보자. 1. CPU에 넣기 2. 메인메모리에 넣기 CPU에 넣는다고 한번 생각해보자. 주소 변환이 빠르긴 하겠지만, 메모리가 아닌 CPU에 페이지 테이블을 넣는다면 페이지 테이블의 엔트리를 담기에는 너무 작을 것이다. 그럼 메인메모리를 생각해보자. 페이지 테이블의 엔트리는 크게 만들 수 있을 것이다. 하지만 속도가 많이 느릴 것이기에 부적합할 것이다. 결론적으로는 빠른 캐시메모리를 만들 때 쓰는 SRAM을 이용해서 이 페이지 테이블을 만들었는데, 이를 TLB(Translation Lookaside Buffer)라고 한다. 그럼 이 TLB를
[회고/계획] 20.03.03~21.07.31(군생활) 회고 및 계획 [내부링크]
계속되는 코로나로 인해 21.07.31 토요일 오늘, 미복귀 휴가(현지전역)를 출발하였다. 20.03.03부터 21.07.31까지 군생활을 해오는동안 여러 회고글들을 작성했었는데, 작성했던 이 글들을 기반으로 군생활을 회고해볼까 한다. 입대 전 회고 및 계획글 우선 위 글은 맨 처음 입대 전에 작성했던 글인데, 보면 CS위주의 지식들을 공부들을 해야겠다!를 생각하고 들어갔었다. 입대 전 회고 및 계획글 그래서 위에서 말했던 대표적인 CS지식들로 HTTP와 OS를 언급했었다. 자대배치 후에 짬을 내서 공부하겠다고 했었는데, 훈련소에서 책 받아서 일병 중순~말까지 공부했던 것 같다. 물론 확실하게 공부했고 공부했던 내용들을 확실히 기억한다고는 절때 말 못한다. 공부하면서 작성했던 게시들을 한번 쭉 보던가 해야겠다고 생각한다. OS는 작년 11월인가 공룡책을 사서 시작했었다. 근데 사고나니 책으로 공부하기 너무 어려워 무료 인터넷 강의 하나 있길래 그걸 들으며 했었다. 근데 그 강의 절반
[프로그래머스] 프린터(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42587?language=javascript 코딩테스트 연습 - 프린터 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, ... programmers.co.kr function solution(priorities, location) { let answer = 0; let prioritiesindex = []; //
[프로그래머스] 기능개발(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42586 코딩테스트 연습 - 기능개발 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요.... programmers.co.kr 매일 작업속도만큼 개발이 완료되기 때문에 우선 반복문을 돌리며 작업 진도를 최신화해준다. 최신화해주며 제일 앞에 있는 기능이 완료되었는지를 확인한다. 완료되었다면 그 뒤의 기능들도 완료가
[프로그래머스] 최댓값과 최솟값(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12939 코딩테스트 연습 - 최댓값과 최솟값 문제 설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 입출력 예 s return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" programmers.co.kr function solution(s) { let answer = []; let arr = s.split(" "); answer.push(Math.min.apply("",arr)) answer.push(Ma
[프로그래머스] 피보나치 수(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12945 코딩테스트 연습 - 피보나치 수 문제 설명 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567으로 나눈 나머지를 리턴하는 함수, solution을 완성해 주... programmers.co.kr 맨 처음 이 문제를 보고 재귀함수를 사용해 풀었었다. 그 결과 시간초과가 났었고, 이유는 n번째 피보나치 수를 계산하기위해 항상 0부터 다 계산하기 때문이였다. 결국 배열에 저장해 계산
[프로그래머스] 피로도 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/87946 코딩테스트 연습 - 피로도 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 8... programmers.co.kr 보유한 피로도를 기준으로 최대 몇 개의 던전을 돌 수 있는지 구하는 문제였다. 각 던전을 돌기 위해선 그 던전의 최소 보유 피로도 이상의 피로도를 보유해야 돌 수 있었다. 이 문제는 최소 보
[프로그래머스] 배달 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12978 코딩테스트 연습 - 배달 N개의 마을로 이루어진 나라가 있습니다. 이 나라의 각 마을에는 1부터 N까지의 번호가 각각 하나씩 부여되어 있습니다. 각 마을은 양방향으로 통행할 수 있는 도로로 연결되어 있는데, 서로 다른 마을 간에 이동할 때는 이 도로를 지나야 합니다. 도로를 지날 때 걸리는 시간은 도로별로 다릅니다. 현재 1번 마을에 있는 음식점에서 각 마을로 음식 배달을 하려고 합니다. 각 마을로부터 음식 주문을 받으려고 하는데, N개의 마을 중에서 K 시간 이하로 배달이 가능한 마을에서만 주문을 받으려고 합니다. 다음은 N = 5, K = 3인 경우의 ... programmers.co.kr 이 문제는 다익스트라를 이용해 풀 수 있는 문제였다. 풀이 방법은 아래와 같다. 1. 우선 각 노드에 대한 정보들을 가지고있는 인접리스트를 생성하였다. 2. 다익스트라를 위해 distance를
[LeetCode] 169. Majority Element (JavaScript) [내부링크]
https://leetcode.com/problems/majority-element/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 들어와있는 배열의 원소들 중 배열의 원소 수/2 보다 많이 들어온 수를 리턴하는 문제였다. 이 문제는 간단한 해시문제였다. 아래와 같은 방법으로 풀 수 있었다. let majorityElement = function (nums) { let half = nums.length / 2; let map = {}; nums.forEach((v) => { if (map.hasOwnProperty(v)) { map[v] += 1; } else { map[v] = 1; } }); for (let a in map) { if (map[a] >=
[LeetCode] 11. Container With Most Water (JavaScript) [내부링크]
https://leetcode.com/problems/container-with-most-water/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 하나의 배열이 주어졌을 때 위 그림과 같은 형태로 통을 만들 수 있다면 최대한 많이 담을 수 있는 통의 상태에서 물의 양을 구하는 문제였다. 제한사항에서 배열의 크기가 최대 10^4였다. 그렇기에 이 문제는 투포인터를 이용하여 O(n)으로 풀 수 있었다. lt와 rt중 작은 것으로 계산한 뒤 작았던 것을 ++또는 --해주는 방식으로 풀었다. let maxArea = function (height) { let max = Number.MIN_SAFE_INTEGER; let lt = 0, rt = height.len
[LeetCode] 155. Min Stack (JavaScript) [내부링크]
https://leetcode.com/problems/min-stack Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com minStack이란걸 구현하는 문제였다. min값을 추출하는 기능이 있는 스택이란다. stack이 min값또한 가질 수 있게 하여 풀 수 있었다. var MinStack = function () { this.stack = []; }; /** * @param {number} val * @return {void} */ MinStack.prototype.push = function (val) { let min = this.stack.length === 0 ? val : this.stack[this.stack.length - 1][1]; this.
[LeetCode] 78. Subsets (JavaScript) [내부링크]
https://leetcode.com/problems/subsets Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 정수 배열이 주어졌을 때 가능한 중복을 제외한 모든 하위 집합을 찾는 문제였다. DFS로 모든 경로에 대해 탐색하여 풀 수 있었다. let subsets = function (nums) { let answer = []; function DFS(L, arr) { answer.push(arr); for (let i = L; i < nums.length; i++) { DFS(i + 1, arr.concat(nums[i])); } } DFS(0, []); return answer; };
[LeetCode] 70. Climbing Stairs (JavaScript) [내부링크]
https://leetcode.com/problems/climbing-stairs/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 이 문제는 DP문제였다. 메모이제이션을 이용하여 풀 수 있었다. /** * @param {number} n * @return {number} */ let climbStairs = function (n) { let memo = Array.from({ length: n + 1 }, () => 0); memo[1] = 1; memo[2] = 2; function DFS(result) { if (memo[result] > 0) return memo[result]; else { return (memo[result] = DFS(result
[LeetCode] 496. Next Greater Element I (JavaScript) [내부링크]
https://leetcode.com/problems/next-greater-element-i/ Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 배열1과 배열2가 주어졌을 때 배열 1의 원소를 배열 2에서 찾아 인덱스를 구한 뒤 그 인덱스의 오른쪽만 쭉 탐색하여 그 수보다 큰 수 중 처음 만나는 수를 저장하는 문제였다. 말 그대로 구현하면 되는 간단한 문제였다. /** * @param {number[]} nums1 * @param {number[]} nums2 * @return {number[]} */ let nextGreaterElement = function (nums1, nums2) { let answer = []; nums1.forEach((v) =>
[Node.js] Puppeteer를 이용한 웹 매크로 만들기 [내부링크]
https://github.com/puppeteer/puppeteer puppeteer은 node.js에서 쓰이는 웹 자동화 API중 하나이다. p...
[React 오류] Next.js Global CSS cannot be imported from files other than your Custom <App> 오류 해결 [내부링크]
Next.js를 사용하며 css를 설정하다보면 아래와 같은 오류를 만날 수 있다. 이 오류는 css간의 충돌을 막...
[CSS] Position 속성(static, relative, absolute, fixed) [내부링크]
css에는 position이라는 속성이 있다. 이 position속성은 이름 그대로 요소들의 위치를 지정하기 위해 존재...
[프로그래머스] 오픈채팅방 (JavaScript) [내부링크]
문제 설명 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가...
[CSS] 박스 모델(Box Model) [내부링크]
우리가 만드는 모든 HTML의 엘리먼트들은 "박스 모델(Box Model)"이라는 구조로 이루어져 ...
[프로그래머스] 단어 변환 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/43163 문제 설명 두 개의 단어 begin, target과 단어...
[JavaScript] ES5 이후의 Execution Context(실행 컨텍스트)의 동작 방식과 Lexical Nesting Structure(Scope chain) [내부링크]
ES5를 기점으로 Execution Context의 동작하는 방식과 구조가 많이 달라졌다. 이 블로그의 예전 포스팅...
[프로그래머스] 구명보트 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42885 이 문제는 투포인터를 사용하여 풀 수 있는 그...
[NestJS] typeorm-seeding과 @faker-js/faker를 이용한 데이터베이스 시딩(Seeding) [내부링크]
데이터베이스 마이그레이션을 하고나면 초기 데이터들을 임의로 넣어주고 싶을 때가 있다. 그럴 때 사용하...
[프로그래머스] 양궁대회(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/92342 1. 문제설명 카카오배 양궁대회가 열렸습니다....
[LeetCode] 47. Permutations II (JavaScript) [내부링크]
https://leetcode.com/problems/permutations-ii 문제에 쓰여있는대로 단순히 순열을 구하는 문제였다. 사...
[자료구조] 이진탐색트리(BST)의 개념 및 구현 (JavaScript) [내부링크]
1. 이진탐색이란? 이진탐색트리에 대해 이야기 하기 전에 이진 탐색에 대해 먼저 이야기하겠다. 이진 탐색...
[LeetCode] 62. Unique Paths (JavaScript) [내부링크]
https://leetcode.com/problems/unique-paths 이 문제는 DP문제였다. DFS나 BFS로 쭉 돌리면 시간...
[React] useCallback()을 이용한 렌더링 성능 최적화 [내부링크]
React 공식문서에 나와있는 useCallback()을 확인해보면 아래와 같다. 보면 메모이제이션된 콜백을 반환...
[React] 부모-자식 컴포넌트 간의 데이터 전달 방법 [내부링크]
리액트를 사용하다보면 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터를 주고받아야 할 일들이 있다. 1. ...
[LeetCode] 79. Word Search (JavaScript) [내부링크]
https://leetcode.com/problems/word-search/ 글자들이 들어있는 보드가 주어졌을 때, word인자에 들어온 ...
[LeetCode] 22. Generate Parentheses (JavaScript) [내부링크]
https://leetcode.com/problems/generate-parentheses/ 들어온 인자만큼 괄호로 이루어진 문자열을 만들 때...
[LeetCode] 46. Permutations (JavaScript) [내부링크]
https://leetcode.com/problems/permutations/ 문제 제목대로 순열을 구하는 문제였다. 백트래킹을 이용하...
[React] React에서 Redux-Toolkit(RTK)을 이용한 상태 관리 [내부링크]
redux-toolkit은 redux 팀에서 만든 공식적인 개발 도구이다. redux를 사용하다 보면 단점이 몇 가지 있는...
[프로그래머스] 게임 맵 최단거리 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/1844 0,0 지점에서 우측 하단까지 최대한 빨리 갈 때...
[React] JSX란? [내부링크]
react를 사용하며, 우리가 사용하는 브라우저의 dom에 엘리먼트를 추가하기 위해서는 먼저 react의 virtual...
[오류모음] Mac OS 업데이트 후 git 오류 (xcrun: error: invalid active developer path)해결 [내부링크]
mac os 업데이트 후 갑자기 깃이 안되는 상황을 마주했다. 원래 업데이트하면 자주 이런다고 한다. 이 오류...
[프로그래머스] k진수에서 소수 개수 구하기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/92335 n이라는 숫자가 들어오면 우선 이 숫자를 k진...
[프로그래머스] 신고 결과 받기 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/92334 이 문제는 구현문제였다. 유저들의 신고를 종...
[프로그래머스] 전력망을 둘로 나누기 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/86971 전선으로 연결되어있는 n개의 송전탑을 가진 ...
[React] redux-saga를 이용한 side effect 관리 [내부링크]
https://github.com/redux-saga/redux-saga 1. Redux-Saga란? redux-saga는 axios요청같이 데이터를 가져...
[LeetCode] Combination Sum 2 (JavaScript) [내부링크]
https://leetcode.com/problems/combination-sum-ii/ 이 문제는 백트래킹을 통해 풀 수 있었다. 들어온 배...
[프로그래머스] 카펫 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42842 이 문제는 완전탐색 문제였다. 기본적으로 카...
[프로그래머스] 가장 먼 노드 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/49189 이 문제는 그래프문제였다. 최대 20000까지 있...
[회고/계획] 2021년 회고 및 계획 [내부링크]
2020년 회고글을 군대에서 썼던게 엊그제같은데 벌써 2022년에 2021년 회고글을 쓴다니 뭔가 신기하다. 분명 22살이였는데 군대한번갔다왔더니 24살인것도 뭔가 이상하다. (블로그를 만든지도 3년이 되어간다..!) 2020년 회고글을 쓸 때 위 내용을 썼었다. 군대에서 개발공부를 하며 효율적인 공부방법을 찾아내고싶어했고 무탈히 전역도 하길 바란다 썼었는데, 둘 다 무난하게 잘 된 것 같다. 군대에서 효율적인 공부방법을 찾아내는건 전역을 하며 해결을 했다. ㅎㅎ... 1년 반동안 군생활하면서 개발자로서 크게 성장을 했다고 보긴 어럽지만, 기본기들도 조금 쌓고 개발 감을 잃지 않은것만 해도 다행인게 아닐까 싶다. 코로나로 인해 전역을.......
[LeetCode] 3Sum (JavaScript) [내부링크]
https://leetcode.com/problems/3sum/ 정수형 배열이 들어오면 그 중 3개의 합이 0이되는 조합을 구하는 문제였다. 문제 조건을 보면 배열 요소가 최대 3000까지 들어오는 문제였기에 O(N^2)안으로 풀어야 하는 문제였다. 이 문제는 투포인터를 이용하여 풀 수 있었다. 우선 오름차순으로 들어온 배열을 정렬해줬다. 그 뒤 첫 반복문에서 값 하나를 고정해준 뒤 두번째 반복문에서 투포인터를 이용해 O(N^2)로 풀 수 있었다. 미리 오름차순으로 정렬해줬기에 고정된 값이 0 이상이되면 더이상 돌지 않게 하였고, 중복을 막기 위해 고정할 값이 이전 고정값과 같으면 돌지 않게 해주는 방식으로 풀었다.
[NestJS] NestJS에서 RiotAPI를 사용하여 롤토체스 게임데이터 가져오기 [내부링크]
우선 아래 링크로 접속한 뒤 로그인을 해주자. https://developer.riotgames.com/ 로그인을 하면 약관 동의 화면이 나오는데, 다 확인해주면 개발자 계정을 생성할 수 있다. 생성하고나면 아래와 같은 화면을 볼 수 있다. 위에 가려져있는 키가 api키이다. 키 만료는 24시간 뒤 되고, api요청은 1초에 20번, 2분에 100번만 가능하다. 1. API문서 api사용법은 api탭에 들어가면 다 나와있다. 롤토체스의 게임 데이터를 가져온다고 하면 순서는 아래와 같다. 사용자닉네임 -> 사용자의 puuid추출 -> puuid를통한 최근 게임 매칭 아이디 가져오기 -> 게임 매칭 아이디를 통해 게임 결과 데이터 가져오기 우선 아래와 같은 방법으로 puuid를.......
[LeetCode] Valid Parentheses (JavaScript) [내부링크]
https://leetcode.com/problems/valid-parentheses/ 괄호가 올바르게 짝지어져있는지 확인하는 문제였다. 큐와 스택 개념을 이용하여 풀었다.
[LeetCode] Add Two Numbers (JavaScript) [내부링크]
https://leetcode.com/problems/add-two-numbers/ 링크드리스트 문제였다. l1 리스트 [2,4,3] (342) 와 l2 리스트[5,6,4] (465)가 있다 했을 때 342+465를 하여 나온 값인 807을 [7,0,8]형태로 담으면 되는 문제이다. 문제에서 구현해둔 링크드리스트를 이용하여 풀면 되는 문제였다. 문자열로 바꾸어 응용하는식으로 문제를 풀었다.
[LeetCode] Reverse Integer (JavaScript) [내부링크]
https://leetcode.com/problems/reverse-integer/ 문제 그대로 입력받은 숫자를 뒤집으면 되는 문제이다. 단, 입력받은 문자가 [-2^31, 2^31-1] 범위를 넘어가면 0을 찍어주어야한다. 문자열로 변환하여 문제를 풀었다. 범위가 넘어가는 경우는 따로 지정해주는 부분에서 Number.MAX_SAFE_INTEGER를 사용해볼까했으나 number범위가 2^53 사이인지 이번에 처음 알았다. Math.pow(2,31)로 지정해주어 풀수 있었다.
[LeetCode] 3Sum Closest (JavaScript) [내부링크]
https://leetcode.com/problems/3sum-closest/ 정수 배열 하나가 주어지면 여기서 3가지 수를 뽑아 더한 뒤 target과 가장 비슷한 값을 찾는 문제였다. 처음은 아래와 같이 풀었다. DFS로 문제를 해결하였는데 맞긴했으나 효율적인 코드는 아니였다. 아래는 다른사람 풀이이다. 배열을 정렬한 뒤 순서대로 값을 더해가며 값을 찾는 방법으로 풀었다. DFS로 풀었을 때와 다르게 시간복잡도를 O(n^2)로 가져가며 풀 수 있다는걸 확인할 수 있다.
[LeetCode] Combination Sum (JavaScript) [내부링크]
https://leetcode.com/problems/combination-sum/ candidates배열에 있는 원소들 합이 target과 같은 배열들을 리턴하는 문제였다. 단 배열에 있는 숫자는 무한으로 선택할 수 있고, 이렇게 나온 배열에서 원소의 순서만 다른 조합들은 고유다는 조건이 있었다. 마지막 조건으로 고유 조합의 수가 150개 미만인 것이 보장이 되었다. 이 문제는 DFS를 이용해 풀 수 있었다. 코드는 아래와 같다. 반복문을 돌리며 i를 startIndex로 지정하여 [2,2,3][2,3,2][3,2,2] 가 동시에 나올 수 있는 상황을 막는 방법으로 풀었다.
[LeetCode] Letter Combinations of a Phone Number (JavaScript) [내부링크]
https://leetcode.com/problems/letter-combinations-of-a-phone-number/ 그림과 같은 영어를 포함한 번호판이 있을 때, digits에 들어온 내용대로 문자 조합들을 반환하는 문제이다. 단 1은 digits에 포함되지 않는다. 위와 같이 DFS를 이용해 문제를 풀 수 있었다.
[JavaScript] 다른 언어와는 다른 조금 특별한(?) 자바스크립트의 배열 [내부링크]
자바스크립트에서 사용하는 배열은 정말 우리가 알고있는 그런 배열일까? 우리가 별 생각없이 쓰던 자바스크립트 배열의 실체에 대해 알아보자. 1. 자바스크립트에서 배열이란? 사실 자바스크립트에는 우리가 일반적으로 생각하는 배열이라는게 존재하지 않는다. 자바스크립트의 배열은 그냥 우리가 아는 객체( {} )일 뿐이다. 위 코드를 보면 일반적인 방식으로 객체를 생성했고, 이 객체의 __proto__프로퍼티만 수정해주니 object가 아닌 Array로 인식을 하기 시작했다. 프로퍼티 명을 0, 1, 2 이런식으로 이루어져 있고, length프로퍼티가 존재하며 프로토타입 체인을 탔을 때 Array.prototype으로 연결되어있는 객체가 바로 우리가 쓰는 배열.......
[Node.js] Express 서버에서 Redis를 이용한 HTTP 세션 관리 [내부링크]
세션(Session)이란 일정 시간 동안 같은 브라우저(사용자)로부터 들어오는 요구를 상태로 보고 그 상태(State)를 일정하게 유지시키는 기술이다. 이 세션과 passport를 이용하여 로그인을 구현하곤 하는데, 문제는 서버를 재시작하게되면 세션이 날아가버리게 된다. 사용자들이 특정 서비스를 이용하던 도중, 어떤 기능에 문제가 생겨 서버가 재시작되었다고 해보자. 로그인을 포함하여, 세션을 이용해 동작하던 것들이 모두 리셋될 것이다. 이를 막기 위해서, 일반적으로 Redis같은 DB를 사용한다. Redis는 NoSQL DB임과 동시에, In-memory 형태의 DB라 속도가 빠르다보니 캐시와 세션 저장소로 사용하곤 한다. 그럼 이제 사용방법을 알아보자. .......
[NestJS 오류] TypeError: (0 , cookie_parser_1.default) is not a function [내부링크]
코드를 짜던 중 아래와 같은 오류를 만났다. import때문에 발생한 문제이다. tsconfig.json에 들어가 "esModuleInterop": true를 추가해주자.
[React] Redux 사용 이유와 Next.js 프로젝트에 Redux 적용하기 [내부링크]
1. Redux 사용이유 Redux가 무엇인지 알아보기 전에 아래 예시를 먼저 들겠다. 아래와 같이 버튼(자식 컴포넌트)을 눌렀을때 부모 컴포넌트에 속해있는 input text의 value를 state를 통해 수정해주는 코드가 있다고 해보자. React에서 자식 컴포넌트에서 부모 컴포넌트의 state를 수정해야 하는 상황인 것이다. 그렇게 되면 아래 코드와 같이 좀 피곤한 상황이 생길 것이다. 심지어 여기서 자식의 자식의 자식 컴포넌트가 부모 컴포넌트의 state를 수정하고 쓰고 해야하는 상황이라면 더더욱 코드가 복잡해질 것이다. useState()등을 이용한 React의 state 관리의 경우 결국에는 컴포넌트에 종속될 수밖에 없기에, 결국에는 관리하기 복잡해지는.......
[React 오류] Attempted import error: 'Switch' is not exported from 'react-router-dom'. [내부링크]
create-react-app을 통해 만든 react프로젝트에서 페이지 전환을 위해 react-router-dom을 사용하던 중 아래와 같은 오류가 발생했다. 분명히 import { Switch } from 'react-router-dom'이 있는데 대체 무슨상황인가 하고 보니 버전문제였다. 5버전에서는 Switch로 사용했었는데, 6버전에서는 Routes로 수정되었고, element에 컴포넌트를 넣는 방식으로 사용한단다.
[오류모음] [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ~~~ package.json 해결 [내부링크]
react프로젝트를 클론받아 yarn start를 했는데 아래와 같은 오류가 발생했다. 쓰고있던 Node.js 버전문제때문에 발생한 문제란다. Node 버전을 lts버전으로 내려야 했다. lts버전으로 내리기 위해 nvm부터 받아야 했다. 이후 nvm -v를 통해 설치를 확인했는데 버전이 뜨지 않았다. 따라서 환경변수를 설정해주어야했다. 우선 ~/ 위치로 가준 뒤 .nvm디렉토리를 만들자. 이후 아래와 같이 ~/.bash_profile을 수정하러 들어간 뒤 아래 내용을 넣어주자. 넣었다면 command+c 후 :wq하고 나오자. 마지막으로 아래 명령어를 쳐주자. 이제 nvm이 설치되었는지 확인하자. 되었다면 node를 lts버전으로 내리자. 이를 통해 Error [ERR_PACKAGE_PATH_NOT_E.......
[JavaScript] 이터레이터(Iterator)와 제너레이터(Generator) [내부링크]
이터레이터에 대해서는 이 글에서 배열과 비교하며 설명했었다. 이터레이터에 대해 다시 간단하게 설명하자면 iterator라는 이름 그대로 반복 처리가 가능한 객체를 의미한다. 이터레이터는 아래의 두가지 조건을 만족한다. 1. next()라는 메서드를 가진다. 2. next()의 리턴값은 꺼낸 값이 저장된 "value"라는 프로퍼티와 반복이 끝났는지 확인하는 boolean값이 들어간 "done"이라는 프로퍼티를 가져야 한다. 위에서 말한 이터레이터를 발생시키는 함수를 제너레이터 함수라고 한다. 제너레이터 함수는 실행이 연속적이지 않은 함수이다. 다시말해, 실행을 중간에 멈출 수 있는 함수로, 사용자가 원할 때 멈추고 재개하고 할.......
[Node.js 오류] [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters 해결 [내부링크]
express 서버에서 axios를 통해 다른 서버로 요청을 보내다 아래와 같은 오류를 만났다. axios를 통해 요청을 하는 주소에 한글이 들어가있었는데, 그 한글을 읽지 못해 발생한 오류이다. 이는 encodeURIComponent()를 통해 해결할 수 있는 문제이다.
[LeetCode] Two Sum (JavaScript) [내부링크]
https://leetcode.com/problems/two-sum/ nums라는 정수형 배열과 target이라는 정수 하나가 인자로 주어진다. nums 배열의 인자들 중 두 값을 더했을 때 target값이 되는 배열의 인덱스를 리턴하는 문제이다. 처음에는 제약조건을 제대로 보지 않고 문제를 풀었더니 nums가 굉장히 많은 테스트케이스에서 결국 시간초과가 났다. 이 문제는 map객체를 이용해 문제를 풀 수 있었다. nums가 [2,7,11,15]에 target이 9라했을 때, map에 target - nums[index] : index형태로 넣어둔다. '7':0 과 같은 형식으로 넣어두다가 maps['7']과 같이 만났을 때 map에 들어있다면 value들을 return하는 방식으로 풀었다. 백준에서 자바스크.......
[Git 오류] error: Your local changes to the following files would be overwritten by merge [내부링크]
git pull을 하다 아래와 같은 오류를 마주쳤다. 이 경우 stash명령어를 통해 해결할 수 있다. 현재 경로의 버전관리되고있는 내용을 임시저장해두는 상태라고 보면 된다. 이후 pull을 해준다. 이제 임시저장해뒀던 내용을 pop해 stash했던 내용을 다시 가져오자.
[프로그래머스] 뉴스 클러스터링(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/17677 들어오는 문자열을 받아 2개씩 묶은 뒤 여기서 교집합과 합집합을 구해 계산하는 문제였다. 여기서 받은 문자열에 만약 숫자나 특수문자가 들어가있다면 그 문자열은 집합에서 제외해야했다. 우선 각 문자열을 2개씩 뽑아 검사한뒤 배열에 넣어줬고, 그렇게 나온 배열들을 이용해 합집합과 교집합을 구한 뒤 계산하여 문제를 풀었다. 작성한 코드는 아래와 같다. 교집합을 구할때 set을 쓰고 싶었으나 문제의 3번케이스같은 경우는 어떻게 해야할지 감이 잘 안와 그냥 같은 배열을 하나 더 만들어 이를 이용해 합집합과 교집합을 구했다. 이후 교집합이 0인경우 0리턴, 합집합이 0인경.......
[프로그래머스] 수식 최대화(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/67257 연산할 연산자가 3개밖에 없기에 순서 경우의 수가 6개밖에 없었다. 그렇기에 그 경우의 수를 미리 배열에 담아두었다. 이후 인자로 들어온 식을 ['3','+','1'....]와 같은 형태로 만들었다. (정규표현식 쓴 분들이 많았지만 본인은 쓸 줄 모르기에 못썼다...) 위에서 저장해뒀던 6개의 경우의수와 바꾼 형태의 식을 함께 돌리며 가장 큰 계산 결과를 얻어내는 방식으로 풀었다.
[프로그래머스] n^2 배열 자르기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/87390 위와 같은 느낌의 배열을 일차원배열로 풀었을 때 특정 인덱스의 배열 부분을 반환하는 문제였다. 맨 처음에는 아무 생각없이 그냥 그대로 구현한 뒤 특정 인덱스를 반환하도록 풀었었다. 배열에 다 담아버리니 메모리초과가 났다. 문제를 보니 n이 10^7까지 갈 수 있는 걸 보고 아래 코드처럼 배열에 넣지 않고 right부분까지만 계산하도록 해보았다. 결과는 아래와 같이 시간초과가 나버렸다. 결국 left부터 right부분까지만 계산할 수 있도록 하는 방법을 생각해야했고 left와 n을 이용하여 시작점의 좌표를 구할 수 있는 것을 알아냈다. 그리고 그 특정한 좌표에 있는 숫자는 x좌.......
[프로그래머스] 괄호 회전하기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/76502 큐와 스택을 사용해 풀 수 있는 문제였다. 여는괄호와 닫는괄호를 구별하고 인덱스를 맞춘 뒤 문자열을 배열로 잘라줬다. 배열을 하나씩 순회하며 '('가 들어오면 0, '{' 가 들어오면 1, '['가 들어오면 2를 배열에 넣어줬다. 그러다 닫는괄호가 들어오면 그 닫는 괄호가 들어있는 close_bracket에서의 인덱스와 비교해 push하거나 Pop하거나 했다. 이렇게 만든 로직을 문자열을 바꿔가며 실행해주며 풀었다.
[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) [내부링크]
1. 선행 지식 자바스크립트에서 값은 크게 두 가지로 나뉜다. 바로 원시 타입(Primitive Type)과 참조 타입(Reference Type)이다. Primitive Type의 경우 String, Number, Boolean, Null, Undefined, Symbol, Bigint 이렇게 7가지로 이루어져 있고, Reference Type의 경우 Object, Function 이렇게 두 가지로 이루어져 있다. (Array, Set, Map 등은 Object에 포함된다.) 그리고 자바스크립트 엔진에 대해 잠깐 이야기하겠다.(V8엔진이라고 가정하겠다.) V8을 통해 어떠한 프로그램이 실행되었다면, 이 프로그램은 우리 컴퓨터 메모리의 빈 공간에 할당 될 것이고, 이 할당된 공간을 우리는 "Resident Set"이라고 한다. 이 "Reside.......
[프로그래머스] n진수 게임 (JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/17687 1부터 한 숫자씩 올라가며 숫자를 부르는 베스킨라빈스 게임 비슷한..? 게임인데, 이 숫자가 2진수일수도 있고, 16진수일수도 있는 그런 문제였다. 최대 미리 구해둘 숫자와 최대 사람 수 만큼 자연수를 구해두고 이 수를 n에 들어온 n진법 숫자로 바꾸고 대문자로 변환해 배열에 spread연산자를 이용해 넣어줬다. 이후 본인 차례가 왔을때만 다시 기록해두고 이 기록들을 문자열로 변환해 문제를 풀 수 있었다.
[React 오류] expected a string (for built-in components) or a class/function... 오류 해결 [내부링크]
antd의 Icon을 가져와 사용하다가 아래와 같은 오류가 발생했다. 이 오류는 특정 컴포넌트의 import가 잘못되어 발생한 오류이다. 추가한 컴포넌트를 다시한번 확인하여 해결하였다.
[React 오류] Redux연결 중 Cannot read properties of undefined (reading 'getState') 오류 해결 [내부링크]
아래와 같이 react와 redux 연결을 하다 아래와 같은 오류가 발생했다. 알아보니 React와 Redux를 연결하는 index부분에 코드상 잘못된 것이 있으면 발생하는 문제란다. 구글링해보니 해결방법이 다 오타를 수정한 내용이길래 열심히 찾아봤으나 오타를 찾을 수 없었다. 알고보니 'next-redux-wrapper' 버전에따라 특정 버전은 컴포넌트에 Provider를 설정하지 않아도 Provider까지 wrapping 해준다고 한다. 아래는 쓰고있던 버전이다. <Provider>부분을 지워주니 정상적으로 동작하기 시작했다. 오류가 뜬 이유가 이렇게 대놓고 써있었는데 이 부분을 늦게 발견해 이상한 부분에서 삽질을 했던 오류였다.
[Node.js 오류] connect-redis 사용 중 Error: A client must be directly provided to the RedisStore 오류 해결 [내부링크]
https://www.npmjs.com/package/connect-redis 세션관리를 위해 express-session에 connect-redis를 사용하던 도중 아래와 같은 오류가 발생했다. 이 오류는 버전문제때문에 발생한 문제이다. 4버전 이후를 사용하며 3버전때의 코드처럼 사용하면 위와 같은 오류가 발생한다. 해결방법은 2가지이다. 1. 3버전대로 버전을 바꿔 재설치하자. 2. 4버전 이후대 사용 가능한 코드로 바꾸자.
[NestJS] NestJS에서 TypeORM+MySQL 사용하기 [내부링크]
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] NestJS + Passport + TypeORM을 이용한 로그인/회원가입 API 구현하기 [내부링크]
이번 포스팅에서는 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 모듈을 이용하여.......
맥북 프로 M1 2020(512GB/16GB) 언박싱, 사용후기 [내부링크]
9월 10일 코로나로 인해 부대복귀 없이 사회에서 전역을 하고 깬 적금으로 바로 맥북m1을 샀다. 쓰고있던 그램 상태가 날이 갈수록 안좋아지는게 느껴지기도 했고 워낙 노트북이 바꾸기 싶었기에 전역 전부터 계속 구매할 계획을 가지고 있었다. 에어살까 프로살까 계속 고민하다 '이왕 비싸게 주고 사는거 프로로 확실하게 사자!' 하고 프로로 구매했다. ssd는 512, 램은 16으로 구매했다. 쿠팡에서 9월 9일 저녁 11시 넘어서 구매했는데 바로 다음날 인 9월 10일 오전 11시쯤 도착했다. (쿠팡 와우하면 10만원 할인해주길래 무료체험 처음 써봤는데 빠르긴 하더라..) 이것저것 할인받을 수 있길래 카드할인도 받아 거의 30만원정도 할.......
[기타] 20대 화이자 백신 1, 2차 접종 후기(접종완료) [내부링크]
주변 친구들이 하나둘씩 백신을 맞는 걸 보며 백신 이런저런 얘기를 종종 했었는데, 블로그 이웃분들께도 혹시 도움이 되지 않을까 하여 조금 많이 늦긴 했지만 화이자 후기글을 한번 써보려고 한다....ㅎ 본인은 군대에 있을 때 6월 초, 6월 말에 각각 1차 2차 화이자 백신을 맞았다. 접종 때 기억들과 맞은 뒤 친구들이랑 카톡했던 기록을 기반으로 포스팅을 작성하였다. 1차부터 정리하자면 일단 1차는 크게 아프지 않았다. 접종은 오전 10시쯤 받았고 접종 15분 후 바로 타이레놀 한 알을 먹었었다. 접종 후 첫날 저녁쯤?부터 팔이 꽤 아팠었다가 밤쯤에 감기기운이 조금 생긴 느낌을 받았던걸로 기억한다.(정말 약한 감기기운이였다.) 다음.......
[프로그래머스] 위클리 챌린지 8주차_최소 직사각형(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/86491 명함을 적절하게 회전시킨다고 생각하고 가로나 세로 한 쪽으로 큰 변, 작은 변을 몰아둔다. 이후 정렬하여 가장 긴 가로와 세로를 구해 풀 수 있는 문제였다.
[Mac] VSCode에서 Prettier적용하기 [내부링크]
Prettier는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구이다. 우선 market place에서 prettier를 설치해주자. 이후 command + shift + p 를 누른 뒤 settings를 입력해주자. 이후 Preferences: Open Settings(JSON)을 찾아주자. 그리고 아래 코드를 추가해주자. 이후 vscode를 재시작하면 된다. 만약 안되는 경우가 있다면 아래 내용을 참고하자. code -> Preference -> Settings로 들어간 뒤 format on save를 쳐 체크가 되어있는지 확인하자. 이후 defaultFormatter를 쳐 none으로 되어있다면 이걸 prettier로 설정해주자.
[오류모음] npm ERR! code ERESOLVE 해결 [내부링크]
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에 몇가지 의존성을 추가하고 충돌을 우회한다.) 이후 위와 같이 문제를 해결할 수 있었다.
[프로그래머스] 소수찾기(level 2)(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42839 문제를 보면 알 수 있지만, 특정한 숫자로 된 문자열이 주어진다면 이 숫자를 가지고 나올 수 있는 모든 숫자들이 소수인지 확인해야하는 문제이다. "011"이라면 0,1,10,11,101,110 이 나올 수 있다. 같은 숫자가 두번 포함되도 안되는 문제이기에 이 문제는 순열을 사용했고, 순열을 통해 추린 숫자들을 에라토스테네스의 체에 넣어 소수를 걸러내는 방식으로 풀었다. 우선 코드는 아래와 같다. 순열로 걸러진 배열들을 숫자로 합치고 거기서 가장 큰 수를 찾은 뒤 에라토스테네스의 체를 이용해서 풀었다.
[프로그래머스] 최솟값 만들기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12941 두 배열을 각각 오름차순, 내림차순 한 뒤 곱해줬다. 이후 곱해준 값을 reduce를 이용하여 더하는 방식으로 문제를 해결하였다.
[프로그래머스] 타겟넘버(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/43165 이 문제는 dfs문제였다. 재귀를 이용해 풀 수 있는 문제였다.
[프로그래머스] H-Index(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42747 처음 이 문제를 읽고 문제를 잘못 이해해 풀었다. 가장 중간값에 있는 인용수를 구하라는 문제로 착각하여 아래와 같이 잘못 풀었다. 결과는 위처럼 완전 실패했다. 알고보니 자신의 전체 논문을 내림차순으로 정렬한 뒤 인용수와 논문수가 같아지는 지점을 구하는 문제였다. 따라서 아래와 같이 코드를 수정하였다. 위와 같이 성공하였다.
[GIT오류] git add "does not have a commit checked out" 해결 [내부링크]
아무생각없이 nest프로젝트를 만들고 레포지토리를 하나 파서 만든 nest프로젝트 상위 경로에 git add를 하였는데 아래와 같은 오류가 발생하였다. 알고보니 nest프로젝트에 .git이 이미 존재하고있었다. 이걸 지우고 다시 해보니 add 하는데 문제가 없었다.
[NestJS] NestJS 프로젝트 생성방법 및 Express.js와의 구조적 차이 [내부링크]
https://docs.nestjs.kr/ nestJS는 타입스크립트를 사용하며 Node.js위에서 돌아가는 프레임워크중 하나이다. (실질적으로는 다른 node.js framework 위에서 돌아간다. Nest서버 켜고 네트워크탭 열어서 확인해보면 아래와 같이 X-Powered-By : Express 인것을 확인할 수 있다.) NestJS의 프로젝트를 생성하며 간단하게 express와의 구조적 차이점을 한번 알아보자. 우선 프로젝트를 생성하기 위해 아래와 같은 명령어를 쳐 NestJS를 설치해주자. 이후 프로젝트를 생성한 경로로 이동한 뒤 아래와 같은 명령어를 작성해 nest 프로젝트를 만들어주자. 어떤 패키지매니저를 사용할건지 고르라고 한다. 그냥 npm 그대로 쓰겠다. 그럼 이렇게 프로젝.......
[NestJS] NestJS에서 API문서 자동화 도구 Swagger 사용하기 [내부링크]
Swagger는 API문서 자동화 도구이다. 따로 API문서를 작성하는것이 아닌 그냥 코드를 작성하면서 API문서를 수정할 수 있다. 그렇게 수정된 코드는 자동으로 API문서를 만들어준다. 이제 사용방법에 대해 알아보자. 우선 아래와 같이 모듈들을 설치해주자. 여기서 만약 NestJS(express)가 아닌 NestJS(fastify)를 쓸 경우 swagger-ui-express대신 fastify-swagger를 설치해주자. 이후 이 swagger를 미리 main.ts에 연결해주자. 아래 코드를 추가해주자. 이후 main.ts의 코드는 아래와 같다. 이후 user 컨트롤러, 서비스 모듈정도만 있다고 해보자. 이후 서버를 아래와 같이 킨 뒤 localhost:3000/api로 가보면 아래와 같은 api문서 양식이 생긴 것.......
[Mac] Mac에 brew설치 중 Warning: /opt/homebrew/bin is not in your PATH 오류 해결 [내부링크]
homebrew에 대해 간단히 소개하자면 무언가를 설치할 때 터미널에 명령어를 입력해 간편히 설치할 수 있도록 해주는 MacOS용 패키지 매니저이다. https://brew.sh/index_ko 설치 방법은 위 링크를 타고 들어가면 나온다. 위 명령어를 터미널에 간 뒤 입력해주는 방식으로 설치한다. 이후 brew명령어를 사용해봤는데 아래와 같이 사용이 불가능하단다. 다시 보니 아래와 같은 오류가 발생하였다. /opt/homebrew/bin is not in your PATH에 써있는 것처럼 아직 PATH에 등록되어있지 않아 발생하는 문제이기에 /opt/homebrew/bin를 등록해주면 해결되는 문제이다. 터미널에서 아래 명령어를 입력해주었다. 이후 아래 명령어를 치면 PATH=/opt/h.......
[프로그래머스] 숫자 문자열과 영단어(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/81301 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다.......
[Node.js] GCP를 이용한 Node.js 서버 배포하기 [내부링크]
위 그림과 같은 창을 띄워주는 서버가 있다고 해보자 이 코드를 Google Cloud Platform에 배포해보자. 우선 올리기 전에 코드를 간단하게 수정해주자. 보안을 위해 위와 같이 hpp와 helmet을 추가하는 것을 추천한다. 배포시 상황과 아닌 상황을 구분하여 morgan도 상황에 맞게 쓰도록 해주자. package.json도 아래와 같이 수정해주자. 우선 cross-env를 npm에서 받아주자. cross-env는 os나 플랫폼에 종속되지 않는 방법으로 환경변수를 넣어준다. 그리고 뒤는 "pm2 start 파일명 -i 프로세스수" 와 같이 수정해주자. pm2 를 사용하는 방법은 아래 글에서 다뤘었다. https://blog.naver.com/dlaxodud2388/222461276895 이제 구글클라.......
[프로그래머스] 신규 아이디 추천(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/72410 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마.......
[프로그래머스] 땅따먹기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12913# 처음에 이 문제를 보고 그냥 위에서부터 높은 순서대로 내려오되 같은 열만 안밟고 내려오면 되는건가 해서 문제를 풀었다. 같은 행에서 가장 높은 수를 찾은 뒤 그 다음 행의 같은 열을 0으로 바꾼 뒤 문제를 해결하려 했다. 그 결과 테스트 케이스만 맞고 정확성 테스트는 아래와 같이 완전히 틀려버렸다. 각 행 배열의 원소마다 더할 수 있는 최댓값과 더했을 때 나올 수 있는 값이 다 다르다는 점을 생각하지 못해 틀린 것이였다. 이후 map()을 이용해 각 행 배열의 원소마다 더할 수 있는 최댓값과 더한 값을 계속해서 배열에 쌓아가는 방식으로 문제를 풀 수 있었다. 아래와 같.......
[프로그래머스] 짝지어 제거하기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12973 처음 이 문제를 접하고 풀었을 때 split()메서드와 join()메서드를 이용하여 풀었다. 그 결과 위와 같이 효율성 테스트가 0점이 나와버렸다. 각 문자들을 다 한바퀴씩 도는 것 때문에 이런 결과가 나왔나 생각이 들어 set처럼 중복된 문자열들을 다 제거하고 split.join을 하면 풀 수 있지 않을까 하여 아래와 같이 코드를 수정해보았다. 결과는 역시나 시간초과였다. split과 join이 어떻게 동작하는지는 모르겠으나 이 메서드 사용으로 인해 시간초과가 나는 것 같았다. 결국 stack을 사용해 풀게 되었다. 글자를 비교해가며 뒤의 글자와 다른 경우 push, 같으면 pop을 해주는 방법.......
[프로그래머스] 소수찾기(level 1)(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12921 모든 수를 확인하지 않고 제곱근까지만 확인하면 된다는 성질과 에라토스테네스의 체를 이용하여 풀 수 있는 문제였다.
[Node.js 오류] PM2 Permission denied, to give access to current user 해결 [내부링크]
Google Cloud Platform Compute Engine의 VM인스턴스 상에서 node.js 서버를 배포하다 pm2모듈을 이...
[Node.js] CORS(Cross-Origin-Resource-Sharing) 허용하기 [내부링크]
"교차 출처 리소스 공유"라고도 불리는 CORS란 "Cross-Origin-Resource-Sharing&qu...
[오류모음] pm2 : 이 시스템에서 스크립트를 실행할 수 없으므로... ~를 참조하십시오. [내부링크]
npm에서 pm2를 받아서 쓰려했는데 아래와 같은 오류가 발생했다. 이 오류는 스크립트 실행 권한이 제한되어...
[Node.js] 프로세스 관리도구 PM2 [내부링크]
https://blog.naver.com/dlaxodud2388/222196528936 예전에 썼던 위 글에서 말했던 것처럼, 멀티 스레딩이 ...
[DB] MySQL 환경변수 설정(windows) [내부링크]
우선 MySQL이 설치된 경로로 간 뒤 bin까지 가주자. 이 경로를 우선 복사해두자. 내 컴퓨터에서 속성을...
[DB오류] MySQL : Client does not support authentication protocol requested by server... 오류 해결 [내부링크]
전역하고 집에와보니 ssd가 초기화되어있었다. 이것저것 다시 깔고 하다가 깃허브에서 코드 가져와 한번 돌...
[GIT] Git의 동작 원리 [내부링크]
일반적으로 우리는 협업을 하게되면 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.......
[프로그래머스] 가장 큰 수(JavaScript) [내부링크]
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"으로 나올 수 있도록 방지해주었다.
[프로그래머스] 자릿수 더하기(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12931 코드는 아래와 같다.
[OS] 메모리 낭비 방지를 위한 동적 적재(Dynamic Loading), 동적 연결(Dynamic Linking), 스와핑(Swapping) [내부링크]
메모리를 효율적으로 관리하기 위해 운영체제는 여러 메모리 낭비 방지 기술들을 적용한다. 이 글에서는 아래 3가지 기술에 대해 작성해보겠다. 1. 동적 적재(Dynamic Loading) 2. 동적 연결(Dynamic Linking) 3. 스와핑(Swapping) 1. 동적 적재(Dynamic Loading) 우선 이 Dynamic Loading에서 load는 메인메모리로 프로그램이 적재되는 것을 의미한다. 이 동적 적재(Dynamic Loading)이 무엇인지에 대해 간추려보자면, 프로그램 실행에 반드시 필요한 루틴과 데이터만 적재한다는 것이 바로 동적 적재이다. 우리가 어떤 프로그램을 하나 만들었다고 해보자. 이 프로그램이 메인메모리상에 올라갔을 때 오류처리같은 루틴들은 항상 사용되진 않을.......
[OS] 외부 메모리 단편화(External Fragmentation)과 연속 메모리 할당방식 최초적합(First-fit) 최적적합(Best-fit) 최악적합(Worst-fit) [내부링크]
일반적으로 우리가 컴퓨터를 부팅을 하고 나면 메인메모리의 상태는 아래와 같을것이다. 운영체제를 제외하고는 비어있을 텐데, 이렇게 크게 비어있는 공간을 "big single hole"이라고 한다. 이런 것처럼 프로세스가 차지하고 있는 공간을 제외하고는 빈 공간을 "hole"이라고 부른다. 그런데 만약 수많은 프로세스들이 실행되었다가 꺼졌다가를 반복하다보면 어느순간 아래와 같은 사진처럼 듬성듬성 hole들이 생길 것이다. 이렇게 되었을 때, 저 hole들의 크기가 각각 20kb라고 쳐보자. 3개가 있으니 60kb의 메모리가 남지만, 듬성듬성 있기에 30kb짜리 프로세스를 실행하려 해도 할 수가 없는 상황이 되어버리게 된다. 다.......
[JavaScript] 실행 컨텍스트(Execution Context)를 통해 알아본 호이스팅(Hoisting) 현상의 발생 원인과 이를 통한 let과 var의 차이 [내부링크]
흔히 자바스크립트의 "호이스팅(Hoisting)"이라고 하면 "변수나 함수의 선언 코드가 상단으로 끌어올려지는 것이다" 라고 종종 말하곤 한다. 위 사진을 보면 알 수 있겠지만, 사실 hoisting의 의미도 끌어올린다는 의미이다. 정말 "hoisting"이란 이름처럼 끌어 올려지는것일까? 끌어올려진다면 어떻게 끌어 올려지는지 한번 알아보자. 우선 호이스팅을 이해하기 위해서는 실행 컨텍스트(Execution Context)에 대해 이해해야한다. 1. 실행 컨텍스트(Execution Context) 우선 위와 같이 자바스크립트 엔진 사진이 있다. Memory Heap과 Call Stack으로 나누어져 있는데, 여기서 Call Stack이라는 곳에 실행 컨텍스트.......
[OS] 자원 할당 그래프(Resource Allocation Graph) [내부링크]
우선 프로세스들이 실행되려면 그 프로세스들은 여러 자원들을 필요로 한다. 그러나 위 그림을 보면 알 수 있지만, 자원은 한정적이고 이 자원을 쓰려하는 프로세스들은 굉장히 많다. 따라서 이 자원들을 잘 분배해서 쓸 수 있도록 하는 것이 운영체제의 일 중 하나이다. 따라서 프로세스는 특정한 자원을 쓰려면 운영체제에 요청을 해야한다. 그렇게 프로세스는 운영체제로부터 자원을 할당받게 된다. 이렇게 여러 자원들이 프로세스에게 할당이 되고 하는데, "어떤 프로세스가 어떤 자원을 할당받기위해 기다리는가?" 에 대한 것을 그래프로 나타낸 것을 우리는 "자원 할당도(Resource Allocation graph)"라고 한다. 대충.......
[OS] 교착상태(DeadLock)와 교착상태의 해결방법 [내부링크]
우선 위키피디아에서는 말하는 "교착상태"를 한번 보자. 교착 상태(膠着狀態, 영어: deadlock)란 두 개 이상의 작업이 서로 상대방의 작업이 끝나기 만을 기다리고 있기 때문에 결과적으로 아무것도 완료되지 못하는 상태를 가리킨다. 위에서 본 것처럼 "여러 작업들이 서로 상대방의 작업이 끝나기만을 기다리는 상태" 를 교착상태라고 한다. 이게 무슨 이야기일까? 굉장히 유명한 문제 하나를 예시로 들겠다. 아래 그림을 보자. "식사하는 철학자 문제" 라고 유명한 문제이다. 이 문제에는 조건이 있다. 우선 위 사진과 같이 한 테이블이 있고, 가운데 밥이 있다고 해보자. 그 테이블에는 서로 대화할 수 없는 5.......
[JavaScript] 추상 구문 트리(Abstract Syntax Tree) [내부링크]
우리가 일반적으로 자바스크립트 코드를 작성하게 되면, 자바스크립트 엔진은 우리가 쓴 코드들을 분석하여 "AST" 라는 것으로 변환을 한다. 이 AST는 Abstract Syntax Tree의 약자로 한국말로 하면 "추상 구문 트리"인데, 이렇게 만든 AST를 기반으로 인터프리터는 바이트코드를 생성한다. 그래서 이 AST가 무엇인가 하면, 우리가 쓴 소스코드를 문법에 맞게 노드들로 쪼개서 만든 트리라고 생각하면 될 듯 하다. 그럼 우리가 코드를 쓰면 갑자기 뚝딱 하고 AST가 만들어지고 바이트코드까지 만들어지는것일까? 당연히 그럴 일은 없으니 대충 과정을 그림으로 그려보겠다. 위 그림을 보면 알 수 있지만, 우리가 쓴 코드가 A.......
[JavaScript] 자바스크립트 엔진들의 히든 클래스(Hidden Class)개념과 코드 실행 최적화를 위한 인라인 캐싱(Inline Caching) [내부링크]
이 글의 주제인 히든 클래스와 인라인 캐싱에 대해 설명하기 전에, 먼저 자바스크립트의 객체의 프로퍼티와 프로퍼티 값은 어떻게 저장이 될지 한번 생각해보자. 아래 코드를 예시로 들어 한번 생각해보자. 보다싶이 a 라는 객체에 x와 y라는 프로퍼티가 존재하고 그 안에1, 2라는 값이 들어가게 될 것이다. 그런데 이 객체의 프로퍼티와 값이 한 곳에 묶여 저장이 된다고 생각해보자.(실제로는 그렇지 않다.) 대충 위 그림같은 느낌으로 말이다. 그런데 이런 구조로 이루어져 있다면 문제가 하나 발생한다. 위 코드와 같이 같은 모양의 객체들을 막 생성해낸다면 각각의 객체들은 똑같은 프로퍼티 이름들을 다 가지고 있어야 하고, 그에 따른 값.......
[JavaScript] const 를 이용한 변수 선언은 정말 값이 변하지 않을까? [내부링크]
'const' 라는 키워드가 'constant'의 약자라는 사실은 대부분 알고있는 사실이다. 위 사진처럼 'constant'는 불변의, 상수 등의 뜻을 가지고 있다. 일반적으로 C나 C++, Java같은 언어에서 "상수"라고 하면 데이터가 초기화됐을 때 그 값을 바꿀 수 없도록 하는 그런걸 말한다. 그러나 자바스크립트에서의 const는 다른 언어들과는 조금 다르다. 값을 변경할 수 없도록 하는 것이 아니라 "바인딩을 바꿀 수 없게" 만드는 것이다. 다시말해, 자바스크립트에서의 const는 값의 불변성과는 전혀 관련이 없다. 위 말이 사실인지 한번 확인해보자. 위 코드처럼 a라는 변수를 const를 이용해 선언하.......
[JavaScript] TDZ(Temporal Dead Zone) [내부링크]
우리말로 직역했을 때 "일시적 사각지대"인 이 TDZ(Temporal Dead Zone)가 무엇인지 이해하기 위해서는 우선 ES6의 let과 const, 그리고 호이스팅에 대한 개념이 선행되어야 한다. https://blog.naver.com/dlaxodud2388/222238394694 위 글에서 다뤘던 주제와 사실상 거의 비슷하다고 봐도 무방할 듯 하다. 이 글에서 가장 핵심적으로 짚고 넘어가야 할 부분이 있다. 바로 자바스크립트에서의 변수선언 3단게이다. 1. 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다. 2. 초기화 단계(Initialization phase) : 변수 객체에 등록되어 있는 변수를 위하여 메모리를 할당하는 단계이다. 여기서 변.......
[Node.js] V8 엔진의 메모리 구조와 가비지 컬렉션(Garbage Collection)의 동작원리 [내부링크]
자바스크립트 엔진이라고 하면 위 그림과 같이 메모리 힙과 콜 스택으로 나뉘게 된다. 자바스크립트 엔진 중 하나인 V8의 메모리 구조에 대해 알아보기 전에 Stack 메모리와 Heap 메모리에 대해 간단히 짚고 넘어가보자. 1. Stack 메모리 우선 스택 메모리이다. 스택 메모리는 주로 정적 메모리 할당에 이용된다. 이 스택 메모리에 함수에 대한 실행 데이터같은게 들어가는데, 이는 스택 프레임으로 저장된다. 각 스택 프레임은 해당 기능에 필요한 데이터가 저장되는 그런 블록으로, 실행 컨텍스트와 그 안의 변수 객체를 떠올리면 될 듯 하다. 다중 스레드 어플리케이션의 경우 스레드 당 스택메모리를 하나씩 가질 수 있다. (자바스크립트의 경.......
[JavaScript] ('b'+'a'+ +'a'+'a').toLowerCase() 가 왜 "banana"일까? [내부링크]
얼마전에 SNS를 보고있다가 자바스크립트에서는('b'+'a'+ +'a'+'a'). toLowerCase () 의 결과가 "banana"가 나온다는 이야기를 보았다. 심심해서 알아보다 뭔가 웃겨서 한번 포스팅해본다. 우선 간단하게 아래 코드를 한번 보자. 위 코드를 치면 당연히 1이 찍힐 것이다. 위의 -a의 '-'처럼 +, -, ++, --, 등등 하나의 피연산자만을 가지고 연산하는 연산자를 단항연산자(unary operator)라고 부른다는 사실은 익숙할 것이다. 이처럼 '+'도 단항연산자인데 자바스크립트에서는 +'hello', -'hello' 와 같은 코드를 단항 연산자와 문자열로 인식하여 연.......
[프로그래머스] 위장 (해시)(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42578 clothes의 각 행이 의상의 이름, 의상의 종류 로 이루어져 있고, 같은 의상은 존재하지 않는다기에, 일단 그대로 map객체에 넣었다. 자바스크립트의 map 객체에서, value값으로 배열을 넣을 수 있기 때문에 배열에 push하는 식으로 옷의 이름들을 넣고 옷의 종류를 key로 하였다. 지금 생각해보면 그냥 옷 종류, 그 종류의 개수 느낌으로 넣는 것이 더 좋았을 듯 하다. 스파이는 최소 하루에 한 가지 옷을 입기 때문에, 특정한 종류의 옷은 안입을 수 있다. 모든 종류의 옷을 하나씩 입을 필요가 없기에, 특정 종류의 옷은 안입을 수 있는 경우의 수가 생긴다. 결론적으로 예를들어 상.......
[Node.js] Node.js 서버 성능 개선을 위한 클러스터링(Clustering) [내부링크]
알다싶이, Node.js 는 싱글스레드 형식이다. 이 싱글스레드인 node.js 를 이용하여 서버를 돌리다가 많은 요청들이 한꺼번에 들어온다면 문제가 발생할 수 있다. 멀티 스레딩이 불가능한 Node.js에서 이 문제를 해결하기 위해 고안된 방법은 CPU의 코어들을 여러 개 사용하는 것이다. 물론 이렇게 코어들을 여러 개 사용한다고 완전히 멀티스레딩처럼 동작하는 것은 아니고, 멀티스레딩처럼 동작할 수 있게 된다. (코어 하나당 프로세스 하나가 돌아가니깐 멀티 프로세싱에 좀더 가깝지 않을까 싶다.) 이를 "클러스터링(Clustering)"이라고 한다. CPU 코어를 하나만 사용할때의 예시를 들어보자. 일부러 딜레이를 넣어보았다. 여기서 3.......
[OS] 임계구역(Critical-Section)문제 해결과 세마포어(Semaphore) [내부링크]
1. 프로세스 동기화 프로세스는 일반적으로 2가지로 나눌 수 있다. 1. independent Process (독립적인 프로세스) 2. Cooperation Process (독립적이지 않은 프로세스) 이 2번째의 독립적이지 않은 프로세스는 실행되고 있는 다른 프로세스에게 영항을 주거나 영향을 받는 경우의 프로세스를 말하는 것이다. 2번(Cooperation Process)가 일반적으로 더 많은데, 이런 독립적이지 않은 프로세스는 이번에도 크게 두 가지로 나눌 수 있다. 1. 프로세스간 통신하는 경우 2. 서버컴퓨터의 하나의 리소스(디비 등..)에 여러 프로세스가 접근하는 경우. 2번의 경우 프로세스들이 데이터베이스를 공유하려다보니 서로 영항을 줄 수밖에 없는 구조이다. 이.......
[JavaScript] 이터레이터(Iterator)와 배열(Array)의 차이점 [내부링크]
우선 이터레이터가 무엇인지 알아보기 전에 이터레이터가 무슨 뜻인지부터 보고 생각해보자. 위 사진과 같이 "반복자"라는 뜻을 가지고 있는 것을 확인할 수 있다. 위 뜻과 같이 자바스크립트에서 "이터레이터(Iterator)"는 반복 처리가 가능한 객체를 의미한다. "반복 처리가 가능한 객체"인 이터레이터는 아래와 같은 조건을 만족해야한다. 1. next() 라는 메서드를 가져야 한다. 2. next()의 리턴값은 꺼낸 값이 저장된 "value"라는 프로퍼티와 반복이 끝났는지 확인하는 boolean값이 들어간 "done"이라는 프로퍼티를 가져야 한다. 그렇다면 이 조건에 맞추어 이터레이터 함수 예시를 한번.......
[JavaScript] Spread 연산자와 Rest 파라미터 [내부링크]
1. Spread 연산자 우선 이 Spread 연산자에 대해서 간단하게 설명하자면 이터러블 오브젝트의 요소들을 하나씩 다 분리해서 전개해버리는 연산자이다. 우선 간단하게 사용방법과 예시를 들어보자. 우선 결과는 아래와 같다. 배열 a가 다 분리되어 b에 들어간 것을 확인할 수 있다. 코드를 보면 ...a 와 같이 뭔가 쓴 것을 볼 수 있는데, 이게 Spread 연산자를 쓴 것이다. 위에서 말하긴 했지만 이 Spread 연산자는 꼭 이터러블 오브젝트와 사용해야한다. 예시로 배열을 들었는데, 이터러블 오브젝트인 Set, Map 등도 사용이 가능하다. 이터러블 오브젝트인지는 아래 그림과 같이 Symbol.iterator이 있는지 확인해 보면 된다. Array.prototype을 찍.......
[Node.js] Node.js 는 정말 싱글스레드일까? [내부링크]
일반적으로 우리가 Node.js를 떠올리면 생각하게되는 특징중 하나가 "Node.js는 싱글스레드다" 라는 것이다. 근데 정말로 싱글스레드일까? 스레드 하나가 정말 모든 일을 다 하게 되는걸까? 정확히 말하자면 싱글스레드가 맞긴한데 조금 애매하다. 우선 Node.js의 구조를 간단하게 다시한번 생각해보자. 위 사진과 같은데, 저기서 libuv라는 라이브러리에서 "이벤트 루프(Event Loop)"라는 기능을 제공한다. 자바스크립트를 작동시키는 스레드는 이벤트루프에 있는 스레드인데 이 이벤트루프 안의 스레드가 하나밖에 없어서 싱글스레드라고 불렸던 것이다. 그렇다면 비동기작업들(파일시스템 I/O, DB작업, 외부서비스 HTTP 통.......
[Node.js] libuv의 이벤트 루프(Event Loop)에 대해 알아보자! [내부링크]
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] setTimeout(), setImmediate(), process.nextTick()의 차이점 [내부링크]
우선 Node.js에는 "libuv"라는 비동기 라이브러리가 존재한다고 했었다. 이 비동기 라이브러리인 libuv에는 이벤트 루프 (Event Loop)라는 것이 존재한다고 했었는데, 이에 관한 내용은 이 글에서 다뤘었다. 그렇다면 이제 setTimeout(콜백,0), setImmediate(), process.nextTick() 세 가지의 차이점에 대해서 알아보자. 우선 아래 예시코드를 써보겠다. 우선 위와 같은 코드가 있다고 해보자. 결과는 아래와 같이 나올 것이다. 코드의 순서를 바꾸어보고 여러 번 실행해보아도 결과는 같을 것이다. 왜 이런 결과가 나오는 것일까? 이 이유는 Node.js의 libuv안에 있는 이벤트 루프의 동작 원리에 의해 이런 결과가 나오는 것이다. 이.......
[Node.js] 콜백 헬(callback hell)과 프로미스(Promise) [내부링크]
Node.js 는 기본적으로 비동기로 동작한다. 그런데 이 Node.js로 웹 서비스를 개발하다 보면 서버에서 데이터를 가져온다던지, 비밀번호를 받아 암호화를 한다던지 등등 다양한 과정들이 있을 것이다. 이러한 작업들을 모두 비동기를 고려하여 처리하려고 한다면 결국 콜백 안에 콜백을 또 두고 그런 형태의 코드가 만들어질 수 밖에 없다. 간단하게 예시를 한번 들어보겠다. "안녕하세요"를 찍는 함수가 0.5초 걸린다고 가정하고 "제 이름은 임우찬입니다"를 찍는데 0.1초 걸린다고 가정하고 "피곤하네요"를 찍는데 0.01초가 걸린다고 가정해보자. Node.js의 비동기로 동작하는 특성을 고려하지 않고 아래와 같이.......
[프로그래머스] 체육복(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/parts/12244 javaScript의 Map객체를 이용하여 모든 학생들을 넣고 체육복의 수를 1로 모두 넣은 뒤 여분이 있는 경우 체육복의 수를 2로 늘렸다. 도난당한 학생은 0으로 내리고 문제대로 체육복을 빌려주었다. 이후 map객체를 돌면서 체육복이 1개 이상인 학생들을 카운트해주었다.
[JavaScript] Lexical Scope(static scope)와 Dynamic Scope [내부링크]
일반적으로 프로그래밍에서 스코프란, 변수가 유효한 범위를 뜻한다. 일반적으로, 자바스크립트를 포함한 대부분의 프로그래밍 언어(C, Java 등...)는 Lexical scope를 따른다. 그래서 Lexical Scope가 무엇인지 말하자면, 이는 함수를 어디서 선언했는지에 따라서 상위 스코프가 결정되는 것을 말한다. 반대로, 함수가 어디에서 호출되었는가에 따라서 스코프가 정해지는 것을 Dynamic Scope라고 한다. 예시를 들어보겠다. 위 코드의 결과는 어떻게 될까? 만약 자바스크립트가 Dynamic Scope를 따랐다면 1, 1234처럼 나왔을 것이다. 하지만 자바스크립트는 Lexical Scope를 따르기 때문에, 함수의 선언에 따라 상위 스코프가 정해졌으므로 결과.......
[JavaScript] eval()사용을 피해야 하는 이유 [내부링크]
"eval() is evil"이란 말이 있다. 이런 말까지 나오면서 eval()을 쓰지 말라고 하는걸까? 우선 eval()함수에 대해서 한번 알아보자. 이 함수는 임의의 문자열을 받아서 자바스크립트 코드로 인식하게 만드는 함수이다. 예를들어 console.log(eval("4+4"))를 하게되면 8이 나오게 되는거고 다른 예로 html 요소의 id가 hi라는 변수에 들어가있다고 가정하고 eval("document."+hi+.........)와 같이 사용할 수 있는 그런 함수이다. 예시 코드를 들어보자면 아래와 같이 사용할 수 있다. 결과는 아래와 같다. 이 함수를 쓰지 말아야 하는 이유는 크게 네 가지가 있다. 1. 느리다. 2. 유지보수가 힘들다. 3. 보안상 문.......
[OS] Priority Scheduling(우선순위 스케줄링) [내부링크]
FCFS알고리즘은 Ready Queue에 들어온 순서대로, SJF알고리즘은 CPU Burst Time 순서대로 스케줄링 해주는 방식이였다. 그에 반해 Priority Scheduling은 이름 그대로 Priority(우선순위)가 높은 순서대로 스케줄링해주는 방식이다. Priority를 정하는 기준은 그 프로세스의 중요도인데, 이는 내부적인 요소가 될 수도 있고, 외부적인 요소가 될 수도 있다. 내부적인 요소로는 메모리를 적게 차지하는 프로세스를 기준으로, CPU Burst가 짧은 애들을 기준으로 등 여러 이유가 있을 수 있다. 외부적인 요소로는 여러 사람이 사용하는 서버컴퓨터의 경우 돈을 많이 낸 순서로 우선순위를 부여할 수도 있다. 예시를 한번 들어보겠다. 위와 같은 프로.......
[OS] RR(Round-Robin)스케줄링 [내부링크]
FCFS알고리즘은 Ready Queue에 들어온 순서대로, SJF알고리즘은 CPU Burst Time 순서대로 스케줄링 해주는 방식이였다. 그리고 Priority Scheduling은 Priority(우선순위)가 높은 순서대로 스케줄링해주는 방식이였다. RR스케줄링에 대해 알아보기 전에 왜 Round Robin인지 한번 알아보자. 이 이름은 Robin이라는 새에게서 따왔다고 한다. 이 Robin이라는 새는 새끼에게 밥을 줄 때 10마리가 있으면 조금씩 나누어 주고 조금씩 한바퀴 다 줬으면 다시 조금씩 주고를 반복하여 준다고 한다. 이 Robin이 새끼들에게 밥을 주는 것처럼 RR스케줄링은 특정한 시간을 기준을 잡아 그 시간만큼 CPU를 프로세스에게 할당해주고 시간이 지나면 다음 프로세.......
[Node.js] qrcode 모듈을 이용한 QRcode 생성 [내부링크]
우선 이 글에서 다룰 모듈은 qrcode라는 모듈이다. https://www.npmjs.com/package/qrcode 간단하게 특정 문자열을 받으면 그 문자열을 이용하여 QR코드를 만들어 줄 수 있도록 해보자. 우선 npm init을 통해 프로젝트를 생성해주자. 이후 필요한 모듈들을 설치해주자. qrcode모듈도 아래와 같이 설치해주자. 이 외 아래 모듈들도 설치해주자. 템플릿엔진으로 EJS를 사용하였다. (package.json) 이후 만든 프로젝트 구조는 아래와 같다. 이제 ./index.js를 아래와 같이 작성해주자. (./index.js) 이제 EJS 파일을 작성해보자. (./views/index.ejs) 이후 라우터들을 작성해주자. 이 때, 설치했던 qrcode모듈을 가져와 구현해보자. 이후 서버를 실.......
[JavaScript 오류] 'RangeError : Maxmum call stack size exceeded' 발생원인 및 해결 [내부링크]
이 오류의 경우 대부분 아래와 같이 함수를 재귀호출하여 발생하는 오류이다. 이 코드를 실행하게 되면 아래와 같은 에러가 발생하는 것을 확인할 수 있다. 그래서 이 코드를 아래와 같이 수정했더니 RangeError : Maxmum call stack size exceeded 는 나오지 않고 돌아가는 것을 확인할 수 있다. 왜 이런 상황이 발생하는지 자바스크립트 런타임을 그려 한번 알아보자. 이 오류의 발생 이유에 대해 알아보기 전에 자바스크립트 코드가 어떻게 돌아가는지부터 알아보자. 예시 코드가 아래처럼 있고, 런타임에서 어떻게 돌아가는지 확인해보자. 우선 자바스크립트 런타임이 위와 같다고 하자. 위에서 콜스택은 이 글에서 말했던 콜 스택이다. &quo.......
[프로그래머스] 키패드 누르기(2020 카카오 인턴십)(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/67256 map객체를 이용하여 키패드의 좌표를 정해주고 풀었다. 처음에 풀 때 1번조건 "엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다."를 제대로 안읽고 좌표평면 두 점 사이 거리구하다가 안돼서 헤맸었다...ㅎ 문제 다시 확인하고 한칸당 1로 다시 풀었다. 문제를 잘 읽어야겠다...
[Node.js] Express 서버 성능 향상을 위한 Gzip 적용 [내부링크]
이 Gzip을 사용하는 것은 웹페이지의 응답속도를 줄이는 가장 일반적인 방법 중 하나이다. GUNzip이라고도 불리는 이 Gzip은 파일 압축에 쓰이는 응용 소프트웨어이다. 그렇다면 이 Gzip은 왜 쓰는걸까? 우선 일반적인 트랜잭션이 일어났을 때의 상황을 가정하고 그림으로 나타내어보자. 위와 같은 상황이라고 해보자. 클라이언트가 hi.html을 서버로 요청했고, 서버가 이 요청을 읽었다. 이후 서버가 응답을 보내줬고, 이 응답을 띄우는데 이 응답이 500kb짜리인 상황이다. 500KB의 데이터가 전송되는 상황에 반해, Gzip을 사용한 경우를 예시로 들어보자. Gzip은 이 서버가 보내주는 응답을 압축해버리는 것이다. 위 사진과 같이 압축해서 보내.......
[JavaScript] 명시적 변수와 암묵적 전역 변수 [내부링크]
우선 이 코드에 대해서 먼저 생각해보자. 결과는 예상한 대로 10이 찍힐 것이다. 위와 같은 경우 또한 10이 찍히게 될 것이다. 왜 찍힐까? 잘 생각해보면 a라는 변수는 선언문이 없다. js 엔진은 a라는 변수를 우선적으로 hello실행 컨텍스트의 변수객체에서 a라는 변수가 존재하는지 확인할 것이다. 하지만, hello의 변수객체에서는 a라는 변수를 찾지 못할 것이고 이후 전역 객체로 스코프 체인을 따라 확인할 것이다. 그러나 a는 선언문이 없기에 전역에서도 찾지 못하여 reference Error가 발생하지 않을까 하고 생각할 수 있다. 아래 그림과 같이 말이다. 그럼에도 10이 출력되는 이유는 뭘까? 이렇게 되는 이유는 js엔진이 전역 객체에 a라.......
[JavaScript] strict mode(use strict) [내부링크]
ES5부터 strict mode가 사용 가능하다. strict mode는 자바스크립트의 문법을 엄격히 적용하여 원래 무시되던 오류들이나 잠재적으로 오류를 발생시킬 수 있는 코드에 대해 오류를 발생시키는 모드이다. 적용 방법은 아래와 같다. 이는 아래와 같이 함수 단위로도 사용이 가능하다. 단, 주의할 점은 코드의 최상단에 사용하지 않는다면 strict 모드가 제대로 동작하지 않는다. 그렇다면 strict mode가 걸러내는 에러들에 대해 간단하게 몇가지만 알아보자. 1. 암묵적 전역 변수 2. delete 사용 3. arguments.callee 또는 arguments.caller 사용 불가능 이 외에 여러가지가 있다. MDN의 Strict mode에 들어가서 보면 확인할 수 있다.
[프로그래머스] K번째 수 (JavaScript) [내부링크]
slice()메서드와 sort()메서드를 이용하여 풀었다.
[프로그래머스] 두 개 뽑아서 더하기(JavaScript) [내부링크]
두 개 뽑아서 더하고 나올 수 있는 모든 수를 배열에 갖다 넣으라길래 set에 넣었다가 배열로 다시 빼서 정렬했다. 다른 분의 풀이를 보면 코드가 굉장히 깔끔한데 그에 비하면 난 확실히 난잡하게 푼다. 비록 이 문제는 쉬운 문제이긴 하지만 많은 노력이 필요할 듯 하다... 아래는 다른 분들의 풀이이다.
[프로그래머스] 완주하지 못한 선수(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/42576 단 한명의 선수를 제외하고 모두 마라톤에 참여하였기 때문에, 배열을 정렬하고 두 배열을 비교하여 풀었다.
[프로그래머스] 2016년(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12901?language=javascript# 풀고나서 나중에 안건데 date를 써도 됐었다. 그냥 date를 썼으면 큰 생각 없이 편하게 풀 수 있었을 것 같다. 그냥 이렇게 노가다느낌으로 풀었다 아래처럼 Date써서 풀었으면 좋지 않았을 것 같았다. 그렇게 date로 풀고나서 보니 Date를 안쓴 앞에 풀었던 코드에 비해 코드 속도가 뭔가 훨씬 더 오래걸리는 걸 보았다. 왜 이게 앞선 코드에 비해 이렇게나 많이 시간이 더 걸리는걸까 좀 궁금했다.
[프로그래머스] 나누어 떨어지떨어지는 숫자 배열(JavaScript) [내부링크]
https://programmers.co.kr/learn/courses/30/lessons/12910 Array의 sort()메서드를 이용하였다.
[OS] Context Switching Overhead (문맥교환 오버헤드) [내부링크]
우선 간단하게 예시를 한번 들어보겠다. 우리가 여러 가지의 프로그램들을 실행했다고 가정해보자. 그리고 많은 프로세스들중 "프로세스1"이 CPU상에 올라가서 실행이 되고있는 상황이라고 가정해보자. 대략 아래 그림과 같은 상황일 것이다. 그리고 이 많은 프로세스들은 아래와 같은 상태(state) 존재한다. 이 프로세스들은 CPU상에 올라가서 Ready상태에서 Running상태가 되고나서 Time expired등의 이유로 waiting상태로 빠지게 되면 다른 프로세스가 Running 상태에 들어가고 하는 과정을 반복할 것이다. CPU상에 올라가지 못했으며 메모리에 load되어있는(ready상태) 프로세스들은 ready queue라는 곳에 쌓이게 된다. 이 ready q.......
[Node.js] Ajax를 이용한 비동기 통신 [내부링크]
우선 Ajax란 Asynchronous JavaScript And XML의 약자로, 서버와 클라이언트 사이의 비동기 통신을 하기 위한 일종의 방식이다. 기본적으로 HTTP는 connectless하고 stateless한데, 이러한 HTTP의 특성때문에 클라이언트에서 request를 보내고 서버에서 response를 보내면 이어졌던 연결이 끊어지게 된다. 그래서 화면의 일부 데이터만 수정하고 싶은 상황이 발생하더라도 다시 request를 보내고 response를 받아 전체 리소스를 다시 다 가져와야 하는 상황이 발생한다. 이를 해결하기 위해 만들어진 것이 AJAX라고 생각하면 된다. XMLHttpRequest 객체를 request해주는데, 이후 서버에서 JSON같은 형태의 데이터를 받아 페이지의 일부만 수정할.......
[OS] 스케줄링 알고리즘 SJF [내부링크]
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.......
[JavaScript] 콜 스택(Call Stack)과 실행 컨텍스트(Execution Context) [내부링크]
우선 아래와 같이 자바스크립트의 엔진이 있다. 자바스크립트 엔진은 당연히 코드를 해석하고 실행하는 역할을 할 것이다. 이 자바스크립트 엔진은 크게 메모리 힙과 콜 스택(호출 스택)으로 나뉘게 된다. 여기서 콜 스택이 하는 일은 실행 컨텍스트들을 차곡차곡 쌓는 것이다. EcmaScript 공식문서에서 정의한 실행 컨텍스트는 "실행 가능한 JS 코드블럭이 실행되는 환경" 이다. 그런데 이 글 에서 설명했던 것처럼, 자바스크립트는 함수 레벨 스코프 언어이다. 따라서 "실행 가능한 JS 코드블럭" 은 대부분의 경우 함수가 된다. (전역 코드, eval()함수로 실행되는 코드를 제외한 모든 경우이다.) 아무튼 콜 스택은 실행 컨.......
[JavaScript] Array.prototype의 map(), reduce(), filter() [내부링크]
map(), filter(), reduce()는 배열 조작을 위해 사용되는 메서드들이다. 이들은 위와 같이 Arrays.prototype에 소속되어있다는 것을 확인할 수 있다. 1. Array.prototype.map() Array.prototype.map() 메서드는 배열의 요소들을 일괄적으로 변경하는 곳에 주로 사용한다. 기본 사용 방식은 아래와 같이 사용한다. 첫 번째 인자(value): 배열의 각 요소를 의미한다. 두 번째 인자(index): 배열 요소의 인덱스를 의미한다. 세 번째 인자(array): map함수가 적용되고 있는 배열을 의미한다.(자기자신) map()은 아래와 같이 사용할 수 있다. 2. Array.prototype.reduce() Array.prototype.reduce()메서드는 배열의 요소들을 다 돌면서 각 요소들을 모.......
[JavaScript] Array.prototype.forEach() 메서드 [내부링크]
우선 이 forEach()메서드는 for 문과 비슷하게 반복적인 기능을 구현할 때 사용한다. for 문과 forEach의 차이점이라고 한다면 forEach문은 for문의 index, 조건식, 증감연산을 정의하지 않아도 된다는 것이다. 우선 기본적인 사용방법은 아래와 같다. 1. 콜백의 첫 번째 인자(currentValue): 처리할 현재 요소 2. 콜백의 두 번째 인자(index): 처리할 현재 요소의 인덱스 3. 콜백의 세 번째 인자(array): forEach()를 호출한 배열 4. forEach()의 두 번째 인자(thisArg): 콜백 실행 시 this로 쓸 값 forEach()의 특징에는 콜백의 리턴값이 존재하지 않는것이 있다. 따라서 무언가를 리턴하더라도 undefined가 나오게 된다. 아래와 같이 사용하게.......
[JavaScript] Set, 특정 데이터타입만 Set에 저장하기 [내부링크]
1. 자료구조 Set의 특징 1) 중복을 허용하지 않는다. 2) 비순차적 저장 3) 데이터가 존재하는지 탐색하는 작업을 할 때 사용. 2. Set 사용법 1) 인스턴스 생성 우선 사용방법은 아래와 같다. Set 인스턴스 생성은 아래와 같이 한다. 위 코드의 결과는 아래와 같을 것이다. 위 코드를 보면 알겠지만, value값으로 string, number 등을 모두 작성할 수 있다. 이 뿐만 아니라 아래와 같이 function, Object 등도 가능하다. 이 코드의 결과는 아래와 같을 것이다. 2) add() 메서드 new Set()키워드를 이용해 set 인스턴스를 만들고 value를 후에 추가하고 싶을 수도 있다. 이 경우 add()메서드를 이용하면 된다. 아래에 예시를 들겠다. 위와 같이 add.......
[JavaScript] 자바스크립트의 프로토타입을 이용한 상속 구현 [내부링크]
우선, ES6 부터는 Class라는 키워드를 사용함으로써, Class 오브젝트를 사용할 수 있다. 대강 아래와 같이 말이다. 하지만 이는 조금 자세히 보면 모두 prototype을 이용하여 결국 구현되었다는 것을 알 수 있다. 아래와 같은 코드의 결과를 한번 봐보자. 결국 함수가 생성되면 생기는 arguments객체, prototype객체가 class 키워드를 썼을 때에도 모두 존재하고 __proto__가 Function.prototype을 향해있는 사실또한 같다는 것을 확인할 수 있다. 아래와 같이 말이다. 그렇다면 이제 prototype을 이용하여 클래스와 비슷하게 동작하도록 코드로 만들어보자. 이렇게 만든다면 생성자 함수 Hello()에서 만든 인스턴스들은 모두 프로토타입 체이닝.......
[JavaScript] ES6의 Class키워드의 동작원리에 대해 알아보자. [내부링크]
우선 ES6부터는 Class키워드를 사용하여 클래스 정의가 가능하다. 사용법부터 간단하게 알아보자. 위와 같이 사용할 수 있다. 자바와 비교하여 한번 보자. 위를 보면 알 수 있겠지만, constructor()이 자바의 생성자와 비슷하다고 보면 된다. 이 외로는 별다를게 없어보인다. 그런데 알다싶이 자바스크립트는 프로토타입을 이용해 동작하기때문에, 자바와 전혀 다르게 동작한다. 그렇다면 이 Class키워드는 어떻게 동작하는 걸까? 아래는 아까와 같은 코드이다. 여기서 Hello클래스와 그 인스턴스인 a를 한번 콘솔로 찍어보자. 우선 console.dir(Hello)의 결과부터 먼저 보자. 결과는 아래와 같다. 위를 보면 알 수 있지만, 일반 함수가 생성되었.......
[JavaScript] 클로저(closure)의 개념과 클로저를 이용한 캡슐화(encapsulation) [내부링크]
우선 클로저의 캡슐화에 대해 알아보기 전에 클로저가 무엇인지 먼저 알아보겠다. 위 사진은 자바스크립트 엔진이다. 보이는 것과 같이 메모리 힙과 콜 스택으로 나뉘게 된다. 여기서 콜 스택은 "실행 컨텍스트"라는 것들을 차곡차곡 쌓게 된다. EcmaScript 공식문서에서 정의한 "실행 컨텍스트"란 "실행 가능한 JS 코드블럭이 실행되는 환경" 이다. 이 때, 자바스크립트는 함수 레벨 스코프 언어이기 때문에, "실행 가능한 JS 코드블럭"이 의미하는 것은 대부분의 경우 함수가 된다. 여기서 예시 코드를 한번 들어보자. 위와 같은 코드가 있다고 가정해보고, 그림을 통해 어떻게 동작할지 잘 생각해보.......
[JavaScript] 자바스크립트 호이스팅의 동작 원리와 let, var 변수선언방식의 차이점 [내부링크]
1. 블록 레벨 스코프, 함수 레벨 스코프 let, var 이 두 변수선언방식의 차이점에 대해 설명하기 전에 스코프에 대해 간단하게 설명하겠다. 스코프는 말 그대로 범위이다. 변수의 접근 가능 범위정도로 생각하면 될 듯 하다. 대부분의 프로그래밍 언어는 "블록 레벨 스코프"라는 것을 따른다. 하지만 자바스크립트의 경우 "함수 레벨 스코프"라는 것을 따른다. 블록 레벨 스코프를 간단하게 설명하자면, 말 그대로 변수의 접근 가능 기준이 블록인것이다. 여기서 말하는 블록으로는 if문의 블록, for문의 블록, try-catch문의 블록 등이 될 수 있을것이다. C언어를 예시로 들어 설명하자면 다음과 같을 것이다. 위와 같은 코.......
[OS] 시스템 콜 (System Call) [내부링크]
"시스템 호출"이라고도 불리는 이 시스템 콜(System Call)은 일반적인 프로세스가 OS가 제공하는 서비스를 받기 위해 호출하는 상황을 일컫는 말이다.프로세스가 OS가 제공하는 서비스를 받기 위해 호출하는 경우의 예시를 간단하게 들어보겠다.A라는 자바 프로그램이 있다고 가정하자.A의 코드가 아래와 같이 이루어져 있다고 가정해보자.이 프로그램을 메인메모리에 올라간 뒤 이 프로세스는 hello 라는 인스턴스에 메모리를 할당해 줄 것이다.이 경우 메모리를 얻기 위해 OS에게 "Allocate" 라는 요청을 하게 된다.대략 위와 같은 그림처럼 되는 것이다.이처럼 OS가 제공하는 서비스(예를들자면 위처럼 메모리를 할당받.......
[Node.js] 서버사이드 템플릿 엔진 EJS [내부링크]
서버사이드 템플릿 엔진(Server Side Template Engine)인 EJS 를 설명하기에 앞서, 템플릿 엔진(Template Engine)이 무엇인지 먼저 설명하겠다.그림으로 간단하게 먼저 나타내어 보자면 다음과 같다.위 그림과 같이 템플릿과 데이터를 결합하여 원하는 결과를 출력해내도록 하는 소프트웨어 정도로 생각하면 된다. 여기서 템플릿은 HTML 같은 마크업같은 것들이라 보면 된다.결론적으로, 데이터와 화면을 분리하여 관리가 가능 할 수 있도록 해주는 것이다.이렇게 되면 확실히 유지보수에 용이할것이다.그렇다면 서버사이드 템플릿 엔진은 무엇일까?서버에서 DB나 API에서 데이터를 가져오고 이 가져온 데이터를 템플릿에 넣어 html을 만들어 띄.......
[Node.js] bcryptjs모듈 사용, 단점(bcrypt 모듈 설치가 안될 때) [내부링크]
bcrypt모듈을 사용하려고 설치하다보면 종종 안될때가 있다.그럴 때 bcryptjs라는 모듈을 사용할 수 있다.적어도 설치하는것 때문에 스트레스받을일은 없을테니..설치는 당연히 위처럼 npm i bcryptjs를 쳐서 해준다.사용방법도 그냥 bcrypt와 사실상 똑같다.hash함수도 그대로다.저 경로로 접근하면 아래와 같이 나온다.잘 암호화 된다.위처럼 compare함수도 그대로다.비교도 무난히 잘 된다.genSalt()메서드도 bcrypt와 똑같이 사용 가능하다.그럼 bcrypt모듈에 비해 잘깔리고 잘 돌아가는 bcryptjs모듈의 단점은 뭘까?사실 bcryptjs가 bcrypt보다 훨씬 느리다.해시 암호 생성부터 bcrypt는 bcryptjs보다 3배 빠르다.따라서 bcrypt와 bcryp.......
[Node.js] Kakao API를 이용하여 지도 띄우기 [내부링크]
카카오 api를 이용하기 위해 우선 아래 링크로 들어가준다. https://developers.kakao.com/들어가면 아래와 같은 화면을 볼 수 있다.로그인을 해주자.로그인을 해주고 내 어플리케이션으로 들어가면 아래와 같이 애플리케이션을 추가할 수 있다.만들면 아래처럼 나온다.들어가보면 키들이 막 떠있고 밑에 플랫폼이 있을것이다. 설정하기에 들어가준다.들어가서 아래와 같이 api를 쓸 사이트 도메인을 넣어주자.난 로컬호스트 8000번을 사용하고싶기 때문에 localhost:8000을 넣었다.이제 띄워줄 페이지에 코드를 작성해보자.<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발.......
[Node.js] dotenv 사용법 (Node.js 기반 환경변수 사용) [내부링크]
우선 환경변수란 무엇일까?간단하게 이야기하자면 특정한 프로세스를 위하여 존재하는 키-값의 쌍 정도라고 보면 된다.이는 언제 사용할까?개발하는 도중에 정말 민감한 정보들이 코드에 들어갈 수가 있다.데이터베이스 패스워드라던가, 세션의 키값이라던가 많은 것들이 될 수 있다.이러한 정보들을 환경변수로 따로 빼놓아 사용하는것이다.우선 아래와 같이 설치해주자.그리고 .env라는 파일을 만들어주자.이 파일 내에는 아래와 같이 DB의 user명, 패스워드, db명 등을 넣어주자.환경변수를 사용하기 위해서 아래 코드를 꼭 사용해야 한다.이후 원하는 환경변수를 process.env.환경변수키값 과 같이 가져와 사용하면 된다. 예시로 아래.......
[Mysql 오류] Error Code: 1175, Error Code: 1046 해결 [내부링크]
Error Code:1175mysql workbench를 사용하던 중 auto_increment 를 재정렬 하는 작업을 하다 아래와 같은 오류가 발생했다.해결 방안은 다음과 같다.workbench에서 Edit -> Preferences... 로 들어가면 다음과 같은 창이 나온다.거기서 SQL Editor로 들어간 뒤 위에 보이는 것처럼 Other에서 Safe Updates 체크를 풀어준다.이후 워크벤치를 껐다 켜면 오류가 해결된다.Error Code:1046아래와 같은 오류가 발생하였다.위와 같은 오류는 어떤 DB에 테이블을 만들 지 지정을 안해줬기 때문에 발생하는 오류이다.워크벤치를 사용할 경우 아래와 같이 스키마를 더블클릭 해준 뒤 테이블을 생성하면 된다.위 사진과 같이 그냥 생성하면 된다.
[OS] 프로세스 상태(Process State) [내부링크]
우선 프로세스란 무엇일까?컴퓨터의 구조를 대강 아래와 같이 나타내겠다.위 그림처럼 그렸을 때, 프로그램이 실행되기 위해서 우선 하드디스크에서 프로그램을 메인메모리상으로 올려야 한다.올린 뒤 CPU가 가져왔을 때 비로소 우리 눈앞에 보이는 것처럼 실행되는 것이다.일단 메인메모리에 올라가 있는 상태의 프로그램을 "프로세스"라고 한다.그리고 이런 프로세스에는 5가지 상태가 존재한다.이 다섯 가지 상태는 아래 그림과 같이 표현할 수 있다.1. New : 하드디스크에서 메인메모리로 일단 올라온 상태라고 보면 된다.2. Ready : 메인 메모리로 올라온 뒤 실행할 모든 준비가 완료 된 상태라고 생각하 면 된다.3. Running : .......
[Node.js] passport-kakao모듈을 이용한 Kakao 소셜 로그인 구현하기 [내부링크]
로컬 로그인 구현은 이 글 에서 다뤘었다.우선 kakao 로그인을 통한 인증을 구현하기 전에 아래 두 패키지를 설치해주자.이 kakao 인증을 사용하기 위해서는 아래 링크에 이 인증 기능을 사용하겠다고 등록을 해야한다.https://developers.kakao.com/들어가서 로그인을 해주고, 우측 상단에 "내 애플리케이션"을 눌러주자.그럼 아래와 같은 화면을 볼 수 있다.여기서 애플리케이션을 추가해주자.그리고 위 빈칸을 작성해주자.만들고 나면 아래와 같은 화면을 볼 수 있다.들어가면 아래와 같은 화면을 볼 수 있다.여기서 Rest API키를 사용 할 것이다.이제 왼쪽에 플랫폼을 누르고 웹 플랫폼을 등록해주자.아래 사진처럼 로컬호스트로 지.......
HTTP 응답코드 404 (Not Found) 오류 [내부링크]
* 예전 글을 다시 작성한 글입니다.HTTP 404 Not Found는 굉장히 자주 봤을법한 오류이다.404 Not Found 오류는 접근한 URL에 리소스가 없을 경우에 발생하는 오류이다.여기서 리소스란 웹으로 따지자면 웹 콘텐츠들의 원천으로, 웹 서버 파일 시스템의 정적 파일들이라고 생각하면 된다. 리소스가 꼭 정적 파일이여야만 할 필요는 없으나, 주로 HTML파일, CSS파일, 텍스트파일, JPEG파일 등의 파일들을 말한다고 보면 된다.URL은 Uniform Resource Location의 약자로, 보이는것처럼 Location이라는 단어가 들어간다. 즉, 리소스들에게 주소(경로)를 할당하고 이를 그 주소에 맞게 찾아가는 방식으로 돌아간다고 생각하면 될 것 같다.이러한 정적.......
[HTTP] 같은 리소스를 새로고침하면 왜 상태코드가 200이 아닌 304가 나올까? (HTTP상태코드 200과 304의 차이점) [내부링크]
예전부터 종종 궁금했던 것인데, 그냥 서버를 대강 짜고 켠 후 바로 로컬호스트에 짜놓은 포트로 접근하면 HTTP 상태코드가 처음에는 200이 뜨고 그 뒤로는 304가 뜨는 이유가 궁금했었다.위 그림처럼 처음에는 상태코드가 200이 뜨는데 새로고침하면 아래 그림처럼 상태코드가 304가 뜬다.나중에 알고보니 이 이유는 브라우저의 리소스 캐싱과 관련이 있었다. 네트워크를 통하여 무언가를 가져오도록 하는 작업은 느린데다가 당연히 비용이 많이 들수밖에 없다. 따라서, 요즘의 모든 브라우저는 HTTP 캐시가 구현이 되어있다. 예전에 가져온 리소스를 캐시했다가 같은 리소스를 요청할경우 재활용하여 성능을 최적화하는 것이다. 즉, 맨 처음.......
[오류모음] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다... [내부링크]
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 프로필에 방문자 수 띄우기 [내부링크]
우선 github profile을 만든다.이후 repository를 새로 만드는데 여기서 레포지토리의 이름은 닉네임과 같게 한다.그럼 위처럼 고양이가 나올것이다.그리고 위와 같이 readme를 add 해주자.그럼 위와 같이 Hi there라는 문구와 함께 아래와 같이 맨 처음 문구에 뜨게 된다.이제 프로필에 방문자 수를 띄워보자.우선 이 링크 에 들어가 아래와 같이 본인 깃허브 링크를 걸어준다.그리고 아래와 같이 마크다운을 복사하자.이를 복사해 위와 같이 아까 그 프로필 레포지토리에 복붙해넣으면 끝이다.그럼 위와 같이 나오게 된다.방문자수는 [today/total]로 표현된다고 한다.출처링크
[OS] 부트스트랩 로더(Bootstrap Loader) [내부링크]
우선 부트스트랩 로더(Bootstrap Loader)는 부트 로더(Boot Loader)라고도 불린다.설명을 위해 컴퓨터의 구조를 대강 아래 그림과 같이 그리겠다.위와 같은 상황에서 컴퓨터의 전원을 켠다고 가정해보자.처음 컴퓨터를 켤 때는 메인 메모리가 다 비워져있다. 가장 먼저 메인 메모리의 ROM 안의 코드가 동작한다.위와 같이 Bootstrap Loader라는 코드가 먼저 동작하게 된다.CPU가 이 ROM의 Bootstrap Loader라는 코드를 실행시키면 이 Bootstrap Loader는 하드디스크를 뒤져서 OS를 찾아와 메인메모리로 가져오게 된다.이 과정을 우리는 "부팅(booting)"이라고 한다.대략 과정을 그려보자면 아래와 같이 되는 것이다.결론적으로, 부트.......
[OS] 인터럽트(Interrupt)와 인터럽트 서비스 루틴(Interrupt Service Routine) [내부링크]
우선 간단하게 컴퓨터의 구조를 아래와 같이 그려보겠다.Windows 운영체제 기준으로 컴퓨터를 부팅시킨 뒤 아이콘이 뜨고 아무것도 안하고 가정하자. CPU도 아무것도 안한다는 가정하자.우리가 이러다가 마우스를 깔짝 움직였다고 해보자.그럼 마우스에 전기 신호가 발생하는데, 이 전기신호는 CPU로 가게된다.전기 신호를 받게 된 CPU는 하던 일을 모두 중지하고 이 전기신호를 메인메모리에 적재되어있는 OS로 보내게 된다.정확히는 OS 안의 마우스에 관한 신호를 받으면 어떤 동작을 할지 나와있는 코드로 보내게 된다.우리는 마우스를 움직였으므로 마우스가 움직이는대로 모니터의 커서 화면을 옮기는 코드로 전기신호가 보내졌을 것이다.이.......
[Mysql 오류] Error Code: 1046. No database selected Select the default DB to be used by... 해결 [내부링크]
위와 같은 오류는 어떤 DB에 테이블을 만들 지 지정을 안해줬기 때문에 발생하는 오류이다.워크벤치를 사용할 경우 아래와 같이 스키마를 더블클릭 해준 뒤 테이블을 생성하면 된다.
[Mysql] Auto_increment 재정렬 [내부링크]
위와 같이 id를 auto_increment로 지정한 테이블이 있다고 가정하자.그런데 이렇게 데이터를 막 넣다가 중간에 몇몇 내용이 잘못되어 중간 데이터를 삭제 후 다시 데이터를 삽입했다.그랬더니 위와 같이 2, 3을 빼먹고 4부터 시작됐다.따라서 위와 같은 경우에는, 삭제 시 재정렬을 해 주어야 한다.위와 같이 @cnt를 0으로 만든 뒤 위와 같이 update문으로 id 컬럼을 재정렬해준다. 그런 뒤 확인해보면 위와 같이 재정렬이 되어있다.이후 시작번호를 다시 지정해 (예시에서는 5) 지정한 시작번호부터 입력되게 설정한다.
[HTTP] TCP커넥션의 핸드셰이크와 TCP커넥션 핸드셰이크의 지연 [내부링크]
1. 트랜잭션 순서 일단 간단하게 트랜잭션이 일어날 때의 순서를 나열해보겠다. 1) URL에서 브라우저가 호스트명을 추출한 뒤 이 호스트명에 대한 IP주소를 찾고 포트번호를 가져온다. 2) 이후 이 가져온 ip주소와 포트번호로 tcp커넥션을 생성한다. 3) 브라우저가 이 TCP커넥션을 이용하여 요청 메시지를 보낸다. 4) 위에서 보낸 요청 메시지에 맞는 응답을 브라우저가 읽는다. 5) 브라우저가 커넥션을 끊는다.일단 간단하게 HTTP트랜잭션의 순서를 나타내자면 다음과 같이 나타낼 수 있다.이 글의 주제인 TCP커넥션의 핸드셰이크는 위 1-2번에 속하는 내용이다.2. IP패킷, TCP세그먼트란?HTTP가 메시지를 서버로 보내려 한다고 가정하면 위.......
[HTTP] 편승(piggyback)확인응답과 확인 응답 지연 [내부링크]
우선, 이 글에서 TCP 커넥션의 핸드셰이크에 대해서 설명했었다.이 글에서 말했던 것처럼, TCP커넥션 맺기를 성공한 뒤, 클라이언트가 커넥션이 잘 맺어졌음을 알리기 위해 서버에게 다시 확인 응답 신호를 보낸다고 하였다.이 때, 오늘날의 TCP는 클라이언트가 이 확인응답을 IP패킷과 함께 데이터를 보내는게 가능하다.위 사진과 같이 확인응답을 편승(piggyback)하여 IP패킷과 함께 데이터를 보낸다.1. 확인응답이란?우선, 인터넷 자체가 패킷전송을 완벽하게 보장하지는 않는다. 무슨 말이냐면, 인터넷 라우터는 과부하가 걸렸을 경우 IP패킷을 마음대로 파기가 가능하다.따라서, TCP는 성공적인 데이터 전송을 보장하기 위해 자체적인 확.......
[HTTP] TCP의 느린 시작 [내부링크]
우선, TCP의 데이터 전송속도는 TCP 커넥션이 만들어진지 얼마나 지났는가?에 따라 달라지게 된다.TCP 커넥션은 처음에는 커넥션의 최대 속도를 제한하고, 데이터가 성공적으로 전송됨에 따라 속도제한을 높여나가는데, 이를 TCP의 느린 시작이라고 한다.이 TCP의 느린 시작은 인터넷의 급작스러운 부하와 혼잡 방지를 위해 사용된다.TCP의 느린 시작은 처음에는 TCP가 한 번에 전송할 수 있는 패킷의 수를 제한하는데, 패킷이 성공적으로 전달된다면 송신자는 패킷을 추가로 더 전송할 수 있게 되는 것이다.여기서 "패킷이 성공적으로 전달된다"의 의미는 편승(piggyback)된 확인 응답을 받았는가에 대한 여부이다."편승(piggy.......
[HTTP] 504 Gateway Timeout을 발생시킬 수 있는 Keep-Alive와 멍청한(dumb) 프락시 [내부링크]
우선, 이 문제는 Keep-Alive를 쓸 때에 발생할 수 있는 문제이다. 예시로 다음과 같은 상황을 설정하겠다.위와 같이 클라이언트는 하나의 프락시와 다른 서버로 통신하는 상황이라고 가정하자. 이 때, 프락시 서버가 Keep-Alive가 뭔지 모르는 멍청한 프락시라고 가정하겠다. 이전에 Keep-Alive에 대해서 간단히 설명하자면, 이 Keep-Alive는 HTTP 메시지의 Connection 헤더의 헤더 필드명이다. 따라서, Connection:Keep-Alive와 같이 사용된다. 여기서 알아야 할 것은, Connection 헤더에는 홉별(hop-by-hop) 헤더 명을 기술된다. 홉별(hop-by-hop)이라는 것은 특정 두 서버간에만 영향을 미친다는 것을 이야기하는데, 그 말인 즉슨, 클라이언.......
[JavaScript] 팩토리 메서드 패턴(factory method pattern) [내부링크]
이 팩토리 메서드 패턴은 객체지향 디자인 패턴이다.이 패턴은 상위 클래스에 알려지지 않은 구체화된 클래스를 생성하는 패턴이며, 하위 클래스가 어떤 객체를 생성할 지 결정하도록 하는 패턴이다.코드로 예시를 들자면 다음과 같다.결과는 다음과 같다.
[Spring] DAO 리팩토링과 템플릿 메서드 패턴(Template method pattern), 팩토리 메서드 패턴(Factory method pattern) [내부링크]
1. 템플릿 메서드 패턴이란? 우선, GoF DesignPattern에서 말한 템플릿 메서드 패턴의 정의는 다음과 같다.Defines the skeleton of an algorithm in a method, deferring some steps to subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithms structure."알고리즘의 골격을 메서드로 정의하고, 일부 단계의 하위 클래스로 연기한다. 하위 클래스가 알고리즘 구조를 변경하지 않고 알고리즘의 특정 단계를 재정의 할 수 있도록 한다"는 이야기이다.이를 간단하게 사용자DAO를 만들고 리팩토링하며 적용하여 보겠다.우선 아래와 같이 사용자 정보 저장용 DAO가 있.......
[Spring] System.out.println()을 이용한 디버그용 로그가 서버 성능에 미치는 영향과 해결방법 [내부링크]
많은 개발자들이 로그를 찍기 위해 Sysout 메서드를 사용한 시스템 로그를 사용한다. 이는 확인하기 정말 편리하지만, 서버의 성능에 영향을 주는 경우가 많다.System.out.println()으로 로그가 출력되는 윈도 콘솔을 활성화 시켰을 때의 문제점을 생각해보자.System.out.println()을 사용했기 때문에, OS가 윈도우라고 생각하면 화면에 출력을 할 것이다. 이처럼 화면에 출력하게 될 경우는 CPU를 많이 점유하게 된다. 특히 커널모드 상태에서의 CPU를 많이 차지하게 된다.이는 System.out.println()을 지움으로써 서버 성능을 확 개선시킬 수 있다.실제 예시를 들겠다.ex) 한 번 요청 시 5000명의 사용자를 요청하고, 처리 과정에서 응답시간이.......
HTTP 응답코드 413(PayloadTooLargeError: request entity too large) 원인, 해결 [내부링크]
이 에러는 request의 body가 크면 발생하는 에러이다. express로 예시를 간단하게 들어보겠다.위와 같이 text부분에 텍스트를 치고 제출을 하면 아래처럼 다른 페이지에서 그 텍스트를 띄워주는게 있다고 가정하자.제출을 누르면 위와 같이 가나다라마바사가 뜰것이다.그리고 개발자 도구에서 network탭을 가서 보면 아래와 같이 FormData 부분에 가나다라마바사 가 있을 것이다.example 이라는 name으로 "가나다라마바사"라는 데이터를 보낸 것이다.이런 경우는 문제없이 돌아갔지만, 만약 저 FormData에 들어갈 글자의 양이 어마어마하게 많다면 어떻게 될까?아래처럼 말이다.결과는 HTTP코드 413과 PayloadTooLar.......
[Mysql 오류] Error Code: 1175. You are using safe update mode and you tried to update... 해결 [내부링크]
mysql workbench를 사용하던 중 auto_increment 를 재정렬 하는 작업을 하다 아래와 같은 오류가 발생했다.workbench에서 Edit -> Preferences... 로 들어가면 다음과 같은 창이 나온다.거기서 SQL Editor로 들어간 뒤 위에 보이는 것처럼 Other에서 Safe Updates 체크를 풀어준다.이후 워크벤치를 껐다 켜면 오류가 해결된다.
[Java 오류] java.lang.IndexOutOfBoundsException 오류 [내부링크]
이 오류는 리스트와 같은 자료형들에서 인덱스의 범위를 벗어나는 경우에 발생한다.그렇다면 위 에러를 발생시키는 코드를 작성해보겠다.위 코드를 실행하면 다음과 같은 결과를 받을 수 있다.이처럼 정해진 길이를 벗어나서 접근하려 할 경우 IndexOutOfBoundsException 에러가 발생한다.
[Git 오류] ![rejected] master -> master (fetch first) 에러 해결방법 [내부링크]
위와 같이 push를 하려는데 ! [rejected] master -> master (fetch first) 에러가 발생하였다. 이는 기존 데이터가 손실이 있을 수 있어 진행이 안되게 하는 것이다.해결방안에는 두 가지가 있다.1. 위와 같이 "git push origin +master"를 사용한다. 이로 해결할 수 있지만, 이는 변경내용만 push 되는것이 아니라 소스 전체가 다시 push되는 것이기에, 기존의 데이터를 보장할 수 없다.2.fetch작업을 해준다.이후 위와 같이 "! [rejected] master -> master (non-fast-forward)" 에러 발생 시 다시 rebase 해준 뒤 임시 브랜치를 만들고 HEAD를 지정해주면 해결할 수 있다.
[Java 오류] java.lang.NullPointerException [내부링크]
어떤 참조 자료형도 null이 될 수 있다.null 체크를 하지 않는다면 객체에 있는 모든 메서드들이 예외를 발생시킬 수 있다.예시를 들겠다.위 코드는 아래와 같은 결과를 만들어낸다.null인 객체의 메소드에 접근하였기 때문에 위와 같이 NullPointerException이 발생한 것이다.위와 같이 객체가 "=="이나 "!="를 이용하여 null인지 아닌지 를 체크한다면 예상하지 못한 NullPointerException도 발생시키지 않을 수 있다.매개변수로 넘어오는 객체가 null이 될 확률이 조금이라도 있다면 꼭 확인할수있도록 하는게 좋다.
[Java 오류] 오버라이딩시 Unresolved compilation problem: The return type is incompatible with... [내부링크]
예시를 들겠다.위처럼 상속관계에 있는 Parent클래스와 Child클래스에 같은 이름의 hello()라는 메서드가 있다. 여기서 메서드 리턴 타입이 다르게 되면 아래와 같은 에러가 발생하게 된다.오버라이딩을 위해서는 아래와 같은 조건을 충족해야한다.1. 메서드의 이름2. 메서드의 리턴 타입3. 메서드의 매개변수의 갯수, 순서, 데이터 타입이렇게 메서드의 형태를 정의하는 사항들을 통틀어 메서드의 서명이라고 한다.따라서, The return type is incompatible with... 에러는 메서드간 서명이 달라 발생한 문제이다.
[GIT] 로컬 저장소와 github 원격 저장소 연동하기, 최초 커밋(commit)+푸시(push)하기 [내부링크]
우선 github와 연동할 로컬 저장소를 만들어줍시다.이와 같이 그냥 폴더를 하나 만들어주면 됩니다.이후 git Bash를 실행해줍니다.1. 이름, 이메일 설정만약 자신이 git Bash 사용이 처음이라면, 이름과 이메일 설정을 해주어야 합니다.설정은 다음과 같이 할 수 있습니다.2. github에서 레포지토리 생성자신의 github에 들어가서 보면맨 오른쪽에 New를 볼 수 있다. 저 new를 눌러주면 새로운 레포지토리를 생성할 수 있다.테스트용으로 간단하게 레포지토리를 생성해 보겠다.이와 같은 형태로 레포지토리를 생성해주자.이후 create repository를 눌러주면 레포지토리 생성이 완료된다.3. 로컬 저장소와 깃 연동 이후 아까 그 git b.......
[GIT] git add 취소하기 [내부링크]
간단한 예시를 들겠다. 실수로 .gitignore에 node_modules/를 빼놓은 상태에서 아래와 같이 실수로 add (Untracked -> Tracked)를 하여 모든 파일들이 Staging Area에 들어갔다고 가정하자.이럴 경우 "git reset HEAD [파일명]"을 사용하여 git add를 취소할 수 있다.위와 같이 파일이 너무 많은 경우 파일명을 적지 않으면 모두 취소할 수 있다.아래와 같이 사용하여 저 많던 파일들이 모두 Staging Area에서 Unstaged로 돌아갔다.
[GIT] git commit 취소하기 [내부링크]
커밋을 해야하는데 특정 파일을 빼먹고 실수로 커밋을 했다고 가정하자.우선 " git log "명령어로 commit 목록이 확인 가능하다.위 file1.txt파일이 커밋 계획에 없던 파일인데 아래와 같이 실수로 add후 commit까지 해버렸다고 가정하자. 이를 git log명령어를 통해 확인해보면 다음과 같이 나온다.맨 위에 커밋기록이 남는다.이제 commit을 취소하는방법 3가지를 보겠다.1. commit 취소 후 해당 파일들을 staged 상태로 워킹 디렉터리에 보존하는방법명령어는 다음과 같다.위와 같이 사용하면 아래와 같이 커밋됐던 파일이 staged상태로 돌아온다.(add만 한 상태)2. commit 취소 후 해당 파일들을 Unstaged 상태로 워킹 디렉터.......
[GIT] git push 취소하기 [내부링크]
https://dlaxodud2388.blog.me/221968546308우선 위 글에서처럼 commit을 먼저 되돌린다. 가장 최근 또는 원하는 commit을 취소하고 워킹 디렉터리를 되돌린다.원하는 시점으로 워킹 디렉터리를 돌리는 법은 다음과 같다.예시로 git reflog를 사용하면 아래와 같이 나오게 된다.이렇게 커밋을 되돌린 뒤, 다시 add 후 커밋을 해준다.이후 아래 명령어를 사용하여 강제로 push 해준다. 위와 같이 하면 아래와 같이 푸시가 완료된다.참고로, 이 명령을 사용하면 로컬 내용을 remote에 강제로 덮어쓰는 것이기 때문에 주의해야한다. 되돌아간 commit 이후의 모든 commit 정보가 사라지게 된다.협업 프로젝트에서 이 방법을 함부로 사용했다간 동기.......
[Git 오류] Git pull 충돌시 해결방법(Your local changes would be overwritten by merge.) [내부링크]
위와 같이 git pull을 사용하였는데 에러가 발생하였다.위와 같은 에러는 "git stash" 명령어를 이용해 해결할 수 있다.이후 git pull origin [branch] 를 사용하면 아래와 같이 pull이 정상적으로 되는것을 확인할 수 있다. (이 글의 사진들은 intelliJ를 사용한 사진들이다.)이 에러는 git pull을 하였을 때 충돌되는 파일들이 있기에 발생하는 에러이다.git stash는 Unstaged 상태의 파일들을 임시 저장한 뒤 HEAD 상태로 백업을 하는 것이다. (임시 저장하는 것이기에, 다시 불러와 적용이 가능하다.)
[OS] 시스템 콜 (System Call) [내부링크]
"시스템 호출"이라고도 불리는 이 시스템 콜(System Call)은 일반적인 프로세스가 OS가 제공...
[Node.js] 서버와 클라이언트, 이벤트 루프 [내부링크]
1. 서버와 클라이언트- 서버란, 네트워크를 통해 클라이언트 정보나 서비스를 제공하는 컴퓨터 또는 프로...
[Node.js] 논블로킹 I/O와 싱글스레드 [내부링크]
1. 논블로킹 I/O- 논블로킹 방식이란?오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행...
[Node.js] Express 프레임워크 구조, 서버 실행 [내부링크]
- Express만의 폴더 구조, 파일 구조가 있다.- 직접 만들어도 된다. - 이 폴더 구조를 쉽게 만들 수 있다....
[Node.js] Express의 app.js, 라우터 사용법 [내부링크]
터미널에 npm init이라는 명령어를 쳐 준다.npm init이라는 명령어는 새로운 node.js프로젝트나 패키지를...
[Node.js] 쿠키와 Express-Session 미들웨어 사용법 [내부링크]
1. 쿠키란?우리가 인터넷 브라우저를 쓸 때, 웹 페이지를 닫았는데도 다시 접속하면 아이디와 로그인이 ...
[Node.js] Express 템플릿엔진 PUG(구 Jade) 사용 [내부링크]
1. 템플릿 엔진 사용 이유우선, 재사용성이 매우 높다. 우리가 웹 앱을 만들다 보면, 똑같은 디자인의 페...
[회고/계획] 4/27~5/20 회고 및 계획 [내부링크]
2020년 4월 27일부터 5월 20일까지의 회고이다.입대 전에 몇달동안 학교 커뮤니티를 제작하는 프로젝트를 ...
[Node.js 오류] HTTP 응답코드 404 (Not Found) 오류 [내부링크]
HTTP 404 Not Found는 굉장히 자주 봤을법한 오류이다.404 Not Found 오류는 접근한 URL에 리소...
[회고/계획] 5.21~7.05 회고 및 계획 [내부링크]
5.21~7.05 회고 및 계획이다.5월 21일에 휴가 복귀를 했었다. 복귀 후 중대 내에 개발하는 선임 한분이 있...
[HTTP] HTTP 트랜잭션 지연과 커넥션 관리 [내부링크]
1. HTTP 트랜잭션 지연트랜잭션을 처리하는 시간은 TCP 커넥션을 설정하고, 요청을 전송하고, 응답 메시지를 보내는 것에 비하면 상당히 짧다는 것을 알 수 있다.여러 가지 지연 원인들이 있을 수 있지만, 대부분의 HTTP 지연은 TCP 네트워크의 지연에 의해 발생한다.많은 지연 원인들 중 몇 가지 지연 원인들에 대해 알아보겠다. 1) 클라이언트는 URI에서 웹 서버의 IP 주소와 포트번호를 알아야 한다. URI에 기술되어 있든 호스트에 방문한 적이 없다면, DNS resolution(DNS 이름분석) 인프라로 URI의 호스트명을 IP 주소로 변환하는데 시간이 걸리게 될 수 있다. 그러나 이는 인터넷 인프라의 발전으로 대부분 밀리초 단위로 끝나게 된.......
[HTTP] HTTP/1.0+의 Keep-Alive 커넥션, HTTP/1.1의 지속 커넥션과 파이프라인 커넥션 [내부링크]
1. HTTP/1.0+ 의 "Keep-Alive" 커넥션우선 http/1.0 브라우저와 서버들은 keep-alive 커넥션이라는 지속 커넥션 지원을 위해 확장되었다.(다소 실험적이였다.)이 초기의 지속 커넥션은 설계적인 측면에서 조금 문제가 있었지만 이는 HTTP/1.1에서 수정되었다.1-1. Keep-Alive커넥션의 장점우선 커넥션을 맺고 끊는데 필요한 작업이 없기 때문에 시간이 단축된다.또한, TCP의 느린 시작이 일어나지 않기 때문에 요청 및 응답시간도 줄어든다.아래 그림은 연속과 지속의 비교이다.1-2. Keep-Alive 동작우선 HTTP/1.0 keep-alive 커넥션을 구현한 클라이언트는 커넥션을 유지하기 위해 요청에 Connection:Keep-Alive를 포함시킨다.이.......
[HTTP] 쿠키 - 세션쿠키(Session Cookie), 지속쿠키(Persistent Cookie) [내부링크]
1. 클라이언트 식별/ 쿠키HTTP는 익명으로 사용하고, 상태가 없고, 요청과 응답으로 통신하는 프로토콜이다.서버는 클라이언트가 보낸 요청을 처리하고 그 응답을 클라이언트로 전송한다.웹 서버는 요청을 보낸 사용자를 식별 또는 방문자가 보낸 연속적인 요청을 추적하기 위해 약간의 정보를 이용 가능하다.1-1. 세션 추적HTTP 트랜잭션은 상태가 없다. 각 요청은 독립적으로 일어나고 많은 웹사이트에서 사용자가 사이트와 상호작용이 가능하도록 사용자의 상태를 남긴다. 그런데 이 상태를 유지하려면 웹 사이트는 HTTP 트랜잭션이 어떤 사용자에서 오는지 식별할 방법이 필요하다.그 중 이 글에서는 식별 정보를 지속해서 유지하는.......
[HTTP] 콘텐츠 인코딩(Content-Encoding), Accept-Encoding 헤더 [내부링크]
1. 콘텐츠 인코딩이란?HTTP 애플리케이션은 종종 콘텐츠를 보내기 전 인코딩을 하려 한다.두 가지 상황으로 예시를 들겠다.1) 느린 속도로 연결된 클라이언트에게 큰 HTML을 전송하기 전이라고 해보자. 서버는 전송시간을 줄이기 위해 압축을 할 수 있다.2) 허가받지 않은 사람이 볼 수 없게 하기 위해 인코딩하여 콘텐츠를 암호화하거나 뒤섞어 보내기가 가능하다.이러한 인코딩은 발송하는 쪽(서버)에서 콘텐츠에 적용된다.콘텐츠 인코딩이 끝난 데이터는 엔터티 본문에 담아 수신자(클라이언트)에게 전달된다.2. 콘텐츠 인코딩 과정1) 웹 서버가 Content-Type, Content 헤더를 수반한 응답 메시지를 생성한다.2) 콘텐츠 인코딩 서버.......
[HTTP] 전송 인코딩과 청크 인코딩 [내부링크]
1. Transfer-Encoding 헤더전송 인코딩 제어와 서술을 위해 정의된 헤더는 2가지이다.1) Transfer-Encoding (응답) 안전한 전송을 위해 어떤 인코딩이 메시지에 적용되었는지 수신자에게 알려준다.2) TE (요청) 어떤 확장된 전송 인코딩을 사용할 수 있는지 서버에 알려주기 위해 요청헤더에 사용한다.예시 1)위 예시는 chunk-encoded 메시지와 메시지 끝에 트레일러가 오는 것을 받아들일 수 있음을 서버에 알려주기 위해 TE 헤더를 사용하는 요청이다.(HTTP/1.1 애플리케이션)예시2)위 예시는 수신자(클라이언트) 에게 청크 인코딩으로 전송되었음을 알리기 위해 Transfer-Encoding 헤더를 포함한 응답 메시지이다. 위 기초 헤더 뒤에는.......
[회고/계획] 4/12~4/26 회고, 앞으로의 계획 [내부링크]
4/12~ 4/26까지 회고이다.그동안 주말마다 꾸준히 HTTP 공부를 하고 남는 시간마다 포스팅을 하려고 했던 것 같다. 정말 고민이 많았던 2주였다.원래는 HTTP 이후 데이터베이스를 공부할까 했었는데 막상 책들을 찾아보니 컴퓨터 없이 이 곳에서 공부하기에는 효율이 너무 안나올 것 같았다. 뭘 공부하는게 가장 효율이 좋을지도 막 생각해보았다. 그 외로도 공부 고민이 정말 많았다. 그러다 현업에서 일하고 계신 학교 선배분들 중 한 분께 상담을 대충 받았고, 그러다 "커리어 스킬"이라는 책을 추천받았다. 위 책인데, 목차를 보고 앞으로 개발자로 사는데 인생계획을 세우는데 크게 도움이 될 것 같아 바로 구매했다.종종 시간날.......
[Java] 일정하지 않은 개수의 매개변수 (parameter ...) [내부링크]
메서드를 생성할 때 매개변수의 갯수가 정확히 지정이 안되어있고, 호출마다 바뀌는 경우가 있을 수 있다.이에 가장 쉬운 방법은 배열을 매개변수로 넘겨주는 것이다.아래와 같이 사용할 수 있을 것이다.위와 같은 방법으로 배열을 사용할 수 있지만, 매개변수로 넘겨줄 때 숫자들을 모두 배열로 만들어 넘겨주어야 한다는 문제가 발생한다.따라서 자바에서는 아래와 같이 임의 개수의 매개변수를 넘겨줄 수 있는 방법을 제공한다.위와 같이 "타입...변수명" 으로 선언해주면 numbers를 배열로 인식하여 처리할 수 있다.참고로 여기서 ...을 적어줄 때 점을 연속해서 적어주어야 한다. (공백이 있으면 안된다.)또한 주의할 점이 있.......
[Java] 상속(extends) [내부링크]
자바에서는 "상속"이라는 개념이 있다.우선 국어사전에서 상속의 뜻부터 찾아보겠다.자바에서는 위 뜻들 중 2번째 뜻과 유사한 의미로 "상속"이라는 개념이 사용된다.우선 자바에서 상속이 무엇인지 알아보기 전에, 예시를 들어보겠다.우선 사람(Person)이라는 클래스가 있다고 가정해보자.사람은 움직일 수 있으니까 Person클래스에 move() 메서드를 만들었다.그리고 사람을 두 가지로 나눠보자면 남자와 여자로 나눌 수 있을 것이다.즉, 남자이거나 여자여도 결국 사람에 속하는 것일 것이다.그림으로 나타내면 다음과 같을 것이다.남자와 모두 사람이기 때문에 움직일 수 있을 것이다.즉, 남자는 사람으로서의 move()메.......
[Java] 상속과 생성자, super() [내부링크]
1. 상속https://dlaxodud2388.blog.me/221956914076우선, 위 글에서 상속에 대해 설명했었다.위 글에서 설명했던 예시로 다시 설명하겠다.위 코드를 컴파일 후 실행했을 때의 문제는 없을 것이다.그렇다면 아래 코드는 어떨까?위 코드는 다음과 같은 에러가 발생 할 것이다.위 에러가 발생하는 이유는 다음과 같다.우리는 Main 클래스에서 Male 클래스를 인스턴스화해서 woochan이라는 인스턴스를 생성했다.자바는 부모의 매개변수가 없는 기본 생성자를 찾는 것이 기본이다.자식 생성자를 호출했으니, 부모의 기본 생성자부터 올라가서 찾는 것이다.사람이고 나서야 남자, 여자를 정할 수 있는데 우리는 남자 클래스만 인스턴스화 하도록 코드.......
[Node.js] Cheerio-httpcli와 jsdom을 이용한 간단한 크롤링 [내부링크]
Cheerio-httpcli 공식문서 : https://www.npmjs.com/package/cheerio-httpcliJSDOM 공식문서: https://www.npmjs.com/package/jsdom우선 간단하게 멜론에 있는 인기차트에서 1등 제목만 가져와보도록 하겠다.크롤링하여 제목을 가져오기 위해 cheerio-httpcli모듈과 jsdom모듈을 사용하겠다.이후, 우선 cheerio-httpcli의 기본 형태는 다음과 같다.jsdom의 기본 형태는 다음과 같다.jsdom을 사용하기 위해 주로 JSDOM 생성자를 사용한다.생성자에 문자열을 전달을 하면 된다.우리는 이 생성자에 cheerio-httpcli에서 얻은 html을 그대로 가져다 넣을 것이다.위 두 예시처럼 가져와 다음과 같이 사용했다.결과는 다음과 같다.참고로 jsdom으.......
[Node.js] Node.js 기반 ORM Sequelize.js 사용법 [내부링크]
우선, Sequelize.js 는 Node.js 기반 ORM이다. 공식적으로는 Mysql, PostgreSQL, MariaDB, SQLite, MS-SQL을 지원한다.sequelize.js 는 다음과 같이 사용 가능하다.1. 기본 세팅우선 이 3가지를 npm에서 설치한다. 그리고 다음과 같은 명령어를 터미널에 입력한다.이 명령어를 치게 되면, config라는 폴더가 생기고 config.json이라는 파일이 생성된다.이 config.json을 수정해주자.첫 코드는 다음과 같다.config/config.json우선 mysql을 이용해 sequelize를 사용하겠다.mysql을 사용할 예정이므로 dialect부분을 mysql로 바꿔주자.username과 password부분은 connect할때 user부분과 password부분에 맞게 써주자.database부분은 schema의.......
[TypeScript] TypeScript로 Node.js express서버 구축하기 [내부링크]
1. 프로젝트 생성.노드 프로젝트에서 package.json을 만들 때처럼 아래와 같이 npm init을 해줍니다. 이후 설정은 입맛에 맞게 설정해줍니다.2. express 환경을 구성하기 위해 필요한 모듈들 설치.(템플릿엔진 일단 ejs를 사용하였습니다.)typescript도 같이 설치해줍니다.3. tsconfig.json 설정 TypeScript 컴파일은 tsc라는 명령어를 이용하여 컴파일합니다.이후 아래와 같은 명령어를 터미널에 입력해줍니다.입력하면 tsconfig.json이라는 파일이 생성됩니다.여기서 tsconfig.json이라는 파일은 컴파일러 옵션을 설정하고 프로젝트를 컴파일하는데 필요한 루트파일을 지정합니다.처음 tsconfig.json이란 파일이 생성되면 내용은 다음과.......
[GIT] 브랜치 관리 전략 Git-flow [내부링크]
1. git-flow란?우리는 git을 이용하여 프로젝트를 협업하여 진행하곤 한다.git을 사용하면 우리는 'branch(가지뻗기)'을 하고, 'commit(커밋)'을 하고 merge('병합')을 한다. 이렇게 수많은 브랜칭 작업들을 하는데, 이 Git-flow는 소프트웨어 소스코드를 관리하고 출시하기 위한 브랜치 관리 전략(branch management startegy) 이다.2. 브랜치들Git-flow에는 기본적으로 2가지 종류의 주요 브랜치가 있고, 3가지의 보조 브랜치가 있다.2-1. 주요 브랜치들2-1-1. master (배포 브랜치) 이 브랜치는 'origin/master'에 두고 먼저 배포했거나 배포 준비가 된 코드들을 두고 관리하는 브랜치이다. 따.......
[HTTP] 쿠키(Cookie)와 세션(Session) [내부링크]
우선 쿠키와 세션에 대해서 알아보기 전에 HTTP 프로토콜이 무엇인지 알아보자.1. HTTP 프로토콜이란?- Connectless 하고 Stateless 한 프로토콜이다. - Connectionless : 클라이언트가 서버에 요청을 하고 서버가 클라이언트에게 응답을 보내면 접속을 끊는다. - Stateless : 통신이 끝나면 상태 정보를 유지하지 않는다.Connectionless 하고 Stateless 한 HTTP 프로토콜을 사용하면서 서버가 클라이언트를 식별할 수 있는 방법이 필요했고 쿠키(Cookie)와 세션(Session)을 사용하게 된 것이다. 2. 쿠키(Cookie) 란? 쿠키란 HTTP의 일종으로, 사용자가 어떤 웹 사이트를 방문하면 그 사이트가 저장하고 있는 서버에서 인터넷.......
[Node.js] Passport 인증 미들웨어와 sequelize.js를 사용한 로그인/회원가입 구현 [내부링크]
passport.js를 사용하여 로그인을 구현하기 전에, 쿠키/세션에 관한 글과 sequelize.js 사용법에 관한 글은 아래 링크에서 다뤘었습니다.https://dlaxodud2388.blog.me/221777840040https://dlaxodud2388.blog.me/2217300965921. 프로젝트 기본 구조 세팅우선 간단하게 npm init을 하고 프로젝트 설정을 해줍니다.그리고 프로젝트에 사용할 기본적인 모듈들을 npm에서 설치해줍니다.(서버사이드 렌더링으로 템플릿 엔진은 ejs를 사용할 예정입니다.)nodemon은 package.json에서 "start":"nodemon app"과 같은 형태로 넣어서 사용해줍시다.그리고 sequelize를 사용하기 위해 npm을 받아줍시다.이후 sequelize를 사용하기 위.......
[오류모음] [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client [내부링크]
Node.js express의 nodemailer 모듈을 이용하여 회원가입 OTP 인증을 구현하던 중 Unhandled rejection Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 에러가 발생하였다.한 곳에 응답이 중복되게 들어가면 발생하는 오류이다. (너무 생각없이 짰다...)if문과 반복문에서 중복처리가 되어있을 경우에 주로 발생한다.위의 코드로 바꿔주어 해결하였다.
[Node.js] nodemailer를 이용한 이메일 발송 [내부링크]
우선 nodemailer는 Node.js에서 구축한 서버에서 메일을 보낼 수 있게 도와주는 메일 전송 모듈입니다.회원의 비밀번호 찾기, 가입 인증 등 다양하게 사용 할 수 있습니다.사용방법은 다음과 같습니다. (Gmail 발송을 예시로 들겠습니다.) 우선 nodemailer 모듈을 설치해줍시다.이후 구글 아이디와 비밀번호는 .env 파일에 적어줍니다.(.env)이후 메일을 전송하는 라우터를 만들겠습니다.(routes/index.js)이런 형태로 작성하고 메일을 발송하면 다음과 같은 에러가 발생할 수 있습니다.이 에러가 발생 할 경우 https://myaccount.google.com/lesssecureapps위 링크로 들어가서 위와 같이 보안 수준이 낮은 앱을 사용하도록 체크해주시면 됩.......
[회고/계획] 군대 다녀오겠습니다. [내부링크]
2020년 03월 03일 입대하게되었습니다.입대를 앞두고 작년 2019년부터 지금까지를 회고하고 그 이후의 계획을 써보려고 합니다. 제작년 말쯤(2018년 12월)에 서버 개발에 관심이 생기고 Node.js 를 시작 한 뒤로 처음에는 굉장히 공부하는게 막막했었습니다. 아무래도 자바스크립트 외에는 아무런 지식도 없이 무작정 시작했었기에 시작하고 몇달 채 되지도 않은 상태에서 그랬던 것 같습니다. 이 때문에 학교에서 몇몇 교수님들도 찾아뵈어 상담도 받아보고 이미 졸업하셔서 좋은 곳에 취업하셨다는 몇몇 학교 선배님들께도 어찌어찌 연락드려서 조언들을 받아보고 사서 공부하던 책 저자에게도 연락해보고 했었는데 그렇게 해서 얻었던 조언들.......
[HTTP] URL 문법과 구조, 단축 URL [내부링크]
1. URL 문법http://www.naver.com1) 스킴 위 부분중 "http" 부분을 스킴이라고 한다. http라는 프로토콜로 통신하겠다는 의미이다. ftp로 통신하고 싶은 경우 "ftp://"와 같이 시작한다.2) 호스트 애플리케이션이 인터넷에 있는 리소스를 찾으려면 리소스를 호스팅하고있는 장비를 알아야하고, 그 장비 내의 리소스에 접근할 수 있는 서버위 위치를 알아야한다. 위 부분중 www.naver.com 부분에 해당한다. 이 부분은 후에 ip주소로 변환되며,이는 서버의 위치를 의미한다.3)경로 url의 경로는 리소스가 서버의 어디에 있는지 알려준다. 예를 들자면 다음과 같다. http://localohst:8000/index/index.html 위 부분에서.......
[회고/계획] 3/3~4/11 회고, 앞으로의 계획 [내부링크]
입대 후 훈련소에 들어가고 책을 소포로 받아 읽을 수 있다는걸 알게 된 후 바로 집에서 소포로 "http 완벽 가이드"라는 책을 훈련소로 보내 2주차부터 읽기 시작했다. 평일에 훈련 끝나고 야간교육 없을때나 주말에 티비켜줄때나 개인정비시간줄때 틈틈이 읽었다. 아무래도 휴대폰도 없고 뭐 있는게 없다보니 거기서는 굉장히 흥미롭게 읽었던 것 같다. 책상펴고 편지지에 필기하는식으로 공부해봤는데 생각보다 할만했다. 나중에 자대가서 어떤걸 공부할지 어떻게 할지 그런것들을 굉장히 많이 고민해봤는데 일단 http를 어느정도 공부를 마치고 일단 DB를 다시 공부해볼 계획이다. 특정 기술이 어떻게 돌아가고 그런 원리가 앞으로.......
[HTTP] TCP 커넥션 - TCP 세그먼트, IP 패킷 [내부링크]
1. HTTP는 어떻게 TCP 커넥션을 사용하는가?모든 http 통신은 패킷 교환 네트워크 프로토콜들의 계층화된 집합인 TCP/IP를 통해 이루어진다.예시를 들겠다.ex) http://www.hello12321.com:80/index.html 위와 같은 링크가 있다고 가정하겠다.1. 브라우저가 www.hello12321.com이라는 호스트 명을 추출한다.2. 브라우저가 이 호스트 명에 대한 IP 주소를 찾는다. ex) 202.43.78.33. 브라우저가 포트번호(80)을 얻는다.4. 브라우저가 202.43.78.3 의 80번 포트로 TCP 커넥션을 생성한다.5. 브라우저가 서버로 HTTP GET 요청 메시지를 보낸다.6. 브라우저가 서버에서 온 HTTP 응답 메시지를 읽는다.7. 브라우저가 커넥션을 끊는다........
[HTTP] TCP 커넥션 - TCP 커넥션 유지 [내부링크]
컴퓨터는 항상 TCP 커넥션을 여러 개 가지고 있다. TCP는 포트번호를 통해 이런 여러 개의 커넥션을 유지한다.예를 들자면, 포트번호는 회사 직원의 내선전화와 같다. IP주소는 해당 컴퓨터에 연결되고, 포트번호는 해당 애플리케이션으로 연결된다.TCP 커넥션은 4가지 값으로 식별한다.<발신지 IP주소, 발신지 포트, 수신지 IP주소, 수신지 주소> 위 4가지 값으로 유일한 커넥션을 생성한다.위와 같은 커넥션/포트 정보들(TCP 커넥션 값)이 있다고 가정하겠다.위와 같이 특정 커넥션들은 같은 목적지 포트번호를 가리킬 수도 있다.또한 같은 발신지 IP주소를 가리키는 커넥션들도 있을 수 있고 같은 목적지 IP주소를 가리키는 커.......
[MongoDB 오류] MongoDB connect ECONNREFUSED 127.0.0.1:27017 오류 해결법 [내부링크]
위와 같은 에러가 발생하였을 경우MongoDB를 설치한 위치로 이동합니다.저는 C:\Program Files에 설치하였습니다.C:\Program Files\MongoDB\Server\4.0\bin로 이동한 뒤,mongod.exe 를 먼저 실행하고 그 뒤 mongo.exe를 실행합니다.그 뒤 다시 MongoDB에 접속합니다.
[MySQL 오류] ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) 오류 발생 [내부링크]
Mysql 설치 후 명령프롬프트 창에서 mysql 실행하고ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO)에러가 발생.이것은 mysql 실행 시 사용자명과 db이름 안써줘서 그렇다.위와 같이 입력해주면 패스워드를 입력하도록 나온다.패스워드 입력을 하면 mysql 접속이 가능하다.
[Mysql 오류] 시퀄라이즈 connect ECONNREFUSED 127.0.0.1:3306 오류 해결법 [내부링크]
Node.js의 ORM Sequelize와 express서버 연결중 아래와 같은 오류가 발생했다.위와 같은 오류는 다음과 같이 해결 가능하다.내 컴퓨터에 들어간다.왼쪽의 내 PC부분을 오른쪽 마우스 클릭 해 '관리'를 눌러준다.그럼 위와 같은 창이 나오는데, 여기서 서비스 및 응용프로그램을 눌러준다.이후 여기서 '서비스' 를 클릭해준다.그러면 여러 서비스들이 나오는데, 그 중에서 MySQL을 찾아 눌러준다.이후 여기서 시작을 눌러주면 된다.이후 express 서버를 재시작한다.
[JavaScript] arguments 객체 [내부링크]
우선 자바스크립트의 arguments객체는 유사 배열 객체의 가장 대표적인 예시이다.유사 배열 객체는 이 글에서 언급했었다.https://dlaxodud2388.blog.me/2216756574811. JS 함수의 파라미터- 자바스크립트는 선언한 매개변수 수와 다르게 인자값이 전달되어도 오류가 발생하지 않는다.예시를 들겠다.위와 같이 함수 호출 시 인자의 수를 함수가 선언한 매개변수 수와 다르게 하여 호출하여도 에러가 발생하지 않는다.C나 자바같은 다른 언어였으면 바로 에러가 났을 코드이다.보면 알겠지만, 인자수보다 적게 넣으면 넣지 않은 인자는 undefined로 인식하고, 인자를 더 넣으면, 더 들어간 인자들은 무시한다.즉, 파라미터 선언에 대해 굉장히 자.......
[JavaScript] Prototype(프로토타입) [내부링크]
예전에 자바스크립트의 "Prototype(프로토타입)" 에 대해 글을 쓴 적이 있었다.조금 내용을 더 정리하여 글을 다시 써 보려고 한다.1. 객체의 생성자바스크립트에서의 객체는 어떻게 보면 자바스크립트 그 자체라고 해도 무방하다.알다싶이, 자바스크립트에서 "객체"란 프로퍼티 값과 이름의 연속이다.우리는 대표적으로 객체를 다음과 같이 생성해왔다.대표적으로 세 가지만 보자.세 가지 모두 객체를 생성하는 방법들이다.지금부터 하는 설명들은 위 세 가지 방법들 등을 이용해 객체를 만드는 경우들 모두 공통적으로 포함되는 이야기들이다.우선 클래스를 이용하여 객체를 생성하는 자바, 파이썬과는 다르게, 자바스.......
[JavaScript] this [내부링크]
자바스크립트에서의 this란?자바스크립트에서의 this는 상황에 따라 가리키는 것이 달라진다.일종의 대명사라고 생각하면 된다.만일 this가 "아버지"라는 단어라고 생각해보자.내가 "아버지" 라고 말하면 내가 말하는 아버지는 나의 아버지일 것이다.그러나 나의 아버지가 말하는 "아버지"는 나의 할아버지일 것이다.또 만약 내 친구의 "아버지"라고 한다면 여기서 말하는 아버지는 친구의 아버지일 것이다.이와 같이 자바스크립트에서의 this는 상황에 따라 달라지게 된다.그렇다면 이 상황들은 어떤 상황들이 있는지 알아보겠다.1. 일반적인 경우위와 같이 그냥 일반적으로 this를 아무데서나 사.......
[JavaScript] call(), apply() [내부링크]
https://dlaxodud2388.blog.me/221702900596이 글에서 자바스크립트에서 각각의 상황에 따라 다르게 this가 정해진 객체에 자동으로 바인딩 되는 것을 보았다.자바스크립트에서는 이렇게 자동으로 바인딩 되는 것 외에, 특정 객체에 명시적으로 바인딩 시키는 방법도 제공한다. 그것이 지금 이 글에서 다룰 call() 과 apply()메서드이다.1. call(), apply() 메서드의 위치우선, call()과 apply()메서드는 Function.prototype 객체의 메서드이다.https://dlaxodud2388.blog.me/221696385159이 글에서 자바스크립트의 모든 객체는 함수를 통해 만들어진다고 했었다.그리고 자바스크립트에서 함수는 일급 "객체"이기 때문에 함수 또한.......
[Node.js] express.json() [내부링크]
기본 형태express.json([options])우선 이 기능은 Express에 내장된 미들웨어 기능이다.JSON으로 들어오는 요청을 구문분석하며, body-parser을 기반으로 한다.JSON부분만 파싱하여 미들웨어를 반환하고, Content-Type 헤더가 request와 옵션이 같은지 확인한다.또한, 이 파서는 유니코드의 어떠한 인코딩의 body라도 받아들이고, gzip과 dflate를 지원한다. 구문이 분석된 데이터를 포함하는 새 본문 객체는 미들웨어를 거쳐 request에 채워진다(req.body). 그러나 이후 구문 분석을 할 본문이 없거나 Content-Type이 일치하지 않으면 비어있는 오브젝트({ })로 남거나, 오류가 발생한다.* 참고로, req.body의 형태는 사용자가 제어하.......
[JavaScript] Prototype chaining(프로토타입 체이닝) [내부링크]
이 내용 또한 예전 글에서 한번 다뤘었다. 이 내용도 조금 더 정리하여 다시 써보려 한다.1. 프로토타입 체이닝(Prototype chaining)이란?https://dlaxodud2388.blog.me/221696385159이 글에서 자바스크립트의 프로토타입에 대하여 설명했었다. 그리고 프로토타입 체인의 구조에 대해서도 알아보았었다. 프로토타입 체이닝이 무엇인지알아보기 전에 예시를 먼저 들겠다.위와 같은 코드를 작성했다고 가정하자.hasOwnProperty()메서드를 사용하여 a라는 객체에 'a'라는 이름의 프로퍼티가 있는지 확인한 코드이다. a라는 프로퍼티가 있으므로 콘솔창에 true 가 출력된다.그런데 코드를 보고 다시 생각해보면, a라는 객체에서 hasOwn.......
나 IT개발 블로거야! [내부링크]
19.11.18 현재 저는 웹개발 분야를 공부하고 있는 대학교 2학년 학생입니다.학교 수업과 별개로 자바스크립트, node.js 위주로 꾸준히 공부중이고 매일 부족한 부분들을 찾아 제 것으로 만들기 위해 노력중입니다.따로 공부했던 개념위주 내용들을 복습할 생각으로 블로그를 시작했고, 앞으로도 열심히 공부해 훌륭한 개발자가 될 수 있도록 노력하겠습니다.나 블로거야 이벤트https://campaign.naver.com/blog16/event1.nhn
[Node.js] express.static() [내부링크]
기본 형태express.static(root, [options])우선, 이 기능은 express에 내장된 미들웨어 기능이다.이 기능은 정적 파일을 제공하며, serve-static을 기반으로 한다.기본 형태에서 root 부분은 정적 파일들을 제공할 root 디렉토리를 지정한다.이 함수는 req.url을 제공된 root 디렉토리와 결합하여 제공 할 파일을 결정한다.만약 파일이 발견되지 않을 경우, 404 응답을 보내는 대신, next()를 호출해 다음 미들웨어로 이동하여 stacking 및 fall-back을 허용한다.다음은 속성표이다.* 이 글은 express.js 공식문서를 기반으로 작성한 글입니다.잘못된 부분이 있을 경우 댓글에 남겨주세요.
[HTTP] 리소소, MIME(Multipurpose Internet Mail Extensions) [내부링크]
1. HTTP란?HTTP(HyperText Transfer Protocol)의 약자이다.전 세계 웹 브라우저, 서버 웹 어플리케이션 모두 이 HTTP를 통하여 서로 대화를 한다. 현대 인터넷의 공용어가 HTTP라고 보면 된다.- 우선, HTTP는 신뢰성이 있는 데이터 전송 프로토콜을 사용하는데, 이는 지구 반대편에서 데이터가 오더라도 전송 중에 손상되거나 꼬이는 일이 일어나지 않음을 보장할 수 있다.웹 클라이언트와 서버에서 HTTP의 관계는클라이언트는 우선 서버에 HTTP 요청을 보내게 된다. 서버는 요청된 데이터를 HTTP응답으로 돌려주게 된다.즉, HTTP 클라이언트, HTTP 서버 모두 www(World Wide Web)의 기본 요소인 것이다.예를 들어, 우리가 다음과 같은.......
[HTTP] URI, URL, URN [내부링크]
1. URI (Uniformurce Resource Identifier)URI(Uniformurce Resource Identifier)의 약자이다.웹 서버 리소스들은 각자의 이름이 있다. 클라이언트는 관심있는 리소스를 지목 가능한데, 서버 리소스의 이름은 URI(통합 자원 식별자,Uniform Resource Identifier)의 약자이다.URI는 인터넷의 우편물 주소 같은 것으로 생각하면 된다. 정보 리소스를 고유하게 식별하고 위치지정이 가능하다.예시)"http://www.hellopages.com/specials/example.gif"라는 주소가 있다고 가정하자.(없는 주소이다)여기서 http://부분은 http 프로토콜을 사용하라는 뜻이다.www.hellopages.com은 이 곳으로 이동하라는 의미이고, /specials/example.gif는.......
[HTTP] 트랜잭션과 메소드, 상태코드 [내부링크]
1. 트랜잭션클라이언트가 웹 서버와 리소스를 주고받기 위해 http를 어떻게 사용할까?HTTP 트랜잭션은 요청 명령(클라이언트 -> 서버) 와 응답결과 (서버 -> 클라이언트) 로 나뉜다.이 상호작용은 "HTTP 메시지" 라고 불리는 정형화된 데이터 덩어리를 통해서 이루어진다.위 사진과 같은 형태로 상호작용이 이루어진다.2. 메서드HTTP 메서드는 여러 가지 종류의 요청명령을 자원한다.모든 HTTP 요청 메시지는 한 개의 메서드를 가진다.메서드는 서버에게 어떤 동작이 취해져야 하는지 말한다.예를 들어, 웹 사이트 가져오기, 게이트웨이 프로그램 실행, 파일 삭제 등과 같은 것이 있다고 보면 된다.자주 사용되는 http메.......
[JavaScript] 호이스팅(Hoisting) [내부링크]
1. 자바스크립트의 var 변수우선, 자바스크립트의 변수는 다른 언어들의 변수들과는 조금 다르게 동작한다.미리 말하자면, ES6의 let이나 const 같은 것들을 사용하여 이를 예방할 수 있다.예시로, c언어와 자바스크립트의 차이를 보겠다.ex) C언어ex) 자바스크립트일반적인 프로그래밍 언어는 변수는 블록 안에서 유효하기에, 블록이 종료된 시점에서 console.log(a); 를 호출하면 정상적으로 동작하지 않을 것이라고 생각 할 수 있다. 하지만, 결과는 3이 출력된다. 이는 "호이스팅"이란 것이 일어나기 때문이다.2. 변수 호이스팅(Hoisting)이란?"호이스팅" 이란 변수의 선언과 할당을 분리하는 형태라고 보면 된.......
[Java] 오버로딩(Overloading), 오버라이딩(Overriding) [내부링크]
1. 오버로딩(Overloading)예시를 들겠다.위 코드와 같이, 같은 클래스나 상속 관계에서 동일한 이름의 메소드를 중복 작성하는 것을 오버로딩이라고 한다.2. 오버라이딩(Overriding)예시를 들겠다.자바에서는 위 코드와 같이 메소드 오버라이딩을 통해 상속받은 부모 클래스의 메소드를 자식 클래스에서 직접 재정의할 수 있다.이를 메서드 오버라이딩이라고 한다.Parent parentchild = new Child();이 코드가 가능한 이유는 자바의 다형성 때문이다. 다른 글에서 설명하겠다.3. 오버로딩과 오버라이딩의 차이우선 이 두 가지는 단어가 비슷하여 헷갈리기 쉽다.간단히 오버라이딩과 오버로딩을 비교하자면, 오버로딩(Overlo.......
[Java] 업캐스팅(Upcasting), 다운캐스팅(Downcasting) [내부링크]
1. 캐스팅(Casting)이란?- 우선, 캐스팅이란 타입 변환을 말한다. 자바에서 클래스에 대한 캐스팅은 업캐스팅과 다운 캐스팅으로 나뉜다.2. 업캐스팅(Upcasting)자바에서 서브 클래스는 슈터 클래스의 속성을 상속받기 때문에, 서브 클래스의 객체는 슈퍼 클래스의 멤버를 모두 가진다. 서브 클래스는 수퍼 클래스의 모든 특성을 상속받는다는 말이다. 따라서, 서브 클래스는 슈퍼 클래스로 취급될 수 있다.이 때, 업캐스팅(Upcasting)이란, 서브 클래스의 객체가 슈퍼 클래스 타입으로 형변환 되는 것을 말한다.다시 말하자면, 슈퍼 클래스의 레퍼런스 변수가 서브 클래스로 객체화된 인스턴를 가리킬 수 있게 되는 것이다."사람은.......
[JavaScript] 클로저(Closure) [내부링크]
클로저(Closure)란?클로저(Closure)란 무엇일까?우선 자바스크립트 공식 문서에서 클로저란, "클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. " 라고 나와있다.클로저 설명 전에,우선, 자바스크립트에서는 함수가 일급 객체이다. 함수가 1급 객체라는 말은 이 글에서 설명하였었다.https://dlaxodud2388.blog.me/221493841726저 글에서 말했던 것처럼, 함수는 1급 객체이기 때문에, 함수 자체를 값으로 취급한다. 그래서 위 코드와 같이 변수에 함수를 할당할 수 있고, 함수의 리턴값으로 함수를 넣을 수도 있다.이 내용은 아마 당연한 내용일 것이다.또한, 코드가 작성되고 실행될 경우 실행 컨텍스트가 생성된다고 했.......
[HTTP] HTTP 메시지 [내부링크]
1. HTTP 메시지란?- 단순한 줄 단위의 문자열을 말한다. 이진 형식이 아닌 일반의 텍스트 형식이다.- 웹 클라이언트에서 웹 서버로 보낸 HTTP 메시지를 요청 메시지라고 부른다.- 서버에서 클라이언트로 보낸 HTTP 메시지를 응답 메시지라고 부른다.- 이 외 다른 HTTP 메시지는 없다.2. HTTP 메시지의 세 부분HTTP 메시지는 위 그림과 같이 세 부분으로 이루어져 있다.1) 메시지의 시작줄메시지의 첫 줄은 다음과 같은 내용이 들어간다.요청 메시지: 무엇을 해야하는가?응답 메시지: 무슨 일이 일어나는가?2) 메시지의 헤더메시지의 헤더에는 다음과 같은 내용들이 들어간다.우선 시작 줄 다음으로는 0개 이상의 헤더필드가 이어진다.각 헤.......
[HTTP] TCP(Transmission Control Protocol, 전송 제어 프로토콜)커넥션 [내부링크]
1. 패킷이란?인터넷 내에서 효율적인 라우팅을 위해 HTTP 메시지를 여러 조각으로 나누는데, 이 조각들을 패킷이라고 한다.2. TCP 란?TCP는 인터넷 상의 컴퓨터들 사이에서 데이터들을 HTTP 메시지 형태로 보내기 위해서 IP(Internet Protocol)과 함께 사용되는 프로토콜이다.TCP는 패킷을 추적관리를 하고 IP는 데이터를 배달한다고 생각하면 된다.그렇다면 어떻게 메시지가 TCP(Transmission Control Protocol, 전송 제어 프로토콜) 커넥션을 통하여 한 곳에서 다른 곳으로 옮겨갈까?3. TCP / IP우선 HTTP는 애플리케이션 계층 프로토콜이다.HTTP는 네트워크 통신의 핵심적인 세부사항에 대해 신경쓰지 않는다.신뢰성있고, 대중적인 인터.......
[HTTP] 트래픽(Traffic)과 웹의 구성요소 [내부링크]
인터넷과 상호작용하는 웹 어플리케이션이 매우 많다.1. 프락시2. 캐시3. 게이트웨이4. 터널5. 에이전트위 내용들을 모두 간단히 설명하겠다.1. 트래픽(Traffic)전송량이라고 하며, 어떤 통신장치나 시스템에 걸리는 부하를 말한다.트래픽 양이 지나치게 많으면 서버에 과부하가 걸려 전체적인 시스템 기능에 장애를 일으킨다.2. 프락시클라이언트와 서버 사이에 위치한 HTTP 중개자이다.프락시는 클라이언트와 서버 사이에 위치하여 클라이언트의 모든 HTTP 요청을 받아 서버에 전달하게 된다.이 애플리케이션은 사용자를 위한 프락시로 동작하고, 사용자를 대신하여 서버에 접근한다.프락시는 주로 보안을 위해 사용한다. 즉, 웹 트래픽 흐.......
[TypeScript] 타입스크립트의 언어적 특성 [내부링크]
1. TypeScript의 특성- 타입스크립트는 '프로그래밍 언어이다.'- 타입스크립트는 'Compiled Language' 이다.- 전통적인 'Compiled Language'와 다른 내용이 많다. (그냥 그 느낌만 착용한것.)- 그래서 'Transpile' 라는 말을 사용한다.- JavaScript는 'Interpreted Language'다.2. 컴파일 언어와 인터프리터 언어(1) 컴파일 언어- 컴파일이 필요함.- 컴파일러 필요.- 컴파일하는 시점 있음. (컴파일 타임)- 컴파일된 결과물을 실행.- 컴파일된 결과물을 실행하는 시점.(2) 인터프리터 언어컴파일 필요없음.컴파일러 필요 없음컴파일 시점 없음코드 자체를 실행코드를 실행하는 시점.......
[JavaScript] 유사 배열 객체 [내부링크]
1. JavaScript에서의 객체란?자바스크립트에서의 객체란 단순히 이름이 지정된 프로퍼티의 모음이다.key:value(키:값) 의 쌍으로 이루어져 있으며, JS에서 기본 데이터타입은 하나의 값만을 가지지만, 객체는 참초타입으로 여러 데이터 타입의 프로퍼티들을 가질 수 있다.다음은 객체생성법 중 하나이다.위 코드와 같이 여러 데이터 타입의 프로퍼티들을 가질 수 있다.2. 유사 배열 객체란?JavaScript는 배열과 객체의 개념이 매우 모호하다.정확히는 배열도 객체이다.(모든 객체의 조상인 Object()안에 Array()가 있다.)유사 배열 객체는 다음과 같다고 생각하면 된다.위와 같은 객체 a 가 있다고 가정하자.객체 a의 1에 접근하기 위해.......
[JavaScript] 함수와 일급 객체 [내부링크]
1. JS에서의 함수자바스크립트에서의 함수는 "객체"이다.자바스크립트에서 객체란 단순히 이름이 지정된 프로퍼티의 모음이다.그 말은 즉, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 말이다.또한, 이 말은 함수 자체가 일반 객체처럼 취급될 수도 있다는 말이다.따라서 자바스크립트의 함수는 다음과 같은 동작들이 가능하다.- 리터럴에 의해 생성- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능- 함수의 인자로 전달 가능- 함수의 리턴값으로 리턴 가능- 동적으로 프로퍼티를 생성 및 할당 가능2. 일급 객체일급 객체의 뜻은 다음과 같이 정의되어 있다."컴퓨터 프로그래밍 언어 디자인에서, 일급.......
[OS] Context Switch(컨텍스트 스위치) [내부링크]
1. Context Switch(컨텍스트 스위치)란 무엇인가?- 멀티 프로세스 환경에서 CPU가 하나의 프로세스...
[OS] CPU의 기능과 구조 [내부링크]
1. CPU의 기능- CPU는 메인 메모리에 저장되어 있는 명령어를 하나씩 가져와 실행한다.- 공통적으...
[Java] 접근지정자 [내부링크]
객체지향 언어에서는 객체를 캡슐화하기에, 객체에 다른 객체가 접근하는 것으로 허용할지, 말지 정해야 ...
[Java] 가비지와 가비지컬렉션 [내부링크]
1. 가비지란?가비지(garbage)란 자바 응용프로그램에서 더 이상 사용하게 되지 않게 된 객체나 배열 메서드...
[JSP/Servlet] Servlet의 특징과 맵핑 [내부링크]
1. Servlet이란?저번 글에서 이러한 사진을 사용했었다.여기서 java파일이 servlet이라고 보면 된다.- s...
[JSP/Servlet] JSP의 특징과 아키텍처 [내부링크]
1. JSP 특징- 우선 jsp는 동적 웹 어플리케이션 컴포넌트이다.- 확장자는 .jsp- 클라이언트의 요청에 ...
[JSP/Servlet] 개발환경 설정 [내부링크]
https://www.eclipse.org 에 접속해줍니다.download 64bit를 눌러줍니다.설치 후 Eclipse IDE for E...
[C] 포인터(2) [내부링크]
6. * 연산자* 연산자는 3가지 경우에 따라 *의 역할이 달라진다.1. 변수명 * 변수명2. 자료형 *변수명3...
[C] 포인터(1) [내부링크]
1. 프로그램과 프로세스- 프로그램과 프로세스의 차이는 매우 간단하다. 프로그램은 실행파일이다.파일 ...
[C] 동적 메모리 할당 [내부링크]
https://dlaxodud2388.blog.me/221613192507우선, 이 글의 4번 내용에서 4가지 영역들에 대해 설명을 했...
[HTML5/CSS3] HTML 기본구조와 meta태그 [내부링크]
1. HTML이란?HTML(Hyper Text Markup Language)이 약자에서 볼 수 있는 것처럼, html은 프로...
[EcmaScript6] let, const [내부링크]
1. "use strict" 란?- Strict Mode의 선언방식이다.- Strict Mode란, 코드에 더 나은 오류...
[EcmaScript6] 템플릿 문자열, 객체 리터럴, 디스트럭쳐링 [내부링크]
1. 템플릿 문자열(template string)- 우리가 자바스크립트에서 문자열 여러 개를 합칠 때는 다음과 같은 ...
[EcmaScript6] ArrorFunction과 prototype [내부링크]
1.Arrow Function우선, ES5의 함수 사용법이다.그리고 ES6의 ArrowFunction 사용예시이다.매개변...
[JavaScript] 함수와 프로토타입 체이닝(1) [내부링크]
1. 객체란?서로 연관된 함수와 변수를 그룹핑한 그릇으로, 객체 내의 변수를 property, 함수를 method라...
[JavaScript] 함수와 프로토타입 체이닝(2) [내부링크]
7. 함수 호출7-(1) arguments 객체- 자바스크립트 언어 자체가 C/C++과 같은 엄격한 문법체크를 안한다...
[JavaScript] 함수와 프로토타입 체이닝(3) [내부링크]
*생성자 함수란?- 자바스크립트의 객체를 생성하는 역할을 한다.- C++ 이나 자바같은 객체지향 언어에서와...
[JavaScript] 함수와 프로토타입 체이닝(4) [내부링크]
*함수 리턴 규칙1. 일반 함수나 메서드는 리턴값을 지정하지 않을 경우 undefined 값이 리턴된다.2. 생성자...
[JavaScript]함수와 프로토타입 체이닝(5) [내부링크]
* 프로토타입 객체도 객체이다.- 프로토타입 객체도 프로퍼티 추가 삭제가 가능하다. 이 말은 다시말해, 실...
[JavaScript] AJAX [내부링크]
1. AJAX란?- AJAX(Asynchronous JavaScript And XML) 비동기 자바스크립트와 XML의 약자...
[JavaScript] 실행 컨텍스트(1) [내부링크]
1. 브라우저의 기본구조- 브라우저의 뜻은 다음과 같다."인터넷상에서 웹에 연결시켜 주는 윈도 기...
[JavaScript] 실행 컨텍스트(2) [내부링크]
4. 스코프 정보 생성- 현재 컨텍스트의 유효범위를 나타내는 스코프 정보를 생성한다.- 이 스코프 정보는...
[JavaScript] 스코프 체인(1) [내부링크]
1. 스코프 체인이란?- 실행컨텍스트 내용에서 스코프 정보에 대한 이야기를 했었다.- 대강 다시 설명하...
[JavaScript] 스코프 체인(2) [내부링크]
4. 스코프 체인 예시 (3)- 함수 객체가 처음 생성될 당시 실행 컨텍스트가 무엇인지 생각하는 것이 중요...
네이버 블로그
티스토리
커뮤니티