본문 바로가기

CodeTech

 (70)
HTML - [<script> vs <script async> vs <script defer>] 웹 브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 무겁다. 용량이 커서 다운로드 하는데 오랜시간이 걸리며 실행하는 것 또한 마찬가지이다. 브라우저 렌더링 과정에서 HTML 문서를 파싱하는 과정에서 스크립트를 만나면 HTML 파싱을 중지하고 스크립트를 실행한다. 이러한 과정에서 두가지의 중요한 이슈가 생겨난다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 파싱되지 않은 HTML문서 이기 때문이다. 페이지의 위쪽에 용량이 큰 스크립트가 있는 경우 사용자 입장에서는 스크립트를 로드 하느라 시간이 걸리는 동안 스크립트 아래에 있는 페이지를 볼 수 없게 된다. 이러한 이슈를 해결할 방법으로서 스크립트 속성이 있다. 아래와 같은 속성은 스크립트의 실행 순서를 다르게 하여 위의 이슈들을..
localStorage | sessionStorage | Cookies Web Storage Web Storage는 두가지 방법으로 사용이 가능하다. localStorage : 각각의 출처에 대해 독립적인 저장공간을 제공하고 브라우저를 열었다 닫아도(페이지 세션이 유지되는 동안) 유지된다. 유효기간 없이 데이터를 저장한다. JavaScript를 이용하거나 브라우저 캐시또는 로컬 저장 데이터를 지워야만 사라진다. 저장 공간이 가장크다. sessionStorage : 위와 같지만 페이지 세션이 유지되지 않으면 사라진다. 세션에 한정해서 데이터를 저장한다. 데이터를 절대 서버로 전송하지 않는다. 저장공간이 쿠키 보다 크다. (최대 5MB) 위 방식들은 window.sessionStorage 와 window.localStorage 로 접근하여 사용이 가능하다. 각각의 방식들은 St..
HTML - ['data-' 속성] data-* 속성은 해당 DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성이다. 해당 웹 페이지가 독자적으로 사용하는 값이다. 해당 웹 페이지가 아닌 다른 소프트웨어에서 이러한 값을 사용한다면 목적에 부합하지 않는다. 보여야하고 접근가능해야하는 데이터는 이러한 데이터 타입으로 저장해서는 안된다. 접근 보조 기술이 없기 때문에 검색 크롤러도 해당 데이터를 크롤링 할 수 없다. 하지만 이때문에 커스텀요소와 관련된 메타데이터들에 대해서는 훌륭한 해결책이다. HTML 문법 이렇게 데이터를 담아놓을수 있다. count='3', name='doodream', weather='rain' 이라는 데이터가 담겨져 있다. JavaScript 에서 접근하기 let variable = document.getEleme..
HTML - [표준 모드와 호환 모드] W3C(World Wide Web Consortium)에서 웹표준을 지정하지 않았을 때에는 넷스케이프와 인터넷 익스플로러 용으로 웹페이지가 두가지로 나눠 작성이 되었다. 웹표준 제정당시 기존 브라우저들은 이표준형식 대로 웹 페이지들을 올바르게 묘사할 수 없었다. 그래서 두가지 형태를 제공하게 되었다. 표준 모드(standard mode), 호환 모드(quirks mode)로. 이러한 관계로 어떤모드로 렌더링 할 것인지 명시할 필요가 있어 DOCTYPE이 필요로 하게 되었고 DTD로 다양한 문서형식을 지정하여 렌더링을 지원하게 하였다. 현재는 HTML 5가 웹 표준이므로 특별한 경우가 아닌이상 모든 HTML에서 을 명시한다. 참고 developer.mozilla.org/ko/docs/Web/HTML/Qui..
HTML - [DOCTYPE] DOCTYPE(Document Type) HTML이 어떤 버전으로 작성되었는지 명시해주어 웹브라우저가 내용을 올바르게 표시할 수 있도록 해준다. 으로 선언하는데 이걸해주지 않으면 호환모드(quirks mode)로 동작한다. 호환모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다. DTD(Document Type Definition) 문서형식으로 DOCTYPE을 명시할 때 DTD를 지정해놓으면 HTML문서가 어떤 문서형식을 따르는지 알 수 있다. 문서형식으로서는 XHTML 1.1 XHTML 1.0 Strict DTD Transitional DTD Frameset DTD HTML 4.01 Strict DTD Transitional DTD Framese..
MongoDB - [express js app과 연결하기] MongoDB - 데이터베이스 서비스이다. www.mongodb.com/ The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud database on AWS, Azure, and GCP. Easily organize, use, and enrich data — in real time, anywhere. www.mongodb.com - 오른쪽 상단의 Try Free 를 선택해서 회원가입을 해준다. 하다보면 cluster라는 것을 만들어야 하는데 위 페이지를 보면 cloud 상에서 mongoDB를..
Node.js - 1 [설치 (express)] Node js - 기존의 javaScript는 웹 브라우저에서만 사용했다면 node.js가 나옴으로서 JAVA, python등과 같이 서버사이드에서도 사용가능하게 되었다. Express JS - node js를 이용해서 더 쉽게 무언가를 만들어내는 framework이다. node js는 React 설치 부분에 설치 과정이 나와있기 때문에 생략하겠습니다. node js 설치 자신이 만들고 싶은 부분에 package를 만들기 위해서 폴더를 만들고 npm init으로 package를 만들겠습니다. 폴더를 만들고 npm init을 하면 version이 깜빡이는데 엔터를 쳐주면서 기본값을 넣다가 author부분에 자신의 이름을 넣어주고 모조리 yes를 눌러주며 기본 package를 생성합니다. 이제 자신이 원하는..
React - [컨디셔널 렌더링, Router의 url로 변수 넘기기, React Hook Form, Context] 컨디셔널 렌더링 - 조건부 렌더링이라고도 하며 삼항연산자, if else 구문등으로 특정 조건을 만족하면 컨포넌트의 렌더링을 다르게 구현하는 방식이다. - 페이지와 코드를 줄이며 일부분만 렌더링 함으로서 페이지를 꾸밀수 있는 SPA(Single Page Application)을 지향한다. 이러한 삼항 연산자로 조건부 렌더링을 통해 다른 화면을 노출시킬수 있다. Router의 url로 변수 넘기기 - Router의 url에 key를 넣고 Link to = 'url'로 변수를 넘기면 해당 Router로 연결되는 컴포넌트에 해당 변수가 넘어가서 기능하게 된다. index.js에서 해당 url에 :page라는 key를 붙여놓고 HeaderLogin.js 컴포넌트에서 Link to로 url을 연결할 때 key(:..

티스토리툴바