본문 바로가기

전체 글177

[JS] 코딩 테스트 문제 : 동전 교환 [배낭(KnapSack) 알고리즘] 문제 : 동전 교환(냅색 알고리즘)문제 설명다음과 같이 여러 단위의 동전들이 주어져 있을때 거스름돈을 가장 적은 수의 동전으로 교환해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. ▣ 입력설명첫 번째 줄에는 동전의 종류개수 N(1각 동전의 종류는 100원을 넘지 않는다. ▣ 출력설명첫 번째 줄에 거슬러 줄 동전의 최소개수를 출력한다. ▣ 입력예제 131 2 515 ▣ 출력예제 13설명 : 5 5 5 동전 3개로 거슬러 줄 수 있다.오답 노트function solution(m, coin) { let answer = 0; let answerArr = []; sortArr = coin.sort((a, b) => b - a); for (const c of sortArr).. 2024. 5. 29.
[JS] 코딩 테스트 문제 : 계단오르기 [동적계획] 문제 : 계단오르기문제 설명철수는 계단을 오를 때 한 번에 한 계단 또는 두 계단씩 올라간다. 만약 총 4계단을 오른다면 그 방법의 수는 1+1+1+1, 1+1+2, 1+2+1, 2+1+1, 2+2 로 5가지이다. 그렇다면 총 N계단일 때 철수가 올라갈 수 있는 방법의 수는 몇 가지인가? ▣ 입력설명첫째 줄은 계단의 개수인 자연수 N(3≤N≤45)이 주어집니다. ▣ 출력설명첫 번째 줄에 올라가는 방법의 수를 출력합니다. ### **▣ 입력예제 1** 7 ▣ 출력예제 121내코드// BFS 활용 방식// 아래 방식의 단점은 중복된 계산을 반복할 수 있습니다.function solution(n) { let answer = 0; const steps = [1, 2]; let que =.. 2024. 5. 22.
[JS] 코딩테스트 문제 : 섬나라 아일랜드 [BFS] 문제 : 섬나라 아일랜드(BFS 활용)문제 설명N*N의 섬나라 아일랜드의 지도가 격자판의 정보로 주어집니다. 각 섬은 1로 표시되어 상하좌우와 대각선으로 연결되어 있으며, 0은 바다입니다. 섬나라 아일랜드에 몇 개의 섬이 있는지 구하는 프로그램을 작성하세요. 1 1 0 0 0 1 00 1 1 0 1 1 00 1 0 0 0 0 00 0 0 1 0 1 11 1 0 1 1 0 01 0 0 0 1 0 01 0 1 0 1 0 0 만약 위와 같다면 ▣ 입력설명첫 번째 줄에 자연수 N(3두 번째 줄부터 격자판 정보가 주어진다. ▣ 출력설명첫 번째 줄에 섬의 개수를 출력한다. ▣ 입력예제 17 1 1 0 0 0 1 00 1 1 .. 2024. 5. 17.
[next 14 공식문서 부시기] 3.3 데이터 가져오기 패턴 서버에서 데이터 가져오기Server Components 를 사용하여 서버에서 데이터를 가져오는 것을 추천하며 다음과 같은 장점을 가지고 있습니다.백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스할 수 있습니다.액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 유지가능동일한 환경에서 data fetch 및 render 과정이 통합 되므로 클라이언트와 서버 간의 불필요한 통신은 줄고 물론 브라우저의 메인스레드 작업도 감소합니다.한 요청에 대한 다수클라이언트에서 여러 개별 요청을 수행하는 대신 단일 왕복으로 여러 데이터 가져오기를 수행합니다.Fetching data where it's needed 트리의 여러 components 에서 동일한 .. 2024. 5. 12.
9. Tailwind CSS 주요 클래스 내용과 문법(layout) Layout 관련Containercontainer 클래스는 현재 breakpoint 의 최소 너비와 일치하도록 요소의 최대 너비를 설정하는 클래스입니다.Breakpoint 에 따른 최대 너비Breakpoint (min-width)기존 css 속성Nonewidth: 100%;sm (640px)max-width: 640px;lg (1024px)max-width: 1024px;가운데 정렬 컨테이너Tailwind의 컨테이너는 자동으로 중앙에 위치하지 않습니다.mx-auto : margin-left: auto; margin-right: auto; Columns요소 내의 콘텐츠를 구분 하는 열 수를 설정tailwind 문법 및 실제 css 예시tailwind 클래스기존 css 속성columns-1column.. 2024. 5. 9.
8. Tailwind CSS 기본 설정과 옵션 - 2 설정 옵션presetspresets 섹션을 사용하면 Tailwind의 기본 설정을 사용하는 대신 사용자 정의 기본 설정을 지정할 수 있습니다.// tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { presets: [ require('@acmecorp/base-tailwind-config') ], ...}prefixprefix 옵션을 사용하면 Tailwind에서 생성된 모든 유틸리티 클래스에 맞춤 접두사를 추가할 수 있습니다. 이는 이름 충돌이 발생할 수 있는 기존 CSS 위에 Tailwind를 계층화할 때 유용할 수 있습니다.※ 사용자 정의 클래스에는 접두사가 추가되지 않습니다./** @type {im.. 2024. 5. 8.
7. Tailwind CSS 기본 설정과 옵션 - 1 tailwind 기본 설정기본적으로 Tailwind는 프로젝트 루트에서 tailwind.config.js 파일에 내용을 참고해 사용자 정의된 내용을 적용합니다.기본 설치npx tailwindcss init기본 설정 파일(tailwind.config.js) 구조/* tailwind.config.js */module.exports = { content: [...], theme: { ... extend: { ... }, }, plugins: [...],}ESM 설정 및 설치기본적으로 설치 시 프로젝트가 ES 모듈인지 감지하여 올바른 구성 파일을 자동으로 생성합니다.다만 --esm 플래그를 사용하여 ESM 구성 파일을 명시적으로 생성할 수도 있습니다.npx tailwindcss .. 2024. 5. 6.
6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수 임의의 값(Arbitrary values) 사용Tailwind의 대괄호 표기법을 사용하여 임의의 값으로 즉석에서 클래스를 생성할 수 있습니다. 배경색, 글꼴 크기, 의사 요소 콘텐츠 등을 포함하여 프레임워크의 모든 유틸리티 클래스에 적용할 수 있습니다. {#each items as item} {item} {/each} ......임의의 값 모호함 해결(Resolving ambiguities)Tailwind의 많은 유틸리티는 text-lg 와 text-black 와 같이 text- 네임스페이스를 공유하지만 하나는 글꼴 크기용이고 다른 하나는 색상용으로 구분되어 사용됩니다.임의의 값을 사용하는 경우 Tailwind는 일반적으로 전달한 값에.. 2024. 5. 4.
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일 설명Tailwind에는 다크 모드가 활성화되었을 때 사이트를 다르게 스타일링할 수 있는 dark 키워드를 사용할 수 있습니다. 기본적으로는 Prefers-color-scheme CSS 미디어 기능을 사용하지만 selector 방식을 사용해 수동으로 전환 가능합니다.prefers-color-scheme CSS 미디어 쿼리사용자가 어떤 테마를 선호하는지 감지할 수 있는 CSS 기능입니다. 이 쿼리는 사용자가 시스템 설정에서 밝은(light) 또는 어두운(dark) 테마를 선택했는지 여부를 확인하여 스타일을 적용 할 수 있습니다./* 다크 테마에 대한 스타일 */@media (prefers-color-scheme: dark) { body { background-color: #000000; /* 어두운 .. 2024. 4. 30.
4. Tailwind CSS 반응형 디자인 설명반응형 utility class 를 사용하여 반응형 사용자 인터페이스를 구축할 수 있습니다. Tailwind의 모든 utility class는 다양한 breakpoint에서 조건부로 적용될 수 있으므로 복잡한 반응형 인터페이스를 쉽게 구축할 수 있습니다.Breakpoint 종류   중단점      최소 넓이   CSSsm640px@media (min-width: 640px){ ... }md768px@media (min-width: 768px){ ... }lg1024px@media (min-width: 1024px) { ... }xl1280px@media (min-width: 1280px) { ... }2xl1536px@media (min-width: 1536px) { ... }사용 예시mobile f.. 2024. 4. 29.
3. Tailwind CSS 의사 클래스(Pesudo classes), 의사 요소(Pesudo elements) Tailwind CSS 선택자 Tailwind CSS 의 모든 유틸리티 클래스는 대상으로 삼으려는 조건을 설명하는 선택자를 클래스 이름 시작 부분에 추가하여 조건부로 적용할 수 있습니다. 의사 클래스 (Pseudo-classes) - :hover, :focus, :first-child, :required, ...etc의사 요소 (Pseudo-elements) - ::before, ::after, ::placeholder, ::selection, ...etc미디어 및 기능 쿼리 (Media and feature queries) - responsive breakpoints, dark mode, prefers-reduced-motion, ...etc속성 선택자 (Attribute selectors) - [di.. 2024. 4. 28.
2. Tailwind CSS 이해와 의의 Tailwind CSS의 이해 Tailwind CSS 는 미리 생성된 클래스를 HTML에 요소의 스타일을 지정하는 방식으로, 제한된 기본 유틸리티 클래스들로 복잡한 컴포넌트를 구축합니다.일반적인 스타일 적용 방식 스타일을 적용하는 다양한 방식이 존재하지만 기본적인 CSS 를 사용하는 문법이나 구조를 크게 벗어나지 않는다. 맞춤형 디자인에 맞춤형 CSS 가 존재할 수 밖에 없는 상황이다.  ChitChat You have a new message! Tailwind CSS 스타일 적용 방식 Tailwind CSS를 사용하면 기존 클래스를 HTML에 직접 적용하여 요소의 스타일을 지정할 수 있습니다. CSS 를 작성하지 않고 유틸리티 클래스를 사용하여 맞춤형 디자인을 구축할 수 .. 2024. 4. 28.

티스토리툴바