본문 바로가기

전체 글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.
React - Side Effect / Pure Function Side Effect(부수효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나, 이벤트를 활용해 DOM을 직접 조작할때 Side Effect가 발생했다고 한다. 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 순수 함수라고 한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치거나, 함수가 입력으로 전달된 값을 .. 2023. 4. 3.
CSS - 기초 CSS(Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 즉, CSS는 좋은 사용자 경험을 제공하기 위한 도구이다. 사용자 인터페이스(UI: user interface) 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI(Command Line Interface)를 사용하였다. 하지만 이는 컴퓨터에 무지한 일반 사용자가 사용하기에는 어려움이 있다. 트.. 2023. 4. 2.
HTML - Sementic Element 시맨틱 요소(Sementic Element)란? 시맨틱이란 '의미가 있는, 의미론적인'이라고 해석할 수 있다. 시맨틱 요소를 사용해야 하는 이유 검색 엔진이 시맨틱 요소를 더 좋아하기 때문이다. 네이버, 구글 등의 검색 포털은 모두 고유한 검색 엔진을 보유하고 있다. 이러한 검색 엔진은 입력된 키워드를 각 웹페이지에서 포함하고 있는지 확인하여 결과를 보여준다. 이러한 검색 엔진들은 시맨틱 요소를 중요한 키워드로 고려한다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과 상위 노출이 결정될 수 있다는 것이다. 여러 개발자가 함께 작업할 때 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는것이 훨씬 편리하기 때문이다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉬워진다는 장점이 있다. 시맨틱 .. 2023. 4. 2.
HTML - 기초 HTML(HyperText Markup Language) 웹 페이지의 틀을 만드는 마크업 언어 여러가지 tag를 이용한 HTML 예시 DOCTYPE html> Document div span sapn 구글 1 2 1 2 d c a b submit 2023. 3. 30.
REST API REST(Representational State Transfer) API 로이 필딩(Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개 되었다. 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 뜻한다. REST API 디자인 로이 필딩이 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었다. REST 성숙모 모델은 총 4단계(0~3)로 나누어진다. 실제로는 엄밀하게 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 볼 수 있고.. 2023. 3. 29.
SSR vs CSR SSR(Server Side Rendering) CSR(Client Side Rendering) SSR vs CSR SSR과 CSR의 주요 차이점은 페이지가 렌더링 되는 위치이다. SSR은 서버에서 페이지를 렌더링 하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링 한다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다. SSR 사용 SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR을 사용한다. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR이 적합하다. 웹 페이지가 사용자와 상호작용이 적은 경우, SSR을 활용할 수 있다. CSR 사용 SEO가 우선순위가 아닌 경우.. 2023. 3. 28.

티스토리툴바