본문 바로가기
728x90
프로그래밍 「 자바스크립트 편」Javascript 생성기 함수 이해 ES6 (ES2015)에 도입 된 JavaScript 생성기 함수는 함수 실행 프로세스를 제어 할 수있는 고유 한 종류의 함수입니다. 출처 : https://static.wixstatic.com/ 호출될 때 완료될 때까지 실행되는 기존 함수와 달리 생성기 함수는 컨텍스트를 유지하면서 필요한 만큼 "일시 중지" 및 "다시 시작"할 수 있습니다. 생성기 기능이란 무엇입니까? 생성기 함수는 키워드를 사용하여 정의되며 생성기라는 개체를 반환합니다. 이 객체는 반복 가능한 프로토콜과 반복기 프로토콜을 모두 준수합니다. 결과적으로 생성기는 값을 한 번에 모두 계산하고 배열 또는 다른 데이터 구조로 반환하는 대신 요청별로 일련의 값을 생성할 수 있습니다. 이 "지연 평가" 기능은 계산 비용이 많이 들거나 잠재적으로 .. 2023. 7. 2.
프로그래밍 「 자바스크립트 편」프론트엔드 엔지니어로서: 알아야 할 JSON.stringify에 대한 9가지 비밀 님이 촬영 한 사진 페르난도 브라질 on Unsplash 프론트엔드 개발 엔지니어로서 JSON.stringify를 사용했어야 하지만 그 비밀을 모두 알고 있습니까? 옛날 옛적에 나는 그것 때문에 직장에서 돌이킬 수 없는 실수를 저질렀다. 내가 더 일찍 그것에 대해 알았 더라면,이 비극은 일어나지 않았을 것입니다. JSON.stringify 이해 기본적으로 JSON.stringify는 객체를 JSON 문자열로 변환합니다. 동시에 JSON.stringify에는 다음과 같은 규칙이 있습니다. 1. , , 및 는 유효한 JSON 값이 아닙니다. 변환 중에 이러한 값이 발견되면 생략되거나(개체에서 발견된 경우) 배열에서 발견된 경우로 변경됩니다 . 또는 와 같은 "순수한" 값을 전달할 때 반환할 수 있습니다.un.. 2023. 7. 2.
프로그래밍 「 자바스크립트 편」JavaScript 전역 변수 JavaScript 전역 변수란 무엇입니까? JavaScript 전역 변수는 선언된 위치에 관계없이 JavaScript 코드의 어느 위치에서나 액세스할 수 있는 변수입니다. 이는 변수의 범위가 전체 프로그램으로 확장되어 다른 함수, 블록 또는 스크립트에서 해당 값을 사용하고 수정할 수 있음을 의미합니다. [1] 특정 함수나 블록 외부에서 변수를 선언하면 전역 변수가 됩니다. 즉, 다른 함수, 이벤트 처리기 또는 외부 스크립트를 포함하여 JavaScript 코드 내의 모든 곳에서 액세스하고 수정할 수 있습니다. 전역 변수는 코드의 여러 부분에서 공유하고 액세스해야 하는 데이터 또는 값을 저장해야 하는 경우에 유용합니다. 공유 상태를 유지 관리하거나 응용 프로그램의 여러 구성 요소 간에 정보를 공유하는 방법.. 2023. 7. 2.
프로그래밍 「 자바스크립트 편」GitHub Pages에 React 애플리케이션을 배포하는 방법 님이 촬영 한 사진 벤치 회계 on Unsplash GitHub Pages에 React 애플리케이션을 배포하는 것은 프로젝트를 소개하는 간단하고 비용 효율적인 방법이 될 수 있습니다. 이 무료 GitHub 서비스를 사용하면 GitHub 리포지토리에서 직접 정적 웹 페이지를 호스팅할 수 있습니다. 이 기사에서는 Vite를 사용하여 GitHub Pages에 React 애플리케이션을 배포하는 방법을 보여줍니다. Vite는 웹 애플리케이션을 위한 차세대 프런트 엔드 도구입니다. 빠른 개발 경험을 제공하고 프로덕션을 위해 프로젝트를 최적화합니다. 다음은 이 게시물을 원활하게 탐색하는 데 도움이 되는 목차입니다. · 전제 조건 · 1단계: GitHub 리포지토리 만들기· 2단계: React 및 TypeScript .. 2023. 7. 2.
프로그래밍 「 자바스크립트 편」프로그래밍 기술 수준을 높이는 10가지 고급 JavaScript 개념 님이 촬영 한 사진 마이크로소프트 365 on Unsplash 최고의 프로그래밍 회사에서 일한 노련한 Python 개발자로서 저는 프로그래밍 기술을 지속적으로 배우고 연마하는 것이 중요하다는 것을 알고 있습니다. 파이썬이 제 모국어였지만 저는 JavaScript에 도전했고 프로그래밍 능력을 진정으로 향상시킬 수 있는 몇 가지 고급 개념을 발견했습니다. 이 기사에서는 이러한 개념 중 10가지를 공유하고 예제와 코드 조각을 제공합니다. 그럼 JavaScript의 흥미진진한 세계로 뛰어들어 탐험해 봅시다! 1. 폐쇄 클로저는 외부 함수의 실행이 완료된 후에도 함수가 외부 범위에서 변수에 대한 액세스를 유지할 수 있도록 하는 JavaScript의 강력한 개념입니다. 캡슐화 및 데이터 개인 정보 보호와 같은 시나.. 2023. 7. 2.
프로그래밍 「 자바스크립트 편」할인 코드를 자동으로 추가하는 방법 Shopify Pure JS를 사용한 결제 할인 코드는 모든 eCom 및 Shopify 상점 소유자에게 점점 더 중요해지고 있습니다. 블랙 프라이데이 판매의 불꽃을 피우거나, 최초 전환을 유도하거나, 고객 유지를 강화하거나, 제휴 제안의 일부로 사용하든, 할인 코드는 성공적인 Shopify 저장. 이 기사에서는 결제 시 이러한 할인 코드를 자동으로 적용하여 Shopify 사이트에서 고객 경험을 향상시키는 기술을 살펴보겠습니다. Shopify는 전자 상거래 세계의 초석이 되었습니다. 그러나 보다 원활한 사용자 경험을 위해 미세 조정할 수 있는 플랫폼 측면이 있습니다. 그러한 측면 중 하나는 할인 코드 신청 절차입니다. 현재 할인 코드 상자는 특히 모바일 인터페이스에서 고객이 놓치는 경우가 많아 기회를 놓치게 됩니다. 또한 코드를 입력하는 작업으로 .. 2023. 7. 2.
프로그래밍 「 자바스크립트 편」서버에 파일을 업로드하는 다양한 방법 서버에 파일을 업로드하는 방법에는 여러 가지가 있으며 각각 고유한 장점과 단점이 있습니다. 이 기사는 월드 와이드 웹의 가장 기본적인 기능에 사용되는 프로토콜에 대한 간결한 설명입니다 출처 : https://i.ytimg.com/ FTP(파일 전송 프로토콜) FTP는 클라이언트에서 컴퓨터 네트워크의 서버로 파일을 전송하는 표준 네트워크 프로토콜입니다. 사용이 간편하지만 전송된 데이터에 대한 암호화를 제공하지 않습니다. const Jsftp = require('jsftp'); const ftp = new Jsftp({ host: "ftp.example.com", port: 21, // defaults to 21 user: "username", // defaults to "anonymous" pass: "p.. 2023. 6. 25.
프로그래밍 「 자바스크립트 편」Strapi vs Nest.js: 백엔드 개발의 단순성과 유연성에 대한 이야기 지난 몇 주 동안 저는 한 번도 사용해 본 적이 없는 몇 가지 다른 기술을 접할 기회가 있었습니다. 저는 IT 회사에서 업무 효율성과 속도를 높이기 위해 회사에서 사용할 사내 소프트웨어를 개발하고 있습니다. 신제품을 개발할 때마다 모든 개발자가 거쳐야 하는 가장 중요한 고려 사항 중 하나는 사용할 스택입니다. 고려해야 할 사항 중 하나는 '누가 사용할 것인가'였습니다. 이 경우에는 이미 답변이 있었지만 장기적으로는 제품을 광고하기 위해 인플루언서를 찾는 많은 사람들이 사용할 것입니다. 그래서, 회사 소유자. CTO는 빠르고 쉬운 출시를 원했기 때문에 Strapi와 함께 몇 가지 연구와 테스트를 수행해야 했습니다. 스트라피 제 생각에 Strapi는 프로젝트를위한 백엔드 데이터베이스 및 API를 만들고자하는.. 2023. 6. 25.
프로그래밍 「 자바스크립트 편」Async/Await를 사용한 비동기 JavaScript 단순화 비동기 프로그래밍은 API에서 데이터를 가져오는 것과 같이 시간이 많이 걸리는 작업을 처리하기 위해 JavaScript에서 필수적입니다. 전통적으로 개발자는 콜백과 promise를 사용하여 비동기 코드를 관리했습니다. 그러나 ECMAScript 2017(ES8)에 async/await가 도입되면서 JavaScript는 비동기 작업 작업을 위한 보다 간결하고 직관적인 구문을 제공합니다. 이 기사에서는 async/await의 기능을 살펴보고 함수를 사용하여 무료 API에서 데이터를 가져오는 방법을 보여줍니다 . async/await의 세계로 뛰어들어 비동기 코드를 단순화해 보겠습니다!fetch 님이 촬영 한 사진 브래든 컬럼 on Unsplash Async/Await 이해: Async/await는 보다 동기.. 2023. 6. 25.
프로그래밍 「 자바스크립트 편」예제와 함께 설명되는 가장 유용한 20가지 JavaScript 배열 방법 님이 촬영 한 사진 케빈 칸라스 on Unsplash 예제와 함께 설명되는 가장 유용한 20가지 JavaScript 배열 방법 JavaScript 배열은 개발자가 데이터를 효율적으로 조작하고 작업할 수 있도록 하는 다양한 메서드 집합을 제공합니다. 이 기사에서는 이러한 강력한 도구를 마스터하는 데 도움이 되는 가장 유용한 20가지 JavaScript 배열 방법과 실제 예제를 살펴봅니다. push(): push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다. const numbers = [1, 2, 3]; numbers.push(4, 5); console.log(numbers); // Output: [1, 2, 3, 4, 5] pop(): pop() 메서드는 배열에서 마지.. 2023. 6. 25.
프로그래밍 「 자바스크립트 편」코딩새 배열 메서드: array.at() 님이 촬영 한 사진 블레이크 코날리 on Unsplash JavaScript 배열의 인덱스는 0부터 시작하고 첫 번째 요소의 인덱스는 0이며 마지막 요소의 인덱스는 배열의 길이에서 1을 뺀 값과 같습니다. 과거에는 일반적으로 대괄호를 사용하여 인덱스로 배열 요소에 액세스했습니다: array[index], 지정된 인덱스가 잘못된 값인 경우 JavaScript 배열은 오류를 보고하지 않지만 정의되지 않은 것을 반환합니다. const array = ['this is the first element', 'this is the second element', 'this is the last element']; console.log(arr[0]) // logs 'this is the first element' con.. 2023. 6. 25.
프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 간단한 브라우저 코드 편집기 빌드 소개 이 자습서에서는 브라우저에서 직접 JavaScript 코드를 작성, 편집 및 실행할 수 있는 기본 JavaScript 코드 편집기를 빌드하는 방법을 살펴봅니다. 이 자습서를 마치면 JavaScript 코드 조각을 실험할 수 있는 기능적 코드 편집기가 있습니다. 미리보기는 다음과 같습니다. 시작하자! HTML 구조 코드 편집기를 만들려면 기본 HTML 구조부터 시작합니다. Run Code CSS 스타일링 코드 편집기를 시각적으로 매력적으로 만들기 위해 몇 가지 CSS 스타일을 적용합니다. body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { display: flex; flex-direction: column; alig.. 2023. 6. 25.
728x90