v-bind를 사용하여 CSS에 대한 Vue3 상태

애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 스타일 태그의 CSS 속성에 직접 적용될 수도 있다는 사실을 알고 계셨습니까? 스타일 태그는 동적 CSS 속성 값을 활성화하는 v-bind()라는 CSS 함수와 호환됩니다. App...

tutorialcssvuejavascript

개별 마크다운 블로그 페이지 만들기 - 13부

이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].js을 호출할 수 있습니다. Next.js의 이 동적 형식을 사용하면 임의의 슬러그가 유효한 파일이 될 수 있습니다. 이 파일은 getStaticPaths 및 getStaticPro...

nextjsbeginnerswebdevjavascript

비트 권한 시스템 구축

승인되지 않은 작업과 잠재적인 데이터 손실로부터 애플리케이션을 보호하려면 권한이 어디에나 있으며 매우 중요합니다. 권한을 처리하고 결합하는 시스템은 압도적이고 너무 복잡할 수 있지만 🔐 Bitwise Permission System이라는 더 좋은 방법이 있습니다! JavaScript로 이 작업을 수행할 것이지만 시스템은 거의 모든 가능한 언어로 되어 있습니다. 비트 연산자에 대해 간단히 살펴...

javascripttutorialsecuritywebdev

12. Javascript의 Leetcode 솔루션

javascriptchiki16misspoojaanilkumarpatel

노드 스트림에 대한 부드러운 소개

쓰기 가능: 데이터를 쓸 수 있는 스트림입니다. 예를 들어 fs.createWriteStream()를 사용하면 스트림을 사용하여 파일에 데이터를 쓸 수 있습니다. 읽기 가능: 데이터를 읽을 수 있는 스트림입니다. 예를 들면 다음과 같습니다. fs.createReadStream() 파일의 내용을 읽을 수 있습니다. 이중: 읽기 및 쓰기가 모두 가능한 스트림입니다. 변환: 데이터를 쓰고 읽을 때...

tutorialstreamsnodejavascript

expressjs 및 postgresql을 사용하여 나머지 API 만들기

이 기사에서는 postgresql과 expressjs를 사용하여 나머지 API를 만드는 방법을 배웁니다. 우리는 이 프로젝트에 자바스크립트를 사용할 것입니다. 먼저 이 프로젝트의 전제 조건이 무엇인지 알려주세요. 다음이 있어야 합니다. 에 익숙해야 합니다. sql 명령에 익숙해야 함 에 대한 기본 지식이 있어야 합니다. 유용한 링크 설치 프로그램 링크 먼저 "package.json"으로 프로...

tutorialjavascriptapi

NextJS에서 환경 변수(.env) 설정

내 환경 변수가 작동하지 않습니다 😱😱😱 이 상황에서 .env 파일을 사용하여 NextJS 앱에서 개발하는 동안 API URL 또는 비밀 키를 숨기고 싶을 수 있습니다. Next.js에서 환경 변수를 어떻게 사용합니까? Next.js 애플리케이션의 루트에서 .env 파일을 생성합니다. 이 파일 내에서 다음과 같이 필요한 모든 환경 변수를 선언합니다. 그런 다음 코드에서 이러한 변수를 참조할 ...

webdevjavascriptreactnextjs

JavaScript의 Vibration API

진동은 주로 모바일 사용자를 위한 모든 작업에 대해 사용자에게 물리적 피드백을 제공하는 가장 좋은 방법입니다. 예를 들어, 경고 메시지나 경고를 표시하는 동안, 메시지나 알림을 받는 동안 등. Vibration API를 사용하면 웹 앱이 장치의 진동 하드웨어(존재하는 경우)에 액세스하여 진동을 생성할 수 있습니다. 동일한 목적을 위한 메소드navigator.vibrate()를 제공합니다. 이...

codenewbiejavascriptbeginnerswebdev

Express.js에서 오류를 처리하는 간단한 방법

