JavaScript에서 호이스팅 이해하기
호이스팅은 기능이 아니라 JavaScript의 개념입니다. 다른 스크립팅 또는 서버 측 언어에서는 변수나 함수를 사용하기 전에 선언해야 합니다. JavaScript에서는 변수와 함수 이름을 선언하기 전에 사용할 수 있습니다. JavaScript 컴파일러는 모든 변수 및 함수 선언을 맨 위로 이동하여 오류가 발생하지 않도록 합니다. 이것을 호이스팅이라고 합니다. 코드 실행 직전에 컴파일러 자체...
javascriptreactprogrammingwebdev2022-10 last update
5 minutes reading
Javascript - 다른 언어에서 훔치자!
나는 새로운 언어를 배우는 것을 좋아합니다. 비록 제가 아마도 그것들을 사용하지 못할 것이라고 확신하지만(적어도 프로덕션 단계에서는 그렇지 않을 것입니다), 또는 내가 마침내 그것을 사용하게 되었을 때 언어가 많이 달라질 것이라고 확신합니다. 프레임워크도 마찬가지이며 다른 언어와 프레임워크에서 훔쳐 훨씬 더 나은 훌륭한 예를 볼 수 있습니다. 그러나 때때로 우리는 그것을 찾기 위해 더 강력한...
webdevreactprogrammingjavascript2022-10 last update
12 minutes reading
JavaScript의 history.back()을 아십니까?
그래서 우리 모두는 YouTube 동영상과 Stackoverflow 등을 보기 위해 인터넷을 검색합니다. 그리고 우리는 보통 "←"버튼을 클릭하여 이전 웹사이트로 돌아갑니다. 아세요? 자바스크립트에서 브라우저의 "←"버튼과 동일한 기능을 만들 수 있습니다 🔥 뒤로가기 버튼을 만들어보자 이제 기능적으로 만들 시간입니다 ✌️ 버튼에 onclick 속성 추가 다음은 마지막이자 작은 코드입니다 🙂 ...
reactjavascriptwebdev2022-10 last update
4 minutes reading
드래그 앤 드롭하여 사진 업로드 #JavaScript
우리는 이미지를 업로드하기 위한 아주 기본적인 드래그 앤 드롭 애플리케이션을 만들 것입니다. 1.a) 이미지를 드롭할 영역 생성 1.b) 그리고 약간의 스타일 추가 그것은 다음과 같이 보일 것입니다: 2) 'dragover' 이벤트의 기본 동작 방지 그렇지 않으면 드롭된 이미지가 빈 탭에서 열립니다. 3) 드롭 시 파일 가져오기 여기서도 기본 동작을 방지해야 합니다. 4) 업로드한 미리보기 ...
programmingjavascriptreactwebdev2022-10 last update
17 minutes reading
손쉬운 협업 자바스크립트 스프레드시트 만들기
에서 을 사용하여 자바스크립트 스프레드시트를 만드는 방법을 소개했습니다. 주제로 들어가기 전에 가장 먼저 고려해야 할 것은 백엔드 스토리지입니다. 다른 사람들이 페이지에 들어갈 때 가장 최근의 시트 상태를 볼 수 있도록 시트 데이터를 저장해야 하기 때문입니다. Websocket은 클라이언트 간에 라이브 데이터를 교환하는 주요 전송 수단입니다. 여기서 우리는 백엔드 서버로 Express를 선택...
collabrationreactexcelwebdev2022-10 last update
17 minutes reading
전문가처럼 보이는 7가지 JavaScript One Liner
안녕하세요 여러분 👋 친구야, 여기 SnowBit이야. 저는 열정적이고 독학으로 공부한 젊고 프론트엔드 웹 개발자이며 성공적인 개발자가 되고자 합니다. 저는 다양한 기술로 웹 애플리케이션을 구축하는 것을 좋아합니다. 오늘 저는 여러분이 다음 프로젝트에서 도움이 될 수 있는 전문가처럼 보일 수 있는 몇 가지 좋은 JS 원 라이너를 가지고 왔습니다. 가자 🚀 부울 전환 부울을 전환하여 true를...
webdevjavascriptbeginnersreact2022-10 last update
5 minutes reading
BUN은 경량 올인원 JAVASCRIPT 런타임입니다.
아마도 이전에 JavaScript 번들러를 만난 적이 있을 것입니다. 이것은 Rollup 또는 Webpack과 같은 도구에서 비교적 잘 처리되지만 놀라운 것이 곧 실현될 것입니다. “an incredibly fast all-in-one JavaScript runtime.” Bundle, transpile, install and run JavaScript & TypeScript projects...
programmingjavascriptreactwebdev2022-10 last update
7 minutes reading
자바스크립트에서 디바운싱✨
브라우저 성능을 최적화하고 사용자 경험 결과물을 따라가기 위한 몇 가지 기술이 있으며 그 중 하나는 디바운싱입니다. 이것에 대한 아주 좋은 예는 검색창일 것입니다. 모든 문자와 함께 검색 창에 단어를 입력하면 새로운 추천 항목이 표시됩니다. 표면적으로 여기의 트릭은 누군가가 최신 입력에 따라 원하는 옵션을 가져오기 위해 문자를 입력할 때마다 API 호출을 해야 한다는 것입니다. 이를 수행하는...
programmingjavascriptreactwebdev2022-10 last update
6 minutes reading
React JS에서 Cloudinary하는 방법.
먼저 cloudinary가 무엇을 수반하고 무엇에 사용되는지 알려드리고 싶습니다. *Cloudinary는 이미지 및 동영상 업로드, 저장, 조작, 최적화, 파일 구성에서 전달에 이르기까지 클라우드에서 수행되는 모든 것을 포괄하는 웹사이트 및 모바일 앱을 위한 종단 간 이미지 및 동영상 관리 솔루션입니다. 예, 여기에 명시된 대로 . 예를 들어, 풀스택 애플리케이션에서 작업 중이고 프론트엔드에...
beginnersprogrammingreactjavascript2022-10 last update
5 minutes reading
ReactJS에서 3D 큐브를 만드는 방법 🧊
이 게시물의 데모 저장소는 에서 찾을 수 있습니다. 이 포스트에 첨부된 유튜브 영상을 보실 수 있습니다 . 소개 설치 및 설정 암호 문서: 다음으로 Cube.css 파일에 다음을 붙여넣습니다. 이 두 파일 작성을 마친 후 LogoCube.css 파일을 LogoCube.js 스크립트로 가져옵니다. 그런 다음 응용 프로그램에서 렌더링할 위치로 가져올 수 있습니다LogoCube.js. 이 자습서에...
reactcssanimationsjavascript2022-10 last update
39 minutes reading
React 시작하는 방법 – 초보자 가이드 파트 -2
내 첫 번째 블로그를 읽었다면 react js를 시작하는 방법에 대한 몇 가지 팁이 있습니다. -> React js는 매우 인기 있는 라이브러리이며 최소한의 코드로 앱을 만들 수 있기 때문에 인기가 있습니다. React js는 실제 dom이 아닌 모든 작업을 수행하는 가상 dom을 생성하고 개발 중에 작업할 때 구성 요소가 가상 dom에서 트리 구조로 렌더링됩니다. real-dom으로 가상 ...
reacttutorialwebdevjavascript2022-10 last update
7 minutes reading
NestJS 및 React를 사용하여 새 프로젝트를 부트스트랩하는 방법
NestJS는 서버 측 애플리케이션을 구축하기 위한 Node.js의 효율적이고 확장 가능한 프레임워크입니다. 그것은 빠르게 인기를 얻고 있으며 현재 내가 가장 좋아하는 서버 측 프레임워크입니다(Rails는 항상 내 마음 속에 자리를 잡을 것입니다). 시작하기 전에 Node.js와 npm을 설치해야 합니다. 아직 없는 경우 과 같은 패키지 관리자를 사용하는 것이 좋습니다. Nest의 훌륭한 용...
reacttutorialwebdevjavascript2022-10 last update
6 minutes reading
React JS에서 Cloudinary하는 방법.
먼저 cloudinary가 무엇을 수반하고 무엇에 사용되는지 알려드리고 싶습니다. *Cloudinary는 이미지 및 동영상 업로드, 저장, 조작, 최적화, 파일 구성에서 전달에 이르기까지 클라우드에서 수행되는 모든 것을 포괄하는 웹사이트 및 모바일 앱을 위한 종단 간 이미지 및 동영상 관리 솔루션입니다. 예, 여기에 명시된 대로 . 예를 들어, 풀스택 애플리케이션에서 작업 중이고 프론트엔드에...
beginnersprogrammingreactjavascript2022-10 last update
5 minutes reading
useRef() 및 useState() Hook을 사용하여 React js에서 HTML 비디오 태그 제어 속성을 사용자 정의하는 방법?
반응 응용 프로그램에서 작업한 적이 있다면 React Hook은 Html 요소와 그 속성을 제어하는 데 큰 역할을 했습니다. Hook React Application 개발에 큰 역할을 한 것은 useState(),useEffect(),useRef()입니다. 이제 우리의 주제로 갑니다. 먼저 우리는 1) React Js에서 사용자 정의 Bottom을 통해 비디오를 재생하는 방법을 알고 있습니까...
tutorialjavascriptbeginnersreact2022-10 last update
7 minutes reading
React Context 소개 - 간단하게 사용하는 방법
컨텍스트 API를 사용하려면 최소한 기본 React 지식(재사용 가능한 구성 요소 생성, 상태 조작, props...)이 필요합니다. 컨텍스트는 모든 수준을 수동으로 통과하지 않고도 구성 요소 간에 데이터를 전달하는 방법을 제공합니다. 더 복잡한 방식으로 중첩된 구성 요소가 있는 경우 구성 요소 간에 전달되는 이 데이터를 처리하기가 까다로울 수 있습니다. 예를 들어 구성 요소에서 직접 상태에...
reactjavascriptreduxwebdev2022-10 last update
15 minutes reading
Github에 React 앱을 배포하는 방법
추가 정보 -- 이동 -- Github 계정 생성 -- Node.js가 PC에 설치되어 있는지 확인합니다. -- Visual Studio Code(vscode) 설치 -- 빈 폴더를 만들고 원하는 이름을 지정합니다. -- 폴더 완성 후 terimal로 이동 -- 터미널 유형에서 -- github으로 이동하여 새 저장소를 만듭니다. -- 저장소 완료 후 -- 패키지 설치 후 -- package...
htmlreactgithubcss2022-10 last update
5 minutes reading
base64로 이미지를 업로드하고 formik으로 검증하는 방법
formik을 사용하여 이미지를 업로드하고 js를 반응할 수 있습니다. 이제 Base64는 4개의 6비트 Base64 숫자로 나타낼 수 있는 24비트 시퀀스로 이진 데이터(보다 구체적으로 8비트 바이트 시퀀스)를 나타내는 이진-텍스트 인코딩 체계 그룹입니다. 이제 우리는 하나의 이미지를 만들 것입니다. 그래서 여기서 formik은 이미지를 처리한 다음 onchange 함수에서 이미지를 가져와...
javascriptreactprogrammingwebdev2022-10 last update
6 minutes reading
mern 스택 코딩 및 웹 개발을 사용하여 처음부터 블로그를 만드는 방법은 무엇입니까?
이 글을 읽고 계시다면 제 이름은 FARES tinakiche입니다. 저는 약 1년 전에 웹 개발을 배우기 시작했습니다. 이 코드가 포함된 전체 프로젝트를 보기 위해 전체 스택 블로그 프로젝트를 구축한 방법입니다. 프로젝트 설명 이 블로그는 코드를 사용하기 쉽고 대부분 모바일 친화적입니다. 이 프로젝트에서 나는 mern 스택을 사용했습니다. 몽고DB 익스프레스 반응 NodeJS 다음은 프로젝...
beginnersreactnewsjavascript2022-10 last update
6 minutes reading
반응 js에서 반응 쿼리 v4를 사용하여 서버 측 데이터를 얻는 방법.
React Query는 종종 React에 대한 누락된 데이터 가져오기 라이브러리로 설명됩니다. 그러나 더 기술적인 측면에서 보면 React 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 쉽게 수행할 수 있습니다. -> 리액트 쿼리는 서버 데이터의 상태 관리에 사용되며 리액트 쿼리를 사용하면 코드를 적게 작성해야 하므로 redux 툴킷의 대안이기도 합니다. ...
javascriptreactwebdev2022-10 last update
6 minutes reading
자바스크립트 - 호이스팅 (1)
호이스팅에 대해 설명하기 전에 JavaScript 엔진이 코드를 어떻게 준수하는지 알아야 합니다. JavaScript 엔진은 실행하기 전에 코드의 구조를 변경합니다. 할당이 아닌 변수 선언만 호이스트되거나 사용 가능한 범위의 맨 위로 이동됩니다. 자바스크립트 코드 JavaScript 엔진에 의해 변경된 코드 게양 예 당신은 이것에 관심이 있습니까? 질문이 있으시면 저에게 물어보세요... 그리...
webdevjavascriptprogrammingreact2022-10 last update
5 minutes reading
자바스크립트에서 객체 반복하기
이 게시물에서는 자바스크립트 프로그래밍 언어에서 객체를 반복하는 다양한 방법을 설명합니다. 이 접근 방식은 개체의 키를 반복하는 데 사용됩니다 키를 반복하면 object[key]를 사용하여 값을 얻을 수 있습니다. 개체 생성자의 키 메서드가 개체의 키 배열을 반환합니다. 키 배열을 사용하면 배열 접근 방식을 사용하여 배열을 반복할 수 있습니다. object[key]를 사용하여 objects ...
angularjavascriptnodereact2022-10 last update
8 minutes reading
Javascript에서 ES6의 상위 7가지 기능
1.let 및 const 키워드 두 키워드 모두 사용자가 변수를 정의할 수 있도록 하며, 한편으로는 'let' 키워드가 'var'와 비슷하며 코드 전체에서 변경할 수 있습니다. 반면에 'const' 키워드를 사용하면 사용자가 상수를 정의할 수 있습니다. 'let' 및 'var'와 달리 이 변수를 변경하거나 재할당할 수 없습니다. 객체 또는 배열의 경우 재할당할 수 없음을 기억하십시오. 'va...
es6javascriptwebdevreact2022-10 last update
5 minutes reading
JavaScript의 일반 문자열에 대한 CamelCase
이 게시물에서 우리는 JS JavaScript에서 모든 camelCase 문자열을 일반 문자열로 바꾸는 방법을 볼 것입니다. 1단계 - 낙타 케이스 깨기 예를 들어 보겠습니다 - "checkThisOutBro" 이제 우리는 이 camelCase 문자열을 "Check This Out Bro"로 분리하고 싶습니다. 그래서 이것을 하기 위해 우리는 정규식을 사용할 것입니다 이것은 우리에게 줄 것입...
javascriptreactstringreactnative2022-10 last update
5 minutes reading
09 자바스크립트의 일반적인 수학 함수
The Math Function helps us to perform Mathematical Tasks on numbers. 이것은 당신이 알아야 할 가장 일반적인 9가지 자바스크립트 수학 함수입니다👇. 1. Math.random() : 이 메서드는 0(포함)과 1(배타) 사이의 난수를 반환합니다. 2. Math.pow() : 이 메서드는 Math.pow(x,y)와 같은 두 개의 매개변수를 사...
javascriptprogrammingbeginnersreact2022-10 last update
10 minutes reading
자바스크립트 DOM
JavaScript DOM은 웹 개발의 필수적인 부분이며 JavaScript DOM을 사용하여 HTML 요소를 조작하는 여러 방법이 있습니다. Document 개체 모듈(DOM)은 HTML 개체의 요소를 동적으로 변경할 수 있으며 JavaScript DOM으로 할 수 있는 멋진 작업이 많이 있습니다. DOM은 메소드를 따릅니다. 1.document.getElementById(HTMLEleme...
cssprogrammingreactjavascript2022-10 last update
6 minutes reading