본문 바로가기

웹 개발33

FP 패러다임. 내가 배운 것. 제가 가장 최근에 만든 프로젝트는 다트 스코어인데, 이 프로젝트를 위해 자바스크립트 언어의 함수 프로그래밍 패러다임에 대해 배운 것을 연습했습니다. 여기 내 생각 중 몇 가지가 있습니다. 기능 면에서 더 고민하는 것이 힘들 때도 있었고, 글로벌 변수에 의존하지 않고 순수하게 기능을 유지하려다 보면 고통으로 변해 한 가지를 이루기 위해 많은 기능을 만들어야 하는 것이 불필요하게 느껴질 수 있었다. FP의 필요성을 이해하고 일부 대규모 앱이 코드를 유지 보수하기 위해 FP를 사용하는 이유를 알 수 있습니다. 재귀, 폐쇄의 사용, 카레링, 기능 구성과 같은 이런 식으로 생각하면서 유용한 기술과 기술을 많이 배웠습니다. 큰 프로그램을 만들 때 데이터를 불변으로 유지하는 것은 타당하지만, 당신의 앱이 빠르기를 원.. 2022. 1. 12.

Nullish 병합 연산자(?) Nullish 병합 연산자(??)는 왼쪽(첫 번째 인수)이 null이거나 정의되지 않은 경우에만 연산자(두 번째 인수)의 오른쪽을 반환하는 논리 연산자이다. 다른 모든 경우에는 첫 번째 인수를 반환합니다. 좀 더 명확히 하기 위해 예를 보겠습니다. 위의 예에서 보셨듯이 정의되지 않은 연산자가 연산자 왼쪽에 있기 때문에 Hello가 반환됩니다. null이 정의되지 않은 위치였다면 결과는 동일했을 것이다. 그리고 두 번째 예에서 첫 번째 인수에 null이 아니거나 정의되지 않은 것이 있다면 연산자는 두 번째 인수를 확인하지 않고 바로 첫 번째 값을 출력한다. ECMAScript 2020에 추가된 이유 그래서 우리가 변수에 기본값을 부여하고자 할 때마다 OR ( || ) 논리 연산자를 사용했다. 그러나 OR .. 2022. 1. 11.