Express에서 오류를 처리하는 여러 가지 방법이 있습니다. 이를 수행하는 일반적인 방법은 기본 익스프레스 미들웨어를 사용하는 것입니다. 또 다른 방법은 컨트롤러 내부의 오류를 처리하는 것입니다. 이러한 처리 방식은 코드를 깨끗하게 유지하는 데 몇 가지 문제를 일으킬 수 있습니다. 이 문제는 컨트롤러가 많거나 다음 예제와 같은 일부 기능이 있을 때 더욱 분명해집니다. try/catch 블록...

nodejavascriptbackendexpress

NestJS: 업로드된 이미지를 최적화하기 위한 파이프 생성.

변환의 경우 파이프는 입력 데이터를 경로 처리기가 받을 특정 형식으로 변환하는 작업을 처리합니다. 이는 ParseIntPipe 의 경우입니다. 이 게시물에서는 들어오는 이미지를 가져 와서 크기와 웹 친화적인 형식으로 변환하는 파이프를 만들 것입니다. 경로 처리기는 클라이언트가 업로드한 파일을 수신해야 하므로 요청에서 파일을 추출하기 위해 인터셉터FileInterceptor()를 추가해야 합니...

backendnestjsnodejavascript

TypeScript 팁: 조건부 유형을 사용하여 오버로드를 리팩터링합니다.

며칠 전에 코드를 리팩토링하다가 다음과 같은 것을 발견했습니다. 함수mapRawToUserObject는 오버로드를 사용하여 다음을 표현합니다. IRawUser[]의 배열로 호출하면 User[]의 배열을 반환하고, 단일IRawUser로 호출하면 단일User을 반환합니다. 너무 복잡하지는 않지만 메서드 정의를 리팩토링할 수 있는 좋은 기회인 것 같습니다. 메서드가 받는 입력 유형을 결정해야 합니...

typescriptjavascriptwebdev

Typescript 팁: 브랜드 유형을 사용하면 더 안전한 기능을 사용할 수 있습니다.

다음과 같은 함수가 있다고 상상해 보십시오. 페이지 번호는 음수가 될 수 없기 때문에 분명히 잘못된 것입니다. 간단한 해결책은 다음과 같은 줄을 추가하는 것입니다. 그러나 음수로 함수를 호출하려고 할 때 유형 오류가 발생하면 좋지 않을까요? 여기서 문제는 유형number이 우리 기능에 너무 일반적이라는 것입니다. number는 임의의 숫자가 될 수 있으며 양수만 예상합니다. 이에 대한 유형 ...

javascripttypescriptwebdev

Tailwind CSS를 React 앱에 통합하는 방법

이 게시물에서는 create-react-app를 사용하여 반응 프로젝트를 생성합니다. 이렇게 하면 상대적으로 빠르게 코딩을 시작할 수 있도록 필요한 모든 것이 설정됩니다. 명령줄을 열고 다음 명령을 사용합니다. npmnpx create-react-app react-app-with-tailwindcd react-app-with-tailwind 실yarn create react-app react...

tailwindcssjavascriptreactwebdev

JavaScript 클로저는 어떻게 작동합니까?

Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. JavaScript에서 중첩 함수를 만들 수 있다는 것을 배웠습니다. 내부 함수는 외부 함수의 변수 및 매개변수에 액세스할 수 ...

javascriptprogrammingwebdev

Javascript 개체 참조 및 개체를 값으로 비교하는 방법

JavaScript의 객체는 중요한 데이터 유형입니다. JavaScript의 모든 것은 객체, 즉 메서드가 있지만 JavaScript에서 프로그래머가 정의한 객체는 다른 많은 프로그래밍 언어와 마찬가지로 실제 객체를 나타내는 특수 데이터 유형입니다. 이러한 개체는 키 값 쌍의 속성을 가진 독립 실행형 엔터티입니다. 속성의 값은 함수가 될 수 있으며 이러한 속성을 메서드라고 합니다. 객체는 많...

programmingtutorialwebdevjavascript

VSCode에서 JavaScript 및 TypeScript 파일 디버깅

