dlaxodud2388의 등록된 링크

키자드에 등록된 총 395개의 포스트를 확인하실 수 있습니다.

Naver Blog

[회고] 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와는 비교도 안되

원문보기 내부링크
Naver Blog

[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/>은 우리가 작성한 엘리먼트일텐데, 이 "엘리먼트" 라는건 정확하게

원문보기 내부링크
Naver Blog

[React] 성능을 최적화할 수 있는 10가지 방법

React 코드로 작성된 서비스를 사용자가 쓴다고 해보자. 사용자가 느꼈을 때 어떤 부분들이 불편하다고 느낄 수 있을까? 이를 최적화하기 위해 어떤 개선점들을 찾을 수 있을까? 우아한테크코스 레벨4 미션에서 다루는 내용들을 기반으로 학습한 내용과 해결한 방법에 대해 작성해보고자 한다. 0. 최적화 작업을 하기 전 고려해야 할 점 내용들을 본격적으로 다루기 전에, 미션을 통해 가장 크게 얻은 내용부터 써보고자 한다. 당장 최적화를 하는것에 내 노력과 시간을 쏟기 전에 "꼭 최적화가 필요한가?"를 고민해보는게 좋을 것 같다는 생각이 들었다. 결국 우리가 최적화를 하고자 하는 이유는 "사용자 입장에서 불편함"을 개선하기 위함이기 때문이다. 프론트엔드 개발자로서, 어쩌면 이론상 너무 비효율적으로 동작한다고 하더라도 사용자가 전혀 불편함을 느끼지 못한다면, 최적화에 내 노력과 시간을 쏟는 것이 언제나 정답이 아닐 수도 있다는걸 항상 염두에 둬야한다는 생각이 들었다. * 최적화를 하며 고려할

원문보기 내부링크
Naver Blog

[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에서

원문보기 내부링크
Naver Blog

[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 컨테이너에 올라간

원문보기 내부링크
Naver Blog

[오류 모음] 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 를 확인하면 아래와 같이 스왑메모리가 잘 할당된것을 확인할

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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이

원문보기 내부링크
Naver Blog

[React + Express] JWT를 이용한 토큰 인증 방식 구현하기

JWT를 이용하여 토큰 인증 방식을 구현하는 글을 작성해보려 한다. 먼저, 토큰 방식을 왜 쓰는지부터 알아보자. 1. 토큰 기반의 인증을 사용하는 이유? 이를 이해하기 위해서는, 세션 기반의 인증 방식이 어떻게 이루어지는지에 대해 알아야 한다. 세션 기반의 인증 방식의 단점을 보완하고자 생긴 방식이 토큰 기반 인증 방식이기 때문이다. 물론 세션 기반 인증 방식의 단점을 보완하고자 토큰 방식이 생겼다고, 토큰 방식이 세션 방식보다 좋다는 이야기는 절대 아니다. 각각 장단점이 존재하며, 프로젝트의 규모나 특성에 따라 방식은 정해가면 되지 않을까 싶다. 아래는 세션 기반의 인증 방식을 정리한 그림이다. 세션 기반 인증 방식 위와 같이 클라이언트가 로그인 요청을 보내면, 로그인된 사용자들에 대한 정보들을 백엔드 내의 세션 스토리지에서 유지하고 있는 형식이다. 이렇게 되면 백엔드에서는 어떤 사용자들이 로그인되어있는지 확인하기 쉽고, 사용자에 대한 데이터가 클라이언트의 변조에 영향을 받기 어렵

원문보기 내부링크
Naver Blog

[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 버켓 생성하기 이런 식으로 만들어주고, 이미지 저장소로

원문보기 내부링크
Naver Blog

[React] 함수 컴포넌트와 클래스 컴포넌트의 근본적 차이

우리는 React를 사용하며 일반적으로 함수 컴포넌트를 자주 사용하곤 한다. 함수에서 hook을 사용할 때 말고, 함수 컴포넌트와 클래스 컴포넌트는 근본적으로 어떤 차이점이 있는걸까? 각 컴포넌트들이 state, props같은 데이터들을 조작할 때의 패러다임을 기준으로 한번 비교해보고자 한다. 아래 글을 많이 참고했다. https://overreacted.io/how-are-function-components-different-from-classes/ 위 글에도 그대로 있는 내용인데, 이 글의 결론은 이 한줄로 모든 게 설명 가능하다. "함수 컴포넌트는 렌더될 값을 캡쳐한다" 1. 서론 이 한 줄의 글만 보면 이해하기 쉽지 않을테니, 예제로 어떤 차이인지 간단하게 알아보자. 아래와 같은 함수 컴포넌트가 있다고 해보자. 버튼을 누르면 상태가 변경되고 2초뒤에 상태가 콘솔에 찍히는 예제이다. import React, { useState } from "react"; const App =

원문보기 내부링크
Naver Blog

[회고] 2023년 05.01 ~ 06.09 회고 (우테코 레벨2 회고)

저번 회고글에서 자주 회고글이라도 포스팅해야겠다 생각해놓고 무려 한달이 훌쩍 넘어 레벨 2가 끝나고 나서야 회고 포스팅을 쓰게 되었다. 나는 미션에 치여사는편이었는데 자주 포스팅하는분들 보면 항상 대단하다 느꼈다. 그래도 매일 간단한 형식으로의 회고는 자주 했다. (한두번 빼먹기도 했지만 ㅎㅎ..) 1. 레벨 2 회고 레벨 2를 전체적으로 돌아보자면, React를 다루는 것 자체에 대한 점은 많이 성장했다고 생각한다. 다만 아직 많이 부족하다고 느끼며, 각 미션에서 추구하고자 했던 학습 목표들을 온전히 내 것으로 만들었다고 생각하기에는 조금 부족했다고 생각한다. 전반적으로는 나 스스로에게 아쉬움이 좀 많이 남는 레벨이었던 것 같다. 아래는 5월 이후 레벨2 회고를 하며 어떤 점들을 고민하거나 공부했을까 간단하게만 돌아봤다. 1) UX 정말 사소한 점에서 사용자 경험을 증가시킬 수 있다는 점을 느꼈는데, 바로 텍스트였다. 아래 두 글이 정말 인상깊었다. https://toss.tech

원문보기 내부링크
Naver Blog

[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에서의 모듈은 그냥 각각의

원문보기 내부링크
Naver Blog

[오류모음] 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 '~~~' 처럼 해와서 그런건지... 불러오는 이름이랑 같아야하는건가 싶기도 하다.

원문보기 내부링크
Naver Blog

[도서 리뷰] &lt;쉽게 시작하는 타입스크립트&gt; 리뷰

최근 커리어리에서 어쩌다 아래 글을 읽은 적이 있었다. https://joshua1988.github.io/web-development/tech-book-makes-money/ 기술 서적은 돈이 되는가? 기술 서적 집필에 관한 모든 것. 저자 인세에 대한 비밀. 집필 후기. 쉽게 시작하는 타입스크립트 도서 소개 joshua1988.github.io 그래서 '캡틴판교님이 서적을 출간하셨구나' 알고만 있었는데, 좋은 기회가 생겨 이 책을 리뷰할 수 있게 되었다. 시중에 있는 타입스크립트 책을 몇 권 읽어본 적이 있는데, 읽어봤던 책들과는 다른 이 책만의 특징을 몇 가지를 추릴 수 있었다. 1. 실습할 수 있는 내용이 많다. 2. 문법상으로 가능은 하나 좋지 않은 경우, 코드 작성 시 좋은 방향을 함께 알려준다. 3. 그림 자료를 이용한다. 1. 실습할 수 있는 내용이 많다 개발 공부를 했던 분들이면 잘 알겠지만, 특히 프로그래밍 언어의 경우 단순히 책만 보고 해서는 체화가 안된다. 본인

원문보기 내부링크
Naver Blog

[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를 사

원문보기 내부링크
Naver Blog

[오류 모음] 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 속성을 수정하여 해결할 수 있었다.

원문보기 내부링크
Naver Blog

[도서 리뷰] &lt;현장에서 바로 써먹는 리액트 with 타입스크립트&gt; 리뷰

우테코 레벨3가 진행되는 도중, 좋은 기회가 생겨 이 책을 리뷰할 수 있게 되었다. 제목은 현장에서 바로 써먹는 리액트 with 타입스크립트이다. Previous image Next image 책 표지를 보면 알 수 있지만, 부제목이 있다. 바로 "리액트와 스토리북으로 배우는 컴포넌트 주도 개발"이다. 결론부터 이야기하자면 정말 "현장에서 바로 써먹는" 이라는 제목에 어울리는 것 같다. 어느정도 리액트에 대해 알고 있으면 좋은 내용들을 많이 얻을 수 있을 것 같다. 물론 리액트를 모른다고 읽기 힘들거나 그런 건 아니다. 위에서 말한 것과 같다보니 책에서 js나 html, css같은 기초적인 내용은 다루지 않는다. Typescript 자체도 깊게 다루지는 않는다. 다만, html, css, js정도를 알고 Typescript만 모르는 상태라면, 충분히 읽고 이해할만 하다. 책 초반부에 보면 React에 관한 내용이 나오긴 한다. 리액트를 아예 모르더라도 읽지 못할 정도는 아닐 것 같다

원문보기 내부링크
Naver Blog

[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 파이프라인

원문보기 내부링크
Naver Blog

[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번 포트

원문보기 내부링크
Naver Blog

[회고/계획] 2023년 01월 회고

한달만에 쓰는 회고글인데, 우테코가 시작하기 거의 직전이기에 1월 회고글을 한 번 쓰려고 한다. 아래는 저번 회고글 내용 중 일부이다. 2022년 회고글을 작성하며 23년 1월에 대한 계획을 세웠었었다. 저번 회고글 내용 1달 전에 작성했던 내용들을 보면, 브라우저인 chromium과 엮어서 react를 한 번 공부해볼 계획을 세웠었다. 결론적으로는 미루고 미루다 1월 말이 되어서야 공부한 내용을 포스팅할 수 있었다. 1월 초에 반짝 열심히 하다가 1월 말에 또 반짝 열심히 하고 1월 중순은 그냥 편하게 공부했던 것 같다. 사실 공부하면서 포스팅하고 싶던 내용이 몇 개 있었는데 막상 쓰려하면 자꾸 내용의 흐름들이 안잡히거나, 의문점 해결이 안돼서 포스팅을 할 수가 없었다. 머릿속에서 의문이 해결되지 않으니 자연스럽게 포스팅하다 임시저장하고 미루고, 침대에 누워버리기를 반복했던 것 같다...ㅎ 그렇게 임시저장 포스팅만 5개다. 알고리즘 공부는 이전 회고글에서 잠시 쉬어야겠다고 했었고,

원문보기 내부링크
Naver Blog

[JavaScript] 프로토타입(Prototype)과 프로토타입 체인(Prototype Chain)

무려 3년 4개월만에 다시 작성하는 Prototype에 관한 글이다. 최근에 다른 사람과 Prototype에 관한 이야기를 잠깐 할 일이 생겨 예전에 내가 썼던 글을 어쩌다 볼 일이 있었다. 그런데 지금 보니 글의 흐름도 너무 마구잡이처럼 느껴지기도 하고, 공개해두기 부끄럽기도 했던지라 이 참에 다시 한 번 작성해 보려고 한다. 1. 선행 지식 먼저 JS의 prototype에 대해 이해하기 위해, 선행되어야 하는 지식이 몇 가지 있다. 왜 이런지에 대해 이해해야 하는 내용이라기보단, 그냥 '그렇구나~' 하고 넘어가면 되는 내용들이다. 자바스크립트에 존재하는 모든 Reference Type은 모두 "객체"이다. 자바스크립트의 함수 또한 객체이며, JS의 함수는 "일급 객체"이다. 자바스크립트의 모든 객체는 "반드시" 함수를 통해 생성된다. 위 딱 세 가지만 짚고 넘어가자. 먼저 자바스크립트는 크게 2가지 타입으로 분류된다. number, string과 같은 Primitive Type과

원문보기 내부링크
Naver Blog

[BOJ 13418] 학교 탐방하기 (Node.js)

https://www.acmicpc.net/problem/13418 13418번: 학교 탐방하기 문제 국민대학교 홍보대사 국희는 여름방학을 맞아 고등학생들을 대상으로 학교 내부에 있는 건물을 소개해주는 일을 하게 되어 학교 건물을 차례로 소개할 수 있는 이동 경로를 짜보기로 하였다. 국민대학교는 북한산의 정기를 받는 위치에 있어 건물 간 연결된 길이 험난한 오르막길일 수도 있고, 내리막길일 수도 있다. 국희는 먼저 입구를 기준으로 건물 간 연결된 도로가 오르막길인지, 내리막길인지를 파악하여 오르막길인 경우 점선, 내리막길인 경우 실선으로 표시하였다. 그림 1 건물을 구분하기 쉽도록 번호를 붙였고, 입구에는 숫자 0 을 붙이기로... www.acmicpc.net 일반적인 MST 문제였다. 최대 스패닝트리를 하나 구성하고, 최소 스패닝트리를 하나 구성한 뒤, 오르막 길의 수를 카운트한다. 카운트한 값들을 제곱하여 최대 - 최소 를 하면 결과를 얻어낼 수 있다. const [[N, M],

원문보기 내부링크
Naver Blog

[우아한테크코스 학습로그] 초기 페이지 로딩 시 CSS 깨짐 현상 발생 원인 - 레벨 1 로또미션

이번 글은 우아한테크코스 활동 중 하나인 학습로그에 관한 글이다. 1레벨 로또미션 도중 발생했던 경험에 대해 작성해보려 한다. 로또 미션에서 도메인 로직을 유지한다는 조건으로 콘솔에서 웹뷰로 옮겨 진행하는 미션을 진행하였다. 많은 크루원들이 굉장히 다양한 방식으로 코드를 작성하였는데, 그 중 일부 케이스에서는 페이지를 최초 로딩했을 때 CSS가 약 0.5초간 깨지는 현상이 발생하는 케이스들이 있었다. 이 원인에 대해 작성하고 내 해결방법에 대해 작성할 계획이다. 1. 초기 페이지 로딩 시 CSS가 잠시 깨져보이던 상황에 대한 원인 결론부터 말하자면 이는 웹팩 플러그인인 style-loader, css-loader 때문이다. step2.config.js 부분을 보면 style-loader와 css-loader를 사용한 것을 알 수 있다. 각 플러그인들에 대해서 간단하게만 알아보자. css-loader : js 파일에서 css를 불러오기 위해 사용되는 플러그인. 각 css들이 컴포넌트

원문보기 내부링크
Naver Blog

[FE] 브라우저의 렌더링 파이프라인 (Chromium)

최근 브라우저 렌더링 파이프라인을 주제로 테코톡 발표를 했다. 사실 예전에 썼던 글이 하나 있긴 한데, 발표를 위해 다시 공부를 하다 보니 예전에 썼던 글에 미흡한 부분이 많다는 점을 느꼈다. 무엇보다 과정 중 일부가 바뀌었는데, 공식 자료 중 일부가 레거시가 된 사실을 모르고 작년에 공부를 했던 것을 확인했다. 테코톡 발표에서 한정된 시간으로 인해 제대로 다루지 못한 내용들이 많았기도 해서, 이참에 새로 글을 작성해보려 한다. 1. Chromium의 멀티 프로세스 아키텍처 Chromium의 렌더링 파이프라인에 관한 내용을 이야기하기 전에, 먼저 Chromium의 멀티 프로세스 아키텍처에 대한 이야기를 해야한다. 위 사진에서 보이는 것처럼, 크로미움을 하나 켰다. 일반적인 하나의 프로그램을 실행한다면 하나의 프로세스가 생기는게 일반적이다. 그런데 작업관리자에서 보면 우리는 하나의 크로미움을 켰음에도 여러 개의 프로세스가 생긴 걸 확인할 수 있다. 브라우저는 기본적으로 정말 많은 동작

원문보기 내부링크
Naver Blog

[회고/계획] 23.02.01 ~23.03.31 회고

우테코 시작 직전에 작성했던 회고글을 마지막으로, 두 달 만에 작성하는 회고글이다. 우테코 시작한게 엊그제 같은데, 벌써 레벨 1이 끝났다. 시간 흐르는 속도가 빨라도 너무 빠르게 느껴진다. 저번 회고글에 썼던 내용인데, 당시에는 제대로 성장하지 못할지도 모른다는 두려움이 컸었다. 레벨 1을 마친 지금은 당시 걱정했던 부분이 크게 느껴지지 않는다. 직접 우테코를 겪어보니, 반드시 성장할 수 밖에 없는 환경이라는 생각이 들었다. 생활적인 면에 있어서는, 우테코 일정이 전반적으로 매우 빡빡해서 놀 생각을 할 수도 없었다. (주 5일중 정시퇴근을 2일정도 하면 많이 한 게 아닌가 싶다.) 공부하는걸 놓을 수 없는 환경인데, 주변 크루원들이 워낙 열심히 공부하다보니 전반적으로 자극을 많이 받았던 것 같다.(경쟁과는 거리가 먼 자극이다.) 환경의 중요성을 정말 크게 느꼈던 두 달이었다. 이전 회고글에서 작성하지 않았던 내용인데, 닉네임은 슬링키로 정했다. 큰 뜻이 있는 건 아니고, 그냥 우테

원문보기 내부링크
Naver Blog

[회고] 2023년 04월 회고

1. 회고 관련한 고민 저번 레벨1 회고글을 쓰면서 느낀 점이 하나 있다. 2달만에 회고를 쓰려니깐 뭘 했었는지 하나도 기억이 안나더라. 그렇게 또 정신없이 살고 있었는데 갑자기 크루원들이 포스팅스터디 하자고 하더라. 주기는 최소 2주에 한 번이다. 블로그를 공부할겸 쓰기 시작한지 4년이 넘었는데, 어느 순간부터는 '퀄리티가 낮은 글은 쓸 바에는 좀 더 다듬고 좋은 글을 쓰기 위해 노력하자' 는 생각이 많이 들었다. 이 생각은 여전하긴 한데, 뭘 써야 좋을지 주제를 찾기 쉽지 않더라... 이 때문에 2주에 한번씩 쓰자는 게 너무 부담스러워서 거절했었다. (다른 한 편으로는 공부할때 써먹을라고 블로그 시작해서 군대에서도 생각없이 공부한거 써댔었는데, 지금은 너무 자의식이 강해진 것 같다.) 그러다 밤에 누워서 생각해보다 문득 이런 생각이 들었다. '레벨1 회고 하면서 뭐했었는지 하나도 기억 안났었는데, 과연 레벨 2 끝나고 이게 개선될까?' 레벨 1 끝나고 회고글을 쓰며 뭘 했는지 꾸

원문보기 내부링크
Naver Blog

[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 파일

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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까지 업데이트 하게 된다. 이런 일련

원문보기 내부링크
Naver Blog

[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 마지막 줄에 넣어주는 출발섬에서 종착섬까지 갈 때, 옮길 수 있는 최대한의 중량을 구하는 문제다. 문제를 보면 알 수 있겠지만, 두 섬을 연결하는 경로는 항상 존재한다고 했다. 연결이 끊겨져 있는 경우는 없다는 말이다. 이 문제는 최소

원문보기 내부링크
Naver Blog

[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를 탐색할 때

원문보기 내부링크
Naver Blog

[BOJ 14923] 미로 탈출 (Node.js)

https://www.acmicpc.net/problem/14923 14923번: 미로 탈출 문제 홍익이는 사악한 마법사의 꾐에 속아 N x M 미로 (Hx, Hy) 위치에 떨어졌다. 다행히도 홍익이는 마법사가 만든 미로의 탈출 위치(Ex, Ey)를 알고 있다. 하지만 미로에는 곳곳에 마법사가 설치한 벽이 있어 홍익이가 탈출하기 어렵게 하고 있다. 홍익이는 마법사의 연구실에서 훔친 지팡이가 있어, 벽을 길로 만들 수 있다. 그렇지만, 안타깝게도 마법의 지팡이는 단 한 번만 사용할 수 있다. 이때, 홍익이를 도와 미로에서 탈출할 수 있는지 알아보고, 할 수 있다면 가장 빠른 경로의 거리 D는 얼마인지 알아보자. 인접한 칸으로... www.acmicpc.net 2206번 벽 부수고 이동하기 와 거의 동일한 문제다. 사실상 아예 똑같은 문제인데 왜 난이도가 다르게 측정되어있는지 의문이다. 출발점과 도착점이 정해져 있고, 한번 벽을 부술 수 있을 때 최단거리를 찾는 문제다. 벽을 부순 경우

원문보기 내부링크
Naver Blog

[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!만큼의 시간복잡도가

원문보기 내부링크
Naver Blog

[BOJ 1520] 내리막 길 (Node.js)

https://www.acmicpc.net/problem/1520 1520번: 내리막 길 문제 여행을 떠난 세준이는 지도를 하나 구하였다. 이 지도는 아래 그림과 같이 직사각형 모양이며 여러 칸으로 나뉘어져 있다. 한 칸은 한 지점을 나타내는데 각 칸에는 그 지점의 높이가 쓰여 있으며, 각 지점 사이의 이동은 지도에서 상하좌우 이웃한 곳끼리만 가능하다. 현재 제일 왼쪽 위 칸이 나타내는 지점에 있는 세준이는 제일 오른쪽 아래 칸이 나타내는 지점으로 가려고 한다. 그런데 가능한 힘을 적게 들이고 싶어 항상 높이가 더 낮은 지점으로만 이동하여 목표 지점까지 가고자 한다. 위와 같은 지도에서는 다음과 같은 세 가지 경로가 가... www.acmicpc.net 인접행렬로 이루어진 그래프를 탐색하는 문제로, DFS+DP로 풀 수 있는 문제다. 먼저, 내리막길로만 가야 하기 때문에 (0, 0) 에서 값이 점차 감소하도록 탐색해야 한다. 얼핏 보고 단순 DFS로 하면 될 것 같지만, 제한사항을

원문보기 내부링크
Naver Blog

[React] CRA로 만든 React 프로젝트가 브라우저에 렌더링 되기까지의 과정 : blink 엔진과 V8, 그리고 React

이 글에서는 우리가 만든 React 프로젝트가 브라우저에 어떤 순서로 렌더링 되는지 한번 정리해 보려고 한다. (브라우저는 Chromium 기준, React는 CRA로 만든 프로젝트 기준이다.) 우리가 주소창에 주소를 쳤을 때부터 우리 눈에 보이기까지, 렌더링 엔진인 blink와 자바스크립트 엔진인 V8을 거쳐 어떻게 화면에 띄워지는지를 정리해 본 글이다. 각 내용들을 따로 정리하는 것이 아닌 react가 브라우저에 띄워지기까지의 "흐름을" 정리해 보고 싶었기에, 렌더링 파이프라인이 진행되다 V8 엔진이 자바스크립트 코드를 읽기도 하는 등 왔다 갔다 하는 방식으로 글을 작성하였다. 나름 열심히 작성하긴 했지만, 많이 난잡해 보일까 걱정이긴 하다... ㅎ 글 시작 전에 먼저, 이 글의 주제와 연계되는 다른 주제의 내용들은 이 글에서 깊게 다루지 않은 내용이 꽤 있다. 이에 관한 내용은 예전에 정리했던 아래 글들에서 다뤘었다! [HTTP] TCP 커넥션의 핸드 셰이크와 TCP 커넥션 핸

원문보기 내부링크
Naver Blog

[회고] 우테코 프리코스 3주차 회고

우테코 프리코스 3주차 과제가 끝났다. 3주차 과제는 로또 프로그램을 만드는 것이었다. 1. 과제를 진행하며 코드적인 부분에서 신경썼던 점 3주차 추가 요구 사항들을 보면 함수가 한 가지 일만 잘 하도록 구현하라는 말이 있었다. 또한 JS의 Class문법으로 틀이 짜여있는 Lotto클래스를 반드시 사용하여야 했고, 테스트 코드도 동일하게 작성하여야 했다. Class문법을 반드시 사용해 Lotto Class를 채워나가며 함수 또는 메서드가 한 가지 일만 하도록 구현하라는 조건을 통해 객체지향 프로그래밍의 패러다임과 함수형 프로그래밍의 패러다임을 적절하게 엮어 코드를 작성하고자 하였다. 무엇보다 과제를 진행하며 나 스스로의 목표였던 코드의 가독성과 유지보수가 좋은 코드 작성을 하기 위해 열심히 끄적인 것 같다. 그러다 보니, 함수 하나를 만들 때, 그 함수의 목적성이 명확해 보이고 싶어 네이밍을 어떻게 할까 고민을 정말 많이 했었고 시간도 많이 쏟았었다. 아무튼 그렇게 코드를 짜 봤는데

원문보기 내부링크
Naver Blog

[회고/계획] 우테코 프리코스 4주차 회고 및 계획

우테코 프리코스가 4주차까지 해서 모두 끝났다. 4주차 과제는 다리건너기 게임을 만드는 것이었다. 1. 4주차 회고 4주차 미션은 함수 10라인 제한 요구사항이 있었다. 조금 더 빡빡한 느낌이 있었다. 그리고 3주차 공통 피드백 파일을 받으니 아래와 같은 말이 있었다. 테스트 코드도 코드이기에, 테스트 코드도 리팩토링을 하며 개선해가야 한다는 말이었다. 이 글을 읽고 이번 미션은 jest를 확실하게 공부해서 잘 테스트코드를 리팩토링 해봐야겠다고 생각했었다. 그러나 막상 미션이 시작하고 나니 코드짜느라 바빴고, 결국 jest가 확실하게 체화되지 않은 채로 테스트 코드를 짜고, 리팩토링하게 되었다. 그렇다보니 리팩토링 하기가 쉽지 않았던 듯 하다. 저번 주차 까지는 코치분들이 작성해뒀던 테스트코드 적당히 눈으로 훑으면서 갖다 짜집기하며 테스트 코드를 작성했었다. 그러다 이번 4주차때 늦게라도 jest를 공부하며 느낀 점이 몇 가지 있다. 먼저 jest는 많은 기능이 있다는 걸 확실히 느

원문보기 내부링크
Naver Blog

[우테코 프리코스 5기 후기] MissionUtils.Console.readLine() 사용 시비동기 처리 방식과 콜백 처리 방식의 동작 원리

이번 우테코 프리코스 5기를 미션들을 진행하다 쓰고싶었던 글이 하나 있는데 이제야 쓰게 되었다. (카테고리 고민하다가 그냥 기타에 넣었다.) 우테코 프리코스 5기 미션에서는 아래와 같은 조건이 있었다. 반드시 MissionUtils 라이브러리를 사용해야 했다. MissionUtils 라이브러리에는 readLine이라는 이름의 말 그대로 readline을 받는 기능이 있었다. 이 MissionUtils를 사용하는 과정에서 이 MissionUtils를 비동기처리하여 사용하면 테스트 케이스를 맞출 수 없었고, 이를 어떻게 처리하느냐 하는 부분이 지원자들 사이에서 굉장히 핫한 주제였다. 굉장히 핫한 주제였던 MissionUtils.Console.readLine 처리방법 그리고 이 문제는 대부분의 지원자들이 콜백 방식을 이용해 해결했다. Promise나 async await을 이용한 방식에서 테스트코드가 실패했던 이유, 콜백 방식이 테스트에서 정답으로 되었던 부분에 대해 코드의 동작을 하나하

원문보기 내부링크
Naver Blog

[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면 이상이여야 녹는다는 점을 처리하

원문보기 내부링크
Naver Blog

[회고/계획] 22.11.23 ~ 22.12.03 회고 및 계획

저번 프리코스 끝나고 회고글 쓴지 얼마 안됐는데, 어쩌다 보니 11일만에 회고글을 하나 더 쓰게 되었다. 프리코스 제외하고 주단위로 회고를 처음 써보는 것 같은데, 어쩌다보니 쓰게 된 이유가 있다. 회고부터 작성한 뒤 마지막에 쓰게 된 이유에 대해 이야기하겠다. 1. 회고 1-1) 저번 회고에서 작성했던 계획 저번 회고에서 작성했던 계획 위 사진은 저번 프리코스 4주차 회고글 중 일부이다. jest를 제대로 못다루니 내가 받은 미션의 코드를 짜도 테스트하기 좋은 코드인지를 확인 하기 힘들었고, 그게 아쉬웠다는 내용이다. 그래서 일단 프리코스 끝나고 jest 사용에 관해서부터 공부했다. 이후 테스트코드 짜보는 연습을 하기 위해 그냥 되는대로 프리코스 미션들 한번 다시 짜봤다. 두 번째 짜보는 미션 코드였는데, 두 번째라 그런건지 맘편하게 해서 그런건지 굉장히 편하게 구현했던 것 같다. 저번 회고에서 어떤 코드가 테스트코드 짜기 쉬운 코드일지 감을 잡고 싶다고 작성했었는데, 이를 차차

원문보기 내부링크
Naver Blog

[2022 마이 블로그 리포트] 올해 활동 데이터로 알아보는 2022 나의 블로그 리듬

2023년도 화이팅~! 2022 마이 블로그 리포트 2022년 올해 당신의 블로그 리듬을 알아볼 시간! COME ON! campaign.naver.com

원문보기 내부링크
Naver Blog

우아한테크코스 5기 프론트엔드 최종 코딩테스트 후기

이전 기수인 4기와는 다르게 이번 우테코 5기는 프리코스를 모두 참가할 수 있었다. 그렇기에 선발 과정이 4기와는 조금 달랐다. 프리코스가 종료된 뒤 1차심사를 통과해야 최종 코딩테스트를 볼 수 있었다. 프리코스 종료일은 11월 23일, 1차심사 발표일은 12월 14일, 최종 코딩테스트 진행일은 12월 17일로 1차 발표 후 최종 코테를 준비할 수 있는 기간이 길지 않았다. 그리고 나는 12월 14일에 1차심사 통과 메일을 받게 되어 최종 코딩테스트를 보고 왔다. 최종 코딩테스트는 선릉, 잠실의 우테코 캠퍼스 내에서 대면으로 진행되었고, 프리코스에서 진행했던 마지막 주차 미션과 비슷한 난이도로 나온다. 1. 최종 테스트 준비 과정 프리코스가 확정되면 무조건 최종 코딩테스트까지는 보장되는 이전 기수와는 다르게, 이번 기수는 본인이 1차 심사를 통과해 최종 코딩테스트에 참가할 수 있다는 보장이 없었다. 프리코스가 11월 23일에 종료되었고 12월 14일에 1차 심사 결과가 나왔다. 프리

원문보기 내부링크
Naver Blog

우아한테크코스 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

원문보기 내부링크
Naver Blog

[회고/계획] 2022년 회고 및 계획

2022년 회고글을 쓸 시기가 되어버렸다. 연 단위 회고글을 쓰기 시작한게 2020년인데, 벌써 3번째라는게 믿기지가 않는다. 먼저 2021년 회고글에서 2022년을 계획했던 내용들을 보며 지나온 2022년을 한번 회고해보려고 한다. 1. 회고 [회고/계획] 2021년 회고 및 계획 먼저 21년 말은 공부하고자 하는 방향에 있어 혼란이 조금 있던 시기이다. 그렇게 프론트엔드쪽으로 방향을 어느정도 바꾼 뒤, 22년은 확실히 프론트엔드 위주로 공부했다. 아무래도 자바스크립트로 백엔드를 시작했다보니, 21년 전역 이후에는 해보고 싶기도 했고 현실적인 이유도 있어 분야를 바꿨었다. [회고/계획] 2021년 회고 및 계획 21년 회고글에서 일단은 알고리즘 공부를 꾸준히 하겠다 계획했었다. 저때는 위 글의 내용대로 엄두가 안나 백준문제를 풀지 않았었는데, 프로그래머스, leetcode로만 종종 풀다가 22년 7월 이후부터 본격적으로 백준으로 꾸준히 풀기 시작했었다. 사유는 7월에 떨어졌던 네이

원문보기 내부링크
Naver Blog

[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를 구현하면 되는 문제이다.

원문보기 내부링크
Naver Blog

[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 코드는 아래와 같다. (단순히

원문보기 내부링크
Naver Blog

[Next.js + Express] JWT를 이용한 인증 구현과 토큰 인증 시스템에 대한 개인적 고찰

Express 백엔드와 Next.js 프론트엔드에서 JWT를 이용한 인증 구현과 처리에 관하여 포스팅을 해보려고 한다. 이 포스팅에서는 JWT를 이용한 인증을 구현하는 내용을 작성할 계획이기에, JWT가 무엇인지와 같은 내용은 다루지 않겠다. 1. JWT(JSON Web Token)를 이용한 토큰 기반 인증 시스템을 사용하는 이유? 토큰 기반 인증 시스템을 쓰는 이유를 다루기 전에 먼저 전통적인 방법인 세션 기반 인증의 동작 방식부터 정리해보자. 1.1) 세션 기반 인증의 동작 먼저 로그인 요청이 가면, 로그인하고자 하는 사용자 정보를 먼저 확인한다. 정보 확인이 되면 로그인 할 회원정보를 세션스토리지에 저장한다. 이 세션정보를 클라이언트도 갖고 있게 하기 위해 성공 응답과 함께 세션정보를 함께 보내준다. 클라이언트는 이 세션정보를 쿠키에 담아 관리한다. 이후로는 이 세션정보가 담긴 쿠키를 포함하여 요청하게 된다. 이와 같은 세션 인증은 서버 쪽에서 어떤 사용자들이 로그인되어있는지

원문보기 내부링크
Naver Blog

[BOJ 10423] 전기가 부족해 (Node.js)

https://www.acmicpc.net/problem/10423 10423번: 전기가 부족해 문제 세계에서 GDP가 가장 높은 서강 나라는 소프트웨어와 하드웨어 기술이 모두 최고라서 IT강국이라 불리고, 2015년부터 세상에서 가장 살기 좋은 나라 1등으로 꼽히고 있다. 살기 좋은 나라 1등으로 꼽힌 이후 외국인 방문객들이 많아졌고, 그에 따라 전기 소비율이 증가하여 전기가 많이 부족한 상황이 되었다. 따라서 서강 나라의 대통령은 최근 개발이 완료된 YNY발전소 프로젝트를 진행 하기로 하였다. 발전소를 만들 때 중요한 것은 발전소 건물과 도시로 전기를 공급해 줄 케이블이다. 발전소는 이미 특정 도시에 건설되어 있고, 따라... www.acmicpc.net 발전소가 여러 개인 것이 핵심인 문제였고, 문제를 보면 알 수 있지만 MST문제로 크루스칼을 이용하여 풀었다. 이 문제의 핵심은 발전소가 여러개더라도 모든 도시에 전기가 연결되기만 한다면, 발전소 하나가 어떤 도시에도 연결 안되

원문보기 내부링크
Naver Blog

[회고] 우테코 프리코스 1, 2주차 회고

최근에 우테코를 지원했었다. 원래 몇달에 한번 회고를 몰아쓰는편이라 프리코스 이야기도 한번에 몰아쓰려했는데, 저번주에 다른 참가자분들 주별로 회고쓰는 모습을 보니 나도 쓰고싶어지기도 했고 2주차를 진행하며 새롭게 느끼게 된 내용도 있어 쓴다. 따라서 1, 2주차 회고를 한번에 쓰려고 한다. 1주차 1주차는 알고리즘 문제가 7개 주어졌다. 단, 진행 방식에 "기능을 구현하기 전에 기능 목록을 만들고, 기능 단위 커밋을 해라" 라는 부분을 지켜야했다. 기능 요구사항이 각 알고리즘 7문제였기에 각 문제별로 커밋을 하였다. 평소에 js로 문제를 풀어와서 그런지 문제의 난이도 자체는 크게 어렵게 느껴지지 않았던 것 같다. (라고 말하지만 2번문제에서 아주 크나큰 실수를 했다..) 다만 문제들이 써있는게 굉장히 모호했었다. 그래서 평소 알고리즘 문제 풀던것처럼 써있는 조건만 딱 맞췄었는데, 오히려 그런 조건을 찾아서 예외처리들을 해나가는 부분을 원하셨던 것 같다..ㅜ 너무 알고리즘 문제풀이 자

원문보기 내부링크
Naver Blog

[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 정해진 순서대로 문제를 풀어야 한다는 전형적인 위상정렬 문제였다. 단, 문제집이 난이도 순서대로 출제되어있다고 했다. 높은 번호의 문제가 어려운 문제이기에, 이는 최소힙을 함께 사용해야 하는 문제였다. 일반적인 위상정렬 문제처럼 진입차수

원문보기 내부링크
Naver Blog

[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|)라고

원문보기 내부링크
Naver Blog

[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 ], [

원문보기 내부링크
Naver Blog

[BOJ 1948] 임계경로 (Node.js)

https://www.acmicpc.net/problem/1948 1948번: 임계경로 문제 월드 나라는 모든 도로가 일방통행인 도로이고, 싸이클이 없다. 그런데 어떤 무수히 많은 사람들이 월드 나라의 지도를 그리기 위해서, 어떤 시작 도시로부터 도착 도시까지 출발을 하여 가능한 모든 경로를 탐색한다고 한다. 이 지도를 그리는 사람들은 사이가 너무 좋아서 지도를 그리는 일을 다 마치고 도착 도시에서 모두 다 만나기로 하였다. 그렇다고 하였을 때 이들이 만나는 시간은 출발 도시로부터 출발한 후 최소 몇 시간 후에 만날 수 있는가? 즉, 마지막에 도착하는 사람까지 도착을 하는 시간을 의미한다. 어떤 사람은 이 시간에 만나... www.acmicpc.net 정방향으로 위상정렬 이후 역으로 BFS 탐색을 해야하는 문제였다. 가장 먼저 구해야 하는 것은 "모든 사람이 만나는 시간" 이다. 한명을 제외한 나머지가 모두 도착했다고 하더라도 오지 않은 한명을 계속 기다려야 하는 것이다. 따라서 도

원문보기 내부링크
Naver Blog

[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 형태로 입력값이 들어왔을 때 잔고가 변경되는것이 아닌 추가된다는 점을 유의해서 연산시켜 풀어야 한다. (이 부분을 생각없이 풀다가 많이 틀렸다.

원문보기 내부링크
Naver Blog

[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번째 줄에 받게되는 물탱크들의 정보를 통해 청정수와 고인물의 수를 먼저 정리한다. 이후 물탱크 연산은 그대로 유니온연산을 하면 된다. 유니온 연산을 할 떄 청정수와 고인물의 수도 같이 계산해준다.

원문보기 내부링크
Naver Blog

[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의 누적합을 구하면 되는 문제이다. 누적합 문제이기에 세그먼트 트리를 이용하여 문제를 풀 수 있다. 꼭 봐야

원문보기 내부링크
Naver Blog

[BOJ 1647] 도시 분할 계획 (Node.js)

https://www.acmicpc.net/problem/1647 1647번: 도시 분할 계획 문제 동물원에서 막 탈출한 원숭이 한 마리가 세상구경을 하고 있다. 그러다가 평화로운 마을에 가게 되었는데, 그곳에서는 알 수 없는 일이 벌어지고 있었다. 마을은 N개의 집과 그 집들을 연결하는 M개의 길로 이루어져 있다. 길은 어느 방향으로든지 다닐 수 있는 편리한 길이다. 그리고 각 길마다 길을 유지하는데 드는 유지비가 있다. 마을의 이장은 마을을 두 개의 분리된 마을로 분할할 계획을 가지고 있다. 마을이 너무 커서 혼자서는 관리할 수 없기 때문이다. 마을을 분할할 때는 각 분리된 마을 안에 집들이 서로 연결되도록 분할해야 한다... www.acmicpc.net MST 문제였다. 마을의 최소 스패닝 트리를 만들고 거기서 가장 유지비가 큰 길을 끊어내면 되는 문제이다. 크루스칼 알고리즘을 이용하여 마을 유지비의 합을 구해낸 뒤 가장 큰 유지비를 빼면 된다. 간략하게 풀이 방법을 정리하면

원문보기 내부링크
Naver Blog

[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번 인덱스 값들을 기준으로 최장 증가

원문보기 내부링크
Naver Blog

[BOJ 14621] 나만 안되는 연애 (Node.js)

https://www.acmicpc.net/problem/14621 14621번: 나만 안되는 연애 문제 깽미는 24살 모태솔로이다. 깽미는 대마법사가 될 순 없다며 자신의 프로그래밍 능력을 이용하여 미팅 어플리케이션을 만들기로 결심했다. 미팅 앱은 대학생을 타겟으로 만들어졌으며 대학교간의 도로 데이터를 수집하여 만들었다. 이 앱은 사용자들을 위해 사심 경로를 제공한다. 이 경로는 3가지 특징을 가지고 있다. 사심 경로는 사용자들의 사심을 만족시키기 위해 남초 대학교와 여초 대학교들을 연결하는 도로로만 이루어져 있다. 사용자들이 다양한 사람과 미팅할 수 있도록 어떤 대학교에서든 모든 대학교로 이동이 가능한 경로이다. 시간을 낭비하... www.acmicpc.net 이 문제는 MST문제였다. 먼저 다른 MST 문제처럼 도로의 거리들을 오름차순으로 정렬해준다. 이후 사이클이 생기지 않는다는 가정 하에 2번째 줄의 M, W에 따라 다른 성의 학교끼리 맞닿은 길의 경우만 union연산을 해

원문보기 내부링크
Naver Blog

[BOJ 20040] 사이클 게임 (Node.js)

https://www.acmicpc.net/problem/20040 20040번: 사이클 게임 문제 사이클 게임은 두 명의 플레이어가 차례대로 돌아가며 진행하는 게임으로, 선 플레이어가 홀수 번째 차례를, 후 플레이어가 짝수 번째 차례를 진행한다. 게임 시작 시 0 부터 n − 1 까지 고유한 번호가 부여된 평면 상의 점 n 개가 주어지며, 이 중 어느 세 점도 일직선 위에 놓이지 않는다. 매 차례 마다 플레이어는 두 점을 선택해서 이를 연결하는 선분을 긋는데, 이전에 그린 선분을 다시 그을 수는 없지만 이미 그린 다른 선분과 교차하는 것은 가능하다. 게임을 진행하다가 처음으로 사이클을 완성하는 순간 게임이 종료된다. 사이클... www.acmicpc.net 이 문제는 유니온 파인드 문제였다. 들어온 입력값대로 유니온 연산을 하다가 사이클이 만들어지는 순간 값을 출력하면 된다. 사이클이 만들어지지 않은 채로 게임이 진행중일 경우 0을 출력해야 하기에 사이클이 만들어지기 전까지의 계산

원문보기 내부링크
Naver Blog

[회고/계획] 22.07.13 ~ 22.08.30 회고

저번 회고글을 작성할 때 이미 방학중이였는데, 그 이후 방학동안의 회고글을 작성해보려고 한다. 저번 글에서 썼던 내용인데, 저 때 부스트캠프 1, 2차코테까지 본 이후 알고리즘 공부를 꾸준히 해야겠다고 느꼈었다. 원래 Javascript로 문제를 풀다보니 백준으로 풀면 입력값 받는게 피곤해서 그동안 백준 대신 프로그래머스랑 leetcode만 풀었었다. 그러다 방학 시작하고 본격적으로 백준을 풀기 시작했다. 많이는 아니고 꾸준히 한두문제씩만 풀었더니 100문제 조금 넘게 풀었다. 이 외로는 브라우저의 렌더링 동작원리에 대해 한동안 깊게 공부하려 했었다. v8의 libuv 공부하다가 Chromium의 libevent에 대해 잠깐 공부했었는데, 보다가 렌더링 파이프라인이라는 개념의 존재에 대해 알게 되었었다. 렌더링 파이프라인의 동작들을 이해하려다보니 Chromium의 프로세스 아키텍쳐와 렌더링 엔진인 blink엔진에 대해 공부해야 했다. 그래서 7월 말 까지는 이 내용들을 공부했었다.

원문보기 내부링크
Naver Blog

[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번: 가장 긴 증가하는 부분 수열

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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. 가중치가 작

원문보기 내부링크
Naver Blog

[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을

원문보기 내부링크
Naver Blog

[프로그래머스] 성격 유형 검사하기 (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 =

원문보기 내부링크
Naver Blog

[프로그래머스] 입국심사 (JavaScript)

https://school.programmers.co.kr/learn/courses/30/lessons/43238 코딩테스트 연습 - 입국심사 n명이 입국심사를 위해 줄을 서서 기다리고 있습니다. 각 입국심사대에 있는 심사관마다 심사하는데 걸리는 시간은 다릅니다. 처음에 모든 심사대는 비어있습니다. 한 심사대에서는 동시에 한 명만 심사를 할 수 있습니다. 가장 앞에 서 있는 사람은 비어 있는 심사대로 가서 심사를 받을 수 있습니다. 하지만 더 빨리 끝나는 심사대가 있으면 기다렸다가 그곳으로 가서 심사를 받을 수도 있습니다. 모든 사람이 심사를 받는데 걸리는 시간을 최소로 하고 싶습니다. 입국심사를 기다리는 사람 수 n, 각 심사관이 한 명을 심사하는데 걸리는 시간이 담긴 ... school.programmers.co.kr 이분탐색 문제였다. 이분탐색 문제이기에 가장 오래 걸릴 수 있는 시간을 max로, 1을 min으로 먼저 잡는다. 이후 while문을 돌며 mid값을 잡은 뒤 sum

원문보기 내부링크
Naver Blog

[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보다 작은 수를 쭉 찾

원문보기 내부링크
Naver Blog

[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개씩 묶어 곱해준다

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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[

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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 주어진 수를 연속된 소수의 합으로 구할 수 있는지 구하는 문제였다. 이 문제를 풀기 위해선 먼저 소수부터 구해야했다. 입력값을 소수의 합으로 나타내는 문제이기에 입력값보다 작은 소수들부터 추려내 배열에 넣는 것이 먼저였다. 소수들

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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문을 통해 한 용액을 잡아두고 그 용액을 기준으

원문보기 내부링크
Naver Blog

[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인지 확인하고 맞다면 빼주는 방식으로 풀어주었다. 이 과정에서 배열 상

원문보기 내부링크
Naver Blog

[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;

원문보기 내부링크
Naver Blog

[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배열 하나를 초기화 해두고

원문보기 내부링크
Naver Blog

[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배열에 넣고, 이를 마지막에 출력하

원문보기 내부링크
Naver Blog

[프로그래머스] 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일때 들어갈 수 있는 경우의 수는 ㅣ 밖에 없다. 가로의 길

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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는 화면을 띄워내야 하는 브라우저 입장에서 보기에는 결국 단순한 텍스트들에 불과하다. 이 텍스트들과 사진

원문보기 내부링크
Naver Blog

[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을 선택했을 때의

원문보기 내부링크
Naver Blog

[BOJ 5639] 이진 검색 트리 (Node.js)

https://www.acmicpc.net/problem/5639 5639번: 이진 검색 트리 문제 이진 검색 트리는 다음과 같은 세 가지 조건을 만족하는 이진 트리이다. 노드의 왼쪽 서브트리에 있는 모든 노드의 키는 노드의 키보다 작다. 노드의 오른쪽 서브트리에 있는 모든 노드의 키는 노드의 키보다 크다. 왼쪽, 오른쪽 서브트리도 이진 검색 트리이다. 전위 순회 (루트-왼쪽-오른쪽)은 루트를 방문하고, 왼쪽 서브트리, 오른쪽 서브 트리를 순서대로 방문하면서 노드의 키를 출력한다. 후위 순회 (왼쪽-오른쪽-루트)는 왼쪽 서브트리, 오른쪽 서브트리, 루트 노드 순서대로 키를 출력한다. 예를 들어, 위의 이진 검색 트리의 전위 ... www.acmicpc.net 이 문제는 BST를 구현하여 풀 수 있었다. 노드 값 추가만 필요하였기에, 그 기능만 구현해도 풀 수 있는 문제였다. BST 구현은 아래 글에서 설명했었다. https://blog.naver.com/dlaxodud2388/222

원문보기 내부링크
Naver Blog

[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 이런 방식으

원문보기 내부링크
Naver Blog

[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 사이까지만 나올 수 있기에 이 문

원문보기 내부링크
Naver Blog

[회고/계획] 2022년 상반기 회고 및 계획

대략 7개월만에 작성하는 회고글이다. 6월이 끝난지는 조금 되었지만 상반기 회고글을 한번 작성해보려 한다. 2021년 회고글 위 사진은 2021년 회고글에서 작성했던 내용인데, 저 때 했던 말대로 요즘은 프론트엔드 쪽으로 공부를 하고 있다. React나 Next.js를 끄적끄적 다뤄보고 있는데, 너무 기본기가 없어 걱정이다. 정확히는 어디부터 어떤 개념들을 잡아 가야 할 지 조금 막막한 것이 걱정이다. 이러한 문제는 일단 기본기가 될법한 지식들을 찾아보며 보이는대로 공부해볼 계획이다. 언젠가는 퍼즐처럼 하나 둘 공부한 내용들이 맞춰지지 않을까 하는 마음으로 말이다. 3월에는 복학을 했다. 3학년 1학기로 복학을 했는데, 오랜만에 학교를 다녀서 그런가 개인 공부를 한동안 쉬엄쉬엄 했었다. 확실히 반성해야 할 점이라고 생각한다. 학교를 다니며 전공 필수 과목 중 하나로 네트워크 수업을 들었는데, 확실하게 공부했다고는 생각이 들지 않는다. 기본기가 되는 과목인 만큼 앞으로 시간을 내서 더

원문보기 내부링크
Naver Blog

[FE] Chrome이 RAM 사용량을 많이 차지하는 이유 : Chrome의 멀티 프로세스 아키텍처(Multi-Process Architecture)

흔한 이야기지만 Chrome은 RAM을 정말 많이 사용한다. RAM을 많이 사용 할 수밖에 없는 Chrome의 멀티 프로세스 아키텍처에 대해 공부한 내용을 정리해 보려고 한다. 먼저 브라우저를 만드는 방법의 표준은 딱히 정해져 있지 않다. 그렇기에 브라우저를 만드는 방법에 대한 접근은 모두 다를 수밖에 없다. 그 중 크롬은 제작 방법을 멀티 프로세스 아키텍처(Multi-Process Architecture) 라는 방식으로 접근을 한 것이다. 먼저 브라우저의 구성 요소부터 보자. 1. 사용자 인터페이스 : 주소 표시줄, 이전/ 다음 페이지 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어. 3. 렌더링 엔진 : 요청한 콘텐츠를 표시 4. 네트워킹 : HTTP 요청과 같은 네트워크 호출에 사용 5. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. 6. JS 해석기 : JS

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[BOJ 1987] 알파벳 (Node.js)

https://www.acmicpc.net/problem/1987 1987번: 알파벳 문제 세로 R칸, 가로 C칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1행 1열) 에는 말이 놓여 있다. 말은 상하좌우로 인접한 네 칸 중의 한 칸으로 이동할 수 있는데, 새로 이동한 칸에 적혀 있는 알파벳은 지금까지 지나온 모든 칸에 적혀 있는 알파벳과는 달라야 한다. 즉, 같은 알파벳이 적힌 칸을 두 번 지날 수 없다. 좌측 상단에서 시작해서, 말이 최대한 몇 칸을 지날 수 있는지를 구하는 프로그램을 작성하시오. 말이 지나는 칸은 좌측 상단의 칸도 포함된다. 입력 첫째... www.acmicpc.net 이 문제는 단순한 백트래킹 문제였다. 다만 한 번 나온 알파벳은 다시 나오면 안됐기에 Set을 이용해야했다. 시작하자마자 움직일 수 없는 경우 알파벳 하나는 들어가기에 1을 출력해주는 예외처리가 필요했다. Set과 백트래킹을 이용하여 문

원문보기 내부링크
Naver Blog

[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번 + 없

원문보기 내부링크
Naver Blog

[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("./

원문보기 내부링크
Naver Blog

[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엔진은 자바스크립트 코드를 읽기 위해서 존재하는 엔진이다. 파일 읽어오기 등과 같은 비동기로 동작해야할 특정한 이벤트를 만난다면,

원문보기 내부링크
Naver Blog

[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만 있다고 했을 때 부분 증가

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
Naver Blog

[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 값을 늘

원문보기 내부링크
Naver Blog

[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

원문보기 내부링크
1 2 3 4