본문 바로가기

전체 글145

React: 통제됨 vs. 제어되지 않음 HTML과 DOM이 기본적으로 양식을 지원하기 때문에 React는 양식에 대한 기본 지원을 제공합니다. 대응 양식 대 HTML 양식 HTML 양식: 양식 태그와 입력에 대한 레이블이 있습니다. 레이블 속성은 대응 양식: 유사한 양식 태그, 대응은 해당 입력의 ID와 일치하는 htmlFor 요소를 사용합니다. React의 입력은 제어됨 또는 제어되지 않음의 두 가지 유형 중 하나가 될 수 있습니다. 제어되지 않은 입력은 둘 중 더 간단하다. 이것은 평범한 HTML 입력과 비슷합니다. 응답은 페이지에 삽입하고 브라우저는 나머지를 추적합니다. 제어되지 않은 입력은 더 적은 코드를 필요로 합니다. 그들은 자신의 가치를 관리합니다. 일반 HTML 양식과 마찬가지로 값은 입력의 DOM 노드에 유지됩니다. 수동으로 .. 2022. 1. 4.
JavaScript의 콘솔 인터페이스 학습 javascript 우리는 우리의 코드에 특정한 명령어를 쓰는 것에 너무 익숙해져서 그것에 대해 생각하는 것을 멈춥니다. 이러한 명령어 중 하나는 자바스크립트의 console.log() 명령어이다. 콘솔 인터페이스가 제공하는 다른 기능이 무엇인지 궁금하지 않고 console.filename , console.infofilename , console.filename 및 console.error;와 함께 이 명령을 영원히 사용해 왔습니다. TL; DR 여기에서 사용 가능한 콘솔 인터페이스의 설명서를 읽고 인터페이스에서 사용 가능한 기능 목록을 살펴보십시오. 로깅 물론 콘솔 인터페이스의 주 용도는 로깅입니다. 시작되지 않은 로그의 경우 JavaScript 응용프로그램 디버깅에 사용할 수 있는 여러 단계의 로그.. 2022. 1. 4.
NodeJS의 에러는 어떻게 처리해야 하나요? 때로는 오류가 위협적일 때도 있지만, 실제로 오류가 없을 때는 앱이 잘 작동됩니다! 우리가 실수를 올바르게 처리한다면 프런트엔드 팀원들은 매우 고마워할 것입니다. 오류 Node.js에서 실행되는 응용 프로그램에는 일반적으로 네 가지 범주의 오류가 발생합니다. 구문, 참조, 유형 등의 표준 JavaScript 오류. 시스템 오류는 존재하지 않는 파일을 열거나 닫힌 소켓을 통해 데이터를 보내는 시도와 같은 기본 운영 체제 제약에 의해 트리거됩니다. 응용 프로그램 코드에 의해 트리거된 사용자 지정 오류입니다. AssertionErrors는 절대 발생해서는 안 되는 예외적인 논리 위반을 Node.js가 탐지할 때 트리거될 수 있는 특수 오류 클래스입니다. 이것들은 전형적으로 주장 모듈에 의해 제기된다. Node.. 2022. 1. 4.
JavaScript에서 객체 배열에 대한 효율적인 설정 작업 세트 연산은 거의 모든 애플리케이션에서 볼 수 있기 때문에 효율적인 방식으로 작성하는 것이 매우 중요합니다. 오늘은 Javascript의 세트 연산에 초점을 맞추고 어레이 내부의 데이터 교차, 차이 및 합계(세트 의미)를 작성하는 방법에 대한 두 가지 접근 방식을 비교할 것이다. 순진한 사람을 피하는 것이 왜 그렇게 중요한지도 알게 될 것이다. 예를 들어 시작해 보겠습니다. 예 당신이 인터넷 유명인사 존의 데이터 매니저라고 상상해 보세요. 존은 인스타그램과 트위터라는 두 개의 소셜 미디어에 계정을 가지고 있다. 당신의 임무는 그를 따르는 사용자들을 조사하는 것입니다. 두 가지 사용자 배열(Instagram과 Twitter)이 있습니다. 참고: 사용자를 비교하기 위해 이메일 주소 필드를 사용합니다(사용자가.. 2022. 1. 4.
Javascript를 사용하여 HTTP 요청을 만드는 방법 언제나 그렇듯이 나는 처음부터 시작한다. HTTP란? 과거에는 인터넷을 통해 클라이언트와 서버 간에 데이터를 전송하는 표준 방법이 없었기 때문에 HTTP 개발은 1989년 CERN의 Tim Berners-Lee에 의해 시작되었다. 에이잭스란 무엇인가: 아약스는 비동기식 자바스크립트와 XML을 의미한다. 그것은 비동기식 웹 애플리케이션을 개발하는 데 사용되는 기술들의 그룹을 가리킨다. 아마도 그것에 대한 일반적인 예는 당신이 새로운 문자를 입력할 때 구글이 제안한 단어이고, 따라서 전체 페이지를 다시 로드하지 않고 제안사항이 바뀐다. Http 요청/응답: 클라이언트와 서버 간의 통신은 요청과 응답에 의해 수행됩니다. 클라이언트(브라우저)가 HTTP 요청을 웹으로 보냅니다. 웹 서버가 요청을 수신합니다. 서.. 2022. 1. 4.
javascript의 비동기 - 이전 스타일 대 약속 대 RxJS 스케줄러 이벤트 루프 대기열 - javascript에서 비동기 기능을 제공합니다. 이벤트 대기열에 추가된 작업은 기본 스레드 작업 이후에 실행됩니다. javascript에서 다른 방법으로 비동기 작업을 실행할 수 있습니다. 그 중 일부는 다음과 같다. 이전 스타일의 콜백 함수: 아래 예에서 콜백은 로드 함수로 전달되며 XMLHtpRequest onload 함수가 실행되면 비동기적으로 호출됩니다(이벤트 큐에 추가됨). 약속: Promise는 콜백 함수를 취하는 .then() 블록을 가지고 있다. 따라서 주 작업 코드 .를 실행한 후 콜백 함수가 비동기적으로 실행됩니다(이벤트 큐에 추가됨). .the() 콜백 함수가 여러 개 있을 경우 모든 함수는 차례로 실행됩니다. 그러므로 각 .ten() 콜백 함수는 .ten().. 2022. 1. 4.
콘솔 이런! 뭔가 코드가 잘못됐어. 웹 브라우저 콘솔을 사용하여 디버깅하려고 합니까? 만세! 우린 비슷한 점이 많죠 거의 모든 웹 브라우저는 개발자가 코드를 디버깅할 수 있도록 콘솔로 알려진 인터페이스를 제공한다. 코드 샘플의 오류 위치를 쉽게 추적하기 위해 개발자로서 경고, 오류 또는 일반 정보만 있으면 됩니다. 저에게 콘솔은 디버거가 아니라 알고리즘으로 시작하거나, 수학 연산을 시도하거나, 전역 변수에 저장된 데이터 개체를 가지고 놀기 위해 매우 자주 사용하는 도구입니다. 프로그래밍 언어에서 콘솔은 브라우저 디버깅 인터페이스에 대한 접근을 제공하는 객체라고 할 수 있다. console.log()를 사용하여 데이터 객체나 일부 메시지를 인쇄하기 위해 콘솔을 사용하지만, 이에 제한되지는 않습니다. 콘솔은 우리.. 2022. 1. 4.
VS 코드에 대한 다중 복사 붙여넣기 TechnoFunnel은 당신이 더 빠른 코드를 개발할 수 있도록 하는 확장을 제공합니다. 프로그래머로서, 우리는 종종 애플리케이션에 많은 코드를 복사하여 붙여넣어야 합니다. 우리가 여러 개의 파일을 처리할 때 코드에 많은 반복이 있을 수 있는데 한 파일에서 다른 파일로 복사해서 붙여넣어야 합니다. 현재 시나리오에서는 "Ctrl + C" 및 "Ctrl + V"를 사용하여 일부 텍스트를 복사할 수 있습니다. 이렇게 하면 하나의 값만 복사하여 코드의 다른 위치에 동일한 값을 붙여넣을 수 있습니다. 여러 개의 텍스트를 코드에 복사하여 붙여넣을 수 있는 확장자가 필요하다는 것을 알게 되었습니다. 그래서 저는 "복수 복사 붙여넣기"라는 확장 프로그램을 만들었습니다. 확장의 URL은 다음과 같습니다. Applica.. 2022. 1. 4.
구축 대 변동 var 여기 자바스크립트 프로그래밍 언어의 아름다운 점이 있다, 그것은 놀라움으로 가득 차 있다. 다음 중 하나: "Let"는 블록 범위이며, 문을 초기화하는 데 사용되는 전역 범위 지역 변수가 아니다. 변수 "fname"은 함수 외부에서 액세스할 수 없으므로 블록 범위이지만 함수 내에서 액세스할 수 있는 예제를 볼 수 있습니다. 구성: 일반적으로 상수로 알려져 있는 "상수"는 이제 null 또는 다른 값에 할당한 후에는 값을 변경할 수 없다는 것을 이해합니다. 아래 예제를 참조하십시오. 또한 문을 초기화하는 데 사용되는 전역 범위 지역 변수가 아닌 블록 범위입니다. 변수: "Var"는 변수 선언에 사용되며 전역 범위 변수입니다. 및 "Var"도 재할당할 수 있습니다. 2022. 1. 4.
내가 자바스크립트를 좋아하는 4가지 이유 나는 자바스크립트로 일하는 게 너무 좋아. 자바스크립트가 무슨 뜻이죠? 리액트 JS? TypeScript? 아니요. 저는 주로 바닐라 자바스크립트로 작업하는 걸 좋아해요. 프레임워크, 라이브러리 등은 필요하지 않습니다(최소한의 프레임워크만 있으면 됩니다). 근데 왜 나는 평범한 바닐라 JS를 그렇게 좋아할까? 기본적으로, 동적이고 해석된다는 것으로 요약됩니다. 이 언어를 사용하는 다른 모든 것을 배우기 전에 먼저 이해해야 한다는 사실, 웹의 언어이며 화살표 기능은 매우 간단합니다(그리고 나중에 논의해야 할 다른 이유). 몇 가지 세부 사항에 대해 더 자세히 살펴보겠습니다. 1. JavaScript는 동적이며 인터프리터링됩니다. 겉으로 보기에는, 자바스크립트는 웹사이트를 더 상호작용적으로 만들기 위해 사용.. 2022. 1. 4.
Javascript의 'This'는 무엇입니까? 프로그래밍에서, 주어진 코드 블록이 무엇과 관련되는지를 의미하는 스코프라는 개념이 있다. 때때로 자바스크립트에서 우리는 this라는 단어가 이와 같은 함수에 연결되어 있는 것을 볼 수 있다. this.someFunction() 아니면 이런 건설자에 있을 수도 있죠. function Dog(name, age){ this.name = name this.age = age } 그렇다면 이 각각의 예에서 이것은 무엇일까요? 더 이상의 문맥이 없다면 정말 알 수 없기 때문에, 어떻게 이것이 무엇인지 판단할 수 있는지 살펴보도록 하겠습니다. 그러기 위해서는 범위가 무엇인지 어느 정도 이해를 해야 하는데, 여기에 범위에 들어가는 또 다른 게시물이 있습니다. 우리가 가지고 있는 가장 일반적인 범위는 글로벌이기 때문에 함.. 2022. 1. 4.
Laravel Mix를 사용하여 Vue 3 , Adonis JS 설정 a Donis JS는 Laravel에 비해 몇 가지 이점이 있는 Laravel 유사 풀 스택 노드 JS 프레임워크 중 하나입니다. 제가 Adonis JS를 사용한 이유 중 하나는 일부 블록체인 프로젝트(Eth/Algo)가 자바스크립트 SDK만 제공했기 때문입니다. 물론 풀스택 프로젝트 내에서 프런트엔드(Vue/React JS)를 사용하여 블록체인 개발과 관련된 모든 작업을 처리할 수 있지만, 백엔드에서 해당 SDK를 전혀 지원하지 않으면 유연성이 떨어질 수 있습니다. 우리는 Adonis JS가 프런트엔드를 위한 엣지 템플링 엔진을 가지고 있다는 것을 알고 있습니다. 하지만 때때로, 사용. 내용 개요 아도니스 Vue 3 설정 #1 아도니스 우선 아도니스 프로젝트를 설치하는 것부터 시작합시다. 이 예에서는 .. 2022. 1. 4.
어떤 프로그래밍 언어를 배워야 하나요? 오늘날 세계에서 배워야 할 가장 중요한 기술 중 하나는 컴퓨터 프로그램을 작성하는 방법을 아는 것입니다. 항공기의 자동 조종이든 자전거의 디지털 속도계가든 컴퓨터는 거의 모든 산업에 진출해 있다. 최상의 프로그래밍 언어 1. 파이썬 파이썬은 의심할 여지 없이 1위이다. 그것은 접근성이 매우 높기 때문에 보통 가장 먼저 배우는 최고의 프로그래밍 언어로 여겨진다. 확장 가능한 웹 애플리케이션을 개발하는 데 널리 사용되는 빠르고 사용하기 쉬우며 배포하기 쉬운 프로그래밍 언어입니다. 유튜브, 인스타그램, 핀터레스트, 서베이몽키 모두 파이썬을 사용하여 구축됩니다. 프로그래밍 언어는 초보자들에게 좋은 출발점을 제공한다. 만약 여러분이 더 접근하기 쉽고 인기 있는 코딩 언어들 중 하나를 배우고 싶다면, 여러분은 분명.. 2022. 1. 4.
프런트엔드 개발자를 위한 멋진 웹 사이트 DevDocs DevDocs는 빠르고 구성 가능하며 검색 가능한 인터페이스에 여러 API 문서를 결합합니다. 소형 개발 도구 BASE64 인코딩, JSON 포맷터 등을 포함한 개발자들을 위한 유용한 도구 목록을 제공한다. README.so 오픈 소스 프로젝트에 적합한 형식의 README 파일을 만드는 데 도움이 됩니다. 메타 태그 소셜 플랫폼마다 HTML 메타 태그에 따라 URL 미리보기 페이지가 표시됩니다. 웹 사이트를 다른 플랫폼과 더 잘 호환되도록 하려면 HTML 파일에 다른 메타 태그를 추가해야 합니다. 그러나 이 과정은 지루하고 오류가 발생하기 쉽다. 다행히 이 웹사이트는 해당 메타 태그를 자동으로 생성할 수 있도록 도와줍니다. 컬러 헌트 가장 인기 있는 팔레트 목록을 제공하세요. 제거BG 그것.. 2022. 1. 4.
프로젝트에 더 예쁘게 추가 팀과 작업할 때 코드 형식이 일치하지 않을 수 있습니다. 프로젝트에 포맷터를 추가하면 깔끔한 상태를 유지할 수 있습니다. 이 문서에서는 프로젝트에 프리커밋 훅을 추가하고 프리커밋 훅을 추가하는 방법을 보여드리겠습니다. 더 예쁘게 설치 yarn add -D prettier // or npm install --save-dev prettier .prettierrc 파일을 만들고 다음을 추가합니다. { "singleQuote": true, "bracketSpacing": true, "printWidth": 120 } 원하는 대로 설정을 편집하십시오. 코드 포맷터가 일부 파일을 무시해야 합니다. 따라서 루트 프로젝트에 .prettierignore라는 파일을 생성해 보십시오. 무시할 파일 또는 폴더를 추가합니다. .. 2021. 12. 30.

티스토리툴바