JS 파일을 디버깅하는 일반적인 방법은 JavaScript 디버그 터미널을 사용하는 것입니다. 이러한 터미널은 메뉴를 통해 열 수 있습니다. node <file>를 실행하여 직접 또는 npm run <script>를 실행하여 패키지 스크립트를 통해 JS 파일에 중단점을 설정하고 터미널에서 디버그하려는 파일을 실행하기만 하면 됩니다. 디버그 터미널은 시작 Node.js 프로세스에 자동으로 연결...

typescripttestingjavascriptvscode

설치된 npm 패키지의 버전을 찾는 방법은 무엇입니까?

npm는 Node.js용 패키지 관리자입니다. JavaScript 프로젝트용 패키지를 설치하고 관리하는 데 사용됩니다. npm는 오픈 소스이며 2009년에 처음 릴리스되었습니다. npm 저장소는 Node.js용 오픈 소스 패키지 및 도구 모음입니다. 우리가 사용하고 있는 npm의 버전을 빠르게 확인해 보겠습니다. 버전 번호가 표시되지 않으면 먼저 npm를 설치해야 합니다. npm를 설치하면 ...

nodejavascriptbeginnerswebdev

Booking.com 코딩 인터뷰는 어땠나요?

120분 동안 MVP를 만들어 사용자 입력보다 높거나 같은 리뷰로 결과를 렌더링했습니다. 안타깝게도 테스트가 잘못되었고 설명 문제가 혼란스럽고 파일의 주석도 테스트 사례 및 문제 설명과 다른 내용을 말했기 때문에 좋은 경험이 아니었습니다. React/Node를 사용하여 백엔드와 프런트엔드를 20분 안에 해결할 수 있었고 10분 더 리팩토링하여 솔루션을 배송할 계획이었지만 테스트가 실패했기 때...

interviewcareerjavascriptprogramming

React 최적화: useMemo() , React.memo() & useCallback()

최고의 성능 및 최적화 교육 최적화 전 모든 구성 요소를 다시 렌더링하는 문제로 환경 만들기 반응 작동 방식 이해 및 재평가: 상태 선언을 제외하고 반응에서 모든 것을 다시 실행합니다. 재실행/재평가와 재렌더링의 차이점 재평가는 매번 작동하고 비교해야 함 re-render는 react-dom 을 호출하는 경우에만 변경 작업을 수행합니다. 최적화를 사용하지 않은 경우 모든 반응 구성 요소가 매...

javascriptbeginnersreactwebdev

formData Web API를 사용하여 양식 데이터를 수집하는 방법

다음 양식이 제공되고 양식 필드에서 데이터를 수집하는 간단한 작업을 완료하라는 요청을 받습니다. index.html 을 사용하여 필드 값의 게시물 데이터를 아래 제공된 API URL로 보낼 수 있는 submitProfile() 함수를 완료합니다. 예제 게시물 개체는 다음과 같아야 합니다. 이를 해결하기 위한 단계 getElementByID를 사용하여 필드 값에 변수를 할당합니다. 예를 들어 ...

javascriptbeginnerswebdev

몽고, 도커.

Misalnya penerapan 데이터베이스 jenis baru yang menggunakan . Ribetnya adalah instalasi tools di local komputer kita, sebagai perangkat yang digunakan untuk berperang dalam proses pengerjaan aplikasi. Cukup satu perintah saja ...

dockermongodbnodejavascript

로컬 마크다운 블로그 게시물 로드 - 12부

이 특정 항목에서는 로컬 마크다운 파일에서 블로그 게시물을 로드하는 방법을 살펴보겠습니다. 이것은 모든 블로그 게시물의 출처가 됩니다. 내부에는 몇 개의 블로그 게시물을 추가하여 시작합니다. 지금까지는 블로그 페이지가 하나만 있었지만 개별 페이지도 지원할 예정이므로 구조가 잘못되었습니다. 이 문제를 해결하려면 페이지 폴더 내에 blog라는 새 폴더를 만듭니다. 그런 다음 기존 blog.js ...

beginnersnextjswebdevjavascript

이진 트리의 LCA

