의존성이 없는 객체는 생성 시 스스로 정해짐무기에 대한 선택 불가생성자 주입가장 일반적으로 사용되며 불변성 강조에 사용객체를 생성할 때 필요한 의존성을 명시적으로 전달하여무기에 대한 선택이 가능 ( 단, 무기는 객체 생성 시 필수로 전달 )코드의 가독성과 유지보수성을

svg 이용할때는 flutter_svg 라이브러리 사용리스트 한줄을 위해 미리 만들어진 위젯leading, title, subtitle, trailing 이용하여 UI 구성css에서 absolute, fixed 사용하듯이 flutter 에서는 Stack 과 Positi

super(): 부모 클래스의 생성자 호출일회성 UI 요소로 사용되며 상태가 바뀌어야할 때 기존 위젯을 제거하고 새롭게 위젯을 생성내부적으로 abstract 형식으로 Stateless 가 정의되어있음그래서 build 메소드의 경우 자식 클래스에서 재정의 해주어야함추상클

웹서버: 정적인 리소스를 제공하는 서버. 페이지(CSR, SSG), 이미지...웹어플리케이션서버: 동적인 리소스를 생성해 제공하는 서버. 페이지(SSR, ISR), DB, API...기본 제공 CI/CD 워크플로를 통해 웹 애플리케이션의 글로벌 배포와 호스팅을 지원하는

webp, AVIF 등의 차세대 형식으로 변환디바이스 사이즈에 맞는 이미지 불러오기레이지 로딩 적용블러 이미지 활용기타등등..이러한 작업을 Nextjs 에서는 Image 컴포넌트로 쉽게 구현 가능외부 서버에 보관된 이미지 사용하는 방식이라면 보안때문에 차단된 상태위 방

Parallel Route 병렬 라우트 하나의 화면안에 여러개의 페이지를 병렬로 함께 렌더링 @sidebar 와 같이 @ 붙은 형식을 Slot 이라 부름 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더 여기서 선언된 page.tsx 는 부모 layout.tsx 의

서버에서만 실행되는 비동기 함수를 브라우저가 직접 호출조금 더 간결하고 편리하게 서버측 동작을 정의하는데 적합브라우저에서 폼을 제출하면 서버 액션을 요청(요청 주소: 현재 브라우저 주소)하는 request 가 서버로 날라감서버 액션은 컴파일 결과 특정한 해시값을 갖는

Streaming 이란 강물, 하천을 의미하는 단어로 큰 데이터를 잘게 쪼개어 흐르듯이 보내주는걸 뜻함영상뿐만 아닌 웹 서비스에서도 사용할 수 있게 Next.js 에서 스트리밍 기능을 제공이전에는 페이지를 불러오는 과정에서 데이터 통신과 같은 시간이 다소 걸리는 작업이

필요한 컴포넌트에서 필요한 데이터를 불러오자중복 요청을 보내도 Request Memoization 으로 인해 한 번의 요청만 간다fetch 를 통한 API 요청 시 아래 이미지와 같이 동작한다no-store: 캐시 저장xforce-cache: 캐시 저장next:{rev

books/1/1 와 같은 중첩된 파라미터의 경우 ...id 형식으로 폴더 생성주의: books 경로와 같이 파라미터가 존재하지 않는 경우는 404 페이지 반환해결법: 옵셔널 캐치 올 세그먼트로 \[...id] 형식으로 폴더 생성Layout 의 경우 아래 이미지와 같이

프롬프트창 +버튼 > Knowledge가이드 라인으로 앞으로 모든 요청에 대해 아래 사항을 준수해달라고 설정Edit 버튼 클릭 시 DOM 요소를 선택할 수 있게되고, 해당 DOM 요소에 대해 프롬프트 입력하여 수정 가능Google AI Studio 의 System In

예시없이 요청하는 경우예시를 하나 제공하는 경우여러 예시를 제공하는 경우AI 가 자신의 사고 과정을 단계별로 설명하도록 요청하는 기법툴에서 생각중.. 이런 경우 추론 모델AI 가 해결해야 할 여러 개의 작은 하위 문제로 나누어 단계별로 요청하는 기법작업과 관련된 최대한

<div> 와 <span> 는 요소에 아무런 의미가 없음사이트에 <div> 와 <span> 이 많다는 것은 적절하게 작성하고 있지 않다는 것다른 적절한 HTML 요소를 사용할 수 없을 때 마지막으로 선택하는 태그임<header>도입부, 헤딩,

우리가 서점에 가서 책의 목차를 보고 관심있는 주제가 있으면 구매하듯이검색 엔진도 마찬가지로 사이트의 heading 이 얼마나 잘 정리되어 있는지 판단화면 낭독기 사용자도 웹 문서에서 heading 만 따로 추려서 음성으로 받은 다음에 관심있는 영역으로 이동해서 해당

분류Metadata 콘텐츠작성법본문을 가장 잘 설명하는 키워드 중심으로 작성하며페이지마다 구체적이고 고유한 키워드 사용.반복하는 키워드는 최소화하며 구체적인 키워드를 앞으로 배치구분자구분자는 대시(-), 파이프(|), 콜론(:) 을 추천언더바(\_)는 인접 키워드를 하

기존에 w3c 에서 만들어지고 제공되었던 HTML5 명세는 폐기되었고,What working group (브라우저 제조사 연합) 에서 HTML 표준을 만들고 유지보수 하고있음What working group 에서 만들어지는 표준을 w3c 에 제안을하고, 검토하고 수락하

특정 플랫폼 ( IOS, Android ) 을 위해 최적화 되어 개발된 애플리케이션최적화된 코드로 빠른 성능을 제공카메라, GPS 등 기기의 하드웨어에 접근 가능각 플랫폼마다 별도로 개발해야함스토어에서 앱 심사 과정을 거쳐야함웹 기술을 사용하여 개발하며, 별도의 다운로

Next.js 애플리케이션에서 간단하고 확장 가능한 사용자 인증을 구현하기 위한 라이브러리여러 인증 공급자와 세션 기반 및 JWT 기반의 인증을 지원JWT: 클라이언트측에서 사용자 인증에 필요한 정보를 암호화 한 웹 토큰 저장Session: 서버측에 사용자의 상태 정보

실시간 소켓 통신을 하는 서버를 구현 중 봇을 막아야할 필요성을 느끼고 CloudeFlare 를 적용사용자 경험을 개선하고 보안을 강화하기 위해 설계된 캡차(CAPTCHA) 대체 솔루션사용자가 직접 문제를 해결하지 않아도 되도록 비침입적 방식으로 인간과 봇을 구별기존

Elastic Beanstalk 로 노드 서버를 배포하였다하지만 단일 인스턴스로 배포 시 http 로 생성이 되었다이 경우 클라이언트측에서 통신에 에러가 발생해 https 로 바꾸어주었다참조 사이트: https://velog.io/@jonghyun3668/EC