가져온 유튜브 영상을 컨테이너에 담았을 때, 유튜브 영상이 컨테이너에 꽉 차도록 만들기2가지 방법컨테이너의 width, height를 둘 다 지정하는 방법컨테이너의 height=0으로 놓고, padding을 이용하는 방법유튜브에서 영상의 iframe 코드 전체를 얻을

인수로 받은 요소와 일치하지 않은 요소들을 가리키는 선택자 표기법괄호에 들어간 요소를 제외한 다른 요소들을 역으로 가리키는 표기법:not(selector) {…스타일 속성…}

styled-components에서 제공하는 keyframes 키워드 사용원하는 애니메이션 효과를 변수로 정의하여 모듈화하고, 이를 animations 속성에 값으로 삽입하여 효과 구현transition 속성과 다르게 이벤트 없이 상시 효과가 발현될 수 있도록 구현가능

상황에 따라 CSS를 변경하는 방법에는 2가지가 존재한다.컴포넌트 props를 통해 특성 값을 주는 방식상황 별 스타일 컴포넌트를 만들고, 조건부 렌더링을 구현하는 방식첫 번째, 상황에 따라 스타일 컴포넌트에 props를 통해 CSS 특성을 변경하는 방법에 대해 알아보

CRA 공홈(https://create-react-app.dev/docs/adding-images-fonts-and-files/우리가 이미지 파일을 프로젝트에 사용할 때 svg 파일을 사용하는 경우가 많다.특히, 반응형 웹페이지를 구성하는 경우, 크기 변화에도

원하는 서체 파일을 다운로드 한다.구글 폰트나 찾아본 서체 웹페이지에서 제공하는 파일을 받으면 된다.내가 사용한 파일 포맷은 woff2그 전에 준비되어야 하는 것은 woff2 또는 다른 포맷의 서체 파일이다.원하는 이름의 .css 파일 생성@font-face 구문을 사

기본적으로 참조형 데이터의 경우, 해당 값이 변경된다면 그것을 참조하는 다른 모든 기능들에 영향을 주어 예상치 못한 문제가 발생할 수 있으므로, 불변성을 지키며 코딩해야한다는 기본적인 논리는 바닥에 깔고...리액트의 state가 배열 또는 객체인 경우, 리액트는 배열(

체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. - MDN체이닝 연산자 ( . )와 유사하게 작동하지만, 참조가 nullish (null 또는 undefined)라면, 에러가 발생하는 것 대신에 표현

어떤 버튼이나 링크를 클릭한 경우, 동일 페이지 내에서 또는 다른 페이지의 특정 요소로 스크롤이 되는 기능을 구현한다.나의 경우 다음과 같은 방식으로 기능을 구현했다boolean 값을 갖는 state 생성버튼 클릭 시, state 값 변경 및 특정 페이지로 Naviga

window.location.hrefwindow.location.replacewindow.open()<Link> 컴포넌트 활용window.location 객체는 현재 페이지의 URL 주소 정보를 얻거나, 다른 웹페이지로 Redirect하는 경우 사용된다.새 윈도우

form 태그는 사용자가 입력한 정보를 서버로 전송할 수 있게 해주는 기능을 가진 HTML의 기초적인 태그이다.form 태그 구문은 input 태그로 이루어진 기본 골격을 가진다.사용자가 원하는 정보를 입력할 수 있는 입력 요소기본적인 input 태그는 단순한 텍스트

임의의 정수로 이루어진 배열이 주어졌을 때, 해당 배열의 요소들이 증가했다가 감소하는 산 모양의 추세를 보이는지 판별하는 문제이다.중복인 요소가 있으면 안되며증가-감소 후 다시 증가, 감소가 있어서는 안된다.반드시 지속적으로 증가 후, 연속적으로 감소하는 경향을 띄어야

실행 컨텍스트 (execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.스택은 출입구가 하나뿐인 깊은 우물 형태의 데이터 구조 (100개의 작업을 저장할 수 있는 스택에 그 이상 투입 시 에러 발생)큐는 양쪽이 모두 열려있는 파이프 형

REpresentational State Transfer.전반적인 웹 어플리케이션에서 상호작용에 사용되는 웹 아키텍쳐 모델.자원을 주고받는 웹 생태계에서 통신 체계 내의 범용적인 통신 스타일을 규적한 아키텍쳐.Application Programming Interface

위대한 물리학자들의 전기를 읽어보면, 물리학뿐만 아니라 다양한 분야의 본질을 꿰뚫는 날카로운 시각을 소유했다는 것을 알게 되는데, 나는 그들처럼 지식이 풍부할 뿐만 아니라 지혜롭고 현명한 사람이 되고 싶었다. 물론 역사에 남을 위대한 사람이 되고자 했던 것은 아니다.

이번 프로젝트는 메가박스 홈페이지를 모티브로 하여 실제 영화 정보를 확인하고 영화 예매까지 과정을 구현한 웹사이트 제작을 목표로 하였다.참조한 웹사이트의 여러가지 기능이나 프로세스들을 팀원들의 수준 내에서 비슷하게 구현하기 위해 노력했다.특히, 내가 맡은 예매페이지의

이번 프로젝트는 메가박스 홈페이지를 모티브로 하여 실제 영화 정보를 확인하고 영화 예매까지 과정을 구현한 웹사이트 제작을 목표로 하였다.참조한 웹사이트의 여러가지 기능이나 프로세스들을 팀원들의 수준 내에서 비슷하게 구현하기 위해 노력했다.특히, 내가 맡은 예매페이지의

async await는 promise를 조금 더 간결하고 간편하고, 동기적으로 실행되는 것 처럼 보이게 만드는 키워드promise/then+promise/then 이렇게 연속적으로 작성하게 되면 코드가 상당히 복잡하게 구성된다. 하지만 여기에 async await를 사

From MDN...기본적으로 Synchronous의 의미는 다음과 같다실시간, 즉각적인 커뮤니케이션자바스크립트를 예로 들면, 우리가 콘솔창에 console.log(”어떤 메시지...”)를 입력하고 실행시키면 콘솔창에는 내가 입력한 메시지가 즉각 출력된다. 이러한 명령

반복 사용되는 함수나 로직을 하나의 기능으로 만들어 놓아, 필요시 import하여 손쉽게 재사용하기 위함재사용되는 함수의 경우 자바스크립트 모듈로 만들어 import 해와 사용할 수 있지만, React의 의존성 배열 등을 사용하여 특정 값의 변화 시 자동 실행되도록 만