옥수수, 기록

SEO 개념 아무도 찾지 않는 웹 페이지 네이버나 구글같은 검색 엔진을 이용했을 때, 검색했을 때 원하는 결과가 상위에 있다면 1페이지에 있는 사이트들을 다 돌아보지 않고 넘어가는 경우가 대부분이다. 열심히 웹 페이지를 만들어도 검색했을 때 검색 결과가 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다. 이런 사태를 방지하기 위해 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, SEO가 필요하다. SEO(Search Engine Optimization)의 종류 On-Page SEO 말 그대로 페이지 내부에서 진행할 수 있는 SEO 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법 Off-Page SEO 웹 사이트 외부에서 이..

웹 표준의 개념 인터넷과 웹 흔히 인터넷과 웹을 같다 생각하는 사람이 많은데 인터넷은 웹보다 더 포괄적인 개념이다. 인터넷은 ‘전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망’을 의미하며, 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함한다. 웹은 ‘공간’으로 정의할 수 있다. 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’이다. 그런데 2000년대 초에는 브라우저마다 웹 경험이 서로 달랐다. IE(인터넷 익스플로러)에서는 되던 댓글달기창이 Chrome(크롬)에서는 나오지 않기도 하고 Chrome에서는 나오던 페이지가 FireFox(파이어폭스)에서는 뜨지도 않고 .. 이런 상황을 해결하기위해서는 개발자들이 브라우저마..

상태의 구분 로컬 상태 특정 컴포넌트 안에서만 관리되며 영향을 끼치는 상태이다. ex) input box, select box 등과 같이 입력값을 받는 경우 전역 상태 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태이다. ex) 데이터 로딩 여부(로딩 중) 상태, 원래 JavaScript를 배우면 전역 변수를 남용하는 것은 좋지 않다고 배웠었다. (let을 사용하지 않은 할당) 하지만 경우에 따라 전역 상태가 필요하다. 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 전역 상태일 필요는 없고 출처(source)가 달라도 상관없다. 그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 오직 한 곳이어야 한다. 사본이 있을 경우 두 데이터는 서로 동기화하는 과정이 필요한데, 이는 문제..

Style-component로 input 태그의 속성을 변경할 수 있다. // style.css .text_input { color: red }; at HTML " use strict "; const TextInput = styled.input.attrs({ type: "text", required: true, placeholder: "type text" })` color: red; `; onClick={(event) ⇒ event.stopPropagation()} 클릭하면 이벤트가 실행되는 것을 방지해준다 const [newValue, setNewValue] = useState(value); ... const handleInputChange = (e) => { // TODO : 저장된 value를 업데..

UI 사람들이 컴퓨터와 상호 작용하는 시스템 화면상 그래픽 요소 외에도 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 할 수 있다. GUI 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말하며 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. ex) OS의 화면, 앱 화면 UX 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 의미한다. 제품에 대한 직접적 체험은 물론 제품에 대한 광고, 접근성, 업데이트, AS 등 간접적으로 관련된 경험도 사용자 경험이라고 할 수 있다. UX와 UI의 관계 UX는 UI를 포함한다. 일반적으로 UI의 형태에 따라 UX가 결정되는 경우가 많지만 좋은 UX가 좋은 U..

SOP(Same-Origin Policy) ‘같은 출처의 리소스만 공유가 가능하다’라는 동일 출처 정책을 뜻한다. 출처란(Origin)? 프로토콜, 호스트, 포트의 조합으로 되어있다. 이 중 하나라도 다르면 동일한 출처로 보지 않는다. ex) https://mail.naver.com/v2/folders/0/all ≠ http://mail.naver.com/v2/folders/0/all ⇒ 프로토콜이 다르기 때문에 동일 출처 ❌ https://mail.naver.com/ ≠ https://naver.com/ ⇒ 호스트가 다르기 때문에 동일 출처 ❌ http://mail.naver.com:30 ≠ http://mail.naver.com ⇒ http의 기본포트는 80이다. 포트가 다르기 때문에 동일 출처 ❌ ..

state가 필요한 때 state가 많아질수록 애플리케이션은 복잡해지기 때문에 모든 데이터를 state로 둘 필요가 없다. 다음 3가지 질문을 통해 이 데이터를 state로 두어야 할지 결정할 수 있다. 부모로부터 props를 통해 전달되면 state로 두면 안된다. 시간이 지나도 변하지 않는 값, state X 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하다? state X state를 어디에 위치해야할까? state가 특정 컴포넌트에서만 유의미하다면 그 컴포넌트에만 두면 되는데 2개의 컴포넌트가 하나의 state를 기반으로 영향을 받는다면 공통 소유 컴포넌트에 state를 위치시켜야 한다. Lifting state up(State 끌어올리기) React는 단방향 데이터흐름을 따른다..

REST API REST(Representational State Transfer) REST API란 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST API 디자인의 필요성 손님이 식당에 들어가 주문할 때, 메뉴판을 보고 주문하듯 클라이언트도 서버 사이에도 API라는 메뉴판이 필요하다. 하지만 메뉴판이 복잡하게 되어있다면 알아보기도 힘들고 주문하는데 애를 먹을 것이다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알잘딱한 메뉴판이 필요하다. REST API 디자인 작성할 때 몇 가지 지켜야 할 규칙들이 있는데 레오나르드 리차드슨(Leonard Richardson)이 로이 필딩이 논문..