본문 바로가기

Front-end64

HTML attribute와 property 차이 📌 attribute란? 리스트 HTML element의 추가적인 정보를 전달한다. 태그 내에서 이름="값" 쌍으로 작성된다. div 태그는 "label" 이란 값을 지닌 class 어트리뷰트를 가지고 있다. 📌 property란? HTML DOM tree 내부에서 attribute를 가리킬 때 쓰인다. (예시의) 해당 엘리먼트는 HTML DOM tree에서 이름이 className이고 값이 "label" 인 property를 가진다. 📌 그렇다면 !! attribute와 property의 차이는 무엇인가? 위치적 관점에서 본다면, attribute는 HTML 문서 안에 있고, property는 HTML DOM tree 안에 있다. 즉, attribute의 값은 변하지 않고, property는 (자바스크.. 2021. 9. 16.
styled-component, useState 사용해서 Tag 만들기를 가장한 testCase 삽질기 📌 Tag 란? 키워드 중심의 버튼버튼 아닙니다이라고 볼 수 있다. (정확히는 버튼은 아님. "버튼처럼" 동작할 뿐) 일반적인 버튼과의 차이가 있다면, 클릭했을 때 새로운 이벤트를 즉각적으로 실행하지 않는다. 버튼이 아니니까 당연한 이야기 ... 다만, 선택된 태그를 바탕으로 정보를 조합해 새로운 이벤트가 구성된다. ex. 핀터레스트에 처음 들어갔을 때 관심사 태그들을 클릭하면 내 피드가 태그 관련 이미지들로 채워진다. ex. 노션에서 노트를 작성하며 내가 원하는 태그들을 달아놓는다면, 나중에 해당 태그가 있는 노트들만 취합해 볼 수 있다. 📌 Tag를 구현해보자. ◾ Tag 상태만 추적할 때 export const Tag = () => { // dsfault 값은 넣어도 되고 안 넣어도 됨 const .. 2021. 9. 15.
styled-component, useState 사용해서 Modal창 만들기 📌 Modal 창이란? 평소에 우리는 "팝업창이 차단되었습니다" 란 메세지를 종종 접한다. 여기서 말하는 팝업창은 현재 위치한 브라우저 이외에 또 다른 브라우저 페이지를 띄운 것을 말한다. 홈페이지에 접속했을 때 광고나 공지 등이 파바박 떠올라서 해당 창을 일일이 닫아줬던 경험이 있을 것이다. 그에 반해 기존의 브라우저 위에 하나의 레이어를 까는 것을 말한다. "새로운 창"이 아니다. 팝업창과 달리 브라우저 단에서 차단할 수 없기 때문에 반드시 표시해야하는 정보를 다루기 좋다. 그리고 개인적으로 UI적으로 정리가 잘 된 느낌을 받아서, 앞으로도 애용할 것 같다. 📌 Modal 창의 장단점 (feat. Pop-up 창의 장단점) 그렇다면, Modal 창은 장점만 있나 ? Nope. Pop-up 창과 비교해.. 2021. 9. 14.
URI 그리고 URL, URN 📌 URI URL URN URC 모두의 관계성 📌 URI? (Uniform Resource Identifier) Identifier 식별자 네트워크상의 자원을 가리키는 고유 식별자(*ID)이다. ◾ URI 구조 scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment] 1. scheme : 사용할 프로토콜 (네트워크 통신 규악)(OSI 7계층) 2. user 와 password : (서버의)데이터에 접근하기 위한 사용자의 이름과 비밀번호 3. host 와 port : 접근할 대상(서버)의 호스트명과 포트 번호 포트 번호는 보통 웹이 알아서 생략해준다. (http는 80, https는 443) 호스트명 대신 도메인명 또는 IP주소로 표현되기도 한.. 2021. 9. 11.
Client - Server : SOP와 CORS 📌 SOP? (Same Origin Policy) 동일 출처 정책으로, 하나의 Origin에서 로드된 문서나 스크립트가 다른 Origin의 자원과 상호작용하지 못하도록 제한하는 것. 여기서 말하는 Origin은 아래 3가지 요소를 조합한 것이다. ✔ URL Scheme (http, https ... etc URL SCHEME 종류 참고) ✔ Hostname [NodeName] (localhost, 내 블로그 기준 -> code-designer) ✔ port (3000, 8080 ...) 예전에는 브라우저에서 요청을 보내면, 서버에서 해당하는 로직을 수행한 뒤 "HTML을 완성시켜 반환"해줬다. 즉, 하나의 서버(동일한 Origin)에서 모든 작업이 수행되었다. 다른 브라우저와 교류할 일도 적었고, 만약 .. 2021. 9. 10.
REST API 기본 정리 📌 REST란 (REpresentational State Transfer)? HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처. 🏁 REST 특징 더보기 ◾ Uniform URI로 지정한 리소스에 대한 조작을 한정적이고 통일된 인터페이스로 수행하는 아키텍쳐다. --> REST가 지정한 API대로만 조작하게 하니까 ! ◾ Stateless 작업을 위한 상태 정보를 저장하거나 관리하지 않습니다. API server는 들어오는 요청만 처리하면 되기 때문에 서비스의 자유도가 높아지고 구현이 단순해진다. --> 요청만 단순하게 처리 ! ◾ Cacheable REST는 HTTP라는 기존 웹 표준을 그대로 사용하기 때문에 웹에서 사용하는 기존 인프라를 활용할 수 있다. 따라서, HTTP.. 2021. 9. 8.
항공편 검색창 만들면서 useEffect 공부하기 📌 구현 결과 📌 구현 과정 Main.js 📌 2021. 9. 7.
자바스크립트 비동기 프로그래밍 Asynchronous Programming 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 자바스크립트가 비동기적으로 작동해야하는 이유 변수를 선언하거나 함수를 호출하면, 자바스크립트에서는 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택 (콜스택)에 push 되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 실행 컨텍스트는 실행 컨텍스트 스택에서 pop 되어 .. 2021. 9. 6.
자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식 ✔ 호이스팅이 발생하는 이유 ✔ 클로저의 동작 방식 ✔ 태스크 큐와 함께 동작하는 이벤트 헨들러 ✔ 비동기 처리의 동작 방식 실행 컨텍스트를 이해했을 때, 이 모든 것을 자연스럽게 습득할 수 있다. 📌 실행 컨텍스트execution context 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. ✔ 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스..)들을 스코프를 구분하여 등록하고 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리해야 한다. ✔ 스코프는 중첩 관계에 의해 스코.. 2021. 9. 5.

티스토리툴바