Note
-
DNS_PROBE_FINISHED_NXDOMAINNote 2021. 5. 2. 12:20
특정 사이트 접속을 하려고 하니 위와 같은 에러가 나오면서 접속이 안 됐다. 사이트 문제인가 싶어서 다른 사람들에게 접속 확인을 부탁드려봤는데 다들 잘 들어가지신다고 하여서 엄청 당황스러웠다. 나는 맥북, 아이패드, 휴대폰(안드로이드) 모두 접속이 안됐는데.. 너무 당황스러웠다. 그래서 해결 방법을 찾아봤다. DNS(Domain Name System) 우리가 인터넷을 편리하게 쓰게 해주는 것으로, 영문/한글 주소를 IP 네트워크에서 찾아갈 수 있는 IP 주소로 변환해 준다. DNS_PROBE_FINISHED_NXDOMAIN DNS 서버에서 url 창에 입력한 도메인 이름과 매칭 되는 IP 주소를 찾을 수 없는 경우 발생하는 오류 방법(맥북, Mac DNS 설정) 1. Apple 메뉴를 클릭 후 시스템 환..
-
Input type="date"Note 2021. 4. 28. 17:34
date 유형의 input 요소는 유효성 검증을 포함하는 텍스트 상자 또는 특별한 날짜 선택 인터페이스를 사용해 날짜를 입력할 수 있는 입력 칸을 생성 특성 value : 날짜를 지정해서 입력 칸의 기본값을 지정할 수 있음 표시 값과 실제 value의 불일치 — 입력 칸에 표시되는 값은 사용자 브라우저의 로케일에 기반한 서식을 따라가지만, value는 항상 yyyy-mm-dd의 서식을 사용한다. max : 허용하는 가장 늦은 날짜 입력받은 value가 max보다 더 나중이라면 유효성 검증에 실패한다. max의 값이 yyyy-mm-dd 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주 min : 허용하는 가장 이른 날짜 입력받은 value가 min보다 더 이전이라면 유효성 검증에 실패..
-
Reflow, RepaintNote 2021. 4. 23. 12:16
reflow와 repaint는 수정된 렌더 트리를 다시 렌더링 하는 과정에서 발생하는 것으로 웹 애플리케이션의 성능을 떨어뜨리는 주된 원인 중에 하나이다. 극단적인 경우에는 CSS 효과로 인해 JavaScript의 실행 속도가 느려질 수도 있다. Repaint(리페인트) 리페인트는 레이아웃에는 영향을 주지 않지만, 가시성에 영향을 주는 엘리먼트가 변경되면 발생한다. (background-color, outline, opacity 등) Reflow(리플로우) 리플로우는 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링 한다. 단일 엘리먼트 하나를 변경해도, 하위 엘리먼트나 상위 엘리먼트 등에 영향을 미칠 수 있다. 리플로우가 트리거 되는 경우 - DOM 엘리먼트 ..
-
유닛 테스트(Unit Test), 테스트 주도 개발(Test-driven development)Note 2021. 4. 22. 12:40
유닛 테스트(Unit Test) 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다. 즉, 모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차를 말한다. 모든 경우를 검사할 필요는 없지만 핵심적인 경우는 유닛 테스트 코드를 작성하는 것이 일반적이다. 유닛 테스트를 왜 만드는가? 문제점 발견 유닛 테스트의 목적은 프로그램의 각 부분을 고립시켜서 각각의 부분이 정확하게 동작하는지 확인하는 것이다. 즉, 프로그램을 작은 단위로 쪼개서 각 단위가 정확하게 동작하는지 검사하고 이를 통해 문제 발생 시 정확하게 어느 부분이 잘못되었는지를 재빨리 확인할 수 있게 해 준다. 변경 용이 언제라도 유닛 테스트를 믿고 리팩토링을 할 수 있다. 리팩토링 후에도 해당 모듈이 의도대로..
-
Sass/SCSSNote 2021. 4. 19. 02:18
HTML, CSS를 다루다 여러 번 들어본 Sass, SCSS에 대해 알아보려고 한다. 이것들은 CSS Preprocessor(CSS 전처리기)라고 불리는데, CSS가 동작하기 전에 사용하고 CSS의 불편함을 줄여주는데 도움이 된다고 한다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다. 위에서 언급한 CSS 전처리기만으로는 웹에서 CSS가 동작하지 않는다. 웹에서 직접 동작하지 않으니 작성한 전처리기를 웹에서 동작 가능하도록 표준 CSS로 컴파일 해야 한다. Sass와 SCSS는 차이점 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CS..
-
프론트엔드 개발자가 신경 써야 할 보안Note 2021. 4. 18. 19:37
보안 기능 측정 구글 lighthouse를 사용해서 성능, SEO, 접근성 점수를 측정할 수 있는 것처럼 비슷하게 보안 기능을 측정할 수 있는 사이트가 있다. Security Headers는 response header를 기반으로 보안 점수를 제공해 준다. 구글 네이버 적절한 response 헤더를 반환하도록 구성하는 것이 프론트엔드 책임이다. 내가 만드는 웹어플리케이션의 클라우드 호스팅 제공 업체가 어떤 response 헤더를 사용하는지 이에 대한 작동하는 방식을 배우고 적절하게 구성하면 된다. 컨텐츠 보안 정책(CSP) 사용 컨텐츠 보안 정책 (CSP, Content-Security-Policy)은 front-end 애플리케이션의 안전을 위해 시작할 수 있는 첫 단계라고 할 수 있다. CSP는 Moz..