전체 글 썸네일형 리스트형 [JavaScript] 10. JavaScript 중간 정리 관련 JavaScript 글https://kyr5191.tistory.com/34 [JavaScript] 5. JavaScript 배경JS는 2023년 기준 프론트 엔드 개발자라면 무조건 알고 있어야 하는 언어입니다. HTML, CSS 와 더불어 웹에서 동작 가능한 유일한 프로그래밍 언어이기 때문입니다. 흔히 웹 개발 3 대장이라고 하는 Hkyr5191.tistory.com 자바스크립트의 탄생과 표준화탄생 배경: 1995년 브렌던 아이크가 개발한 자바스크립트는 웹페이지의 보조 기능을 수행하기 위해 넷스케이프 내비게이터에 탑재되었다. 초기 이름은 모카(Mocha)였고, 이후 라이브스크립트(LiveScript)를 거쳐 자바스크립트(JavaScript)로 명명.표준화 필요성: 브라우저 간 호환성 문제(크로스.. 더보기 [ERROR] 타입스크립트와 App 라우터 문제 개요Next.js 프로젝트에서 App Router (/app 폴더)를 사용하는 동적 경로([id]) 페이지에서, params에 대한 타입 오류가 발생했습니다. 이 오류는 타입스크립트가 params를 비동기적(Promise)으로 처리하려고 시도하지만, 실제로는 일반 객체로 처리되고 있어 발생한 문제입니다. 문제 원인1. App Router와 동적 경로Next.js 13 이상에서 App Router는 /pages 대신 /app 디렉토리를 사용하여 서버와 클라이언트의 렌더링을 분리하고, params를 각 페이지 컴포넌트의 인자로 전달합니다. 이 params는 동적 경로에서 사용되며, Next.js는 이를 통해 URL 파라미터를 처리합니다.2. 타입스크립트의 타입 추론 문제타입스크립트는 params 객체를.. 더보기 네비게이션바 넥스트의 내장 컴포넌트 link를 통해 네비게이션 바 사용 가능import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter } from "next/router";export default function App({ Component, pageProps }: AppProps) { const router = useRouter(); const onClickButton = () => { router.push("/test"); }; return ( index book &n.. 더보기 next 쿼리스트링과 상세 페이지 next 내에서 쿼리 스트링 데이터를 사용하려면?/newpost/?type=postimport { useRouter } from "next/router"; import { useRouter } from "next/router";export default function Page() { const router = useRouter(); console.log(router); return Search1;}router는 다양한 데이터를 가지고 있고 쿼리스트링또한 query 라는 형태로 저장합니다import { useRouter } from "next/router";export default function Page() { const router = useRouter(); const { q } = rou.. 더보기 테스트 케이스 연습 export const pick = ( obj: T, ...propNames: K[]): Pick => { const result = {} as Pick; propNames.forEach((key) => { if (key in obj) { result[key] = obj[key]; } else { throw new Error( `Property "${String(key)}" does not exist on the object.` ); } }); return result;};T는 Object 타입, K는 객체의 key pick(객체, 'key1', 'key2', ...); type Pick = { [P in K]: T[P];};K에 속.. 더보기 가상 dom과 리액트 파이버 dom과 브라우저 렌더링 과정 1. 브라우저가 유저가 요청한 html 파일을 방문하여 다운받음2. 브라우저의 렌더링 머신을 html을 파싱하여 dom 노드로 구성된 트리를 만든다3. 유저는 웹 브라우저로 url을 입력하면 브라우저는 해당 서버로 http 요청을 보냄서버는 html 파일과 함께 css js 이미지 등의 리소스를 반환함 그러면 브라우저는 서버에서 html 파일을 다운 받고 그 다음에 css js 이미지 등을 다운 받음 이 과정을 거친 후 브라우저에서 받은 html 파일을 파싱하여 dom을 생성파싱은 데이터 등에서 필요한 내용만 추출하는걸 의미하고dom은 문서의 구조를 표현하는 일종의 틀 그러니까 웹 사이트의 구조 라고 생각하면 돼이때 브라우저가 html 태그를 읽으면서 태그들을 객체(노드).. 더보기 JSX 기초 JSX란 무엇인가?JSX는 JavaScript에서 XML과 유사한 구문을 사용하여 React 컴포넌트를 작성하는 방식입니다. JSX는 JavaScript와 HTML의 장점을 결합하여 UI를 보다 직관적으로 구성할 수 있게 해줍니다. React는 이를 JavaScript로 변환하여 렌더링합니다.1. JSXElementJSXElement는 HTML 태그와 비슷한 구조를 가지며, React 컴포넌트에서 화면 요소를 표현하는 데 사용됩니다. 커스텀 컴포넌트를 정의할 때는 이름이 대문자로 시작해야 인식됩니다.JSXOpeningElement: 컴포넌트의 시작 태그 JSXClosingElement: 컴포넌트의 종료 태그 JSXSelfClosingElement: 내용 없이 닫히는 태그 JSXFragment: 여러 컴포.. 더보기 우선순위 큐 데이터를 우선 순위에 따라 처리하고 싶을 때 사용한다 물건 데이터를 자료구조에 넣었다가 가치가 높은 물건부터 꺼내서 확인할때 사용 자료구조스택, 큐, 우선순위 큐 스택 : 가장 나중에 삽입된 데이터큐: 가장 먼저 삽입된 데이터우선순위 큐 : 가장 우선순위가 높은 데이터 우선순위 큐를 구현하는 방법단순히 리스트를 이용해서 구현힙을 이용해서 구현 삽입은 리스트가 빠르지만 삭제할때는 우선순위가 높은 데이터를 찾아야 함으로 리스트 전부를 찾아야하기에 O(N)의 시간 복잡도를 가집니다단수히 N개의 데이터를 힙에 넣었다 빼도 정렬한 것과 동일한 효과(힙 정렬)힙은 완전 이진 트리 구조힙은 항상 루트 노드를 제거한다 데이터를 넣을 때 트리 구조로 넣고데이터를 꺼낼 때 루트 위치에 있는 데이터를 꺼낸다 최소 힙 - .. 더보기 이전 1 2 3 4 ··· 12 다음
