공부
-
[WEB] CSS 이해하기공부 2021. 10. 14. 16:51
선택자(selectors) universal * type Tag ID #id Class .class State : Attribute [] layout display div는 블럭레벨(한 줄에 하나가 다 차지함) display: inline-block; 으로 주면 인라인으로 속성 바뀜(상자로 변환, 지정된 사이즈가 있다면 그대로 변환) display: inline; 으로 주면 span처럼 사용 가능(컨텐츠 자체만 꾸며줌) span은 인라인레벨(한 줄에 여러개) display: block; 으로 주면 블럭으로 속성 바뀜 position 기본값으로 static을 가지고 있음(html순서대로 보여짐) position: relative; 로 주고 left, top등을 주면 그만큼 움직임 relative는 원래 자..
-
[JS] Web API공부 2021. 10. 6. 21:45
최근 추가 된 Web API 블루투스 API를 통해 IoT기기와 연결할 수 있는 웹사이트를 만들 수 있다. push API를 통해 웹 사이트에서 푸쉬 알림을 보낼 수 있다. 사이트가 로딩 되지 않았거나 그냥 배경에만 있어도! Contact picker API를 통해 연락처에 접근할 수 있다. 원래는 네이티브 앱에서만 가능했지만 이 API를 통해 웹 사이트에서도 가능해졌다. Shape detection API를 통해 얼굴을 인식하고 바코드를 조회하고 이미지에서 텍스트를 추출할 수 있다. 이것 또한 네이티브 앱에서만 가능했었다. Sensor API로 디바이스의 장소, 위치, 가속도 등에 접근 가능하다. 이는 webXR API와 함께 사용하면 좋다. webXR API는 webVR API의 새버전인데 이를 활용..
-
[JS] 실행 컨텍스트(Execution Context)공부 2021. 10. 1. 18:03
실행 컨텍스트 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리. 코드가 실행되고 있는 범위에 대한 개념. 1. 실행 컨텍스트의 세가지 타입 Global Execution Context 자바스크립트 엔진이 스크립트 파일을 실행하기에 앞서 가장 먼저 글로벌 실행 컨텍스트가 생성됨. 프로그램에 오직 하나만 존재. Functional Execution Context 글로벌 컨텍스트가 코드를 실행하다가 함수 실행문을 만나면 함수 실행 컨텍스트가 생성되고 스택에 쌓임. Eval function Execution Context 자바스크립트 환경에서는 잘 사용하지 않음. 2. 실행 스택 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것...
-
[React] 검색엔진 최적화(SEO)공부 2021. 9. 30. 17:38
React는 SPA로 HTML이 하나이며, CSR(클라이언트 사이드 렌더링)을 하기 때문에 렌더링(자바스크립트 실행)이 되기 전까지는 껍데기 HTML만 나오므로 검색 엔진 최적화가 어려움. meta tag HTML의 head부분에 있는 를 활용. React는 정적 페이지가 index.html 하나이므로 페이지별로 메타태그를 적용하려면 라이브러리 사용. 라이브러리 react-helmet 설치. (yarn add react-helmet) 적용하고 싶은 페이지로 가서 Helmet import하고, 안에 child로 넘겨주고 싶은 메타태그 작성. // 예시 const One = () => { return ( page one ) } pre-rendering 빌드 시 미리 특정 페이지를 렌더링 해서 html파일을 ..
-
[WEB] 쿠키, 세션스토리지, 로컬스토리지공부 2021. 9. 29. 18:49
쿠키 만료 기한이 있는 키-값 형태의 저장소. 용량이 4kb로 작음. 암호화 없음.(유저 정보 도난의 위험성 존재) 1. 쿠키 동작 방식 클라이언트가 페이지 요청. 서버에서 쿠키 생성. HTTP 헤더에 쿠키를 포함시켜 응답. 2. 쿠키 사용 예 "아이디와 비밀번호를 저장하시겠습니까?" 쇼핑몰 장바구니 다시 보지 않음 팝업 창 3. 웹 스토리지 등장 HTTP프로토콜에서 서버는 클라이언트가 누구인지 확인해야 함.(connectionless, stateless) 이 때, 쿠키에 나에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어 클라이언트가 누군지 확인. 즉, 쿠키는 로컬과 서버 모두에 데이터를 저장하고 비교를 할 때마다 api호출. 쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기..
-
[React] CSR과 SSR공부 2021. 9. 28. 18:18
1. CSR (Client Side Rendering) SPA가 사용하는 렌더링 방식. 최초 로딩 시, 브라우저가 서버에 HTML, CSS, JS등 각종 리소스를 받아옴. 이 리소스들은 사용자의 상호작용에 따라 JS를 동적으로 렌더링 하고, 필요에 따라 데이터를 서버에 요청해서 받아옴. 따라서 서버 부하는 줄지만, 초기 로딩이 느리고 SEO(검색어 최적화)불가.(구글 제외) 2. SSR (Server Side Rendering) 서버에서 렌더링을 마치고 완전한 HTML을 브라우저로 전달해서 렌더링. 즉, 서버에서 데이터까지 포함해 페이지를 만들어 브라우저에게 전달함. 따라서 새로운 페이지로 이동할 때마다 서버에 페이지를 요청하고 새로고침이 되어 화면이 깜빡이는 현상 발생. 초기로딩이 빠르고 SEO(검색어..
-
[JS] REST API공부 2021. 9. 25. 08:45
1. REST API탄생 REST는 Representational State Transfer라는 용어의 약자로, 웹의 장점을 최대한 활용할 수 있는 아키텍쳐. 2. REST 구성 REST API는 자원(URI), 행위(HTTP 메소드), 표현으로 구성. 3. REST 특징 유니폼 인터페이스: URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일 무상태성: 작업을 위한 상태정보를 따로 저장하고 관리하지 않음. 따라서 들어오는 요청만 단순히 처리하면 되므로 서버에 불필요한 정보를 관리하지 않음으로써 구현 단순해짐. 캐시 가능: HTTP라는 웹표준을 그대로 사용하기 때문에 HTTP가 가진 캐싱기능 적용 가능. 자체표현 구조: REST API 메세지만 보고도 쉽게 이해할 ..
-
[JS] 프로세스와 스레드공부 2021. 9. 24. 23:04
1. 프로그램 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 상태. 아직 실행되지 않은 코드 덩어리 파일. 2. 프로세스 운영체제로부터 자원을 할당 받은 작업의 단위. 프로그램을 실행한 게 프로세스. 각각 독립된 메모리 영역(code, data, stack, heap 구조)을 할당 받음. 기본적으로 프로세스당 최소 1개의 스레드를 가짐. 3. 스레드 프로세스보다 더 작은 실행 단위로, 프로세스 내에서 실행되는 여러 흐름 단위. 프로세스가 할당 받은 자원을 이용하는 실행 흐름 단위. 스레드는 프로세스 내에서 stack만 따로 할당 받고 code, data, heap 영역은 공유함. 자바스크립트는 싱글스레드로 비동기가 불가능하지만, 실행환경의 도움으로 비동기 처리 가능함. 참고 https:..