FS_hansol

[알고리즘과 자료구조를 배우는 이유]1. 문제 해결의 틀을 제공해준다=> 데이터를 효율적으로 저장하고 관리해야 프로그램이 느려지지 않고 메모리 낭비 없이 동작한다.2. 코딩테스트 필수=> 제한된 시간 안에 큰 입력을 처리하려면 적절한 자료구조와 알고리즘을 선택해 최적화해야 합격 가능성이 높아진다. 1. 자료구조(Data Structure)데이터를 효율적으로 저장·조회·갱신하기 위한 “틀”(컨테이너) 검색이 잦으면 → 조회가 빠른 DS삽입·삭제 잦으면 → 그 연산을 빠르게 지원하는 DS메모리 사용량도 고려해 선택 자료구조의 종류 배열(Array)메모리에 연속 저장연산 비용:인덱스 접근: O(1)삽입·삭제(끝 제외): O(n)사용 예시:고정 크기 데이터 저장, 순차적 순회가 많을 때 적합// 배열 생성 및..

아이디 찾기, 비밀번호 재설정, 회원가입처럼 실제로 다른 페이지(또는 라우트)로 이동하는 경우 → (또는 Next.js의 )모달 팝업 열기, 폼 제출, 로그인/로그아웃 처리 등 실제 자바스크립트 로직을 실행해야 할 때 →

src/├─ app/│ ├─ auth/│ │ ├─ page.tsx│ │ └─ layout.tsx│ └─ product/│ └─ page.tsx├─ features/│ ├─ auth/│ │ ├─ action/auth.action.ts│ │ ├─ model/auth.model.ts│ │ └─ ui/│ │ ├─ AuthLoginForm.tsx│ │ └─ hooks/use-auth-form.ts│ └─ product/│ ├─ action/product.action.ts│ ├─ model/product.model.ts│ └─ ui/│ └─ ProductList.tsx├─ entities/│ └─ user.ts└─ shared/ ..

* Pages Router: 기존 방식. pages/ 폴더 사용.* App Router: 최신 방식. app/ 폴더 사용. Next.js 13부터 도입  차이점 명확하게 구분하기항목Pages Router (pages/)App Router (app/)폴더 구조/pages/about.tsx/app/about/page.tsx레이아웃 지원 안 됨 (Layout 따로 관리)Layout 중첩 가능서버 컴포넌트 클라이언트 컴포넌트만 가능Server Component 기본데이터 패칭 방식getServerSideProps, getStaticProps서버 컴포넌트에서 직접 fetch 가능중첩 라우팅 불편폴더로 깔끔하게 지원Server Actions 사용 불가 App Router 전용 기능 // Pages Router 예시..

1. HTML, CSS, JavaScript 기본 - HTML웹페이지의 뼈대를 만드는 언어입니다. 안녕하세요! 이것은 기본 HTML 예시입니다. - CSSHTML로 만든 뼈대에 스타일을 입혀주는 언어입니다.body { background-color: #f0f0f0; font-family: Arial, sans-serif;}h1 { color: blue;} - JavaScript웹 페이지에 생동감을 넣어주는 언어입니다. 사용자와의 상호작용, 데이터 처리 등을 담당합니다.// 버튼을 클릭하면 메시지를 보여주는 예시document.addEventListener("DOMContentLoaded", () => { const btn = document.createElement("button"); btn..

1. 시맨틱 태그란?시맨틱 태그는 HTML5에서 도입된 요소들로, 단순히 콘텐츠를 감싸는 용도(div나 span과 달리)가 아니라 문서 내 각 영역의 의미와 역할을 명확하게 나타내기 위해 사용됩니다.이렇게 명시적으로 의미를 부여하면, 개발자뿐 아니라 검색엔진이나 보조 기술(스크린 리더 등)이 문서의 구조를 쉽게 이해할 수 있습니다.2. 시맨틱 태그 사용의 목적문서 구조의 명료화코드 작성 시 각 영역의 역할(머리글, 내비게이션, 본문, 부가 정보, 바닥글 등)을 명확하게 분리하여 유지보수와 협업을 용이하게 합니다.검색엔진 최적화(SEO)검색엔진이 문서의 핵심 콘텐츠와 부가 콘텐츠를 구분하여 보다 정확한 인덱싱 및 결과를 제공할 수 있습니다.웹 접근성 향상보조 기술이 시맨틱 태그를 기반으로 콘텐츠의 흐름을 ..

https://ui.shadcn.com/ Build your component library - shadcn/uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.ui.shadcn.com샤드씨엔은 매우 간편한 라이브버리로, 위 공식문서에 나와있는대로 세팅하면 됩니다.지난 인턴생활하면서 가장 많이 활용한 라이브러리인데, 정리를 해볼까 합니다.React vite typescript 기반 개발을 할 때에 ui요소 중 Input, Button, Form, FormItem등 사용해봤지만 재미있던 건 Ac..

❓ 리액트는 왜 파일 기반 라우팅을 지양할까?타입 안정성명시적으로 라우트 트리를 정의하면 TypeScript와의 통합이 훨씬 수월해집니다. 각 라우트에 대해 명확한 타입 정보를 제공할 수 있어, 잘못된 경로나 컴포넌트 참조로 인한 런타임 오류를 예방할 수 있습니다.구조적 명시파일 기반 라우팅은 폴더 및 파일 구조에 의존하지만, 명시적인 라우트 정의는 라우팅 계층 구조와 레이아웃을 한눈에 파악할 수 있도록 도와줍니다. 이를 통해 복잡한 중첩 라우팅이나 에러 처리 로직 등을 체계적으로 관리할 수 있습니다.유연한 구성라우터를 코드 상에서 직접 관리하면 라우트 간의 복잡한 관계나 동적 라우팅, 권한 체크 등 추가 로직을 쉽게 삽입하고 유연하게 대처할 수 있습니다. ❓ 그럼에도 불구하고 탄스택리액트라우터를 사용하..

함수가 자기 자신을 부르는 방식입니다. 여기에서 중요한 건 언제 멈출지(기저사례)와 계속 부를지(재귀 사례)를 정하는 것입니다. - 팩토리얼4!factorial(4) = 4 * factorial(3) = 4 * (3 * factorial(2)) = 4 * (3 * (2 * factorial(1))) = 4 * (3 * (2 * 1))- 피보나치 수열앞 두 숫자의 합으로 다음 숫자가 결정됩니다.예: 0, 1, 1, 2, 3, 5, 8, ...

* 시간복잡도알고리즘이 문제를 풀 때 입력 데이터의 양이 늘어나면 실행시간이 얼마나 늘어나는지 나타내는 척도입니다.예를들어 배열의 모든 요소를 하나씩 확인하는 알고리즘은 데이터가 두 배가 되면 실행시간도 거의 두 배로 늘어납니다. 이를 O(n)이라고 표현합니다. 반면에, 이진 탐색처럼 데이터를 반씩 줄여가며 찾는 알고리즘은 데이터가 두 배가 되어도 실행 시간이 크게 늘어나지 않아서 O(logn)이라고 표현합니다.즉 시간복잡도는 입력이 커질 때 얼마나 효율적으로 동작하는지를 숫자와 기호로 표현한 것이라고 생각하면됩니다. 1. 정렬 알고리즘- 버블정렬 => 시간 복잡도: O(n²)인접한 두 숫자를 서로 바꿔가며 순서대로 정렬합니다. 데이터가 많으면 속도가 느릴 수 있습니다.  - 병합 정렬 => 시간 복잡도..