본문 바로가기

JavaScript97

JavaScript Array.map(): 모든 내용을 읽어 보십시오! 도입부 JavaScript에는 배열을 취하고 지정된 작업을 요소에 적용하여 요소가 변환된 새 배열을 얻는 Array.map() 메소드가 있습니다. for 루프를 사용하여 어레이를 통해 수동으로 반복할 필요 없이 어레이.map() 방법을 사용하여 어레이 요소를 보다 간단하게 변경할 수 있습니다. Array.map()은 배열을 변형하지 않고 입력 배열을 가져와서 요소가 변경된 새 배열을 만듭니다. Array.map()은 각 요소를 콜백 함수의 결과로 사용하여 새 배열을 반환합니다. .map() 메소드는 배열의 각 요소에 대해 함수를 호출하며 빈 요소에 대해서는 함수를 실행하지 않는다. Array.map()의 예제 #1 배열이 대체 뭔데요? 배열은 요소 그룹을 포함하는 데이터 구조이며 이러한 요소는 값의 순서.. 2022. 1. 12.
도움 요청의 중요성 내 코딩 부트캠프의 최근 모듈은 모두 자바스크립트 프로젝트에 관한 것이었다. 컬러 전환기나 작은 퀴즈 같은 작은 것들. 나한테는 작다고 느껴지지 않았어 말 그대로 하루 동안 하고 싶은 일을 추적하는 ToDo 앱을 만드는 것이 이러한 프로젝트 중 하나였다. 여기 전문가처럼 보이는 것이 있다: 제 것은 여기 있습니다. 그것은 나의 ToDo 앱입니다. 그 안에 CSS가 들어있지 않습니다. 즉, 멍해 보이고 아무것도 없다는 뜻입니다. 하지만 이 작은 앱은 여러분이 하루 동안 하고 싶은 일을 추적하는 기능을 하기 위해 100줄 이상의 자바스크립트 코드를 사용했습니다. 저는 이 프로젝트에 크리스마스가 임박해서 중간에 가족 방문, 선물 오픈, 축구 관람을 위해 잠시 휴가를 냈습니다. 그 결과 저는 이 프로젝트를 모두.. 2022. 1. 12.
Regex 비밀이 밝혀지다 정규식이란? 정규식은 정규식을 의미하며 정규식은 문자열의 문자 조합을 일치시키기 위해 사용되는 패턴이다. 자바스크립트에서 정규 표현식도 객체이다. 이러한 패턴은 RegExp 의 exec() 및 test() 메서드와 함께 사용되며, 문자열의 일치() , matchAll() , replace() , replaceAll() , search() 및 split() 메소드와 함께 사용됩니다. 정규식 사용의 이점 한 정규식을 만들어 모든 종류의 입력을 확인할 수 있습니다. 정규 표현식을 이해하지 못하는 프로그래밍 언어는 거의 없습니다. 정규 표현식을 지원하지 않는 언어를 사용하는 것이 아니길 바랍니다. 당신은 더 적은 코드로 더 많은 일을 할 수 있으며, 그것은 당신의 코드를 짧게 유지하거나 당신이 고급 정규식을 사.. 2022. 1. 12.
경비 추적기 記帳 expense 你為何會選擇這個專案？ 這個專案比較貼近日常生活，也算是較容易在平日使用的軟體，也因為較常使用，所以對於未來的功能延伸可能性也較大;另外因為個人偏愛後端技術，而在這個簡易的記帳軟體裡面，有非常多得機會讓自己練習資料庫的cr 你使用了什麼技術？ 後端框架採用 express.js，資料庫採用mongodb，並且位於express.js以及mongodb中間的溝通媒介採用mongoose這個ODM od 前端的部分使用handlebars樣板引擎，風格樣式採用bootstrap。另外使用者認證的方式使用passport，使用者註冊的email認證使用nodemailer。 哪部分你相對能掌握？哪裡花了最多時間？ 較能掌握的地方是 express.js 這個後端框架，因為過去有過很多次的經驗在架構路由以及相關設定，已經漸漸對於架構搭建有種 sop 的感覺xd 而非同步的操作在有些較為複雜的流.. 2022. 1. 12.
React 라우터를 사용하여 프로그래밍 방식으로 탐색 리액트 라우터로 링크 요소를 사용하여 리액트 라우터에 의해 기본적으로 처리되는 링크를 생성할 수 있습니다. 나는 내부적으로 이것을 context.transitionTo(...)라고 부른다. 네비게이션을 하고 싶어요. 링크가 아니라 드롭다운 선택 항목(예: 이거 암호로 어떻게 해? 이게 뭐에요? 내비게이션 믹스인을 봤는데, 믹스인 없이 할 수 있나요? — — — — — — — — — 답변(Answer) — — — — — — — — — — — 후크를 사용하여 라우터 v5.1.0 대응 당신이 >16.8.0 및 기능 구성요소를 사용하는 경우, >5.1.0에 새로운 useHistory hook이 있다. import { useHistory } from "react-router-dom"; function HomeBu.. 2022. 1. 12.
Redux 연결() 기능 살펴보기 React가 오늘날과 같은 시대에 사용자 인터페이스(UI)를 구축하기 위한 가장 인기 있는 라이브러리 중 하나라는 사실은 비밀이 아니다. 이 블로그를 읽어보신 여러분 대부분은 Redux를 사용하여 이전 프로젝트에서 애플리케이션의 전반적인 상태를 관리했다고 확신합니다. redux connect() 기능이 어떻게 작동하는지 궁금해 본 적이 있습니까? 또는 connect() 함수를 작성하는 것과 관련된 다양한 자바스크립트 개념은 무엇입니까? 그렇다면, 저는 독자적으로 우리만의 연결() 함수를 작성하는 것과 관련된 자바스크립트 개념에 대해 알려드리도록 하겠습니다. 이 함수들은 Redux 라이브러리에 통합되어 함께 사용될 수 있습니다. Redux 설명서에 따르면 connect() 함수는 먼저 자바스크립트의 고차 .. 2022. 1. 12.
Angular에서 편백나무의 빠른 시간 사이프레스가 시험을 더 쉽고 즐겁게 만든다는 것은 의심의 여지가 없다. 하지만 사이프레스는 스펙이 많으면 속도가 느릴 수 있고, 방문() 명령을 매번 사용합니다. 방문() 명령을 호출할 때마다 응용 프로그램이 새로 고쳐지고 초기화되며 실제 테스트가 실행되는 데 몇 초 정도 걸릴 수 있습니다. E2E 사양의 성능을 크게 높이기 위해 경로를 지정하고 빈 페이지로 이동한 다음 원래 경로로 돌아가는 명령을 구축했습니다. 우리가 어떻게 했는지 한 번 보자. 우선 Angular router navigationByUrl() 메소드를 사이프레스에 노출시켜야 합니다. Google에서 이와 유사한 방법을 찾을 수 있습니다. 네, 이 코드는 작동합니다. 하지만, 저는 별로 좋아하지 않아요. 첫째, 저는 애플리케이션이 사이프.. 2022. 1. 12.
FP 패러다임. 내가 배운 것. 제가 가장 최근에 만든 프로젝트는 다트 스코어인데, 이 프로젝트를 위해 자바스크립트 언어의 함수 프로그래밍 패러다임에 대해 배운 것을 연습했습니다. 여기 내 생각 중 몇 가지가 있습니다. 기능 면에서 더 고민하는 것이 힘들 때도 있었고, 글로벌 변수에 의존하지 않고 순수하게 기능을 유지하려다 보면 고통으로 변해 한 가지를 이루기 위해 많은 기능을 만들어야 하는 것이 불필요하게 느껴질 수 있었다. FP의 필요성을 이해하고 일부 대규모 앱이 코드를 유지 보수하기 위해 FP를 사용하는 이유를 알 수 있습니다. 재귀, 폐쇄의 사용, 카레링, 기능 구성과 같은 이런 식으로 생각하면서 유용한 기술과 기술을 많이 배웠습니다. 큰 프로그램을 만들 때 데이터를 불변으로 유지하는 것은 타당하지만, 당신의 앱이 빠르기를 원.. 2022. 1. 12.
개발자들이 은유를 사랑하는 이유 직유, 비유, 비유, 의미론… 더 기술적으로 우리 종족의 성향이 있고, 여러분이 대화하는 모든 사람을 아는 것은 아무것도, 아무것도, 정의되지 않은 것의 차이를 이해하지 못할 것이고, 어떻게 잘못 사용된 세미콜론이 여러분의 한 주를 망칠 수 있는지 이해할 수 없을 것입니다; 우리는 의사소통을 하기 위해 하찮은 방식으로 "멍청"해야 합니다. 코딩 인터뷰에서는 종종 "6세 어린이에게 폐쇄를 설명하라"고 요청한다. 우선, 6살짜리 자바스크립트를 말하는 건 꽤 재능 있는 일인데, 쥬스박스와 니켈로디언 몇 시간만 줘도 될까요? 실제로 이것은 여러분이 스트레스를 받는 상황에 있을 때 동등한 양의 경멸을 주고 받는 사람들을 상대하는 것에 얼마나 좌절감을 느끼는지 보기 위함입니다. 최근에 LA에서 프로젝트를 하고 있었.. 2022. 1. 12.
각도의 파이프 angular 이 섹션에서는 각도의 파이프에 대해 설명합니다. Angular의 내장 파이프 Angular에는 많은 파이프가 내장되어 있지만, 그 중 몇 개는 그렇지 않습니다. 대문자(문자 대문자 변환 방법) 소문자(문자 대문자 문자열 변환 방법) 날짜(날짜 형식을 다른 유형으로 지정하려면) json(값 또는 개체를 JSON 형식 문자열로 변환하려면) { 'Makesh' | uppercase } { 'Kumar' | lowercase } { { name: 'makesh' } | json } 파이프에 인수 전달 날짜, 통화와 같은 파이프에서는 파이프 함수에 대한 인수를 사용하여 콜론(:) 및 매개 변수 값(EUR)이 있는 파이프 이름(통화)을 전달합니다. 아래 코드 예를 참조하십시오. { 100 | curr.. 2022. 1. 12.
javascript의 배열에서 항목 추가 또는 제거 주어진 항목 배열에서 우리의 작업은 항목을 추가 또는 제거하는 것이며 규칙은 다음과 같습니다. 항목이 이미 배열에 있으면 해당 항목을 제거합니다. 항목이 배열에 없으면 해당 항목을 추가합니다. 이제 문제를 작은 조각으로 나누고 알고리즘을 구성해 봅시다. 주어진 배열이 arr = []라고 가정하자. addOrRemove라는 함수를 작성하여 인수로 항목을 전달하겠습니다. 이제 함수 내부에서는 먼저 자바스크립트 indexOf 메소드를 사용하여 요소가 존재하는지 확인하고 인덱스가 -1 이상이면 스플라이스 메소드를 사용하여 제거합니다. 품목이 없으면 다른 부분에서 푸시 방법을 사용하여 품목을 배열에 밀어 넣기만 하면 됩니다. 이제 다음 입력으로 코드를 실행합니다. 다음과 같은 결과가 나와야 한다. 2022. 1. 12.
HackerRank: 공통 하위(가장 긴 공통 후속) — JavaScript 해커랭크에 대한 공통 차일드 챌린지는 고전적인 LCS(Longest Common Sequence) 문제의 별명이다. 이 문제에 대한 링크는 다음과 같습니다. 시퀀스는 0개 이상의 문자가 삭제된 원래 문자열에서 파생된 새로운 문자열이며, 문자열에 남아 있는 문자의 상대적 순서를 변경하지 않습니다. 이 문제와 관련된 우리의 작업은 주어진 문자열 2개에 공통적인 가능한 가장 긴 연속의 길이를 찾고 반환하는 것이다. 공통 수열이 없으면 0을 반환합니다. 이 문제를 해결하기 위한 몇 가지 다른 접근법이 있다. 브루트 포스 접근법은 각 문자열에 대해 가능한 모든 수열을 생성하고 가장 긴 공통 수열을 찾는 것을 포함한다. 이는 기하급수적인 시간 복잡성을 의미하며, 이 과제에서 문자열 길이에 대한 제약 조건이 5000.. 2022. 1. 11.
JavaScript의 스택 데이터 구조 이해—JavaScript는 이를 어떻게 사용합니까? 나는 스택이라는 단어를 처음 봤을 때 이해하기 쉬웠던 것 같아. 그런데 자바스크립트를 배우다가 동기식, 비동기식, 콜스택을 접했을 때 조금 혼란스러웠습니다. 저와 같은 혼란스러운 분들을 위해 이 글을 쓰고 있는데, 이 글을 마치면 여러분이 스택 데이터 구조와 자바스크립트가 어떻게 사용하는지에 대해 더 잘 이해할 수 있기를 바랍니다. 개요 이 글에서는 스택 데이터 구조, 자바스크립트 동기/비동기 및 콜 스택이 어떤 형태인지, 어떻게 사용되는지 알아보겠습니다. JavaScript에 익숙하다면, 매일 사용하는 JavaScript Runtime의 작동 방식에 대한 새로운 통찰력을 얻을 수 있기를 바랍니다. 그리고 만약 당신이 자바스크립트를 상대적으로 처음이라면, 바라건대, 이것은 당신이 자바스크립트의 작동 방식.. 2022. 1. 11.
플랫아이언 스쿨 소프트웨어 엔지니어링 1단계 완료! — 내 프로젝트 격심한 3주(엄밀히 말하면 휴일 휴식 덕분에 4주) 후에 나는 성공적으로 1단계를 마쳤다. 플랫아이언 스쿨 소프트웨어 엔지니어링 라이브 프로그램. 별도의 게시물을 통해 지금까지의 AWESS 경험에 대한 제 생각을 되돌아보겠지만, 먼저 제 1단계 프로젝트를 공유하고 싶었습니다. 1단계는 Javascript를 중심으로 진행되었으며, 시작하기 전에 사전 작업 커리큘럼에서 학습한 HTML과 CSS를 기반으로 합니다. 우리의 과제는 피치, 개발, 프레젠테이션까지 우리의 첫 번째 웹 기반 앱을 개발하는 것이었습니다. 제 파트너인 Gian과 저는 레시피 API(이 경우 데이터를 얻을 수 있는 온라인 데이터베이스)를 활용한 앱을 개발하기로 했습니다. 사용 가능한 공개 API 중 일부를 탐색한 후(키가 필요하지 않거나 .. 2022. 1. 11.
Nullish 병합 연산자(?) Nullish 병합 연산자(??)는 왼쪽(첫 번째 인수)이 null이거나 정의되지 않은 경우에만 연산자(두 번째 인수)의 오른쪽을 반환하는 논리 연산자이다. 다른 모든 경우에는 첫 번째 인수를 반환합니다. 좀 더 명확히 하기 위해 예를 보겠습니다. 위의 예에서 보셨듯이 정의되지 않은 연산자가 연산자 왼쪽에 있기 때문에 Hello가 반환됩니다. null이 정의되지 않은 위치였다면 결과는 동일했을 것이다. 그리고 두 번째 예에서 첫 번째 인수에 null이 아니거나 정의되지 않은 것이 있다면 연산자는 두 번째 인수를 확인하지 않고 바로 첫 번째 값을 출력한다. ECMAScript 2020에 추가된 이유 그래서 우리가 변수에 기본값을 부여하고자 할 때마다 OR ( || ) 논리 연산자를 사용했다. 그러나 OR .. 2022. 1. 11.

티스토리툴바