webdev Flask API로 파일을 업로드하는 방법 이 기사에서는 플라스크 API로 파일을 업로드하는 방법에 대해 Python으로 코드를 제시합니다. 개발을 시작하기 전에 을 확인하고 설치하십시오. $ python3 -m venv venv로 개발을 위한 가상 환경(env)을 설정하고 $ source venv/bin/activate로 활성 환경을 설정할 준비를 하십시오. 다음 단계에서는 $ pip install flask로 플라스크를 설치하고 ... pythonprogrammingtutorialwebdev HTML 및 CSS를 사용하여 카운트다운 타이머 만들기 이 기사에서는 html 🔥과 css만 사용하여 간단한 카운트다운 타이머 프로젝트를 만듭니다. 예, 카운트다운 타이머에는 라이브러리나 자바스크립트 코드를 사용하지 않습니다. 완전한 코드가 포함된 순수 HTML 및 CSS 카운트다운 타이머 프로젝트. 이제 html 코드 작성을 시작한 다음 css🤯만 사용하여 스타일을 지정하고 카운트다운 기능을 제공하겠습니다. Html🔥을 사용하여 카운트다운 타이... programmingcsswebdevhtml CSS에서 패딩이란 무엇입니까? CSS에서 패딩은 무엇을 위해 사용됩니까? 요소의 패딩 영역은 콘텐츠와 테두리 사이의 공간입니다. 패딩은 요소 내에 여분의 공간을 추가합니다. 반면 여백은 요소 주위에 여분의 공간을 추가합니다. CSS 패딩 속성은 설정된 경계 내에 머무르면서 요소 콘텐츠 주변에 공간을 제공하는 데 사용됩니다. 여백이 요소 테두리 외부에 공간을 추가합니다 패딩은 요소 테두리 내부에 공간을 추가합니다 CSS를 ... cssbeginnerstutorialwebdev WebRTC로 실시간 오디오 및 비디오 캡처 이 게시물에서는 WebRTC(API)와 약간의 HTML/Javascript를 사용하여 실시간 비디오 및 오디오 스트림을 캡처하는 과정을 다룰 것입니다. MediaDevices.getUserMedia() 메서드는 미디어 입력을 사용할 수 있는 권한을 요청하여 원하는 미디어 유형을 포함하는 트랙이 있는 MediaStream을 생성합니다. 사용자가 권한을 거부하거나 일치하는 미디어가 없으면 Not... tutorialwebrtcwebdevjavascript 페이지 매김을 추가하기 쉬운 React Query 페이지 매김은 웹 사이트 성능을 더 스마트하게 처리하는 데 사용되는 기술입니다. 요즘에는 사용자가 맨 아래로 스크롤한 새 데이터를 가져오거나 페이지를 매기자마자 무한 스크롤 페이지 매김 의미를 제공하는 경우가 많습니다. 내 웹 사이트 에 이 페이지 매김 기술을 추가합니다. . 이 API는 기본적으로 브라우저가 독점 DOM 요소 위치를 추적하고 감지하는 데 도움이 됩니다. 교차 API는 DOM... javascripttutorialreactwebdev TailwindCSS에서 삼각형을 만드는 방법 이 게시물에서는 테두리를 사용하여 TailwindCSS에서 삼각형을 그리는 네 가지 예제를 볼 것입니다. 삼각형은 기하학에서 가장 단순한 모양 중 하나입니다. 세 개의 직선과 두 개의 각으로 그릴 수 있습니다. 너비와 높이를 0으로 설정: w-0 및 h-0 전체 높이와 색상을 갖도록 위쪽 테두리를 다음과 같이 설정합니다. border-t-[75px] border-t-red-500 border... tailwindcsscsswebdevhtml 새 Astro JS 앱을 만드는 방법: 치트시트 이 게시물에서 새 Astro JS 앱을 만드는 방법을 알아봅니다. 이것은 Astro를 처음 사용하고 시작하려는 경우와 노련한 우주 비행사이지만 스핀업 명령을 기억할 수 없는 경우에도 동일하게 유용합니다. 기본 Astro 프로젝트에 대한 명령이 포함된 치트 시트를 받고 보너스로 CI 도구를 추가하는 방법도 살펴봅니다. 페이지 아래에서 연락처 세부 정보를 찾을 수 있습니다. 새 Astro JS ... nodeastrojavascriptwebdev 반응형 사이트 만들기 - 11부 이제 기본 구조의 스타일을 지정하고 작업했으므로 반응형 측면을 살펴보겠습니다. 우리는 그것을 고려하지 않았으므로 모바일 장치에서 홈페이지를 보면 어떻게 되는지 봅시다. 이미 얼마나 잘 생겼는지에 놀랐습니다. 우리가 집중해야 할 몇 가지 테이크 아웃. 헤더 간격 좌우 프로필 이미지를 해당 섹션으로 푸시 최근 게시물이 서로 아래에 표시되어야 함 나머지는 꽤 견고합니다! 시작하겠습니다. 반응하는 ... beginnersnextjswebdevjavascript Tailwind CSS 3 배지 예 이 섹션에서는 tailwind css 3으로 배지를 만들 것입니다. Tailwind CSS 3로 그림자, 배지 링 스타일로 배지를 만듭니다. 예 1 tailwind v3 단순 및 원형 배지. 테두리 스타일의 tailwind v3 배지. 예 2 링 스타일의 tailwind v3 배지. 그림자 스타일이 있는 tailwind v3 배지. 또한 읽기... tutorialtailwindcsswebdev JS 루프에 대한 작은 게시물 가장 간단한 의미에서 루프는 특정 조건이 충족될 때까지 실행할 수 있는 코드 조각입니다. 장소는 50명의 손님만 수용할 수 있기 때문에 배포할 수 있는 이름 카드는 50개뿐입니다. 이제 당신은 소프트웨어 엔지니어이므로 이벤트 관리자는 정확히 동일한 작업을 수행하기 위해 기계에서 사용할 수 있는 프로그램을 빌드하도록 요청합니다. while 루프는 단순히 조건이 참인 한 계속 실행한다고 말합니다... javascriptbeginnersloopswebdev Javascript 배열 필터 방법 Javascript의 filter 메서드는 배열의 얕은 복사본을 만들어 여러 조건에 따라 필터링합니다. filter 생성하는 배열은 일반적으로 원래 배열의 축소된 버전입니다. 보시다시피 filter 메서드는 해당 요소가 true 를 반환해야 하는 새로운 필터링된 배열에 요소가 있도록 허용합니다. 화살표 함수는 한 줄에 암시적으로 true를 반환하므로 다음과 같이 작성된 이 코드의 축소된 버전... javascriptbeginnerstypescriptwebdev Server-Sent Events를 사용하는 Websocket 없이 실시간 다음 자습서에서는 POST 요청을 시뮬레이션하기 위해 cURL을 사용하는 한 Express 및 Node.js를 사용합니다. 이는 HTTP 프로토콜 구현이 있는 모든 프로그래밍 언어를 사용하여 수행할 수도 있습니다. 에서 브라우저를 열거나 변경하기로 결정한 경우 선택한 포트와 호스트를 사용합니다. 메시지가 1초마다 업데이트되는 것을 콘솔에 표시해야 합니다. 브라우저의 네트워크 탭을 열면 주기적... nodejavascripttutorialwebdev Node.js 개발 환경 설정 보안 - 실수로 개인 자격 증명(예: Github)을 노출하지 않도록 합니다. 실험실 컴퓨터에서 코드와 변경 사항이 지워질 수 있습니다. Github 계정 및 Git CLI 설정 을 미리 설정하고 에 따라 Git CLI를 설치하고 Github 계정으로 CLI에 로그인합니다. 계정에서 Github 리포지토리 생성 git clone 명령을 사용하여 저장소의 로컬 복사본을 만듭니다. 일부dummy... beginnersprogrammingwebdevnode npm 목록 및 npm 설명 설명 해당 출력을 텍스트 파일로 리디렉션하고 VCS에 추가한 다음 나중에 해당 파일을 사용하여 동일한 버전 세트를 설치할 수 있습니다. npm freeze 명령이 필요하지 않습니다. 그러나 pip 프로젝트의 실제 "동결"은 사용 중인 정확한 버전 세트의 전체 목록과 메타데이터를 포함하는 package-lock.json과 동일합니다. 그 외에도 설치된 패키지의 버전과 해당 관계를 검사하는 데 사용할... nodejavascriptnpmwebdev Appwrite + jQuery로 앱 빌드 내 github에서 이 코드를 찾을 수 있습니다: appwrite를 설치하려면 docker가 설치되어 있어야 합니다. 도커 설치를 마친 후. 다음을 사용하여 appwrite를 설치할 수 있습니다. 자신의 매개변수를 선택하거나 기본 매개변수를 사용할 수 있습니다. 이러한 세부 정보를 지정한 후 몇 분 정도 걸립니다. 성공하면 Appwrite installed successfully라는 메시지가... appwritehacktutorialwebdevjavascript CSS를 사용하여 사용자 정의 스크롤 막대 만들기 저는 항상 맞춤형 스크롤바를 만드는 방법에 대해 배우는 데 관심이 있었고 마침내 성공했습니다. 먼저 스크롤바의 구성요소를 보여드리겠습니다. 스크롤 막대에는 썸과 트랙이 포함되어 있습니다. 썸은 드래그 가능한 스크롤 핸들이고 트랙은 전체 스크롤 막대 자체인 진행률 표시줄입니다. 스크롤바 너비 먼저 다음 의사 요소를 사용하여 스크롤 막대의 너비(수직 스크롤 막대의 너비 및 수평 스크롤 막대의 높... tutorialscrollbarcsswebdev React 시작하는 방법 – 초보자 가이드 파트 -2 -> React js는 매우 인기 있는 라이브러리이며 최소한의 코드로 앱을 만들 수 있기 때문에 인기가 있습니다. 즉, 코드를 한 번 작성하고 반복해서 재사용할 수 있으므로 개발이 더 빨라지고 반응도 jsx와 같은 일부 확장을 사용하여 간단한 용어로 React js는 선언적입니다. React js는 real dom이 아닌 우리의 모든 작업을 수행하는 virtual dom을 생성하고 개발 중에... reacttutorialwebdevjavascript 애플리케이션에 서비스 레이어를 생성해야 하는 좋은 이유 많은 개발자는 애플리케이션 코드를 모델/엔티티 계층, 리포지토리 계층, 서비스 계층 및 컨트롤러로 나누는 디자인 패턴에 익숙합니다. 일부 애플리케이션에서는 엔티티 클래스에서 데이터베이스 스키마를 설명할 수도 있습니다. 리포지토리 계층에 쿼리를 배치하고 이를 사용하여 데이터를 검색하는 반면 컨트롤러에는 각 경로 및 HTTP 메서드에 대한 핸들러가 포함됩니다. 내 저장소 앞에 서비스 계층이 있어... backendcleancodearchitecturewebdev Formik을 사용하여 React에서 양식 유효성 검사 이 게시물에서는 유사한 접근 방식을 사용하고 React를 사용하여 웹 기반 구현을 만듭니다. 동일한 유효성 검사 스키마(Yup 사용)를 사용합니다. 또한 을 사용하여 동일한 양식 필드를 사용합니다. CRA 도구 체인을 사용하여 간단한 React 프로젝트를 만듭니다. Material UI를 사용하여 간단한 등록 양식을 만들어 봅시다. 이 구성 요소의 경로는 src/pages/Register.j... reactwebdevjavascripthacktoberfest 사용자 지정 React 후크: useDebouncedEffect() 최근에 포스터가 디바운스 방식으로 useEffect를 실행하려고 하는 Stackoverflow에 대한 질문을 보았습니다. 스크린샷은 다음과 같습니다. 이는 일부 효과를 실행해야 하지만 종속성에 대한 모든 변경 사항에 대해서는 실행하지 않는 상황이 있는 만큼 여러 번 의미가 있습니다. 예: API를 호출하는 유형 검색 표시줄에서 리소스 활용을 최적화하기 위해 디바운스 방식으로 실행useEffe... reacttutorialwebdevprogramming Astro에 Vue 3를 설치하는 방법 이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 뷰 3(@astrojs/vue) 아스트로 ... astrotailwindcsswebdevvue 이 소프트웨어 엔지니어링 용어를 알고 계십니까? 을 해결하는 데 사용할 수 있습니다. While this may seem like a small thing, it can actually help to prevent a lot of bugs in your code. The term “Status 418 I’m a teapot” is derived from the HTTP status code 418, which is defined as “I... programmingcodenewbiesoftwarewebdev NestJS 및 React를 사용하여 새 프로젝트를 부트스트랩하는 방법 NestJS는 서버 측 애플리케이션 구축을 위한 Node.js의 효율적이고 확장 가능한 프레임워크입니다. 그것은 빠르게 인기를 얻고 있으며 현재 내가 가장 좋아하는 서버 측 프레임워크입니다(Rails는 항상 내 마음 속에 있을 것입니다). 시작하기 전에 Node.js와 npm을 설치해야 합니다. 아직 패키지 관리자가 없는 경우 과 같은 패키지 관리자를 사용하는 것이 좋습니다. 전체 코드베이스... reacttutorialwebdevjavascript GitHub에서 비밀을 유지하는 방법 GitHub를 사용하여 쉽게 협업하고 변경 사항을 추적하고 파일을 안전하게 백업할 수 있습니다. 주의하지 않으면 모든 작업을 위험에 빠뜨릴 수 있는 코드 조각을 노출할 수도 있습니다. 해당 액세스 문자열이 표시된 상태에서 코드를 GitHub에 푸시하면 프로젝트를 보는 모든 사람이 데이터베이스에 액세스할 수 있고 원숭이도 함께 사용할 수 있습니다. 비밀을 안전하게 유지하는 첫 번째 단계는 환경... programmingbeginnersgithubwebdev 메뉴 작동 - 10부 지금까지 헤더에 정적 메뉴를 사용했습니다. 이 정적 메뉴는 시각적 표현을 크게 기대하지 않습니다. 그것을 변경하고 작동하도록 합시다. 또한 각 페이지에서 활성 상태를 설정하는 방법도 다룰 것입니다. 이 시리즈를 처음 사용하는 경우 이 코드 를 사용하여 시작할 수 있습니다. components/header.js 파일에서 볼 수 있듯이 현재 메뉴는 일반 HTML입니다. 먼저 각 요소를 동적으로 ... beginnersnextjswebdevjavascript Java의 간단한 이메일 유효성 검사 emails.add("alice.example.com"); The Email address [email protected] is valid The Email address [email protected] is valid The Email address [email protected] is valid The Email address alice.example.com is invali... javatutorialwebdev Javascript 배열 슬라이스 방법 배열의 slice 메서드는 배열 일부의 단순 복사본을 반환합니다. slice 메소드에는 start 및 end 의 두 가지 선택적 매개변수가 있습니다. 예를 들어 2 로 설정하면 slice는 인덱스 2에서 새 배열 복사를 시작합니다. end가 포함할 마지막 항목을 나타낼 것으로 예상할 수 있지만 대신 제외할 첫 번째 항목입니다. 이 인수를 생략하면 slice 메서드는 다음 예제와 같이 단순히 ... javascriptbeginnerstypescriptwebdev 커밋 시 코드 형식을 자동화하는 방법 코딩 규칙을 유지하는 것은 팀 개발에 매우 중요합니다. 그러나 팀 규모가 커질수록 조심하는 것만으로는 충분하지 않습니다. 자동화는 다양한 코딩 스타일을 수정하여 이 문제를 해결합니다. 이 방법은 npm 스크립트를 사용하여 자동으로 코드를 확인하고 수정합니다. ESLint ESLint는 사용자 지정 구성 가능한 규칙을 기반으로 하는 코드 검사 도구이며 Husky는 커밋 타이밍에 코드 수정 명령... programmingwebdevjavascriptgit Syncfusion Vue 구성 요소는 버전 2.7과 호환됩니다. Vue.js는 2022년 7월 1일에 릴리스 하여 Vue 3의 가장 중요한 기능 중 일부를 백포트하여 Vue 2 사용자도 사용할 수 있도록 했습니다. 은 항상 최신 플랫폼 및 프레임워크 릴리스를 따라잡으며 이 이제 릴리스부터 Vue 2.7과 호환됨을 발표하게 되어 매우 기쁩니다. 참고: Syncfusion Vue 구성 요소는 최신 버전의 Vue 3도 지원합니다. 먼저 버전 3의 Vue 2.7... whatsnewwebdevdevelopmentvue 이전 기사 보기
Flask API로 파일을 업로드하는 방법 이 기사에서는 플라스크 API로 파일을 업로드하는 방법에 대해 Python으로 코드를 제시합니다. 개발을 시작하기 전에 을 확인하고 설치하십시오. $ python3 -m venv venv로 개발을 위한 가상 환경(env)을 설정하고 $ source venv/bin/activate로 활성 환경을 설정할 준비를 하십시오. 다음 단계에서는 $ pip install flask로 플라스크를 설치하고 ... pythonprogrammingtutorialwebdev HTML 및 CSS를 사용하여 카운트다운 타이머 만들기 이 기사에서는 html 🔥과 css만 사용하여 간단한 카운트다운 타이머 프로젝트를 만듭니다. 예, 카운트다운 타이머에는 라이브러리나 자바스크립트 코드를 사용하지 않습니다. 완전한 코드가 포함된 순수 HTML 및 CSS 카운트다운 타이머 프로젝트. 이제 html 코드 작성을 시작한 다음 css🤯만 사용하여 스타일을 지정하고 카운트다운 기능을 제공하겠습니다. Html🔥을 사용하여 카운트다운 타이... programmingcsswebdevhtml CSS에서 패딩이란 무엇입니까? CSS에서 패딩은 무엇을 위해 사용됩니까? 요소의 패딩 영역은 콘텐츠와 테두리 사이의 공간입니다. 패딩은 요소 내에 여분의 공간을 추가합니다. 반면 여백은 요소 주위에 여분의 공간을 추가합니다. CSS 패딩 속성은 설정된 경계 내에 머무르면서 요소 콘텐츠 주변에 공간을 제공하는 데 사용됩니다. 여백이 요소 테두리 외부에 공간을 추가합니다 패딩은 요소 테두리 내부에 공간을 추가합니다 CSS를 ... cssbeginnerstutorialwebdev WebRTC로 실시간 오디오 및 비디오 캡처 이 게시물에서는 WebRTC(API)와 약간의 HTML/Javascript를 사용하여 실시간 비디오 및 오디오 스트림을 캡처하는 과정을 다룰 것입니다. MediaDevices.getUserMedia() 메서드는 미디어 입력을 사용할 수 있는 권한을 요청하여 원하는 미디어 유형을 포함하는 트랙이 있는 MediaStream을 생성합니다. 사용자가 권한을 거부하거나 일치하는 미디어가 없으면 Not... tutorialwebrtcwebdevjavascript 페이지 매김을 추가하기 쉬운 React Query 페이지 매김은 웹 사이트 성능을 더 스마트하게 처리하는 데 사용되는 기술입니다. 요즘에는 사용자가 맨 아래로 스크롤한 새 데이터를 가져오거나 페이지를 매기자마자 무한 스크롤 페이지 매김 의미를 제공하는 경우가 많습니다. 내 웹 사이트 에 이 페이지 매김 기술을 추가합니다. . 이 API는 기본적으로 브라우저가 독점 DOM 요소 위치를 추적하고 감지하는 데 도움이 됩니다. 교차 API는 DOM... javascripttutorialreactwebdev TailwindCSS에서 삼각형을 만드는 방법 이 게시물에서는 테두리를 사용하여 TailwindCSS에서 삼각형을 그리는 네 가지 예제를 볼 것입니다. 삼각형은 기하학에서 가장 단순한 모양 중 하나입니다. 세 개의 직선과 두 개의 각으로 그릴 수 있습니다. 너비와 높이를 0으로 설정: w-0 및 h-0 전체 높이와 색상을 갖도록 위쪽 테두리를 다음과 같이 설정합니다. border-t-[75px] border-t-red-500 border... tailwindcsscsswebdevhtml 새 Astro JS 앱을 만드는 방법: 치트시트 이 게시물에서 새 Astro JS 앱을 만드는 방법을 알아봅니다. 이것은 Astro를 처음 사용하고 시작하려는 경우와 노련한 우주 비행사이지만 스핀업 명령을 기억할 수 없는 경우에도 동일하게 유용합니다. 기본 Astro 프로젝트에 대한 명령이 포함된 치트 시트를 받고 보너스로 CI 도구를 추가하는 방법도 살펴봅니다. 페이지 아래에서 연락처 세부 정보를 찾을 수 있습니다. 새 Astro JS ... nodeastrojavascriptwebdev 반응형 사이트 만들기 - 11부 이제 기본 구조의 스타일을 지정하고 작업했으므로 반응형 측면을 살펴보겠습니다. 우리는 그것을 고려하지 않았으므로 모바일 장치에서 홈페이지를 보면 어떻게 되는지 봅시다. 이미 얼마나 잘 생겼는지에 놀랐습니다. 우리가 집중해야 할 몇 가지 테이크 아웃. 헤더 간격 좌우 프로필 이미지를 해당 섹션으로 푸시 최근 게시물이 서로 아래에 표시되어야 함 나머지는 꽤 견고합니다! 시작하겠습니다. 반응하는 ... beginnersnextjswebdevjavascript Tailwind CSS 3 배지 예 이 섹션에서는 tailwind css 3으로 배지를 만들 것입니다. Tailwind CSS 3로 그림자, 배지 링 스타일로 배지를 만듭니다. 예 1 tailwind v3 단순 및 원형 배지. 테두리 스타일의 tailwind v3 배지. 예 2 링 스타일의 tailwind v3 배지. 그림자 스타일이 있는 tailwind v3 배지. 또한 읽기... tutorialtailwindcsswebdev JS 루프에 대한 작은 게시물 가장 간단한 의미에서 루프는 특정 조건이 충족될 때까지 실행할 수 있는 코드 조각입니다. 장소는 50명의 손님만 수용할 수 있기 때문에 배포할 수 있는 이름 카드는 50개뿐입니다. 이제 당신은 소프트웨어 엔지니어이므로 이벤트 관리자는 정확히 동일한 작업을 수행하기 위해 기계에서 사용할 수 있는 프로그램을 빌드하도록 요청합니다. while 루프는 단순히 조건이 참인 한 계속 실행한다고 말합니다... javascriptbeginnersloopswebdev Javascript 배열 필터 방법 Javascript의 filter 메서드는 배열의 얕은 복사본을 만들어 여러 조건에 따라 필터링합니다. filter 생성하는 배열은 일반적으로 원래 배열의 축소된 버전입니다. 보시다시피 filter 메서드는 해당 요소가 true 를 반환해야 하는 새로운 필터링된 배열에 요소가 있도록 허용합니다. 화살표 함수는 한 줄에 암시적으로 true를 반환하므로 다음과 같이 작성된 이 코드의 축소된 버전... javascriptbeginnerstypescriptwebdev Server-Sent Events를 사용하는 Websocket 없이 실시간 다음 자습서에서는 POST 요청을 시뮬레이션하기 위해 cURL을 사용하는 한 Express 및 Node.js를 사용합니다. 이는 HTTP 프로토콜 구현이 있는 모든 프로그래밍 언어를 사용하여 수행할 수도 있습니다. 에서 브라우저를 열거나 변경하기로 결정한 경우 선택한 포트와 호스트를 사용합니다. 메시지가 1초마다 업데이트되는 것을 콘솔에 표시해야 합니다. 브라우저의 네트워크 탭을 열면 주기적... nodejavascripttutorialwebdev Node.js 개발 환경 설정 보안 - 실수로 개인 자격 증명(예: Github)을 노출하지 않도록 합니다. 실험실 컴퓨터에서 코드와 변경 사항이 지워질 수 있습니다. Github 계정 및 Git CLI 설정 을 미리 설정하고 에 따라 Git CLI를 설치하고 Github 계정으로 CLI에 로그인합니다. 계정에서 Github 리포지토리 생성 git clone 명령을 사용하여 저장소의 로컬 복사본을 만듭니다. 일부dummy... beginnersprogrammingwebdevnode npm 목록 및 npm 설명 설명 해당 출력을 텍스트 파일로 리디렉션하고 VCS에 추가한 다음 나중에 해당 파일을 사용하여 동일한 버전 세트를 설치할 수 있습니다. npm freeze 명령이 필요하지 않습니다. 그러나 pip 프로젝트의 실제 "동결"은 사용 중인 정확한 버전 세트의 전체 목록과 메타데이터를 포함하는 package-lock.json과 동일합니다. 그 외에도 설치된 패키지의 버전과 해당 관계를 검사하는 데 사용할... nodejavascriptnpmwebdev Appwrite + jQuery로 앱 빌드 내 github에서 이 코드를 찾을 수 있습니다: appwrite를 설치하려면 docker가 설치되어 있어야 합니다. 도커 설치를 마친 후. 다음을 사용하여 appwrite를 설치할 수 있습니다. 자신의 매개변수를 선택하거나 기본 매개변수를 사용할 수 있습니다. 이러한 세부 정보를 지정한 후 몇 분 정도 걸립니다. 성공하면 Appwrite installed successfully라는 메시지가... appwritehacktutorialwebdevjavascript CSS를 사용하여 사용자 정의 스크롤 막대 만들기 저는 항상 맞춤형 스크롤바를 만드는 방법에 대해 배우는 데 관심이 있었고 마침내 성공했습니다. 먼저 스크롤바의 구성요소를 보여드리겠습니다. 스크롤 막대에는 썸과 트랙이 포함되어 있습니다. 썸은 드래그 가능한 스크롤 핸들이고 트랙은 전체 스크롤 막대 자체인 진행률 표시줄입니다. 스크롤바 너비 먼저 다음 의사 요소를 사용하여 스크롤 막대의 너비(수직 스크롤 막대의 너비 및 수평 스크롤 막대의 높... tutorialscrollbarcsswebdev React 시작하는 방법 – 초보자 가이드 파트 -2 -> React js는 매우 인기 있는 라이브러리이며 최소한의 코드로 앱을 만들 수 있기 때문에 인기가 있습니다. 즉, 코드를 한 번 작성하고 반복해서 재사용할 수 있으므로 개발이 더 빨라지고 반응도 jsx와 같은 일부 확장을 사용하여 간단한 용어로 React js는 선언적입니다. React js는 real dom이 아닌 우리의 모든 작업을 수행하는 virtual dom을 생성하고 개발 중에... reacttutorialwebdevjavascript 애플리케이션에 서비스 레이어를 생성해야 하는 좋은 이유 많은 개발자는 애플리케이션 코드를 모델/엔티티 계층, 리포지토리 계층, 서비스 계층 및 컨트롤러로 나누는 디자인 패턴에 익숙합니다. 일부 애플리케이션에서는 엔티티 클래스에서 데이터베이스 스키마를 설명할 수도 있습니다. 리포지토리 계층에 쿼리를 배치하고 이를 사용하여 데이터를 검색하는 반면 컨트롤러에는 각 경로 및 HTTP 메서드에 대한 핸들러가 포함됩니다. 내 저장소 앞에 서비스 계층이 있어... backendcleancodearchitecturewebdev Formik을 사용하여 React에서 양식 유효성 검사 이 게시물에서는 유사한 접근 방식을 사용하고 React를 사용하여 웹 기반 구현을 만듭니다. 동일한 유효성 검사 스키마(Yup 사용)를 사용합니다. 또한 을 사용하여 동일한 양식 필드를 사용합니다. CRA 도구 체인을 사용하여 간단한 React 프로젝트를 만듭니다. Material UI를 사용하여 간단한 등록 양식을 만들어 봅시다. 이 구성 요소의 경로는 src/pages/Register.j... reactwebdevjavascripthacktoberfest 사용자 지정 React 후크: useDebouncedEffect() 최근에 포스터가 디바운스 방식으로 useEffect를 실행하려고 하는 Stackoverflow에 대한 질문을 보았습니다. 스크린샷은 다음과 같습니다. 이는 일부 효과를 실행해야 하지만 종속성에 대한 모든 변경 사항에 대해서는 실행하지 않는 상황이 있는 만큼 여러 번 의미가 있습니다. 예: API를 호출하는 유형 검색 표시줄에서 리소스 활용을 최적화하기 위해 디바운스 방식으로 실행useEffe... reacttutorialwebdevprogramming Astro에 Vue 3를 설치하는 방법 이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 뷰 3(@astrojs/vue) 아스트로 ... astrotailwindcsswebdevvue 이 소프트웨어 엔지니어링 용어를 알고 계십니까? 을 해결하는 데 사용할 수 있습니다. While this may seem like a small thing, it can actually help to prevent a lot of bugs in your code. The term “Status 418 I’m a teapot” is derived from the HTTP status code 418, which is defined as “I... programmingcodenewbiesoftwarewebdev NestJS 및 React를 사용하여 새 프로젝트를 부트스트랩하는 방법 NestJS는 서버 측 애플리케이션 구축을 위한 Node.js의 효율적이고 확장 가능한 프레임워크입니다. 그것은 빠르게 인기를 얻고 있으며 현재 내가 가장 좋아하는 서버 측 프레임워크입니다(Rails는 항상 내 마음 속에 있을 것입니다). 시작하기 전에 Node.js와 npm을 설치해야 합니다. 아직 패키지 관리자가 없는 경우 과 같은 패키지 관리자를 사용하는 것이 좋습니다. 전체 코드베이스... reacttutorialwebdevjavascript GitHub에서 비밀을 유지하는 방법 GitHub를 사용하여 쉽게 협업하고 변경 사항을 추적하고 파일을 안전하게 백업할 수 있습니다. 주의하지 않으면 모든 작업을 위험에 빠뜨릴 수 있는 코드 조각을 노출할 수도 있습니다. 해당 액세스 문자열이 표시된 상태에서 코드를 GitHub에 푸시하면 프로젝트를 보는 모든 사람이 데이터베이스에 액세스할 수 있고 원숭이도 함께 사용할 수 있습니다. 비밀을 안전하게 유지하는 첫 번째 단계는 환경... programmingbeginnersgithubwebdev 메뉴 작동 - 10부 지금까지 헤더에 정적 메뉴를 사용했습니다. 이 정적 메뉴는 시각적 표현을 크게 기대하지 않습니다. 그것을 변경하고 작동하도록 합시다. 또한 각 페이지에서 활성 상태를 설정하는 방법도 다룰 것입니다. 이 시리즈를 처음 사용하는 경우 이 코드 를 사용하여 시작할 수 있습니다. components/header.js 파일에서 볼 수 있듯이 현재 메뉴는 일반 HTML입니다. 먼저 각 요소를 동적으로 ... beginnersnextjswebdevjavascript Java의 간단한 이메일 유효성 검사 emails.add("alice.example.com"); The Email address [email protected] is valid The Email address [email protected] is valid The Email address [email protected] is valid The Email address alice.example.com is invali... javatutorialwebdev Javascript 배열 슬라이스 방법 배열의 slice 메서드는 배열 일부의 단순 복사본을 반환합니다. slice 메소드에는 start 및 end 의 두 가지 선택적 매개변수가 있습니다. 예를 들어 2 로 설정하면 slice는 인덱스 2에서 새 배열 복사를 시작합니다. end가 포함할 마지막 항목을 나타낼 것으로 예상할 수 있지만 대신 제외할 첫 번째 항목입니다. 이 인수를 생략하면 slice 메서드는 다음 예제와 같이 단순히 ... javascriptbeginnerstypescriptwebdev 커밋 시 코드 형식을 자동화하는 방법 코딩 규칙을 유지하는 것은 팀 개발에 매우 중요합니다. 그러나 팀 규모가 커질수록 조심하는 것만으로는 충분하지 않습니다. 자동화는 다양한 코딩 스타일을 수정하여 이 문제를 해결합니다. 이 방법은 npm 스크립트를 사용하여 자동으로 코드를 확인하고 수정합니다. ESLint ESLint는 사용자 지정 구성 가능한 규칙을 기반으로 하는 코드 검사 도구이며 Husky는 커밋 타이밍에 코드 수정 명령... programmingwebdevjavascriptgit Syncfusion Vue 구성 요소는 버전 2.7과 호환됩니다. Vue.js는 2022년 7월 1일에 릴리스 하여 Vue 3의 가장 중요한 기능 중 일부를 백포트하여 Vue 2 사용자도 사용할 수 있도록 했습니다. 은 항상 최신 플랫폼 및 프레임워크 릴리스를 따라잡으며 이 이제 릴리스부터 Vue 2.7과 호환됨을 발표하게 되어 매우 기쁩니다. 참고: Syncfusion Vue 구성 요소는 최신 버전의 Vue 3도 지원합니다. 먼저 버전 3의 Vue 2.7... whatsnewwebdevdevelopmentvue 이전 기사 보기