JS Stack/Front-end
Babel과 Polyfill
Babel과 Polyfill
2023.04.07What is Babel? Babel is a JavaScript compiler. ES6 문법을 구식 브라우저에서도 돌아가는 하위호환 문법으로 트랜스파일 해주는 트랜스파일러. 또는 컴파일러. https://babeljs.io/docs/ 기타 jsx변환이나 type 변환에 대한 상세한 내용은 공식 docs 참고. What is Polyfill? 문법에 대한 하위호환 지원은 babel이 하고, API에 대한 하위호환 지원은 Polyfill이 담당. 즉 ES5에 존재하지 않는 Promise 같은 객체를 구형 브라우저에서도 사용 할 수 있게, 해당 객체들을 정의해주는 역할. Promise = Promise ?? /* 자체 구현 Promise */; Object.entries = Object.entries ??..
CRA(Create React App) 관련
CRA(Create React App) 관련
2023.04.06디버깅? source map source map이 함께 생성됨. (default) source map은 원본 파일은 아니고 원본 파일과의 mapping 정보를 담고 있는 json 형태의 파일. 개발자 도구에서 원본 소스파일과 자동으로 연결해서 보여준다. 따라서 프로덕션 빌드에서는 제거 옵션 주고 빌드해야 함. browserlistrc? CRA를 쓰더라도 .browserlistrc 적용 된다. 공식 docs에 나와 있지는 않지만.. https://github.com/browserslist/browserslist/issues/391 CRA(Create React App)으로 프로젝트 생성하게 되면 기본적으로 .babelrc 설정이 불가능함. react-script의 webpack.config.json에 ba..
webpack 빌드 - 독립 library로 만들기
webpack 빌드 - 독립 library로 만들기
2023.04.05독립 library로 만들기 https://webpack.kr/guides/author-libraries/ webpack에 대한 기본적인 내용 예제 package.json "scripts": { "build:alpha": "cross-env REACT_APP_PROFILES=alpha npm-run-all webpack-module react-build", "build:real": "cross-env REACT_APP_PROFILES=real GENERATE_SOURCEMAP=false npm-run-all webpack-module react-build" }, npm-run-all로 [react-build와, 별도 library를 만들기 위한 webpack-module] 두 작업 모두 실행 webpac..
SameSite Cookie
SameSite Cookie
2020.06.15쿠키(Cookie)와 저장소(Storage) SameSite cookies explained https://web.dev/samesite-cookies-explained/ first-party cookie와 third-party cookie 브라우저는 도메인 별로 쿠키를 저장하고 있다. 따라서 다른 도메인으로 이동한다고 해서 쿠키가 삭제되지 않는다. 다른 사이트 갔다가 돌아왔을 때, 로그인 상태가 유지되는 것은 브라우저가 해당 도메인의 세션 쿠키를 다시 꺼내기 때문이다. 어떤 도메인에 요청할 때, 브라우저는 해당 도메인의 쿠키를 꺼내 헤더에 포함하여 전송하도록 되어 있다. 내가 현재 도메인 A에 있고, 페이지 내에 삽입된 이미지는 외부 도메인 B의 데이터다. 이미지를 불러오기 위하여 외부 도메인 B로 요..
Same-origin Policy, CORS
Same-origin Policy, CORS
2020.06.14Same-origin Policy와 CORS https://en.wikipedia.org/wiki/Same-origin_policy 영문 위키가 젤잘나와있음. 시나리오까지. W3C spec Same-origin Policy란? 스크립트에 적용되는 정책이며, 스크립트 내에서 다른 리소스, 데이터를 요청할 때 요청지와 데이터 출처가 Same-origin이 아니면 막는 정책 현재 스크립트를 실행하고 있는 주소와 (프로토콜, 호스트, 포트)가 동일한 주소를 Same-origin으로 판단한다. 이는 브라우저가 `` document.domain``을 보고 판단함. 좀 더 정확히는, Cross-origin read를 막는다. https://developer.mozilla.org/ko/docs/Web/Security/..
HTML5 data-* attribute
HTML5 data-* attribute
2018.11.23HTML5 data-* attribute```htmlOwl```Global attribute다.페이지 혹은 앱 내에서만 사용할 데이터에 지정한다. 이렇게 지정한 데이터 ``c "bird"``는 JS에서 불러와 사용할 수 있다. CSS에서도 불러와 사용할 수 있다는게 큰 특징!!```js// getAttribute()를 사용하기var test = document.getElementById('test');console.log(test.getAttribute("data-animal-type")); // .으로 접근하기 (IE 11 이상, 표준)var test = document.getElementById('test');console.log(test.dataset.animalType); // 자동으로 camel..
[HTML] form tag, input 태그 속성
[HTML] form tag, input 태그 속성
2017.06.10input 태그checkbox와 listbox는 ``html ``로 지정하면 서버에서 배열로 받을 수 있다.HTML5에서 input에 type이 많이 추가되었으니 참고할 것.(tel, email, url, date, ...) 이를 사용하면 좀 더 semantic하게 나타낼 수 있다.HTML5에서 input에 placeholder 등의 attribute가 추가되었으니 참고. 아무것도 입력 안하는 상태를 방지하려면 `` required`` 추가. 다른 길이 제한 속성을 쓰더라도, 별개로 써줘야 함.입력되는 문자의 최대 길이를 제한하려면 `` maxlength``입력되는 문자의 최소 길이를 제한하려면 `` maxlength``입력되는 문자의 패턴을 제한하려면 `` pattern``(정규표현식) - 근데 max..
[Front-end] Ajax
[Front-end] Ajax
2017.05.28Ajax : Asynchronous JavaScript and XML 프레임워크나 언어를 지칭하는 것이 아닌, 대화식 웹 어플리케이션 제작 기법을 의미 페이지 전환 없이 JS단에서 서버에 데이터를 요청하는 것이 Ajax Ajax 예? 자동완성 기능. 페이스북. 페이지 이동을 하지 않고 데이터를 불러오고, 댓글이 새로고침되니까 F12의 Network탭을 보면 주고받는 데이터를 확인할 수 있음 JSON ( JavaScript Object Notation ) 자바스크립트에서 사용하는 객체 형태로 데이터를 표시하는 형식이다. json data는 ``js eval()``을 이용해 바로 js 객체로 만들 수 있다. (``$.extend``를 사용해도 가능할 것 같다.) ```js let json = eval('('..
CSS Selector
CSS Selector
2017.05.24CSS Selectorcascading 우선순위```!important > style attribute > #id > .class > tag selector```같은 cascading 우선순위를 가질 경우 아래에 위치한 style이 더 높은 우선순위를 가진다.minify할 때 주의해야 할 점이, 같은 속성 같은 값을 지정하는 경우 cascading을 고려해서 일부러 따로 지정해놓은 경우도 하나로 합쳐버린다. 그래서 끝 값 1정도를 다르게 주어야 하는 경우가 있다.가장 구체적으로 지정된 selector가 제일 우선시 된다.그래서 ``html ``요렇게 있는 DOM에서... `` .body.center``로 선택한 것이 `` .body``로 선택한 것 보다 우선한다.이런 경우 `` .body.body``로 ..
CSS 팁과 기본 지식
CSS 팁과 기본 지식
2017.05.03CSS tip생활코딩 CSS 사전 뭔가를 숨길 때```cssheight: 0px;보다는display: none;을 사용하는 편이 좋다.``` 줄바꿈```css// 한문자 단위로 쪼개려면 word-break: break-all; // 스페이스바 나와도 안쪼개고 1자로 쭉 이어 갈거면(스크롤 있는 경우)white-space: nowrap;``` css 세로 가운데 정렬다양한 방법이 있지만, flex를 쓰거나 아래 링크에서 저자가 괜찮다고 한 방법이 좋아 보임.https://mytory.net/archives/9727 CSS selector2017/05/24 - [Web/Front-end] - CSS Selector px과 rem, empx - 절대 크기rem - root element(html)의 상대 크기..
[HTML, JS] refresh / redirect
[HTML, JS] refresh / redirect
2017.04.29사실 HTML과 JS를 이용해 redirect하는 것 보다 서버 측에서 HTTP redirection status code(301, 302)를 보내 redirect하도록 하는 것이 더 좋다. 2017/06/08 - [Web/Back-end] - [PHP] HTTP response header 수정 JS를 이용하면 JS가 비활성화 되어 있는 경우 제대로 동작하지 않으니 JS보다는 HTML을 사용한 방법이 나은 것 같다. HTML```htmlrefresh : redirect : `````content``에 url이 한꺼번에 들어간다는 것에 유의. JS```jsrefresh : location.reload() redirect : location.href='http://www.example.com/'```
[jQuery] CDN, Usage
[jQuery] CDN, Usage
2017.04.13jQuery보다 먼저 알았으면 좋았을 것들 jQueryjQuery는 주로 DOM, Ajax, 그리고 event와 effect를 처리하기 위해 사용하는데, effect같은 경우 css로 처리할 수도 있다. hover같은건 effect로 봐야하기 때문에 css로 처리하는 것이 좋고, onclick은 event로 봐야하기 때문에 JS로 처리해야 한다. effectcss로는 어려운 동적으로 페이지를 꾸미는 작업은 보통 jQuery Plugin을 활용해 처리하게 된다. DOM기존 JS로 DOM을 선택, 추가, 수정하려면 제한이 많은데, jQuery를 활용하면 복제, 이동 등의 작업도 간단히 처리할 수 있다. 그래서 DOM 관련 작업을 하다가 뭔가 복잡한 것 같으면 그냥 jQuery를 찾아보는게 더 빠를 수 있다...