본문 바로가기

전체 글145

React: 더 나은 코딩 방법 플랫아이언 스쿨 오랫동안 웹 애플리케이션을 코딩하는 방법은 손으로 모든 DOM 요소를 만드는 방법밖에 없었습니다. 저는 최근에 리액트라는 프레임워크를 사용하는 좀 더 선언적인 프로그래밍 방법을 알게 되었습니다. 또한 React는 코드를 디버그하는 것을 더 쉽게 만들 뿐만 아니라 코드를 더 짧고 읽기 쉬우며 코드에 대한 고통을 줄여줍니다! 리액트에는 몇 가지 놀라운 기능이 있지만, 그 부분을 다루기에 앞서 리액트로 코딩하는 것은 당신의 바닐라 자바스크립트로 코딩하는 것과는 매우 다를 것이라고 말해야 합니다. 리액트는 자바스크립트의 확장판인 JSX를 사용하기 때문이다. 특징들 이미 작업한 React의 두 가지 주요 기능은 다음과 같습니다. 선언적 구성요소 기반 선언적 명령형 프로그래밍과 선언형 프로그래밍이라.. 2022. 1. 12.
JSON 어레이를 통해 반복하여 변환 파일(i18N)의 구성요소를 렌더링합니다. 197 소개 제가 리액트로 웹사이트를 만들 때, 제가 설명하려고 하는 번역에 문제가 생겼습니다. 이 때 "이런, JSON(경로)을 가져와 데이터에 액세스할 수 있다는 것을 알고 계십니까?"라고 말할 수 있습니다. 네, 그게 쉬운 방법이지만, 이 배열은 웹사이트에 보여질 모든 정보를 포함하고 있고 제가 번역하기를 원했기 때문에 저는 JSON 파일이 두 개 있어서 안 될 것 같습니다. (하단의 링크). 구현 저는 리액트 앱을 만드는 방법 및/또는 설정하는 방법에 대해 설명하지 않겠습니다. i18N 라이브러리와 JSON 어레이 반복 설정 방법에만 집중하겠습니다. 루트 폴더에 i18n.js라는 파일을 생성하고 다음을 작성합니다. 다음과 같은 i18N 라이브러리를 사용했습니다. 백엔드: (i18-next-http.. 2022. 1. 12.
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.
Simplilearn 인증서 무료로 사용 가능 Simplilearn은 무료로 배울 수 있는 무료 코너를 시작했고 무료 자격증을 제공했습니다. 60일 이내에 과정을 완료해야 하며, 모든 퀴즈를 충족하면 수료증을 받게 됩니다. 오늘날 가장 수요가 많은 기술을 무료로 배우고 인증을 받으십시오. 지금 등록 https://simpli-web.app.link/e/cAPdump7Imb 지금 등록 https://simpli-web.app.link/e/cAPdump7Imb 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.
ORM: 보다 직관적인 데이터베이스 관리 방법 옴 지난 달에 인기 있는 오픈 소스 소프트웨어 Postgre를 사용하여 데이터베이스 디자인을 배웠습니다.SQL, 관계형 데이터베이스가 장난이 아니라는 걸 직접 깨달았어! 쿼리에 세미콜론을 추가하는 것을 잊을 때마다 움찔했고, 잘못된 종류의 조인을 사용할 때마다 움찔했습니다. 중첩된 SELECT 문장으로 쿼리를 마칠 때마다 축하했고, 마지막 관계보다 긴 GROUP BY 문을 사용해야 할 때마다 울었습니다. 그럼에도 불구하고, 저는 데이터베이스 설계를 이해하기 위한 연구를 계속했습니다. 왜냐하면 어떤 종류의 풀 스택 개발자가 데이터베이스를 어떻게 다루는지 모르기 때문입니다. 이번 주 초로 돌아가면, 저는 Ruby on Rails 프로젝트에 기능을 추가하는 일을 맡았었습니다. 일부 컨텍스트를 제공하자면, 레일.. 2022. 1. 11.

티스토리툴바