Front End Develop Front End Develop

요즘 morioh.com 블로그에서 매우 유용한 글들을 많이 찾아볼 수 있어서 좋습니다. 포스팅을 한번 할 때마다 유용한 지식들이 습득되는 것 같아서 더 좋구요. 이번에는 javascript 기술을 향상시키는 12가지 개념에 대해서 알아보도록 합시다. 자바스크립트는 깊이 들어갈 수록 복잡한 언어입니다. 단순히 자바스크립트 개발자가 된다는 것은 자바스크립트 언어를 집요하게 기본 동작 원리를 알아가는 것이 필수 덕목이라고 생각합니다. 하루빨리 레거시한 코드와 기본 동작 원리를 깨우치지 못한 상태의 코드들을 개선하고 싶습니다. 그리고 jquery의 종말과 함께 바닐라 스크립트로 구성할 수 있는 모든 종류의 앱들을 환영하고 받아들일 준비가 되어 있어야 할 것입니다. 다양한 팁들을 지속적으로 업데이트 하고 있는 ..

수 많은 가상 선택자들이 있지만 아직까지 브라우저 환경에서 일부 지원하지 않는 현상 때문에 많이 사용해오지 못하고 있습니다. 점점 많은 css 속성과 환경에 대한 스타일링이 중요시되고 있는 사실은 분명합니다. 이제 가상 선택자 :is()와 :where()가 Safari (Tech Preview 106) 및 Firefox (버전 78)의 미리보기 버전에서 지원됩니다. Chrome의 구현은 여전히 언제 지원될지는 모릅니다. can i use에서 보시다시피 여전히 먼 훗날이 될 것 같은 선택자이지만 간단히 알아보고 가시죠. :is() :is()를 사용하면 반복을 획기적으로 줄일 수 있습니다. /* BEFORE */ .embed .save-button:hover, .attachment .save-button:h..

크롬 콘솔 숨은 기능들을 살펴봅시다. Chrome DevTools의 콘솔 유틸리티는 Chrome 브라우저에서 가장 많이 사용되는 가장 유용한 개발 도구 중 하나입니다. 웹 페이지에 추가 기능을 추가하는 소수의 기능을 제공합니다. 웹 페이지에서 디버깅, 프로파일 링 및 모니터링 작업을 도와줍니다. 이 게시물에서는 모두 Chrome 콘솔이 제공하는 매우 유용하지만 알려지지 않은 기능 중 일부를 검토합니다. 1.monitor 이 함수는 함수가 언제 호출되는지 알기 위해 함수를 모니터하는 데 사용됩니다. function traceFunc (arg) { } monitor(traceFunc);traceFunc 함수는 모니터 할 인수로 전달됩니다. 이제 traceFunc가 호출 될 때마다 모니터는 함수가 호출되었음을..

× 위와 같이 a 버튼으로 이벤트를 주는 것에 대해서 어떻게 생각하시나요? 왜 나쁜가요? 위 a 태그는 href가 없으므로 실제로는 링크가 아닙니다 (닫기 버튼은 링크가 아님). 말할 것도 없이, 누락 된 href에 대한 태그에 대해서 포커스를 맞출 수도 없습니다. 게다가, 위의 x 기호는“곱하기”또는“시간”으로 읽힐거에요... 전혀 SEO 설명에도 도움이되지 않습니다. 대신에 무엇을 사용할 것인가요? × 위와 같이 좋은 패턴으로 사용합시다. 아이콘을 넣고 싶을 때는? Close × 스크린 리더는 단지 Close, Button이라고만 읽힐 것입니다. (aria-hidden 속성이 있기 때문에) bootstrap 등을 사용할 경우에는 font-awesome을 사용할 수도 있겠지요. 부가적으로, 버튼에 대한..

VueJS가 점점 더 널리 보급됨에 따라 몇 가지 모범 사례가 나타나고 표준이되었습니다. 1. 항상 key를 v-for 의 속성으로 사용하세요. v-for 지시문과 함께 key 속성을 사용하면 데이터를 조작 할 때마다 애플리케이션이 예측 가능하게 됩니다. 키가 없으면 Vue는 DOM을 최대한 효율적으로 만들려고합니다. 이는 v-for의 요소가 순서대로 나타나지 않거나 동작이 예측하기 어려울 수 있음을 의미 할 수 있습니다. 각 요소에 대해 고유 한 키 참조가있는 경우 Vue 애플리케이션이 DOM 조작을 정확히 처리하는 방법을 더 잘 예측할 수 있습니다. 2. 이벤트에 케밥 케이스를 사용하세요. emit 커스텀 이벤트를 사용하는 경우 케밥 케이스를 사용하는 것이 좋습니다. 컴포넌트 전체의 일관성을 유지하고..

위의 그림으로 모든 스트링 메서드가 표현이 되겠지만 하나씩 살펴봅시다. // 1. length - 문자열 자바 스크립트에서 문자 수를 계산하는 데 사용됩니다. var str = "Hello Noel"; var x = str.length; // ** result ** // 10 // 2. toLocalLowerCase() - 문자열을 소문자로 변경하는 데 사용됩니다. var str = "Hello Noel"; var res = str.toLocaleLowerCase(); // ** result ** // hello noel // 3. toLocaleUpperCase() - 문자열을 대문자로 변경하는 데 사용됩니다. var str = "Hello Noel"; var res = str.toLocaleUpper..

Node.js 14가 release 됨에 따라 몇가지 기능이 추가되었습니다. 4/21을 기점으로 한 업데이트입니다. 이제 12.16.2 버전은 LTS가 되었습니다. 14버전은 아마도 10월경에 LTS가 될 것이라고 합니다. 퍼포먼스도 상향되었습니다. 안정적인 기능으로 진단 보고서 추가, 프로세스 및 로컬 리소스의 여러 단계를 통해 트랜잭션을 추적할 수 있는 실험적인 비동기 로컬 스토리지 API, 국제화 지원 등 다양한 기능들이 생겼습니다. 안정적인 진단기능 진단 보고서는 이제 Node.js 14에서 안정적인 기능입니다. 이 기능은 초기 진단 및 생산 문제 심사에 유용한 정보가 포함 된 쉽게 사용할 수있는 보고서를 제공합니다. Node.js, Java 및 Swift를 포함한 다양한 언어로 고객을 지원하는 ..

웹에는 접근성 이슈들이 많습니다. 모든 사용자가 사용하는 웹이라는 모토를 걸고있기 때문이죠. 웹은 컴퓨터와 인터넷이 연결된 현대에 있어 거의 모든 사람들이 매일 한번씩은 꼭 이용하게 되는 매개체입니다. Web Content Accessibility Guidelines (WCAG)에서는 매일 관련 웹 접근성에 대한 내용들을 업데이트 하고 있습니다. 우선 최근에 Light House에 대한 audit 결과들을 보면, Web Accessibility 항목에 있어 특히 반응형일 때 폰트 사이즈가 작으면 웹 접근성 이슈로 잡히게되어 있습니다. 또한 위와 같이 폰트 색상 대조에 대한 비율도 권고안으로 정해져 있습니다. 공식적으로 WCAG에서 권고하고 있는 텍스트 사이즈와 대조는 다음과 같습니다. 이 내용 출처의 필..