이진 트리가 주어지면 트리에서 주어진 두 노드의 최저 공통 조상(LCA)을 찾으십시오. Wikipedia의 LCA 정의에 따르면 다음과 같습니다. 예 1: 입력: root = [3,5,1,6,2,0,8,null,null,7,4], p = 5, q = 1 출력: 3 설명: 노드 5와 1의 LCA는 3입니다. 예 2: 입력: root = [3,5,1,6,2,0,8,null,null,7,4], p...

leetcodejavascript

이진 검색 트리의 가장 낮은 공통 조상

이진 검색 트리(BST)가 주어지면 BST에서 주어진 두 노드 중 가장 낮은 공통 조상(LCA) 노드를 찾습니다. Wikipedia의 LCA 정의에 따르면 다음과 같습니다. 예 1: 입력: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q = 8 출력: 6 설명: 노드 2와 8의 LCA는 6입니다. 예 2: 입력: root = [6,2,8,0,4,7,9,nu...

leetcodejavascript

레코드를 업데이트하고 업데이트 전에 동일한 레코드를 삭제하는 방법(nest js & mongoDB)

ID로 레코드를 업데이트하고 싶지만 업데이트 전에 동일한 레코드에 이전에 저장된 데이터를 삭제하고 싶습니다. 프로세스는 무엇입니까? 컨트롤러.ts 서비스.ts 나는 이것을 해결하기 위해 이런 식으로 노력하고 있습니다. 내가 틀렸을 수도 있습니다. 올바른 프로세스를 가져올 수 있습니다. 시간 내 줘서 고마워.......

nodemongodbjavascriptnestjs

완전한 트리 노드 수 계산

완전한 이진 트리의 루트가 주어지면 트리의 노드 수를 반환합니다. Wikipedia에 따르면 마지막 레벨을 제외한 모든 레벨은 완전한 이진 트리로 완전히 채워져 있으며 마지막 레벨의 모든 노드는 가능한 한 가장 왼쪽에 있습니다. 마지막 레벨 h에서 포함하여 1~2h 노드를 가질 수 있습니다. O(n) 시간 복잡도 미만으로 실행되는 알고리즘을 설계합니다. 예 1: 입력: 루트 = [1,2,3,...

javascriptleetcode

로케일을 사용하여 사이트를 다국어로 만드는 방법

이렇게 하면 Next.js 앱이 생성되고 이제 선호하는 IDE로 열 수 있으며 프로젝트는 다음과 같이 표시됩니다. 이 프로젝트에는 다음 명령을 실행하여 설치할 수 있는 1개의 종속성인 로케일만 필요합니다. 이제 프로젝트가 있으므로 utils라는 폴더를 만들고(간단히 말해서 util은 우리가 많이 사용하는 함수이며 코드를 반복할 필요가 없도록 하나의 파일로 만듭니다.) locales라는 폴더에...

programmingtutorialwebdevjavascript

이진 트리의 직경

이진 트리의 루트가 주어지면 트리 지름의 길이를 반환합니다. 이진 트리의 지름은 트리의 두 노드 사이에서 가장 긴 경로의 길이입니다. 이 경로는 루트를 통과하거나 통과하지 않을 수 있습니다. 두 노드 사이의 경로 길이는 두 노드 사이의 에지 수로 표시됩니다. 예 1: 입력: 루트 = [1,2,3,4,5] 출력: 3 설명: 3은 경로 [4,2,1,3] 또는 [5,2,1,3]의 길이입니다....

leetcodejavascript

React js의 요소 대 구성 요소

요소는 DOM 노드 또는 기타 구성 요소와 관련하여 화면에 표시하려는 항목을 설명하는 일반 개체입니다. 요소는 소품에 다른 요소를 포함할 수 있습니다. React 요소를 만드는 것은 저렴합니다. 요소가 생성되면 절대 변경되지 않습니다. React Element의 객체 표현. 위의 React.createElement() 함수는 객체를 반환합니다. 마지막으로 ReactDOM.render()를 사...

javascriptbeginnersreactprogramming