반응형

JavaScript 8

자바스크립트에서 enum 사용하는 방법

javascript에서 enum을 구현하는 방법들 C#이나 Java와 같은 다른 언어와 달리 자바스크립트는 열거형에 대한 기본 지원을 제공하지 않는다.자바스크립트에서 enum을 구현하는 방법은 여러 가지가 있다. 각 구현에는 고유한 장단점이 있다.  Javascript에는 enum이라는 예약된 키워드가 있지만 현재는 언어에서 어떤 용도로도 사용되지 않는다. 향후 사용을 위해 예약되어 있을 뿐이다.  enum을 객체 키로 정의해서 구현하기enum의 기본 구현을 위해 enum 유형을 캡슐화하는 객체를 정의하고 각 열거형 값에 대한 키를 할당할 수 있다.예를 들어, 각 계절을 키로 하고 대표 문자열을 값으로 하는 객체로 계절을 표현할 수 있다.  숫자를 값으로 사용하여 이를 수행할 수도 있다.   이 방법은 ..

동시성, 병렬성, 그리고 자바스크립트에 대한 이해

동시성, 병렬성, 그리고 자바스크립트에 대한 이해 원문 : https://www.rugu.dev/en/blog/concurrency-and-parallelism/ Understanding Concurrency, Parallelism and JS | ruguUnderstanding Concurrency, Parallelism and JS Written at 2024-09-08 - Updated at 2024-09-18 Up until now, I was not aware that concurrency and parallelism were actually different things since they are often used interchangeably by some. I just learned tha..

구글이 색인 과정에서 자바스크립트를 처리하는 방법

구글이 색인 과정에서 자바스크립트를 처리하는 방법 원문: https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process How Google handles JavaScript throughout the indexing process - VercelOver the years, Google's treatment of JavaScript has changed, leaving us with misconceptions of how it's indexed. Here, we debunk the myths.vercel.com  MERJ와 버셀의 실증적 연구를 통해 구글의 렌더링 과정을 밝혀보겠습니다. 검색 엔진이 웹 페이지를 크롤..

함수(function)와 화살표 함수(arrow fucntion) 차이 5가지와 예시

자바스크립트에서 일반 함수(function)와 화살표 함수(arrow function)는 모두 함수를 생성하는 방법이지만 분명한 차이가 있다. 이 차이 때문에 function과 화살표 함수는 서로 다른 용도로 사용된다. function은 일반 함수로 사용되며, 객체의 메서드로 사용할 수 있다. 반면에 화살표 함수는 단순한 함수를 만드는 데 사용되며, 특히 callback 함수로 많이 사용된다. 아래는 5가지 차이점와 예시이다. 1. this function 키워드를 사용하여 생성된 함수 내에서 this는 함수가 호출된 컨텍스트에 의해 결정된다. 이것은 실행 컨텍스트의 this 바인딩과 동일하다. const myObject = { value: 10, getValue: function() { return t..

development 2023.03.15

Nuxt에서 애드센스 사용하는 방법 3가지

Nuxt에서 구글 애드센스를 사용하는 방법 정리 방법 1) Nuxt 앱 템플릿에 추가 root 디렉토리에 app.html 파일을 만든다. 기본적으로 app.html 파일은 다음과 같다. 여기에 아래처럼 애드센스 정보를 넣으면 된다. data-ad-client에 애드센스 ID를 넣으면 모든 경로에서 애드센스가 동작한다. 방법 2) @nuxtjs/google-adsense 라이브러리 사용 두 번째 방법은 라이브러리를 사용하는 방법이다. 먼저 아래처럼 설치한다. yarn add @nuxtjs/google-adsense 또는 npm i --save @nuxtjs/google-adsense nuxt.config.js 파일에 아래처럼 모듈 추가 및 애드센스 ID를 추가한다. 방법 3) 구성 파일에 스니펫 추가 마지..

development 2023.02.05

vue 보안 취약점과 방지 방법

프론트엔드 프레임워크의 보안은 프레임워크와 프레임워크가 의존하는 기본 언어를 모두 커버하기 때문에 매우 광범위할 수 있다. 이 글에서는 애플리케이션을 취약하게 하는 vue 구현에 대해 설명한다. TL;DR vue 또는 기타 프론트엔드 프레임워크를 사용할 때 가장 기본적인 보안 규칙은 신뢰할 수 없는 콘텐츠를 컴포넌트 템플릿으로 사용하지 않는 것이다. 어떤 웹 애플리케이션이든 HTML, CSS 또는 자바스크립트로 검증되지 않은 사용자 제공 입력을 실행하는 것은 위험할 수 있으므로 가능한 한 피해야 한다. 1. HTML Content Injection VueJS는 원시 HTML을 렌더링 하기 위한 디렉티브 v-html를 제공한다. 디렉티브는 Vue에 의해 제공되는 특별한 속성이다. 임의의 HTML을 동적으로..

development 2022.12.11

프론트엔드, 리액트 면접 인터뷰

프론트엔드, 리액트 개발자 면접 기본 질문들 정리 자주 물어보는 자바스크립트와 리액트 기본 질문들을 정리하였다. 이밖에도 프로젝트나 다양한 과제를 해결하기 위해 어떻게 접근했는지, 개발 과정에서 발생한 문제와 문제 해결 능력도 준비를 해야 한다. 1. array 관련 함수들 (map, forEach, filter, reduce) array 함수들과 polyfill 구현 방법 정리. 폴리필이란 네이티브로 구현되지 않은 오래된 브라우저의 최신 기능에 사용되는 코드 스니펫(JavaScript Web 아키텍처 관점)이다. 간단히 말해서, polyfill은 네이티브 자바스크립트 함수의 커스텀 구현이다. 1) map map() 메서드는 배열을 반복하고 맵 본체에 기입할 로직을 계산하여 새 배열을 반환한다. 아래는 ..

development 2022.12.03

초보자를 위한 리액트(React) 개발 팁

리액트 초보자를 위한 7가지 팁 정리 1. 컴포넌트 name 설정 버그가 있는 컴포넌트를 파악하려면 항상 컴포넌트에 이름을 지정하는 것이 중요하다. React Router 또는 외부 라이브러리를 사용하기 시작하면 더욱 그렇다. // Avoid thoses notations export default () => {}; export default class extends React.Component {}; default본 export를 사용할지 named export를 사용할지에 대한 논쟁이 있다. default export는 컴포넌트명이 프로젝트에서 일관되도록 보장하지 않는다. 게다가 트리 쉐이킹에 덜 효과적이다. 2. 컴포넌트를 expose하는 방법에 관계없이 이름 설정 컴포넌트를 호스팅 하는 클래스 이..

development 2022.11.30
반응형