분류 전체보기73 CSS - 박스모델 border(테두리) 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있다. 다음 코드를 통해 테두리를 실선으로 확인할 수 있다. p { border: 1px solid red; } border 속성에 적용된 값은 각각 border-width, border-style, border-color이다. margin(바깥 여백) p { margin: 10px 20px 30px 40px; } margin은 border를 기준으로 박스 외부의 여백을 지정한다. 각각의 값은 top, right, bottom, left로 시계방향이다. 값을 두 개만 넣으면 첫 번째 값이 상하, 두 번째 값이 좌우이.. 2023. 4. 4. CSS - 절대 단위와 상대 단위 절대 단위 - 주로 px을 사용한다. cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 단위 - 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있다. em 요소의 글꼴 크기. ex 요소 글꼴의 x-height. ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다. rem 루트 요소의 글꼴 크기. lh 요소의 라인 높이. vw viewport 너비의 1%. vh view.. 2023. 4. 4. fe-sprint-mini-node-server 생각 비교적 간단한 sprint 였지만, 사소한 실수들로 인해 많은 에러를 마주하였다. 열심히 구글링 해가며 오류를 해결해나가는 과정에서의 뿌듯함이 있었다. 요청의 body가 아래와 같이 되어야한다고 하는데 chunk와 Buffer 부분을 이해하지는 못했고 외우기에 그쳤다. let body = []; request.on('data', (chunk) => { body.push(chunk); }).on('end', () => { body = Buffer.concat(body).toString(); }); 2023. 4. 4. Node.js - CORS CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보자. SOP(Same-Origin Police) 동일 출처 정책이란 뜻으로, `같은 출처의 리소스만 공유가 가능하다`라는 정책이다. 여기서 말하는 출처(Origin)는 프로토콜, 호스트, 포트의 조합으로 되어있다. 이 중 하나라도 다르면 동일한 출처가 아니다. SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 해킹등의 공격을 받을 수 있는 경로를 줄여준다. 모든 브라우저는 기본적으로 SOP 정책을 사용하고 있지만, 어떻게 하면 다른 출처의 리소스를 받아올 수 있을까? CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른.. 2023. 4. 4. fe-sprint-statesairline-client fe-sprint-statesairline-client의 목표 💡 Part 1: 항공권 목록 필터링 🧩 Main 컴포넌트에서 항공편을 조회합니다 ✓ Main 컴포넌트 내 `search` 함수는 검색 조건을 담고 있는 상태 객체 `condition`을 업데이트해야 합니다 (24 ms) 🧩 Search 컴포넌트를 통해 상태 끌어올리기를 학습합니다 ✓ 검색 화면이 Search 컴포넌트로 분리되어야 합니다 (3 ms) ✓ Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다 (5 ms) ✓ 상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 합니다 (25 ms) 💡 Part 2: AJAX 요청 🧩 Side Effect.. 2023. 4. 3. React - Effect Hook Hook의 2가지 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다 오직 React 함수 내에서 Hook을 호출해야 한다. useEffect의 3가지 형태 1. 아무것도 넣지 않기(기본 형태) - useEffect(함수) 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때 effect 함수가 실행된다. 2. 빈 배열 넣기 - useEffect(함수, []) 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때 사용할 수 있다. 3. useEffect(함수, [종속성1, 종속성2, ... ]) 배열 내의 종속성1, 또는 종속성 2의 값.. 2023. 4. 3. 이전 1 ··· 6 7 8 9 10 11 12 13 다음
