SOP, CORS에 대해서 알아보기에 앞서 간단하게 이 출처(Origin) 라는 것이 정확히 뭘 의미하는지부터 한번 짚고 넘어가도록 해야 합니다. # Origin https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin Origin - HTTP | MDN Origin request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. POST requests에 포함되는 것처럼, CORS requests 와 함께 전송합니다. Referer 헤더와 비슷하지만, ori developer.mozilla.org fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. 즉, Protocol + ..
Redux란? 등장 배경 리덕스가 무엇인지 알아보기 전에 리덕스가 왜 필요할까? 고민해볼필요가 있습니다. 리액트에선 일반적으로 State를 관리 할 때는 props를 통해 부모에서 자식 컴포넌트의 방향(단방향 데이터)으로 데이터 흐름이 일어난다. 💡 State - 상태란 의미는 단순히 정상, 비정상인 상태를 뜻하기 보다는 데이터 의미에 가깝다. 즉, 리액트 컴포넌트의 변경 가능한 데이터(DATA)를 뜻한다. 1. 양방향 흐름 지양 부모와 자식 컴포넌트 모두가 데이터를 직접 변경이 가능하다 간단한 화면에선 단순하게 부모와 자식의 데이터간에 데이터를 직접 호출해서 동기화함으로 좋아 보일수 있다. 하지만 복잡한 프로젝트에 컴포넌트들의 잦은 변경이 존재한다면 데이터 흐름을 예상하기 어렵다는 큰 단점이 존재한다...
CSS 선택자 선택자(Selector)는 스타일을 지정하고 싶은 HTML 요소를 가르키며, 세미콜론을 구분자로 하나 이상의 선언을 포함한다. 여기서 선택자(Selector)는 p이고, 2개의 선언(Declaration)으로 이루어져 있습니다. p - 선택자 color - 속성(property), red는 속성값 padding - 속성(Property), 5px는 속성값 종류 1. 전체 선택자 전체 선택자는 별표(*)를 사용하며, HTML 내부의 모든 태그에 지정된 스타일을 적용하도록 해줍니다. /* 전체 선택자 사용방법 */ * { property : property value; } /* 사용 예시 */ * { color : blue; } 2. 태그 선택자 태그 선택자는 앞에 붙여 무언갈 따로 붙여줄 필..
웹 페이지를 제작할 때 HTML 태그나 CSS 속성이 어떤 브라우저의 어떤 버전에서 지원하는지 미리 확인해야 합니다. Can I use HTML, CSS, JS 등 각 브라우저의 지원 현황을 확인할 수 있는 웹 서비스입니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 빨간색 : 지원 X 초록색 : 지원 O 베이지색 : 현재 버전 어두운 초록색: 지원하기 위한 조건이 존재 위의 지원 조건을 보면 -(하이픈)을 볼 수 있습니다. 이는 '벤더 프리픽스(Vender Prefix)가 필요합니다' 라는 조건입니다. 벤더 프리픽스(Vender Prefix)란? 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬,..
웹 브라우저에는 많은 종류가 있으며 각 브라우저에 기본으로 적용된 독자적인 CSS가 존재합니다. 그렇기 때문에 브라우저 마다 다르게 표시되는 것이며 이를 방지하기 위해 CSS를 초기화하면 브라우저에 기본적으로 적용된 CSS를 취소해 다른 브라우저에서도 웹 페이지가 동일하게 보이는 효과를 가져옵니다. 초기화 방법 직접 CSS를 초기화해도 되지만 공개된 CSS를 사용하면 더 편하게 초기화 할 수 있다. destyle.css https://github.com/nicolas-cusan/destyle.css GitHub - nicolas-cusan/destyle.css: Opinionated reset stylesheet that provides a clean slate for styling your html. ..
1. HTML5 기본 템플릿 코드 DOCTYPE 해당 HTML 파일이 어떤 버전으로 만들어 졌는지 나타내며, 브라우저가 다르게 렌더링 하지 않도록 하기 위해 HTML문서임을 알려준다. HTML HTML문서라는것을 나타내며 모든 코드를 감싼다. lang은 웹페이지 언어를 설정하는 속성(ko, en등) HEAD HTML 태그 안에는 페이지의 제목 설명, 외부에서 불러오는 파일링크등 페이지 정보를 적는다. META 문서 전반에 정보를 표시하기 위한 설정 charset : 문자 인코딩 설정 (utf-8, euc-kr등) name : 메타 정보의 이름 author : 저자 이름 description : HTML 문서 설명 keywords : 검색엔진을 위한 키워드 호환성 관련 태그 인터넷 익스플로러(IE)에서 최..
Prologue json-server는 REST API서버를 구축할 수 있는 npm모듈이다. 프로젝트에 네트워크 통신이 필요한 경우 백엔드로부터 데이터 통신을 위한 API를 제공 받아야 한다. 하지만 아직 백엔드에서 API작업이 완성되지 않은 상태일때, 프론트는 Mock데이터를 이용해서 작업을 하는 방법도 있겠지만 백엔드 API가 나온 후 실제 네트워크 통신작업을 추가적인 작업은 불가피하다. 이런 시간적인 낭비를 줄이기 위해 로컬에서 Mock서버를 활용하는 방법을 소개하고자 한다. 사용방법 1) 설치 npm install -g json-server 2) JSON 파일 생성 프로젝트를 진행할 폴더(test-server)를 만들고, db.json 파일을 만들겠습니다. db.json 파일에 다음과 같이 데이터..
위에 보이는 CSS 프로퍼티들을 많이 보셨겠지만, 위 프로퍼티들이 어떤 요소에 영향을 주는지 또 사용하면서 원하던 크기대로 잡히지 않는 경우가 발생하기도 하는데 왜 그런지 살펴보도록 하겠습니다. 이 부분을 이해하기 위해선 먼저 박스 모델(box model)이라는 개념을 알아야 합니다. 박스 모델(Box Model)이란? HTML의 모든 요소들은 BOX 모양으로 구성되어 있는데, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 안쪽부터 content, padding, border, margin으로 구분합니다. content 텍스트, 이미지, Input, div 요소 등 모든 콘텐츠 가로는 width, 세로는 height로 표현 padding - content를 둘러싼 공간(border와 ..
