차곡차곡

오늘 한 것 단위 변경 (rem → vw, vh) : 모든 화면에서 설정한 크기, 간격 등이 동일하게 나오도록 vw, vh로 단위를 변경해주었다. 헤더 내 요소들 위치를 margin-left를 이용해서 설정해주었었는데, 그 방법보단 width를 지정한 요소들을 float: left로 나열해주는 것이 정확한 위치에 올 수 있을 것 같아서 바꿔주었다. 요소들의 width 총합이 100이 나오면 화면 가로 길이에 딱 맞게 나눌 수 있다. 식물 추천 페이지 디자인 초안 완성 해야 할 것 선택한 항목 색 다르게 뜨도록 hover 등 구체적인 css 참고자료 요소 나열 https://velog.io/@anrun/CSS-위치-지정하기position-float-inline-block-hyk5xn5nql css 단위 h..

1. 아래 사이트에서 원하는 폰트 선택 눈누 상업용 무료한글폰트 사이트 noonnu.cc 2. 폰트 적용 코드 복사 3. App.css 에 해당 코드 붙여넣기 (이때 App.js에 App.css가 import 되어 있어야 한다.) @font-face { font-family: "Happiness-Sans-Title"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Title.woff2") format("woff2"); font-weight: normal; font-style: normal; } + 다운로드하여 로컬 폰트 적용하는 법 src에 폰트가 저장돼 있는 경로를 넣어주면 된다. [React] ..

영화 정보를 확인하고 댓글로 리뷰를 공유할 수 있는 사이트를 구현했다. api로 데이터 받는 건 해봤지만 백과 통신하는 건 처음이어서 쉽지 않았다 .. 프론트를 제대로 공부한 지 오래되지 않아서 더했다😰 특히 나를 며칠 동안 힘들게 했던 오류들이 있었는데 ,, 첫 번째로 CORS 에러다. CORS는 Cross-Origin Resource Sharing의 약자로 동일한 출처의 경우 데이터 요청과 전달에 문제가 없지만, 서로 다른 리소스에서 데이터를 요청할 때 보안상의 이유로 cross-origin HTTP 요청을 제한하는 개념이다. 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의..

1, 자바스크립트 배열의 map() 함수 map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지가 있다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 // 배열 요소를 제곱하여 새로운 배열 생성 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(num => ..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 버튼에 마우스 커서를 올릴 때 발생하는 onmouseover 이벤트, 클릭할 때 발생하는 onclick 이벤트 등을 말한다. 이벤트 사용할 때 주의 사항 1. 이벤트 이름은 카멜 케이스 형태로 작성한다.2. 이벤트에 자바스크립트 코드가 아닌 함수 형태의 객체를 전달한다.3. DOM 요소에만 이벤트를 설정할 수 있다. (직접 만든 컴포넌트에 이벤트를 자체적으로 설정할 수 없다.) onChange={ (e) => { console.log(e.target.value); } } * e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 참고 자료 : https://thebook..

state는 컴포넌트 내부에서 바뀔 수 있는 값으로, state가 수정 됐을 때 페이지를 다시 그리지 않아도 UI 업데이트가 가능하기 때문에 SPA의 핵심 요소라고 할 수 있다. 리액트에는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState라는 함수를 통해 사용되는 state 두 가지 종류가 있다. useState 함수는 함수형 컴포넌트에서도 상태 관리를 할 수 있도록 리액트 16.8에서 도입된 Hooks 기능 중 하나다. 함수의 인자에는 상태의 초깃값을 넣어준다. 값의 형태는 숫자, 문자열, 객체, 배열 등 자유롭다. 함수를 호출하면 배열이 반환되는데, 이때 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 세터(Setter) 함수이다. state 값을 바꿔야 할..

컴포넌트는 SPA를 지향하는 React에서 사용하는 앱을 이루는 최소 단위이다. MVC 방식으로 관리되는 기존의 웹 프레임워크는 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다. 반면 컴포넌트는 MVC의 view를 독립적으로 구성하여 재사용할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. ☝🏻 MPA vs SPA MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 웹 어플리케이션으로, 사용자가 요청할 때마다 서버에 다른 페이지를 요청해서 받아온다. 전체 페이지를 불필요한 부분까지 다시 렌더링 해야 하기 때문에 상태 유지의 어려움 + 불필요한 로딩이 발생한다는 단점이 있다. SPA (Single Page Application) : 한 개 페이지로 구성된..

props는 properties의 줄임말로 컴포넌트의 속성값이다. 한 컴포넌트에서 다른 컴포넌트로 데이터를 넘길 때, 즉 컴포넌트 간 데이터를 넘겨주는 수단으로 사용된다. 일반적으로 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 인자로 받아서 사용한다. 받아온 값은 읽기 전용으로 컴포넌트 내부에서 전달 받은 그대로 사용된다. props 값은 컴포넌트에 객체 형태로 전달되어 매개변수를 통해 조회 가능하며, 객체의 비구조화 할당을 통해 축약된 문법으로 객체 속성값을 추출하여 사용할 수도 있다. Props 값 전달 방법 부모 컴포넌트에서 자식 컴포넌트 import 자식 컴포넌트 태그에 속성=”속성값” 할당 ⇒ {속성: 속성값}을 인자로 하여 자식 컴포넌트 호출 자식 컴포넌트에서 매개변수로 값 받아와서 사용 ..