전체 글
-
[CSS] non-boolean attribute warningCSS 2022. 9. 4. 16:52
Warning: Received `true` for a non-boolean attribute `속성`. If you want to write it to the DOM, pass a string instead: 속성="true" or 속성={value.toString()}. styled-components 사용 시 마주친 오류이다. 이 경고 메시지는 비표준 속성이 HTML DOM 요소에 첨부되고 있음을 나타낸다. const Link = props => ( {props.text} ) const StyledComp = styled(Link)` color: ${props => (props.red ? 'red' : 'blue')}; ` 위의 코드는 아래처럼 렌더링된다. Click React는 요소에 대해 유효한..
-
[JavaScript] use strictJavaScript 2022. 8. 30. 22:55
use strict 이 생겨난 이유 1. ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경 2. 하위 호환성 문제가 발생 3. 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 변경사항이 활성화되게 해놓음. use strict "use strict" 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다. 스크립트 최상단이 아니면 엄격 모드가 활성화되지 않을 수 있다. (주석 가능) "use strict"; 브라우저 콘솔 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점에 주의해야 한다. 해결 : 'use str..
-
[HTTP] HTTP 캐시etc. 2022. 8. 24. 19:39
캐시 (cache) '캐시는 요청과 관련된 응답을 저장하고 저장된 응답을 후속 요청에 재사용한다.' 즉 이전에 가져온 리소스들을 재사용함으로써 웹의 성능을 향상할 수 있다. 리소스들을 재사용함의 이점 레이턴시(Latency, 지연시간)와 네트워크 트래픽을 줄여줌으로써 리소스를 보여주는 데에 필요한 시간을 줄인다. => 클라이언트와 캐시가 가까울수록 응답 속도가 빨라진다. 요청을 서버에 전달할 필요가 없으므로 서버 부하가 적어진다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소이다. 반면 모든 리소스가 영원히 변하지 않는 것은 아니므로 리소스가 변하기 전까지만 캐싱하고 변한 이후에는 더이상 캐싱하지 않는 것이 중요하다. Cache-Control HTTP Cache-Control 헤더는 요청과..
-
[Git] 파일 및 폴더 대소문자 변경etc. 2022. 8. 21. 16:41
폴더 이름을 대소문자만 바꾸고 (ex: Folder -> folder) push를 하니 netlify에서 빌드하던 중 오류가 발생하였다. 오류를 살펴보니 파일 위치를 찾지 못하고 있었다. 찾아보니 원인은 Git은 기본적으로 파일 및 폴더의 대소문자를 구분하지 못한다고 한다. 그래서 폴더 이름을 대문자에서 소문자로 바뀌어도 여전히 github에서는 대문자로 남아있었다. 이를 해결하기 위해서 내가 사용한 방법은, 먼저 git ls-files 명령어로 작업 트리에 있는 파일에 대한 정보를 보고 내가 바꿀 폴더의 경로를 확인하였다. $ git ls-files 그리고 git mv를 이용하여 현재폴더명에서 임시폴더명으로 바꾼 다음 커밋 및 푸쉬, 다시 임시폴더명에서 변경할 폴더명으로 바꾸었다. 그랬더니 해결이 되었..
-
[HTML] 시맨틱 마크업HTML 2022. 8. 19. 16:22
구조화 문서에는 구조가 있다. 웹페이지 역시 문서이다. 그러므로 웹페이지는 구조화가 잘 되어야 한다. HTML5 이전까지 웹 페이지의 구조를 표현하는 태그가 없었기 때문에 태그를 남발하는 경향이 보였다. 그러한 코드 소스를 들여다 보면 문서의 구조 파악이 힘들어진다. 구조화를 해야 하는 이유 브라우저를 통해 보는 것 이상으로 웹 문서에 들어 있는 정보 탐색이 중요해지기 때문이다. 빅데이터와 함께 사물인터넷 시대에는 사물 속에 내장된 컴퓨터들이 스스로 찾든 검색 엔진을 이용하든 인터넷 상 웹 문서에서 의미 있는 정보를 찾는다. 그러므로 검색엔진이 좋아하는 웹사이트를 만들어야 웹 사이트의 가치가 올라간다. 검색엔진 최적화(SEO) 시맨틱 마크업 (Semantic Markup) html5에서는 문서의 구조와 ..
-
[React] 코드 분할과 React.lazyReact 2022. 8. 11. 16:46
코드 분할 Code-Splitting 번들링 Bundling 대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다. 코드 분할 하지만 사용자의 앱이 커지면 번들도 커지게 된다. 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 한다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다. 코드 분할은 앱을 “지연 로딩” 하게 도..
-
[JavaScript] var let const 차이점JavaScript 2022. 8. 8. 17:56
자바스크립트에서 변수를 선언할 때 키워드로는 var, let, const가 있다. let과 const는 ES6에 추가된 키워드이다. var let const Function-level scope 재선언 가능 재할당 가능 Block-level scope 재선언 불가능 재할당 가능 Block-level scope 재선언 불가능 재할당 불가능 Function-level scope와 Block-level scope Function-level scope 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. Block-level scope 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 재선언 let과 const를 사용시, 변수..
-
[HTML] <dialog> 태그HTML 2022. 8. 4. 16:30
HTML element는 대화 상자 또는 경고, 검사, 하위창 같은 인터랙티브한 컴포넌트를 나타낸다. Attributes Hello opne 속성은 dialog가 활성 상태이며 상호작용할 수 있음을 나타낸다. method dialog 열기 Hellow 닫기 show() : dialog 표시. 다른 요소(dialog 외의 요소)와 상호작용 할 수 있다. showModal() : dialog 표시. dialog 외의 요소와 상호작용이 금지된다. close() : dialog 닫음. Usage notes method="dialog" 특성을 사용한 요소는 제출 시 dialog를 닫게된다. 이 때, dialog의 returnValue 속성은 폼을 제출할 때 사용한 버튼의 value로 설정된다. CSS ::back..