프로그래밍
[Softeer] lv2. 금고털이 풀이 / Javascript
[Softeer] lv2. 금고털이 풀이 / Javascript
2025.04.231. 문제루팡은 배낭을 하나 메고 은행금고에 들어왔다. 금고 안에는 값비싼 금, 은, 백금 등의 귀금속 덩어리가 잔뜩 들어있다. 배낭은 W ㎏까지 담을 수 있다. 각 금속의 무게와 무게당 가격이 주어졌을 때 배낭을 채울 수 있는 가장 값비싼 가격은 얼마인가? 루팡은 전동톱을 가지고 있으며 귀금속은 톱으로 자르면 잘려진 부분의 무게만큼 가치를 가진다.제약조건1 ≤ N ≤ 106인 정수1 ≤ W ≤ 104인 정수1 ≤ Mi, Pi ≤ 104인 정수입력형식첫 번째 줄에 배낭의 무게 W와 귀금속의 종류 N이 주어진다. i + 1 (1 ≤ i ≤ N)번째 줄에는 i번째 금속의 무게 Mi와 무게당 가격 Pi가 주어진다.출력형식첫 번째 줄에 배낭에 담을 수 있는 가장 비싼 가격을 출력하라.입력예제1100 2 90 1..
[Softeer] input값 읽기 Tip
[Softeer] input값 읽기 Tip
2025.04.231. 배경sorteer에서는 프로그래머스와 달리 input 값을 읽어와서 console.log()로 출력하는 요건이다.그래서 node.js 실무 코드 작성할 때 처럼 fs 모듈을 이용해서 읽어왔었음.const fs = require('fs');const input = fs.readFileSync('/dev/stdin', 'utf8');const inputs = input.trim().split('\n');const [first, ...args] = inputslet [w, n] = first.split(' ') 이렇게 풀이를 해오다 이슈가 발생함. 그건 바로 메모리 이슈. 256MB 제한에 걸려버림 2. 해결책Node.js의 readline을 써서 입력을 스트림으로 처리하면 메모리를 아낄 수 있음co..
[Next.js] 번역-Rendering Fundamentals
[Next.js] 번역-Rendering Fundamentals
2023.04.09이 포스팅은 Next.js v13의 Docs 중 Rendering Fundamentals 관련 부분을 번역하여 정리한 내용을 담고 있습니다. [Next.js] Rendering Fundamentals Rendering은 작성한 코드를 UI(User Interface)로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다. Rendering Environments application 코드를 렌더링할 수 있는 환경에는 client와 server 두 가지가 있습니다. client는 application 코드에 대한 요청을 서버에 보내는 사용자 디바..
[html/css] img 태그에 vertical-align RESET 필요한 이유
[html/css] img 태그에 vertical-align RESET 필요한 이유
2023.04.09[html/css] img 태그에 vertical-align RESET 필요한 이유 Problem 아래 예제 코드를 보면 알겠지만 이미지의 height 628p이다. 하지만 img를 감싸고 있는 div의 height는 633px으로 5px 만큼 더해진 문제가 있었다. 왜 그럴까? HTML 삽입 미리보기할 수 없는 소스 Why? 이를 알기 위해서는 몇가지 배경지식이 필요하다. 배경 지식 1: img의 display 기본값은 inline 이다. 배경 지식 2: inline 요소는 typography 규칙인 vertical-align 속성이 적용된다. 이제 아래 예시를 살펴보자. 자세히 살펴보면 img 요소와 p 요소 사이에 간격이 생긴다. 이는 vertical-align 속성의 기본값이 적용되었기 때문이다...
Humata.ai 업무 자동화를 위한 최고의 도구
Humata.ai 업무 자동화를 위한 최고의 도구
2023.04.09Humata.ai: 업무 자동화를 위한 최고의 도구 서비스 웹 url: https://www.humata.ai/ Humata - GPT for your files Humata is like GPT for your files. Ask AI anything about your data. Ask questions about your data and get answers powered by AI instantly. Learn, summarize, synthesize, and extract valuable data from your files 100X faster. www.humata.ai Humata.ai는 인공지능(AI) 기술을 활용하여 기업의 업무 프로세스를 자동화하고 효율적으로 운영할 수 있도록 지원하는 ..
Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음
Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음
2023.04.08Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음 웹페이지: https://simpleicons.org/ github: https://github.com/simple-icons/simple-icons 주요 기능 약 2444개의 유명 회사 및 제품들 아이콘을 SVG로 제공 SVG, PDF 확장자 선택해서 다운로드 가능 아이콘 클릭시 svg 인라인 코드 텍스트 복사됨 코드에서 사용할 때 JSDelivr or Unpkg 과 같은 CDN으로 사용 가능 npm 패키지로도 제공: simple-icons [ICON SLUG]는 slug 참고해서 치환하면 됨. 예를 들어 CDN with colors CDN 서비스는 colors 기능도 있음. 여기서 [COLOR]는 option이며 사용하려는 아이콘의 he..
[React Query] v4 버전 달라진 점 (릴리즈 노트 정리)
[React Query] v4 버전 달라진 점 (릴리즈 노트 정리)
2023.03.31[React Query] v4 버전 릴리즈 노트 정리 React Query가 v4 버전으로 업데이트되었다. 회사 프로젝트에서도 v4로(v3.39.2 → 4.24.6) 마이그레이션 하게 되었는데, 그 과정에서 달라진 점을 정리해 보았다. Codemod 마이그레이션을 도와주는 Codemod 가 있음 The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly! Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output. js..
[html/css] flex와 z-index
[html/css] flex와 z-index
2023.03.31flex와 z-index 배경 회사 동료 코드 리뷰 중 flex 요소의 자식의 경우 z-index가 동작하는 걸 발견함. 내가 알고 있는 상식과 달라 조사를 해봄. 예시: https://codepen.io/nuhends/pen/eYLOVaO?editors=1100 조사 및 결과 내가 알고 있는 상식은 어떤 요소에 z-index를 줬을 때 쌓임 맥락이 형성되려면 position속성의 값이 static(기본값)이 아니어야 한다. 그런데 flex 요소의 자식은 왜 동작할까? w3의 flex items 스펙을 살펴보자. Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is use..
[React Query] 전역 상태로 사용하기
[React Query] 전역 상태로 사용하기
2023.03.31[React Query] 전역 상태로 사용하기 React Query를 Redux처럼 전역상태관리 용도로 사용할 수 있다. HOW? 상위 레벨 컴포넌트에서 queryClient.setQueryData()로 데이터를 set하고, 해당 데이터가 필요한 (자식) 컴포넌트에서 queryClient.getQueryData()로 사용하면 된다. 예시 // QueryKey.ts: 쿼리키 상수화(프로젝트 정책에 따라) export const headersQueryKey = ["HeadersData"]; // index.tsx const queryClient = new QueryClient(); const reqHeaders = getRequestHeader(headers); queryClient.setQueryData(..
[html] img태그 에러 처리 방법
[html] img태그 에러 처리 방법
2022.11.08[html] img태그 default 이미지 적용하기 img 태그의 src 속성에 url이 존재하지 않거나 이상이 있는 경우, 빈 이미지가 노출 된다. 그 결과 ui가 ugly하게 보인다. 이럴 때 onError 이벤트를 사용할 경우 대처가 가능하다. 사용법 및 주의 사항 onError 이벤트는 url이 존재하지 않을 경우만 동작한다. url이 falsy value 일 경우, onError 이벤트는 동작하지 않는다. (ex: null, undefined, ‘’) const defaultImagePath = 'https://via.placeholder.com/300/09f.png'; // sourceUrl이 falsy value 일 경우 동작하지 않기 때문에 // defaultThumbImagePath로 ..
[Next.js] 딥링크, Next/Link에서 이슈
[Next.js] 딥링크, Next/Link에서 이슈
2022.10.31이슈 import Link from 'next/link'; // 버튼 컴포넌트 지금 바로 쿠폰 확인하기 아래와 같이 // → / 로 바뀌어서, 렌더링되어 링크 동작을 하지 않음. 원인 Next/Link 패키지를 까보자. // node_modules/next/dist/client/link.js: Link 컴포넌트 패키지 const { href , as } = _react.default.useMemo(()=>{ const [resolvedHref, resolvedAs] = (0, _router).resolveHref(router, hrefProp, true); return { href: resolvedHref, as: asProp ? (0, _router).resolveHref(router, asProp) ..
[Next.js] jest로 unit Test 하기
[Next.js] jest로 unit Test 하기
2022.10.311. jest란? 💡 Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! 출처: jest 공식 홈페이지 코드가 제대로 동작하는지 확인하는 Test case를 만드는 JS Testing Framework(페이스북이 개발)이다. 2. Setting up jest (with Rust Compiler) Next.js 12 버전부터 Next 내부에 Jest를 위한 설정이 built-in 되어 있다. 1. 패키지 설치 Jest를 셋업 하기 위해 jest, jest-environm..