일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- express
- Modal
- scrapping
- sequelize
- go
- AWS
- CDN
- socket.io
- react
- npx
- route
- cicd
- Redux
- component
- 웹팩
- styled-component
- 성능최적화
- docker
- 회고
- typescript
- 웹크롤링
- 정규표현식
- graphql
- javascript animation
- 포트포워딩
- Recoil
- 반응형웹
- Today
- Total
목록분류 전체보기 (201)
프로그래밍 공부하기
https://programmers.co.kr/learn/courses/30/lessons/12927 코딩테스트 연습 - 야근 지수 회사원 Demi는 가끔은 야근을 하는데요, 야근을 하면 야근 피로도가 쌓입니다. 야근 피로도는 야근을 시작한 시점에서 남은 일의 작업량을 제곱하여 더한 값입니다. Demi는 N시간 동안 야근 피로도 programmers.co.kr 위 문제를 간단히 요약하자면 배열의 각 요소들을 총 n번 빼고 뺀 결과들의 제곱의 합이 최소가 되기 한다. 이때 숫자가 클 수록 제곱을 했을 때 변화량이 크기 때문에 배열의 각 값들이 고르게 분포되도록 값을 빼주어야 한다. 즉, 매번 배열에서 가장 큰 숫자를 골라 -1해주는 것이 좋다. function solution(works, n) { cons..
코딩테스트 연습 - 하노이의 탑 하노이 탑(Tower of Hanoi)은 퍼즐의 일종입니다. 세 개의 기둥과 이 기동에 꽂을 수 있는 크기가 다양한 원판들이 있고, 퍼즐을 시작하기 전에는 한 기둥에 원판들이 작은 것이 위에 있도록 순서대 programmers.co.kr 하노이의 탑은 재귀를 연습할 수 있는 유명한 문제이다. 하노이의 탑을 통해 재귀를 찾고 JS 코드로 구현해보자. 1. 재귀 1. 큰 문제를 더 작은 문제로 계속 나눈다. 2. 가장 작은 문제를 해결한다. 3. 가장 작은 문제의 해결을 이용하여 큰 문제를 해결해나간다. 일반적으로 재귀함수는 위와 같은 형식으로 문제를 해결한다. 이를 코드로 나타내면 다음과 같다. function recursive(input1, input2, ...) { //..
JavaScript Bundle Diet 웹사이트 기능이 많아짐에 따라 점점 커지는 JavaScript Bundle Size. 웹사이트 속도는 느려지고, 잠재 고객을 잃을 수도 있습니다. 라이브러리를 사용하는 그리고 제공하는 관점에서 Bundle Size가 커질 toss.im 웹 페이지 로딩속도를 줄이기 위한 방법 중 하나는 JS 번들의 크기를 줄이는 것이다. 위 영상에서는 Toss에서 어떻게 번들을 최적화 하는지 엿볼 수 있었다. 1. 번들 분석툴 번들 최적화에 앞서 번들의 상태를 알아볼 수 있는 번들 분석 도구를 선택해야 한다. 나는 Webpack Bundle Analyzer만 사용해 보았는데 위 영상에서도 bundle analyzer를 추천한다. 각 도구의 특징은 다음과 같다. Webpack Ana..
1. 웹팩의 도입배경 1) 모듈 //변수 num이 포함된 a.js //변수 num이 포함된 b.js 웹 개발을 하다보면 CSS, JS 등 다양한 종류의 리소스 파일들을 여러 개 생성하게 된다. 만약 하나의 html 파일에서 2개의 JS파일이 필요하다 생각해보자. 이 경우 script 태그를 2개 사용하면 된다. 그런데 위와 같이 불러온 JS파일 두 개가 모두 같은 이름의 변수를 사용한다 생각해보자. console.log에 찍히는 num은 어떤 JS파일의 num이 될까? script태그는 위와 같이 코드의 예상치 못한 충돌을 발생시킬 수 있다. //a.js const num = 1; export default num; //b.js const num = 2; export default num; 이러한 충돌문..
nest-cli를 window 내의 vscode powershell 환경에서 사용하였더니 위와 같은 오류가 발생하였다. 이럴 때는 다음과 같이 진행해보자 1. 관리자 권한으로 PowerShell 실행하기 2. Set-ExecutionPolicy RemoteSigned 입력 > Y 이후 Get-ExecutionPolicy를 입력하여 정책이 RemoteSigned로 바뀌었다면 성공이다!
React를 AWS S3에 배포하기 위해선 프로젝트를 빌드하고 해당 S3 빌드파일을 올리는 작업을 해주어야 한다. 하지만 AWS CodeBuild를 이용하면 Git 저장소의 코드가 바뀌면 자동으로 빌드되어 S3에 재배포할 수 있다! version: 0.1 phases: pre_build: commands: - echo Installing source NPM dependencies... - npm install - npm install --save --legacy-peer-deps build: commands: - echo Build started on `date` - npm run build post_build: commands: - aws s3 cp --recursive --acl public-read..
문자열의 각 문자에 접근하는 방법은 charAt과 숫자 인덱스가 있다. 두 방법은 별 차이가 없어 보이지만 빈문자를 접근할 때 차이가 발생한다. 프로그래머스 JadenCase 문제를 풀어보자. JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. "3people unFollowed me" -> "3people Unfollowed Me" const str = " "; const words = str.toLowerCase().split(' '); //words = ['', '']; 먼저 문자를 단어별로 분류하기 위해 공백 기준으로 split해보자. 이 ..
multer는 form-data를 다루기 위한 node.js 미들웨어이다. multer로 서버에 파일 업로드를 구현해보자. const multer = require('multer'); const path = require('path'); const upload = multer({ storage: multer.diskStorage({ destination(req, file, cb) { cb(null, 'uploads/'); }, filename(req, file, cb) { const ext = path.extname(file.originalname); cb(null, path.basename(file.originalname, ext) + Date.now() + ext); }, }), limits: { f..
2020년도 전 세계의 프론트엔드 개발자 4500명을 대상으로한 설문에 의하면 3년 안에 사라질 것 같은 솔루션 1위로 Redux가 뽑혔다. 조사에 의하면 이미 상태 관리를 위해 React Context API 및 Hooks를 사용하는 비율이 Redux를 추월하였다. 앞으로 React의 상태관리는 Context API로 대체되는 것일까? 이러한 상황에서 2020년 5월 FaceBook에서 Recoil이라는 상태관리 솔루션을 발표하였다. Recoil을 한 번 사용해보자. 내가 Recoil로 만들 것은 버튼을 누르면 카운트가 증가하거나 감소 혹은 0으로 리셋되는 간단한 카운터이다. 1. 초기 세팅 import React from 'react'; import { RecoilRoot } from 'recoil'..
무방향 그래프의 한 정점(start)에서 다른 정점(end)까지 최단거리를 찾는 함수를 작성하세요. 입출력 예시 let num = 4; let edges = [ [1, 2, 6], [1, 3, 2], [2, 3, 3], [2, 4, 1], [3, 4, 5], ]; let start = 1; let end = 4; Dijkstra(num, edges, start, end); // 6 (1 - 3 - 2 - 4) 그래프에서 노드 간의 최단 경로를 찾는 대표적인 알고리즘 중 하나가 다익스트라 알고리즘이다. 위 문제를 다익스트라 알고리즘을 통해 풀어보자. 우선 다익스트라 알고리즘은 다음과 같은 순서로 진행된다. 시작점과 모든 노드와의 거리(비용)를 기록한다. 시작점과 연결된 모든 노드 중 가장 최단거리인 노드(..