다른 개발자 뿐만 아니라 내가 작성한 코드일지라도 좋은 주석이 나의 생산성을 크게 높여줄 것 같다.정보를 제공하는 주석의도를 설명하는 주석의미를 명료하게 밝히는 주석결과를 경고하는 주석TODO 주석중요성을 강조하는 주석공개 API에서 문서화a href ="그래서 hre

전체 디자인을 훑어본다대략적인 큰 레이아웃을 구상한다메인 컴포넌트를 분석한다반복되는 컴포넌트를 구분한다가변적인 요소가 들어가는 항목을 확인한다이미지가 가변일 때, no image 처리는 어떻게 되는가?이미지 비율이 다를때 어떤 기준으로 크롭하는가?텍스트가 가변일 때 몇

현재 시간을 잘 나타내고 있지만,"9" 일의 자리로 표현되는게 아니라 두 자리로 "00"표현되고 싶다.padStart()를 사용해서 padding을 추가해달라고 자바스크립트로 요청하면된다!"string"은 "String" 으로 대문자로 시작해야 제대로 인식됨number

localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다.저장한 데이터는 세션간에 공유됩니다.즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다.setItem() - key, value 추가getItem() - value 읽

최근 출시되었거나 곧 출시될 흥미롭고 영향력 있는 기능 20가지가 정리 되어있다 !https://developer.chrome.com/en/blog/whats-new-css-ui-2023/?utm_source=oneoneone컨테이너 쿼리, 스타일 쿼리, nt

var, let, const의 차이 var 키워드의 문제점은 크게 세 가지가 존재한다. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. 변수 선언문 이전에 변수를 참조하면 언

프론트엔드 엔지니어에게 생산성을 끌어올릴 수 있는 사이트들이 DEV 커뮤니티에 소개 되었습니다.이 외에도, 다음과 같은 사이트도 리스트업 되어있습니다.유용한 CSS 리스트디자인을 위한 12가지 멋진 UI 구성 요소프론트엔드 웹 개발을 더 빨리 배울 수 있는 5개의 웹사

미니블로그 만들기 기획 필요한 기능 글 목록 보기 기능 (리스트 형태) 글 보기 기능 댓글 보기 기능 글 작성 기능 댓글 작성 기능 세팅 Step1. 프로젝트 생성 create-react-app을 사용해 프로젝트 생성 Step2. 프로젝트 디렉터리에 들어기

무작정 깃에 대해 학습한 것이 아니라, 6시간에 걸쳐서 깃이 나오게 된 배경부터 깃을 잘 사용하기 위한 도구들을 재밌게 소개해주고, 깃 기본에 대한 강의를 들었다.오늘 들었던 강의는 그래도 여러 번 학습한 경험이 있던 부분이었기에 복습 차원에서 공부했지만, 다음 시간에

: 코드와 애플리케이션이 사용하는 이미지, css 파일 등의 파일을 모두 모아서 패키징 하는 과정 serve 패키지 설치: static 파일들을 서빙해주는 프로그램: -g 글로벌 모드로 설치하게 되면 각 프로젝트 폴더 내에 설치되는게 아니라 현재 사용중인 컴퓨터의 다른

: facebook.com/games , facebook.com/places 처럼 path를 정할 수 있다. 리액트에서는 리액트 라우터 돔이라는 패키지를 이용해서 각 경로에 따라 다른 컴포넌트를 보여주도록 만든다.라우팅 라이브러리라는 뜻.웹사이트에서 라우팅이라고하면 ,

스크롤에 따른 동영상 재생을 구현한다.옵션에 따라 재생 속도 및 프레임 조절한다.업로드중...scroll-bound { / height의 길이가 길어지수록 비디오를 재생하는데 많은 스크롤이 필요하다. / height: 200vh; } $(function(

: tagged template literal를 사용해서 구성요소에 스타일을 지정한다.: template literal은 자바스크립트에서 제공하는 문법중 하나이다.literal : 소스코드에서 고정된 값을 의미 (상수랑은 다른 의미)template literal : 리

기존의 리액트 에플리케이션은 데이터가 컴포넌트의 프롭스를 통해 부모→ 자식인 단방향으로 전달.하지만 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 코드도 많아 복잡해지고 사용하기에 복잡했다.그래서 등장한 것이 context이다.context는 리액트 컴포넌트들 사이

React.createContext( )함수의 파라미터로 기본값을 넣어주면 된다.리액트에서 랜더링이 일어날때 context객체를 구독하는 하위 컴포넌트가 나오면 현재 context 값의 가장 가까이에 있는 상위 레벨의 provider로 부터 받아오게 된다. 만약 상위

## Compositon : 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 : 합성, 조합 → 여러개의 컴포넌트들을 어떻게 조합할 것인가? ⇒ 리액트의 컴포넌트 합성 방법 두 가지 1. containment : 담다/포함하다. : 하위 컴포넌트를 포함하는

- shared state : state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 : 하위 컴포넌트가 공통된 **부모 컴포넌트의 state를 공유하여 사용하는 것**

양식 - 회원가입 같은 것사용자로부터 입력을 받기 위해 사용state를 통해서 데이터를 관리: 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 것: 값이 리액트의 통제를 받는 input form elements를 의미: 사용자의 입력을 직접적으로 제어할 수 있음h

List =목록 = array : 자바스크립트의 변수나 객체들을 하나의 변수로 묶어 놓은 것 keys = 열쇠 = 열쇠는 다 모양이 다르다. = 고유의 모양이 있다 = 각 객체나 아이템을 구분할 수 있는 고유한 값 = 아이템들을 구분하기 위한 고유한 문자

Condition → 조건에 따른 렌더링 → 조건부 렌더링 → 어떠한 조건(조건문)에 따라서 렌더링이 달라지는 것 → 예) true이면 보여주고 false면 감춘다. Truthly: true는 아니지만 true로 여겨지는 값Falsy: false는 아니지만 f