Javascript에서 Promise 개체의 기본 제공 메서드 만약 당신이 자바스크립트 개발자로 일한 지 오래되었다면, 당신은 Promise를 발견했을 것이다. 그렇지 않다면 간단한 소개를 하겠습니다. 나는 오랫동안 약속들을 다뤄왔고, 그것들이 자바스크립트에서 비동기 동작을 나타내는 좋은 방법이라고 생각한다. 이 제품들은 훌륭하지만, 여전히 우리 대부분이 알지 못하는 내장 기능들이 많이 있습니다(일주일 전까지만 해도요. 오늘 이 게시물을 통해 저는 Promise 객체의 4가지 흥미로운 빌트인 특징을 설명하고자 합니다. 먼저 데모에 사용한 유틸리티에 대해 살펴보겠습니다. // configs for the createPromiseArrayFromConfig function const allItemsWillResolve = [ { settleAfterSeconds: 1,.. 2022. 1. 11.

내가 지금까지 한 일 2부 (JS) 과거 블로그를 통해 현재 프로젝트를 진행하고 있는데, 이것이 제가 시간을 들여 작업한 것입니다. HTML, CSS, 자바스크립트로 만든 Roster`s의 간단한 메뉴입니다. 자바스크립트를 현대 영어로 번역할 때 경험이 부족해서 제가 설명하기가 좀 복잡할 것 같습니다. 제가 수탉 메뉴에 자바스크립트를 추가하는 것에 대해 설명하려고 하는 동안 양해해 주세요. 제가 만든 메뉴는 최대한 단순하면서도 우아한 느낌을 더하고 싶었습니다. 그래서 저는 간단한 메뉴를 만드는 대신 클릭할 때마다 페이드 인과 페이드 아웃을 애니메이션화하는 것을 추구했습니다. 이 애니메이션을 하기 위해서는 CSS와 JavaScript를 함께 만들어야 제대로 동작할 수 있었습니다. CSS 부분은 페이드인 및 페이드아웃의 원인이며, JavaSc.. 2022. 1. 11.

자바스크립트에서 어떤 종류의 루프가 가장 빠릅니까? 어떤 루프 또는 반복기가 사용자의 요구에 적합한지 알아보고 앱 성능을 해치는 어리석은 실수를 방지하십시오. 웹 개발에서 자바스크립트는 새로운 센세이션을 일으키고 있다. NodeJS, React, Angular Vue 등과 같은 JS 프레임워크뿐만 아니라 바닐라 JS도 많은 팬층을 보유하고 있습니다. 이제 현대 자바스크립트에 대해 이야기해보자. 거의 모든 프로그래밍 언어는 루프를 사용한다. 현대 JS 언어는 가치에 대한 반복에 있어 많은 유연성을 제공합니다. 문제는, 어떤 루프와 반복이 당신의 요구에 가장 잘 맞는지 아는가 하는 것입니다. 루프에 대해 , for (reverse), for …of , foreach , for …in 및 for…wait 등 다양한 옵션을 사용할 수 있습니다. 그 기사는 그러한.. 2022. 1. 11.

JavaScript의 기본 VS 비기본/참조 유형 원시 대 원시적이지 않은 것의 차이와 작동을 5/분 안에 이해합시다. 기본 데이터 형식은 문자열, 숫자, 부울, 정의되지 않음, Null입니다. 비기본/참조 유형은 배열 , 객체, 함수입니다. 이제 먼저 이러한 값이 메모리에 저장되는 방법에 대해 알아보겠습니다. Primative 값은 Stack by value에 저장되고 non-primative 값은 참조로 저장됩니다. 변수 let name=" Humza "를 정의할 때 스택에 저장됩니다. 예를 들어 설명하겠습니다. 이제 출력은 "함자" 또는 "사지드"가 될 것 같습니까? 원시 값이 값으로 스택에 저장되므로 한 값이 변경되었을 때 다른 값에 영향을 미치지 않기 때문에 "함자"가 될 것이다. 힙 케이스에서는 어떤 일이 일어날까요? 힙은 크지만 속도가 느린.. 2022. 1. 4.

javascript의 비동기 - 이전 스타일 대 약속 대 RxJS 스케줄러 이벤트 루프 대기열 - javascript에서 비동기 기능을 제공합니다. 이벤트 대기열에 추가된 작업은 기본 스레드 작업 이후에 실행됩니다. javascript에서 다른 방법으로 비동기 작업을 실행할 수 있습니다. 그 중 일부는 다음과 같다. 이전 스타일의 콜백 함수: 아래 예에서 콜백은 로드 함수로 전달되며 XMLHtpRequest onload 함수가 실행되면 비동기적으로 호출됩니다(이벤트 큐에 추가됨). 약속: Promise는 콜백 함수를 취하는 .then() 블록을 가지고 있다. 따라서 주 작업 코드 .를 실행한 후 콜백 함수가 비동기적으로 실행됩니다(이벤트 큐에 추가됨). .the() 콜백 함수가 여러 개 있을 경우 모든 함수는 차례로 실행됩니다. 그러므로 각 .ten() 콜백 함수는 .ten().. 2022. 1. 4.

내가 자바스크립트를 좋아하는 4가지 이유 나는 자바스크립트로 일하는 게 너무 좋아. 자바스크립트가 무슨 뜻이죠? 리액트 JS? TypeScript? 아니요. 저는 주로 바닐라 자바스크립트로 작업하는 걸 좋아해요. 프레임워크, 라이브러리 등은 필요하지 않습니다(최소한의 프레임워크만 있으면 됩니다). 근데 왜 나는 평범한 바닐라 JS를 그렇게 좋아할까? 기본적으로, 동적이고 해석된다는 것으로 요약됩니다. 이 언어를 사용하는 다른 모든 것을 배우기 전에 먼저 이해해야 한다는 사실, 웹의 언어이며 화살표 기능은 매우 간단합니다(그리고 나중에 논의해야 할 다른 이유). 몇 가지 세부 사항에 대해 더 자세히 살펴보겠습니다. 1. JavaScript는 동적이며 인터프리터링됩니다. 겉으로 보기에는, 자바스크립트는 웹사이트를 더 상호작용적으로 만들기 위해 사용.. 2022. 1. 4.

프런트엔드 개발자를 위한 멋진 웹 사이트 DevDocs DevDocs는 빠르고 구성 가능하며 검색 가능한 인터페이스에 여러 API 문서를 결합합니다. 소형 개발 도구 BASE64 인코딩, JSON 포맷터 등을 포함한 개발자들을 위한 유용한 도구 목록을 제공한다. README.so 오픈 소스 프로젝트에 적합한 형식의 README 파일을 만드는 데 도움이 됩니다. 메타 태그 소셜 플랫폼마다 HTML 메타 태그에 따라 URL 미리보기 페이지가 표시됩니다. 웹 사이트를 다른 플랫폼과 더 잘 호환되도록 하려면 HTML 파일에 다른 메타 태그를 추가해야 합니다. 그러나 이 과정은 지루하고 오류가 발생하기 쉽다. 다행히 이 웹사이트는 해당 메타 태그를 자동으로 생성할 수 있도록 도와줍니다. 컬러 헌트 가장 인기 있는 팔레트 목록을 제공하세요. 제거BG 그것.. 2022. 1. 4.

비동기식 JavaScript를 15분 이내에 사용 가능(콜백, 약속 및 비동기/Await 포함) 당신이 자바스크립트를 처음 배우기 시작할 때, 당신이 쓰는 첫 번째 코드는 아마도 동기화된 자바스크립트가 될 것이다. 그러나 한 번에 여러 기능을 수행해야 하는 응용 프로그램을 개발하기 시작하면 비동기 자바스크립트라는 것을 사용하게 될 것이다. 이것은 특히 백엔드에서 일부 기능을 수행해야 하는 웹 앱 작성을 시작할 때 해당됩니다. 비동기 자바스크립트는 간단히 말해서, 당신이 앱의 나머지 부분을 실행하면서 불확정 시간이 걸리는 함수를 수행할 수 있게 한다. 백엔드 서버의 응답을 기다리는 동안에도 애플리케이션의 프런트엔드를 가동하고 실행할 수 있다는 것이 이 솔루션의 주요 이점 중 하나입니다. 대신 동기식 javascript를 사용하면 해당 백엔드 서버에서 성공적으로 응답할 때까지 모든 프런트엔드 UI(사용.. 2021. 12. 30.

JavaScript 프레임워크를 배울 준비가 되었나요? a 최근에 웹 개발을 배우기 시작한 제 친구는 제게 "리액트에서 다른 함수 안에 있는 함수의 변수를 참조할 때마다 정의되지 않은 오류가 발생하는 이유는 무엇입니까?"라고 물었습니다. 나는 내 친구가 스코프에 대한 기본적인 자바스크립트 지식이 부족하다는 것을 금세 깨달았습니다. 이 글에서, 저는 제 친구가 했던 것처럼 틀을 서두르지 않는 것이 왜 그렇게 중요한지 설명하고, 틀을 배우기 전에 여러분이 익혀야 할 것들에 대한 실제적인 예를 몇 가지 들려드리려고 노력할 것입니다. 왜 서두르지 않지? 자바스크립트 프레임워크는 어디에나 있다. Respect, Angular, Vue, Svelte, Ext JS, Express, Hapi는 전 세계 수백만 개의 회사에서 사용하며, 모든 채용 공고는 이들 중 적어도 하.. 2021. 12. 30.

렉스 체스란? 웹 개발 및 오픈 소스 체스의 세계에 오신 것을 환영합니다! 렉스 체스(Redux Chess)는 체스랩이 GitHub에서 개발한 임베디드형 체스 보드이다. 이것은 모든 사람이 환영받는 포괄적인 오픈 소스 프로젝트입니다. 관례에 의한 코딩 덕분에 새로운 기능을 추가하기 쉽지만, 기여자들은 또한 무언가를 부수고 실수로부터 배우도록 장려된다. Redux Chess는 사용이 간편한 체스 보드로서 React 응용 프로그램에 다음과 같은 다양한 기능을 제공합니다. 체스 게임 분석 추가 스터디를 위해 FEN 문자열 및 PGN 이동 텍스트 로드 이미지 다운로드 친구를 초대하여 체스 두기 경험적 접근 사진 찍기 그리고 더 많이! 경험적 접근 사진은 다음과 같은 몇 가지 평가 기능을 통해 보드의 진행 상황을 보여줍니다. .. 2021. 12. 30.

이게 뭐야? JavaScript에서 실행 컨텍스트 이해 자바스크립트의 실행 컨텍스트를 이해하는 것은 자바스크립트를 배우는 데 있어 가장 중요한 요소 중 하나이다. 실행 컨텍스트의 작동 방식에 대한 확실한 이해 없이 코드를 작성하면 종종 매우 성가시고 추적하기 어려운 버그가 발생한다. JavaScript를 처음 접하시는 분들은 실행 컨텍스트가 어떻게 작동하는지 시간을 갖고 이해하시기 바랍니다. 그것은 미래에 반드시 성과를 낼 것입니다! 실행 컨텍스트는 또한 이것의 현재 값 또는 함수(또는 메서드)가 실행되는 환경으로 언급된다. 다음은 한 가지 예입니다. 출력: Ralph Asterix is a mechanical engineer. Ralph likes to grow fruits and vegetables in spare time. 7호선부터 8호선까지, 나는 .. 2021. 12. 29.

몰랐던 5가지 JavaScript 기능 초보 개발자나 경험 많은 개발자가 이러한 자바스크립트 기능은 표준이 아니므로 놓치거나 잊어버릴 수 있는 잘 알려지지 않은 자바스크립트 기능입니다. 하지만, 여러분의 정신력과 JS 능력을 향상시키기 위해 이것들을 아는 것은 항상 좋습니다. Nullish 병합 연산자 널리시 병합 연산자(??)는 기본적으로 OR (|) 논리 연산자의 반대이다. 왼쪽이 null이거나 정의되지 않은 경우에만 오른쪽 피연산자를 반환합니다. 논리적 널리시 할당(??)을 사용할 수도 있습니다.=) 변수가 null이거나 정의되지 않은 경우에만 변수를 할당합니다. 예: 'with' 문 with 문을 사용하면 객체를 블록 문의 범위로 사용할 수 있습니다. 예를 들어 0.5의 ceil을 기록하려고 하면 다음을 수행할 수 있습니다. 로 다음을.. 2021. 12. 29.

응답 NextJS Instagram UI 클론 생성 - 프로파일 페이지 6부 이 기사에서는 불플래시 이미지를 게시물로 가져올 것입니다. 클라이언트 키 가져오기 플래시되지 않은 개발자로 이동하여 "앱"을 클릭하면 "액세스 키" 및 "비밀 키"가 있습니다. .env.local 생성 클라이언트 키가 123456이라고 가정한 다음 .env.local 파일 내에 다음을 입력합니다. NEXT_PUBLIC_client_id=123456 서버를 재시작해야 작동합니다. API 사용 언플래시 API를 사용하려면 axios 를 사용해야 합니다. yarn add axios 그 후, 우리는 상단에 있는 공리를 수입합니다. import axios from 'axios'; 데이터를 가져오려면 useEffect with axiosis를 사용합니다. useEffect(() => { console.log('NE.. 2021. 12. 29.

이전 1 2 3 다음

티스토리툴바