본문 바로가기

javascript126

MathJax 소개 MathJax는 현대의 모든 브라우저에서 작동하는 LaTeX, MathML, AskiMath 표기법용 오픈 소스 자바스크립트 디스플레이 엔진이다. 최근의 웹 기술 발전을 모바일 기기에 존재하는 주요 브라우저와 운영 체제를 지원하는 단일의 확실한 Math-on-the-Web 플랫폼으로 통합하려는 목적으로 설계되었다. 사용자가 직접 설정할 필요가 없으므로 페이지 작성자는 수학을 포함한 웹 문서를 작성할 수 있으며 사용자가 자연스럽고 쉽게 볼 수 있다고 확신할 수 있다. 하나는 단순히 웹 페이지에 MathJax와 일부 수학을 포함하고 나머지는 MathJax가 한다. MathJax는 비트맵 이미지로 포함된 수학과는 달리 웹 기반 글꼴을 사용하여 최대 해상도로 크기를 조정하고 인쇄하는 고품질 조판 기능을 제공한다.. 2022. 1. 19.
React.js에서 스도쿠 퍼즐의 게임 옵션 저장 리액트에서 스도쿠 퍼즐 게임을 만들고 있어요. 아직 이 앱이 완성되지 않았지만, 제가 추가한 세이브 게임 기능에 대한 게시물을 만들고 싶었습니다. 먼저 게임이 어떻게 구축되는지에 대한 기본적인 설명을 드리겠습니다(앞으로 빌드 각 섹션에 대한 자세한 게시물을 만들겠습니다). 퍼즐은 당분간 세 가지 퍼즐 옵션을 제공합니다: 하드, 미디엄, 그리고 쉬운. 각 난이도는 json 파일의 퍼즐 객체에 고정된 숫자의 문자열과 일치한다. 숫자의 줄들은 별도의 타일(CSS로 스타일링됨)로 매핑되며 81개의 타일로 스도쿠 보드를 만든다. 보드를 추적하기 위해 각 타일에 선택된 타일이라는 상태에 있는 ID를 부여했습니다. 선택한 항목타일 상태는 보드의 각 타일에 부착된 onClick 이벤트를 사용하여 설정합니다. 퍼즐 옆면.. 2022. 1. 19.
기호 및 프록시를 사용하여 JavaScript 오브젝트 서명 ECMAScript 6에는 Proxy()와 같은 강력한 새로운 API와 그 유용한 동료 Reflect가 포함되어 있습니다. 여기서는 프록시와 기호를 조합하여 객체에 대한 "비밀" 혼합물을 생성하는 방법에 대해 알아보려고 합니다. 아직 기호를 활용하지 않으셨다면 MDN 문서에서 기호를 읽어보시는 것이 좋습니다. 간단히 말해서: 기호는 원시 요소이다. 그것들은 문자열과 같은 물체의 열쇠로 사용될 수 있다. 기호는 해당 기호가 생성된 참조를 통해서만 사용할 수 있습니다. 즉, 기호는 그 자체와 동일합니다. 이전 버전 때문에 JSON에 직렬화하거나 JSON에서 부활할 수 없습니다. 범위에 있는 기호에 액세스할 수 없으면 읽을 수 없습니다! 기호를 사용하여 기존 개체를 확장하고 개체의 기존 속성과 충돌하지 않는 .. 2022. 1. 19.
Javascript 이벤트 키코드 소개 나는 최근에 우리 애플리케이션에 계층 트리 드롭다운을 활용하는 폼을 만드는 작업을 했습니다. 계층 트리를 만드는 것은 단일 목록 다중 선택 드롭다운을 구현하는 것보다 훨씬 더 어려웠으며 문서 자체를 구성한다. 그러나 이 문서에서는 Javascript 이벤트 키코드를 소개합니다. PM이 사용자/클라이언트가 백스페이스 키를 사용하여 이미 선택한 항목을 제거하도록 요청했을 때 이 개념을 알게 되었습니다. 양식 기능을 사용할 수 있는 기존 라이브러리가 있습니다. 어플리케이션에서 우리는 다중 선택 양식을 위한 섹션이 있는 코드 기반의 스토리북을 사용했습니다. 우리의 UI는 대부분 스토리북을 사용하여 필요할 때 가져옵니다. 그러나 드롭다운 목록을 구현할 때 비즈니스에서 조금 더 많은 커스터마이징이 필요합니다. 우리.. 2022. 1. 19.
응답의 useContext() hook Makers Academy의 최종 프로젝트인 소프트웨어 개발의 16주 선택적 BootCamp에서는 MERN 스택(MongoDB, Express, React 및 Node.js)을 사용하여 간단한 클릭 게임을 제작하기로 결정했습니다. 호스트된 최종 프로젝트는 https://버너드 수명입니다.herokuapp.com/ 우리가 고민했던 것 중 하나는 "useContext()" 훅을 작동시키는 방법을 찾는 것이었습니다. 저는 애플리케이션 구성 요소 계층 전반에 걸쳐 수동으로 소품을 전달해야 하는 것을 방지하는 것이 유용할 수 있다고 생각했습니다. 2주간의 엔지니어링 프로젝트 기간 동안 이를 달성할 수 없었지만(구성 요소를 통해 스파게티 소품이 흘러내리는 결과를 초래했다), 그 이후 저는 이 소품을 효과적으로 사용.. 2022. 1. 13.
노르웨이의 파손된 주택에 대한 예언적 시각(충만) 오늘 아침 환영이 보였는데, 마치 홍수나 폭풍으로 인해 완전히 파괴된 것처럼, 집이나 집들에서 나온 많은 판자들이 물에 잠겨 있는 것을 보았습니다. 오늘 노르웨이를 강타한 폭풍우가 있기에, 이 비전이 실현될 것이라고 생각한다. 그런 경우 이 게시물을 편집하여 다음 줄 아래에 뉴스 기사에 대한 링크를 추가합니다. – – – – – – – 재빠른 얘긴데, 여기 있다. 산악 암벽 미끄럼틀이 가옥 5채를 파괴했다. 2022. 1. 13.
장치 테스트를 위한 Jest 및 React 테스트 라이브러리 설정 Create-React-app이 인기 있는 도구가 된 이후, React에 대한 많은 튜토리얼에서 이를 시작 도구로 사용합니다. 하지만 Create-React-App이 우리에게 어떤 역할을 했는지 배우고 툴에 의존하지 않고 테스트 환경도 설정할 수 있도록 스스로 환경을 설정하기로 결정했습니다. 인기 있는 스타터 프로젝트를 관찰하고 이러한 설정을 최상의 방식으로 작성하는 데 필요한 코드를 취했습니다. 따라서 create-react-app의 일부 코드가 표시됩니다. 데모 저장소 완벽한 예를 보고 싶다면, 제가 시연용 상용구를 만들었습니다. https://github.com/tabsteveyang/react-jest-rtl-boilerplate 구성 설정 종속성 이것들은 당신에게 필요한 패키지입니다. 별도로 설.. 2022. 1. 13.
C# en Unity para programadores/JavaScript처럼 2017년 2란테 엘 소포르트는 자바스크립트를 포기하고, 데비도는 C# se posiciono como el lenguaje de programacion의 주요 모터 파라 엘 데사롤로 데 비디오예고 콘 에스테. continuacion, realizaremos una comparacion prátre C# y 자바스크립트 para qu qu quellos/웹 개발자로서 ciertas difercias al momento de aprosimacion de aprender Unity. 라스 변수 necesitan tipo declado: Cuando trabajemos con Unity y C# es necesario decalar qué tipo de valor podemos gardar en una 변수 .. 2022. 1. 13.
그거 디버그해. 미래의 나를 위한 디버깅 체크리스트/도구 상자 인정할게, 난 세계 최고의 테스터가 아니야. 나는 충분히 테스트하지 않는다. 그럼 누가 그러죠? 미래의 저와 미래의 제정신을 위해 코드에서 잠재적인 버그를 탐지하는 데 사용할 수 있는 기술의 간단한 요약을 소개합니다. 같거나 다른 환경에서 버그를 재현합니다. 당신은 그 문제를 재현할 수 있습니까? 그것은 약간 다른 상황에서 발생하나요? 다른 환경에서는 어떤 일이 일어날까요? 오류 메시지를 읽습니다. 있으면. 항상 시작하기에 좋은 장소입니다. 천만에요. 콘솔을 사용합니다. 네, 콘솔이요. 필요하다면 한 줄 한 줄 작은 부분만 테스트해보세요. 어레이에서 액세스해야 할 항목에 액세스하고 있습니까? 넌 안다고 생각하겠지만, 정말로, 넌 몰라. 그 질문에 대한 답은 .. 2022. 1. 13.
JavaScript 개체 깊이 안녕하세요 여러분, 우리는 오늘 자바스크립트 오브젝트에 대한 모든 것을 다룰 것입니다. JavaScript로 프로그램을 작성하는 동안 객체를 더 잘 사용합니다. 개체의 구문 및 다양한 개체 조작 방법을 이해합니다. 그러니까 끝까지 계속 읽어보시고 여러분이 그것으로부터 무언가를 배우길 바랍니다. 물건들 이 개체는 연관된 키/값 쌍의 모음인 JavaScript에서 가장 유용한 데이터 구조 중 하나입니다. 객체 작성 새 빈 객체는 두 가지 방법으로 만들 수 있습니다. 문자 표기법 객체() 생성자 함수 const myObject = {}; // Using literal notation const myObject = new Object(); // Using the Object() constructor functi.. 2022. 1. 13.
내 배열 메서드 치트 시트 생략 아래의 배열 방법 표를 몇 번이나 참조해야 했는지 말씀드릴 수 없습니다. 저는 LeetCode에서 알고리즘 연습을 하는 동안 몇 번 이상 사용했습니다. 이제 그만! 나는 치트시트가 필요 없고 이 방법들을 더 잘 알고 싶어. 그럼 블로그에 풀어보죠 파괴적인 방법과 비파괴적인 방법? 여기 당신이 알아야 할 것이 있습니다. 소멸 배열 메서드는 메서드가 호출되는 원래 배열이 변이됩니다. let runningShoes = ['Altras', 'Innov-8s', 'Bedrocks'] runningShoes.unshift('Luna Sandals') // destructive method console.log(runningShoes) // => ['Luna Sandals', 'Altras', 'Innov-8s', .. 2022. 1. 12.
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.

티스토리툴바