https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries를 읽고 정리한 문서입니다.미디어 쿼리문법 구조는 다음과 같다.@media media-type and (media-feature-rule) { /* CSS rules go here */}media-type : 미디어 유형(ex: 인쇄 또는 화면)media-feature-rule : css 규칙이 적용될 조건(ex: min-width: 1024px)CSS rules : 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합보통 쓰는 syntax@media all and (min-width: 특정px) { .클래스 { /* css properties */}medi..

ChatGPT Prompt Engineeering For Developers의 Guidelines 강의를 듣고 정리한 문서입니다.효과적으로 프롬프트를 작성하는 원칙명확하고 구체적인 지시 작성모델에게 생각할 시간 주기명확하고 구체적인 지시 작성을 위한 네 가지 전략```, """, ,  , : 와 같은 구분자를 사용하여 입력의 구분된 부분 명확하게 표시하기ex)text = f"""You should express what you want a model to do by \\ providing instructions that are as clear and \\ specific as you can possibly make them. \\ This will guide the model towards the des..

인라인 스타일리액트 jsx 안에 style 프로퍼티로 스타일을 정의하는 것.장점동적 스타일링 용이 : state를 활용해 스타일을 다르게 주고 싶을 때 쉽게 조정 가능스코핑 자동화 : 인라인 스타일은 해당 컴포넌트에 직접 적용되므로 스타일의 충돌을 걱정할 필요가 없다.추가 설정 불필요 : CSS 파일을 별도로 관리하거나 로드할 필요가 없다.단점성능 이슈 : external CSS와 달리 별도의 컴파일 및 축소된 CSS 파일을 사용하지 않기 때문에 HTML 문서의 큰 부분을 차지하여 로드 시간이 늘어날 수 있다. 각 컴포넌트 인스턴스마다 스타일이 복제되어 DOM 요소가 많은 페이지에서는 성능 저하를 초래할 수 있다.재사용성 제한 : 같은 스타일을 여러 컴포넌트에서 사용하고 싶은 경우, 각 컴포넌트에 동일한..

Next + React Query로 SNS 서비스 만들기 강의를 듣다가 dayjs에 대해 알게 되었고, 강의 내에서의 dayjs configuration 코드를 보다가 알게 된 점이 있어 글로 남기고자 한다. (강의 내용과는 무관) dayjs는 플러그인 같은 개념이 있어서 쓰고자 하는 기능이 있으면 필요한 플러그인을 등록해줘야 한다고 한다. 예를 들면 이런 식이다. import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.locale("ko"); dayjs.extend(relativeTime); export default function Post() { // ...

(참고 : https://react-ko.dev/learn/render-and-commit) 리액트의 렌더링이란? 리액트에서 컴포넌트를 호출하는 것. 컴포넌트는 언제 렌더링되는가? 처음 화면에 등장할 때(초기 렌더링) 첫 렌더링에서 리액트는 루트 컴포넌트를 호출. 컴포넌트의 state가 업데이트되었을 때 이 경우 리액트는 state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트를 호출. 렌더링은 재귀적이다. 만약 렌더링되는 컴포넌트가 다른 컴포넌트를 반환할 경우, 리액트는 다음으로 해당 컴포넌트를 렌더링하며, 이는 중첩된 컴포넌트가 더 이상 없거나 리액트가 화면에 표시될 내용을 정확히 알 때까지 계속됨 부모 컴포넌트가 렌더링되면, 모든 자식 컴포넌트도 렌더링된다. 리액트의 커밋이란? 컴포넌트의 렌더링 이..

HTML 엘리먼트에 커스텀 attribute로 data-로 시작하는 이름을 지정하면, dataset으로 가져올 수 있다. 예를 들어 다음과 같은 html이 있을 때, ... div입니다 js에서 이렇게 가져올 수 있음 const $duck = document.querySelector("#duck"); const { name, age, superLong } = $duck.dataset; console.log(superLong); //superduperlong

requestAnimationFrame이란? 자바스크립트에서 기본으로 제공하는 Window 인터페이스의 메소드이다. 왜 사용하나요? 만약 자바스크립트로 애니메이션을 구현할 때 단순히 setTimeout 혹은 setInterval을 사용하여 특정 코드를 반복 실행시키면 여러 문제점이 존재한다. 애니메이션을 자연스럽게 만드려면 fps(1초에 몇 개의 프레임이 넘어가는지의 단위)를 신경써야 한다. 사람의 눈은 60fps에서부터 애니메이션을 부드럽다고 느낀다고 한다. 이를 위해서는 16.666 밀리세컨드마다 프레임이 바뀌도록 구현해야 한다. 하지만 setTimeout이나 setInterval을 통해 코드를 반복 실행시키면 콜백 코드 부분이 프레임 시작 시간에 맞춰 실행됨을 보장하지 못한다. 타이머 함수에서 콜백..

자바스크립트는 기본적으로 모듈 시스템을 지원하지 않는다. 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각. 모듈들은 자신만의 파일 스코프(모듈 스코프)를 갖는다. ⇒ 모듈의 모든 자산(변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다(export). 또한 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다(import). 자바스크립트는 모듈이 성립하기 위해 필요한 파일 스코프와 import, export를 지원하지 않는다. 즉, 자바스크립트는 파일마다 독립적인 파일 스코프를 갖지 않으므로, 자바스크립트 파일을 여러 개로 분..

주소창에 google.com을 치면 무슨 일이 일어나나요? 주소창에 url을 입력하고 엔터를 치면, url의 도메인 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에 요청이 전송된다. 도메인 이름 : 인터넷의 실제 IP주소와 연결된, 기억하기 쉬운 이름. (ex : google.com) DNS : 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com )을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환하는 시스템 해당 URL 요청의 경로에 따른 html 파일이 보내진다. URL은 이론적으로 웹에서 주어진 고유 리소스 주소이다. 세부 리소스 경로의 경우 요즘은 물리적 실체가 없는 웹 서버가 추상적으로 처리하지만, 예전에는 웹 서버내 실제 파일 위치를 나..

https://school.programmers.co.kr/learn/courses/30/lessons/42586?language=javascript 나의 풀이 슈도 코드 progresses 돌려서 완료일까지 남은 날짜수 담은 goalQueue 배열 정의 현재 날짜 date 변수를 정의하고 answer에 넣게 될 complete 변수 정의 goalQueue의 맨 앞에 있는 애 가져옴(goal) 해당 goal과 date 비교 만약 date가 goal보다 크거나 같으면 pop으로 goalQueue에서 비우고 배포 처리, complete 1 증가 위 3~5를 계속 반복. goal이 date보다 작게 나오면 반복 탈출 한번에 배포처리한 수 complete를 answer에 넣고 complete 0으로 초기화. d..