본문 바로가기

웹 개발33

Google Analytics와 연결하여 실제 브라우저 지원을 표시하는 방법 내가 사용하는 웹캔은 오늘날 모든 웹 개발자에게 없어서는 안 될 부분입니다. 데스크탑 및 모바일 웹 브라우저에서 프런트 엔드 웹 기술을 지원하기 위한 최신 브라우저 지원 표를 사용할 수 있습니까? 개별 기술에 대한 브라우저 지원은 컬러로 강조 표시됩니다(기능을 지원하는 브라우저는 녹색, 이를 지원하지 않는 브라우저는 빨간색, 일부 또는 폴리필을 지원하는 브라우저는 진흙 녹색으로 표시됩니다). 오른쪽 상단에서 해당 기술을 지원하는 브라우저의 비율도 확인할 수 있습니다. 어떤 브라우저가 어떤 기능을 지원하는지 알 수 있고, 동시에 얼마나 많은 브라우저가 사용되는지 알 수 있을까요? 이를 바탕으로 애플리케이션은 새로운 기능을 사용할 수 있는 사용자의 비율을 계산할 수 있습니다. 그러나 이 수치는 근사치일 뿐이.. 2022. 3. 10.
2022년에 꼭 사용해야 할 11가지 놀라운 프런트엔드 개발 툴 1. 대응력 2. 차트.css 3. 그림 그리기 4. 공용 API 5. 유리형태성 CSS 생성기 6. UiGradients 7. 기티뇨르.이오 8. iHateRegex 9. 극장 10. 머리 없는 UI 11. 더 예쁜 결론 2022. 2. 15.
무료 뉴스레터 구독 2022. 2. 15.
JavaScript Bundler를 사용하는 이유 JS 파일 수 감소 코드베이스를 잘 정의된 여러 파일로 분할하여 유지할 수 있습니다. 배포할 수 있도록 코드를 큰 파일로 번들로 제공합니다. node_modules에서 쉽게 가져오기 운영 서버에 node_messages를 배포하고, 가져올 파일의 상대 경로를 사용합니다. var _ = require('../node_modules/lodash/lodash.js'); var _ = require('../../node_modules/lodash/lodash.js'); 다른 파일 형식 가져오기 import './core.js'; import './style.css'; const template = require('./view.html'); 전치부호 코드 축소 변수에 의미 있는 이름 지정 코드 들여쓰기 다른 개발.. 2022. 2. 15.
JavaScript를 배우기 위한 최고의 YouTube 채널 2022. 2. 15.
많은 프로그래머도 모르는 재미있는 프로그래밍 사실 8가지 1. Java, Python, JavaScript 및 기타 10개 언어가 전부가 아닙니다. 2. 첫 번째 컴퓨터 바이러스는 그리 오래되거나 새롭지도 않다. 3. 프로그래밍 언어에도 악플러가 있다. 4. 첫 번째 컴퓨터 게임은 얻는 것이 없다. 5. 컴퓨터 프로그래밍은 2차 세계대전을 끝내는 데 도움을 주기도 했다. 6. 첫 번째 버그는 실제 버그였다. 7. 미친 시인의 딸이 최초의 프로그래머가 되었다. 8. 첫 번째 컴퓨터는 전기를 전혀 사용하지 않았어. 2022. 2. 15.
신입 프로그래머에게 첫 출근 날 주는 9가지 조언 배우고자 하는 자신을 보여라 (더 잘 할 수 있다는 것을 알더라도 겸손하세요. 아무리 당신이 옳다고 해도 그들은 새로운 프로그래머에게 거의 관심을 기울이지 않으니, 그것에 대해 너무 나쁘게 생각하지 마세요. 대신, 그는 당신의 아이디어를 약에 먹이고 혁명가는 아닙니다. 그는 대신 다른 사람의 아이디어를 분해하는 것을 피합니다. 그는 그것들을 개선할 방법을 찾는다. 모든 사람의 일을 개선할 수 있는 방법을 기꺼이 돕고 제안하세요. 당신이 성공하지 못할지라도, 그 태도는 특히 동료들 사이에서 높이 평가될 것이다. 성과가 없을 것 같으면 우울해하지 마세요. 처음에 인식은 항상 같습니다. 그러니까 기준을 높게 유지하되, 너무 기대는 하지 마세요. 동료/상사의 조작 방식에 적응하되, 잘못된 기술을 습득하지는 마십.. 2022. 2. 15.
Shell 대신 zx.js 사용 zx.js를 사용하는 이유 설치하다 // Global installation. // Also you can also install it separately in your project. npm i zx -g zx.js의 원리 사용. 파이프라인 문자를 사용하여 스크립트를 빠르게 테스트하는 것이 바로 가기입니다. 또 다른 방법은 우리가 자주 하는 것처럼 프로젝트에서 스크립트를 개발하는 것이다. 명령줄 도구 첫 번째 단계는 Responent 구성 요소인 첫 번째 Template 파일을 생성하고 기본적으로 Props 타입을 내보낸 후 최종적으로 디렉토리와 파일의 내용을 생성해야 합니다. 2022. 2. 15.
나는 결코 충분히 알지 못한다… 나는 그것을 맛 볼 수 있다. 거의 다 왔어. 성공적인 웹 개발자가 되기 위해 알아야 할 것의 10% 정도밖에 모른다는 사실을 상기시키기 전까지는 재택 근무 가능성이 점점 더 현실화되고 있습니다. 하지만, 제가 가진 작은 경험으로, 저는 필요한 특성들이 여러분이 성공적인 웹 개발자가 되기 위해 필요한 지식과 거의 같다는 것을 알게 되었습니다. 2021년 3월 이후로, 저는 일주일에 15~20시간씩 꾸준히 코드를 받아왔습니다. 저는 9월 중순 DevSlopes에 가입했을 때 멘토쉽과 목표에 대한 직접적인 경로로 인해 더욱 고무되었습니다. 저는 9월부터 약 14개의 솔로 프로젝트를 진행했는데, 매번 더 어려워지고 있습니다. 지난 4개월 동안 저는 HTML, CSS, 자바스크립트, 리액트Js, 그리고 타입스크.. 2022. 1. 19.
만약 우리가 처리해야 할 약속이 여러 개 있다면요? JavaScript에서 여러 약속 처리: Promise는 특별한 자바스크립트 객체라는 것을 이미 알고 있습니다. 비동기(일명 비동기) 작업이 성공적으로 완료된 후 또는 시간 초과, 네트워크 오류 등으로 인해 성공적으로 완료되지 않은 경우 오류가 발생합니다. 프로미스(Promise)는 실행자 함수를 사용하여 작업을 완료합니다(대부분 비동기). 소비자 함수(프로밋의 결과를 사용하는)는 실행 함수가 해결(성공) 또는 거부(오류)로 완료될 때 알림을 받아야 한다. 핸들러 메소드인 .then(), .catch() 및 .finally()는 실행자와 소비자 함수 사이의 링크를 만드는 것을 도와서 약속이 해결되거나 거부될 때 동기화될 수 있다. 처리기 메서드(.then, .catch, .finally)를 제외하고 Pr.. 2022. 1. 19.
자바스크립트 튜토리얼 2부 이 블로그에서는 스크립트가 무엇인지, 메인 파일(.html)에 외부 스크립트를 추가하는 방법, 자바스크립트에서 키워드를 가져오고 내보내는 방법, 엄격한 모드, 리터럴, 변수, 원시 및 비기본 데이터 유형이 무엇인지 설명했습니다. 참고: 이 블로그를 읽기 전에 이전 블로그 의 JavaScript 기본 사항을 읽어보시는 것이 좋습니다. 외부 스크립트 포함: 스크립트는 요소이며, 스크립트의 도움으로 우리는 자바스크립트 코드를 HTML 코드로 작성할 수 있습니다. 나는 이것을 예를 들어 설명하려고 합니다. 파일 스크립트가 있습니다.js 이 스냅샷은 script.js 파일입니다. 이제 이 파일을 index.html에 추가하려고 합니다. 파일을 추가하려면 스크립트 요소를 사용해야 합니다. 따라서 스크립트 요소의 도.. 2022. 1. 19.
응답의 useContext() hook Makers Academy의 최종 프로젝트인 소프트웨어 개발의 16주 선택적 BootCamp에서는 MERN 스택(MongoDB, Express, React 및 Node.js)을 사용하여 간단한 클릭 게임을 제작하기로 결정했습니다. 호스트된 최종 프로젝트는 https://버너드 수명입니다.herokuapp.com/ 우리가 고민했던 것 중 하나는 "useContext()" 훅을 작동시키는 방법을 찾는 것이었습니다. 저는 애플리케이션 구성 요소 계층 전반에 걸쳐 수동으로 소품을 전달해야 하는 것을 방지하는 것이 유용할 수 있다고 생각했습니다. 2주간의 엔지니어링 프로젝트 기간 동안 이를 달성할 수 없었지만(구성 요소를 통해 스파게티 소품이 흘러내리는 결과를 초래했다), 그 이후 저는 이 소품을 효과적으로 사용.. 2022. 1. 13.
JavaScript 개체 깊이 안녕하세요 여러분, 우리는 오늘 자바스크립트 오브젝트에 대한 모든 것을 다룰 것입니다. JavaScript로 프로그램을 작성하는 동안 객체를 더 잘 사용합니다. 개체의 구문 및 다양한 개체 조작 방법을 이해합니다. 그러니까 끝까지 계속 읽어보시고 여러분이 그것으로부터 무언가를 배우길 바랍니다. 물건들 이 개체는 연관된 키/값 쌍의 모음인 JavaScript에서 가장 유용한 데이터 구조 중 하나입니다. 객체 작성 새 빈 객체는 두 가지 방법으로 만들 수 있습니다. 문자 표기법 객체() 생성자 함수 const myObject = {}; // Using literal notation const myObject = new Object(); // Using the Object() constructor functi.. 2022. 1. 13.
JSON 어레이를 통해 반복하여 변환 파일(i18N)의 구성요소를 렌더링합니다. 197 소개 제가 리액트로 웹사이트를 만들 때, 제가 설명하려고 하는 번역에 문제가 생겼습니다. 이 때 "이런, JSON(경로)을 가져와 데이터에 액세스할 수 있다는 것을 알고 계십니까?"라고 말할 수 있습니다. 네, 그게 쉬운 방법이지만, 이 배열은 웹사이트에 보여질 모든 정보를 포함하고 있고 제가 번역하기를 원했기 때문에 저는 JSON 파일이 두 개 있어서 안 될 것 같습니다. (하단의 링크). 구현 저는 리액트 앱을 만드는 방법 및/또는 설정하는 방법에 대해 설명하지 않겠습니다. i18N 라이브러리와 JSON 어레이 반복 설정 방법에만 집중하겠습니다. 루트 폴더에 i18n.js라는 파일을 생성하고 다음을 작성합니다. 다음과 같은 i18N 라이브러리를 사용했습니다. 백엔드: (i18-next-http.. 2022. 1. 12.
Redux 연결() 기능 살펴보기 React가 오늘날과 같은 시대에 사용자 인터페이스(UI)를 구축하기 위한 가장 인기 있는 라이브러리 중 하나라는 사실은 비밀이 아니다. 이 블로그를 읽어보신 여러분 대부분은 Redux를 사용하여 이전 프로젝트에서 애플리케이션의 전반적인 상태를 관리했다고 확신합니다. redux connect() 기능이 어떻게 작동하는지 궁금해 본 적이 있습니까? 또는 connect() 함수를 작성하는 것과 관련된 다양한 자바스크립트 개념은 무엇입니까? 그렇다면, 저는 독자적으로 우리만의 연결() 함수를 작성하는 것과 관련된 자바스크립트 개념에 대해 알려드리도록 하겠습니다. 이 함수들은 Redux 라이브러리에 통합되어 함께 사용될 수 있습니다. Redux 설명서에 따르면 connect() 함수는 먼저 자바스크립트의 고차 .. 2022. 1. 12.

티스토리툴바