본문 바로가기

JavaScript97

VS 코드에 대한 다중 복사 붙여넣기 TechnoFunnel은 당신이 더 빠른 코드를 개발할 수 있도록 하는 확장을 제공합니다. 프로그래머로서, 우리는 종종 애플리케이션에 많은 코드를 복사하여 붙여넣어야 합니다. 우리가 여러 개의 파일을 처리할 때 코드에 많은 반복이 있을 수 있는데 한 파일에서 다른 파일로 복사해서 붙여넣어야 합니다. 현재 시나리오에서는 "Ctrl + C" 및 "Ctrl + V"를 사용하여 일부 텍스트를 복사할 수 있습니다. 이렇게 하면 하나의 값만 복사하여 코드의 다른 위치에 동일한 값을 붙여넣을 수 있습니다. 여러 개의 텍스트를 코드에 복사하여 붙여넣을 수 있는 확장자가 필요하다는 것을 알게 되었습니다. 그래서 저는 "복수 복사 붙여넣기"라는 확장 프로그램을 만들었습니다. 확장의 URL은 다음과 같습니다. Applica.. 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.
프런트엔드 개발자를 위한 멋진 웹 사이트 DevDocs DevDocs는 빠르고 구성 가능하며 검색 가능한 인터페이스에 여러 API 문서를 결합합니다. 소형 개발 도구 BASE64 인코딩, JSON 포맷터 등을 포함한 개발자들을 위한 유용한 도구 목록을 제공한다. README.so 오픈 소스 프로젝트에 적합한 형식의 README 파일을 만드는 데 도움이 됩니다. 메타 태그 소셜 플랫폼마다 HTML 메타 태그에 따라 URL 미리보기 페이지가 표시됩니다. 웹 사이트를 다른 플랫폼과 더 잘 호환되도록 하려면 HTML 파일에 다른 메타 태그를 추가해야 합니다. 그러나 이 과정은 지루하고 오류가 발생하기 쉽다. 다행히 이 웹사이트는 해당 메타 태그를 자동으로 생성할 수 있도록 도와줍니다. 컬러 헌트 가장 인기 있는 팔레트 목록을 제공하세요. 제거BG 그것.. 2022. 1. 4.
ResponseJS 당신이 여기까지 왔으니 리액트가 자바스크립트 라이브러리라는 것을 당신이 이미 알고 있기를 바랍니다. 많은 사람들이 리액트인지 아닌지에 대해 논쟁하고 있다는 걸 알아요JS는 라이브러리 또는 프레임워크입니다. 하지만 난 그 논쟁에 참여하지 않을 거야. 리액트에 따르면JS의 공식 웹사이트인 "React는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리이다. 그것은 저것만큼 간단하다. 리액트는 페이스북과 오픈 소스 개발 커뮤니티에 의해 유지된다. 2013년부터 현대의 웹 개발을 위한 가장 인기 있고 효과적인 프런트엔드 라이브러리 중 하나이다. 그리고 그것은 나날이 인기가 많아지고 있다. 역사는 제쳐두고 리액트JS의 본질을 탐구해 봅시다. 가상 DOM 및 차이 알고리즘: 그래서, 어떻게 반응합니까?JS .. 2021. 12. 30.
소프트웨어 공대생으로 첫 주 좋아요, 그럼 제가 좀 늦었네요. 난 소프트웨어 엔지니어링 부트캠프를 2주 동안 다니고 있는데, 어떻게 되어가고 있는지 알려주지 않을래? 저는 큰 전환기라 많이 긴장했고, 소프트웨어 엔지니어로서의 미래가 어떨지 아직도 고민하고 있습니다. 이 장은 다른 장이 끝나는 곳에 존재합니다. 저는 2021년 12월 13일 플랫아이언 학교에서 풀 스택 웹 개발자가 되기 위한 여정을 시작했습니다. 그 과정은 분명히 속도의 변화였지만, 더 나은 방향으로 나아졌다. 우리는 강좌가 시작되기도 전에 거의 60시간의 작업으로 우리를 소프트웨어의 세계로 들어오게 했습니다. HTML, CSS, 그리고 이제 자바스크립트에 대한 소개입니다. 하루 10시간 가까이 앉아 전혀 이질적인 공예품을 완성하기 위해 노력하는 것은 상상도 못한 작.. 2021. 12. 30.
비동기식 JavaScript를 15분 이내에 사용 가능(콜백, 약속 및 비동기/Await 포함) 당신이 자바스크립트를 처음 배우기 시작할 때, 당신이 쓰는 첫 번째 코드는 아마도 동기화된 자바스크립트가 될 것이다. 그러나 한 번에 여러 기능을 수행해야 하는 응용 프로그램을 개발하기 시작하면 비동기 자바스크립트라는 것을 사용하게 될 것이다. 이것은 특히 백엔드에서 일부 기능을 수행해야 하는 웹 앱 작성을 시작할 때 해당됩니다. 비동기 자바스크립트는 간단히 말해서, 당신이 앱의 나머지 부분을 실행하면서 불확정 시간이 걸리는 함수를 수행할 수 있게 한다. 백엔드 서버의 응답을 기다리는 동안에도 애플리케이션의 프런트엔드를 가동하고 실행할 수 있다는 것이 이 솔루션의 주요 이점 중 하나입니다. 대신 동기식 javascript를 사용하면 해당 백엔드 서버에서 성공적으로 응답할 때까지 모든 프런트엔드 UI(사용.. 2021. 12. 30.
JavaScript 프레임워크를 배울 준비가 되었나요? a 최근에 웹 개발을 배우기 시작한 제 친구는 제게 "리액트에서 다른 함수 안에 있는 함수의 변수를 참조할 때마다 정의되지 않은 오류가 발생하는 이유는 무엇입니까?"라고 물었습니다. 나는 내 친구가 스코프에 대한 기본적인 자바스크립트 지식이 부족하다는 것을 금세 깨달았습니다. 이 글에서, 저는 제 친구가 했던 것처럼 틀을 서두르지 않는 것이 왜 그렇게 중요한지 설명하고, 틀을 배우기 전에 여러분이 익혀야 할 것들에 대한 실제적인 예를 몇 가지 들려드리려고 노력할 것입니다. 왜 서두르지 않지? 자바스크립트 프레임워크는 어디에나 있다. Respect, Angular, Vue, Svelte, Ext JS, Express, Hapi는 전 세계 수백만 개의 회사에서 사용하며, 모든 채용 공고는 이들 중 적어도 하.. 2021. 12. 30.
JavaScript 시도 - catch - finaly 문 try, catch, 그리고 마지막으로 블록을 사용하여 예외(오류 유형)를 처리합니다. 그것들을 배우기 전에, 여러분은 프로그래밍의 오류 유형에 대해 알 필요가 있습니다. JavaScript 시도…Catch 문: try…catch 문은 예외를 처리하는 데 사용됩니다. 이것의 문법은 다음과 같다: try { // body of try } catch(error) { // body of catch } 메인 코드는 트라이 블록 안에 있습니다. 트라이 블록을 실행하는 동안 오류가 발생하면 캐치 블록으로 이동합니다. 캐치 블록은 캐치 문에 따라 오류를 처리합니다. 오류가 발생하지 않으면 try 블록 내부의 코드가 실행되고 캐치 블록을 건너뜁니다. JavaScript 시도…캐치…마지막으로 설명: try…catch…f.. 2021. 12. 30.
작업 목록(목록, 여백, 확인란)을 표시하는 아름다운 할 일 목록 앱을 Vuetify에서 작성 Vuetify.js를 사용하여 처음부터 끝까지 할 일 앱을 만드는 진행 중인 튜토리얼 시리즈에 오신 것을 환영합니다. 지난 회에서 우리는 앱의 툴바를 만드는 것으로 시작했습니다. 오늘은 데이터를 표시하고 상호 작용을 추가할 것입니다. 먼저 생성할 목록을 채울 샘플 작업을 만들어 보겠습니다. 이후 튜토리얼에서는 사용자가 직접 작업을 추가할 수 있도록 할 것이지만, 현재 샘플 데이터는 다음과 같은 작업을 수행해야 합니다. src/App.vue Tasks JavaScript 배열 맵() 방법을 사용하여 각각 고유한 ID, 제목 및 참고를 가진 10개의 샘플 작업 목록을 자동으로 생성합니다. 태스크 목록 표시 v-list 구성 요소 및 기타 하위 구성 요소를 사용하여 작업 목록을 표시합니다. v-list는 v-.. 2021. 12. 30.
vue js에서 데이터 필터링 계산됨 데이터를 필터링할 때는 계산된 내용을 이해해야 합니다. 필터링을 수행할 수 있는 여러 가지 방법이 있으며 곧 다른 방법을 알려드리겠습니다. 어떤 방법이 더 나은 해결책일 수도 있고 어떤 방법이 더 나쁜 해결책일 수도 있다. 먼저 데이터 목록이 있다고 가정해 보겠습니다. 첫 번째 방법은 v-for를 사용하여 템플릿 페이지에 이 데이터를 표시하는 것입니다. 이를 위해 사용할 테스트 데이터는 다음과 같습니다. students”: [ { “id”: 1, “age”: “17”, “studName”: “James Hardy”, }, { “id”: 2, “age”: “23”, “studName”: “Jon Jonasson”, }, { “id”: 3, “age”: “80”, “studName”: “Tom Har.. 2021. 12. 30.
Angular의 ng-content를 사용하여 유연한 구성요소를 생성하는 방법 개발자로서 우리는 앱의 많은 장소에서 소비되는 구성 요소를 만듭니다. 이러한 시나리오의 주요 문제 중 하나는 개발자/구성 요소가 우리가 다르게 만든 구성 요소를 사용하기를 원한다는 것입니다. 그러나 컨텐츠 프로젝션이라는 것을 사용하여 구성요소를 설계하면 이를 사용하는 개발자와 구성 요소를 보다 유연하게 만들 수 있습니다. 다음 기사에서는 다음에 대해 살펴보겠습니다. 콘텐츠 투영이란? ng-콘텐츠 태그를 사용하여 콘텐츠를 투영하는 방법 ng-콘텐츠 태그 및 선택 지시문을 사용하여 여러 콘텐츠를 투영하는 방법. 콘텐츠 투영이란 무엇입니까? ng-콘텐츠 태그를 사용하여 콘텐츠를 투영하는 방법은 무엇입니까? 진행률 표시줄을 나타내는 구성 요소가 있고 내용 투영을 사용하여 진행률 표시줄 설명을 삽입할 수 있다고 .. 2021. 12. 30.
렉스 체스란? 웹 개발 및 오픈 소스 체스의 세계에 오신 것을 환영합니다! 렉스 체스(Redux Chess)는 체스랩이 GitHub에서 개발한 임베디드형 체스 보드이다. 이것은 모든 사람이 환영받는 포괄적인 오픈 소스 프로젝트입니다. 관례에 의한 코딩 덕분에 새로운 기능을 추가하기 쉽지만, 기여자들은 또한 무언가를 부수고 실수로부터 배우도록 장려된다. Redux Chess는 사용이 간편한 체스 보드로서 React 응용 프로그램에 다음과 같은 다양한 기능을 제공합니다. 체스 게임 분석 추가 스터디를 위해 FEN 문자열 및 PGN 이동 텍스트 로드 이미지 다운로드 친구를 초대하여 체스 두기 경험적 접근 사진 찍기 그리고 더 많이! 경험적 접근 사진은 다음과 같은 몇 가지 평가 기능을 통해 보드의 진행 상황을 보여줍니다. .. 2021. 12. 30.
8가지 무료 개발자 튜토리얼을 통해 실제로 일자리를 얻으실 수 있습니다. 실제로 업무를 수행하는 데 도움이 되는 8대 최고 개발자 튜토리얼 3/4에 오신 것을 환영합니다. 작업 파트 1/3을 실제로 제공하는 8가지 무료 개발자 튜토리얼 작업 파트 2/3을 실제로 제공하는 8가지 무료 개발자 튜토리얼 파트 3 시리즈에서는 처음에는 조금 겁먹지만 겁먹지 말고 용어에 신경 쓰지 말고 그냥 단어일 뿐입니다. 대신 원리를 이해하고 기본적인 내용으로도 작동 원리를 이해하며, 가장 중요한 것은 이 튜토리얼이 어떻게 연결되어 있는지 이해해야 합니다. 점들을 연결해서 이 뉴런들이 어떻게 연결되는지 더 큰 그림을 볼 수 있습니다. 미래를 만들기 위해서 여러분의 미래를 만들기 위해서요. 기술은 그저 너무 놀랍고, 매일 변화하고, 그래서 우리의 전문지식과 상관없이 계속 성장하고, 창의적이고, 논리.. 2021. 12. 30.