실전 압축 코딩

React.js로 컴포넌트를 만들어 배포한적이 있었다https://ljy1011.tistory.com/182 React 컴포넌트 Npm에 배포하기 (with TS)react 로 만든 컴포넌트를 npm 사이트에 배포해 보자! (typescript 적용) https://www.npmjs.com/package/react-divided-progress-bar react-divided-progress-bar A progress-bar which has divided section based on React.js. Latest version: 0.1.7, lljy1011.tistory.com 당시 야심차게 만들었던 progress bar 컴포넌트 였다. 프로젝트 진행중 progress bar가 divide 된 ui..

https://velog.io/@dh1010a/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EB%B0%B0%EB%82%AD%EB%AC%B8%EC%A0%9C-Knapsack-Problem 알고리즘 - 배낭문제(Knapsack Problem)배낭 문제는 n개의 물건과 각 물건 무게 Weight와 가치 Value가 주어지고, 배낭의 용량이 K일 때, 배낭용량을 초과하지 않고 담을 수 있는 물건의 최대 가치를 찾는 문제이다. 각 물건은 하나씩만 존velog.io  1. 각 dp 배열은 이차원 배열로 선언 한다. dp[ 용량 ][ 각 물건의 무게 ] = 가치 2. 이차원 배열을 돌린다. 무게 0 ~ , 각 물건의 무게 0 ~ 3.  d[ 용량 ] [ 현재 물건의 무게 ] = Math.max..

https://school.programmers.co.kr/learn/courses/30/lessons/258705 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 알고리즘: DP + 타일링 작년 겨울에 실제로 응시 했던 카카오 겨울 인턴쉽 문제 이다..당시 다른 문제들은 풀거나, 풀지 못해도 부분 점수라도 얻었었는데, 시간의 압박 때문인지 아님 타일링 알고리즘 자체가 많이 낯설었는지 손도 못댔던 문제이다. ( 타일링 알고리즘은 해당 문제를 풀면서 알게 되었다..) 하지만, 집중력을 가지고 다시 풀어보니, 생각보다 할만했던 문제 였던거 같다.풀이이 문제에서의 ..

- 누적합 계산시[0,0] 에서 [x,y] 까지 구한다 -> sum[x][y] = sum[x-1][y] + sum[x][y-1] - sum[x-1][y-1] (중복된 영역)  - 구간합을 구할때 ->[x1,y1] 에서 [x2, y2] 까지 = OD(sum[x2][y2]) - OB(sum[x1-1][y2]) - OC(sum[x2][y1-1]) + OA(sum[x1-1][y1-1])(중복된 영역)

1. Typescript는 무엇이며 왜 사용해야 하는가ts는 js의 superset 이다. -> js 기반으로 만들어짐. -> js의 새로운 기능을 추가단점: ts는 브라우저가 모름. ts는 프로그래밍 언어이자 도구이다. compile시 js로 변환개발자가 스크립트 실행 전 미리 코드 오류 확인-> 컴파일 단계에서 런타임 환경에서의 오류를 사전에 잡아 준다. - 문법! ->  반드시 요소를 찾아낸다 not nullhttps://velog.io/@jinyoung985/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EB%8A%90%EB%82%8C%ED%91%9C velog velog.io..

몇달전 애정있게 진행한 프로젝트를 지속적으로 개선하다가, lighthouse를 통해 보다 객관적인 성능 향상을 시도해 보기로 했다. 실수로 버전으로 테스트를 해 스코어가 지나치게 낮게 나왔다. 버전은 60점 정도가 나왔다. 일단은 빨간불이 들어온 부분부터 점차 개선하기로 했다. 1. Serve image in next-gen formats 이미지 파일의 확장자를 변경하도록 하자 . jpg -> . webp 파일로 변환 2. animated 요소를 element로 변경하기 .git 파일을 .webm 확장자로 변경 후 video element로 재생하도록 하였다. 전) 후) autoplay loop 속성은 해당 파일이 반복적으로 재생하도록 한다. 3. 웹폰트 로드 중에 텍스트가 계속 표시 되도록 하기 htt..

https://ts2ree.tistory.com/332?category=400689 Base64 인코딩 유니코드의 등장 배경 아스키코드가 영문 알파벳을 사용하는 대표적인 문자 인코딩이라면, 유니코드는 전 세계의 모든 문자를 표현할 수 있는 산업 표준이다. 좀 더 자세히 차이점을 알아보자 1 ts2ree.tistory.com Base64로 인코딩할 때는, 먼저 해당 문자열을 바이트 문자열로 변환한다. (utf-8 인코딩 사용) 이 바이트 문자열은 이미 이진 데이터이므로, 따로 이진수로 변환하지 않는다. 그 다음, 이 바이트 문자열을 Base64 인코딩 알고리즘에 따라 텍스트로 변환한다. (ACS2)

https://school.programmers.co.kr/learn/courses/30/lessons/72415?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘: 구현 + 비트마스킹 + bfs 분명 옛날에 풀었던 문제였는데 다시 푸느라 애먹었다... 최근 구현 + 그래프 탐색 문제를 많이 연습하고 싶었는데, 괜찮은 문제였던거 같다. 풀이 1. 한 턴이 지날수록 소모되는 cost는 똑같이 1이다. 즉, bfs를 통해 한 지점에서 행동할 수 있는 모든 경우의 수를 탐색한뒤, 모든 카드가 뒤집어 지면 함수를 종료하고..

REST API란? REST 원칙을 적용하여 서비스 API를 설계한 것을 말합니다. REST란 무엇인가? 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것입니다. HTTP URI를 통해 자원을 명시하고 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것을 말합니다. 즉, 자원 기반의 구조 설계의 중심에 자원이 있고, HTTP 메서드를 통해 이를 처리합니다. API란 무엇인가? 응용프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스입니다. 쉽게 말해 프로그램끼리 통신할 수 있도록 하는 중재자입니다. ⚙️ REST REpresentational State Transfer의 약자로 전반..

https://developer.chrome.com/ko/docs/lighthouse/performance/font-display/ 웹폰트 로드 중에 텍스트가 계속 표시되도록 하기 - Chrome for Developers 글꼴 표시 API를 사용하여 웹 페이지 텍스트가 사용자에게 항상 표시되도록 하는 방법을 알아보세요. developer.chrome.com 보이지 않는 텍스트가 표시되지 않도록 하는 방법 사용자 정의 글꼴이 로드되는 동안 보이지 않는 텍스트가 표시되지 않도록 하는 가장 쉬운 방법은 시스템 글꼴을 일시적으로 표시하는 것입니다. @font-face 스타일에 font-display: swap을 포함하면 대부분의 최신 브라우저에서 FOIT를 피할 수 있습니다. @font-face { font-..