Front End Develop Front End Develop

JavaScript에서는 다른 방식으로 동일한 결과를 얻을 수있는 자유가 있습니다. 생성자와 리터럴 접근법을 사용하여 문자열, 숫자, 객체, 배열 등의 값을 만들 수 있습니다. 이러한 접근 방식 중 하나를 사용하여 동일한 값을 얻을 수 있습니다. 그러나 런타임 버그를 피하는 데 유용한 몇 가지 차이점이 여전히 있습니다. 결론부터 말하면 Literal 방식이 Contructor 방법보다 낫습니다. Literal과 contructor 방식이 무엇이냐면 다음과 같습니다. 일반적으로 리터럴과 primitive를 선호하고 내장 생성자를 피해야합니다. literal과 primitive를 선호하는 이유는?? 1. 리터럴은 더 짧고 읽고 쓰기 쉽습니다. let o = new Object(); let o = {}; //..

요즘 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를 포함한 다양한 언어로 고객을 지원하는 ..