꿈트(GGUMT)

/ 리액트 입문서 intro 대상 - 리액트 입문자 - 자바스크립트도 리액트도 어려운 프론트앤드 개발 입문자 index 1- 3장 : 리액트 전 알아야 할 자바스크립트 기초 4장- 끝 : 리액트기본, 리액트에서 CSS다루기, 재랜더링,글로벌State관리, 리액트 개발에 타입스크립트 사용하기 등 참고 예제 다운로드 https:github.com/moseskim/book-react-code / 1장. 모던자바스크립트 기초 1-1. 모던자바스크립트 개요 모던자바스크립트의 특징 - 리액트, 뷰 앵귤러 등 가상 DOM을 이용하는 라이브러리/ 프레임워크를 사용 (최근에는 스벨트 처럼 가상 DOM을 이용하지 않는 기술도 등장) - npm, yarn 등 패키지 관리자 사용 - 주로 ES6이후의 표기법 사용 - 웹팩 등..

0.바탕화면에 'python' 폴더 만들기 1. vscode 실행 2. 브라우저에서 python 다운로드(최신버전) https://www.python.org/downloads/ Download Python The official home of the Python Programming Language www.python.org 3. vscode에 python 폴더 열기 4. vs에서 python 폴더 안에 starbucks.py 파일 만들기 (python > starbucks.py) 5. vs에서 terminal열기 6. terminal 에서 selenium 설치하기 pip install selenium 7. terminal에서 설치프로그램 확인하기 pip list 8. terminal에 beautiful..

엑셀 문서 여러개 열었을 때 PC가 버벅거릴 때 해결 방법 1. 엑셀에서 '파일' 클릭 2. '옵션' 클릭 3. '고급' 클릭 4. 스크롤 중간까지 내리면 '하드웨어 그래픽 사용안함'에 체크 이렇게 설정하면 해결

웹로그( Web Log) 란? 자사의 사이트를 방문한 사용자들의 행동과 활동에 대한 기록을 담은 파일을 말한다. 이 파일은 각 사용자가 언제, 어디서, 어떤 페이지를 방문 했는지에 대한 정보를 포함함며, 웹사이트의 성과와 트래픽 흐름을 분석하는 데 사용된다. 페이지뷰(Page View): 사용자가 특정 페이지를 방문한 횟수를 나타냅니다. 세션(Session): 특정 사용자가 웹사이트에 접속하여 떠나기까지의 활동 기간을 나타냅니다. 방문수(Visitor): 웹사이트를 방문한 고유한 사용자의 수를 나타냅니다. 쿠키(Cookie): 사용자의 브라우저에 저장되는 작은 데이터 조각으로, 사용자를 식별하고 추적하는 데 사용됩니다. 반송수(Bounce Rate): 한 페이지만 방문한 후 웹사이트를 떠난 사용자의 비율..

보호되어 있는 글입니다.

웹 접근성을 고려한 HTML 접근성을 고려한 HTML 을 작성하는 방법을 배워 보자. HTML과 접근성 의도와 목적에 맞게 올바른 HTML을 구현하는 것은 왜 중요할까? 예를 들어, 비디오를 재생하는 버튼을 html로 작성해 보자. 1) div태그 로 작성 Play video​ 2) 웹 접근성을 고려하여 button태그로 작성 Play video HTML에는 요소마다 의미가 내장되어 있다. button태그는 키보드 접근성이 내장되어 있어 tap으로 탐색가능하다. 웹접근성을 고려한 HTML을 작성한다면 시간적으로도 효율적이고 간결한 코드를 작성 할 수 있다. 장점 1. 개발하기가 더 쉽다. 일부 내장된 기능이 제공되어 이해하기도 더 쉽다. 2. 모바일에서 더 좋다. 시맨틱HTML은 의미없는 코드보다 파일이..

리눅스 종료 명령어 회사에 쬐그만 서버가 두대 있는데 그 앞에만 서면 너무 작아진다. 끄는 것도 무섭다 🏴. 리눅스 서버 컴퓨터 시스템 종료하는 명령어 🏳. root 사용자 권한인 경우 -shutdown -poweroff shutdown -h shutdown이 완료된 후 시스템 종료 -h now 지금즉시 종료 -r 종료 후 재부팅 -r now 지금 즉시 재부팅 -c 진행 중인 shutdown 명령을 취소 -k 경고메시지만 출력하고, 실제로는 shutdown 을 하지 않음 -f 재부팅할 때 fsck 명령어를 건너띄고, 부팅을 빠르게 진행 -n init를 호출하지 않고, shutdown을 진행함 -t sec 지정시간에 시스템 재시동 now 유지보수 모드로 전환 🏳. 관리자권한이 필요한 경우 앞에 sudo 추..

ACCESSIBLITY 접근성이 무엇인지, 웹 개발자에게 어떤 영향을 미치는지 등 접근성에 대해 알아보자. 접근성 (Accessibility) 이란? 웹 개발에서 접근성( 종종 A11y로 축약 - “a”+“알파벳 11자 ”+”y”) 은 사람들의 능력이 제한적인 경우에도 최대한 많은 사람들이 웹 사이트를 사용할 수 있도록 하는 것을 의미한다. 일반적으로 우리는 장애가 있는 사람들에 관련된 것이라 생각하지만, 사이트에 접속할 수 있도록 만드는 것은 모바일이나 열악한 인터넷 환경에서 이용하는 사람들과 같은 경우에도 포함된다. 또한 접근성은 능력이나 상황에 관계없이 모든 사람을 동일하게 대우하고 동등한 기회를 제공하는 것으로 생각할 수도 있다. 장애인 화장실이나 휠체어 경사로가 없는 건물이 잘못된 것처럼(현대 ..

질문 잘 하는 방법 질문을 잘 하는 방법은 효과적인 의사소통과 정보 수집을 위해 중요합니다. 다음은 질문을 잘 하는 방법에 대한 몇 가지 팁입니다: 목적 명확히 하기: 질문을 하기 전에 목적을 명확히 정의하세요. 어떤 정보를 얻고자 하는지, 어떤 문제를 해결하려는지를 분명하게 이해하고 질문을 구성해야 합니다. 질문을 간결하고 명확하게 구성하기: 질문을 가능한 한 간결하고 명확하게 구성하세요. 불필요한 세부사항을 피하고, 직접적이고 명확한 문장으로 질문을 작성하는 것이 좋습니다. 개별 질문 사용하기: 여러 개의 질문을 한 번에 던지는 대신에 개별적인 질문을 사용하세요. 이렇게 하면 상대방이 더 쉽게 이해하고 답변할 수 있습니다. 개방형 질문 사용하기: 가능한 한 개방형 질문을 사용하여 대화를 촉진하고 상대..

네트리파이는 웹 기반의 머신 러닝 플랫폼으로, 텐서플로우를 기반으로 한 Google의 오픈 소스 프로젝트입니다. 이를 만든 이유는 다음과 같습니다. 이유: 사용의 편의성: 네트리파이는 웹 브라우저에서 접근할 수 있으며, 별도의 설치 과정이 필요하지 않습니다. 따라서 개발 환경 설정에 드는 시간과 노력을 줄일 수 있습니다. 시각화 기능: 네트리파이는 학습된 모델의 시각화를 제공하여, 복잡한 모델 구조와 학습 과정을 이해하기 쉽게 해줍니다. 이를 통해 개발자들은 모델의 동작을 시각적으로 확인하고 디버깅하는 데 도움을 받을 수 있습니다. 빠른 프로토타이핑: 네트리파이는 사용자가 빠르게 모델을 프로토타이핑하고 실험할 수 있는 환경을 제공합니다. 사용자들은 쉽게 다양한 모델 구조와 하이퍼파라미터를 조정하여 실험하..

파이어베이스(Firebase)는 개발자들이 앱 및 웹 애플리케이션을 빠르고 쉽게 개발, 배포, 확장할 수 있도록 도와주는 개발 플랫폼입니다. 파이어베이스는 백엔드 인프라를 제공하며, 사용자 인증, 데이터베이스, 스토리지, 클라우드 함수, 호스팅 등의 다양한 기능을 포함하고 있어 개발자가 서버 측 구성 및 관리 없이 애플리케이션을 구축할 수 있게 합니다. 파이어베이스의 사용법 프로젝트 설정: 파이어베이스 콘솔 (https://console.firebase.google.com/)에 접속하여 새로운 프로젝트를 생성하고 필요한 서비스를 활성화합니다. 인증 설정: 사용자 인증 기능을 사용하려면 파이어베이스 인증 서비스를 활성화하고, 원하는 인증 방법 (이메일/비밀번호, 소셜 로그인 등)을 선택하여 구성합니다. 데..

https://www.netlify.com/ Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com 네트리파이 (Netlify)는 정적 웹사이트를 배포하고 관리하는 데 사용되는 클라우드 플랫폼입니다. 정적 웹사이트는 서버 측에서 동적으로 처리되지 않고, HTML, CSS, JavaScript 등으로 구성된 정적 파일들로 이루어진 웹사이트를 말합니다...

프론드앤드 개발자 포트폴리오 만들기 vol.1 01. 비주얼스튜디오에 사이트 만들기 기본 세팅하기 - vite로 작업하기 위해 node.js가 설치 되어 있어야 한다. - scss를 쓸 것 이므로 터미널에 [ npm install -D sass ] 작성해 준다. 02. index 세팅 - meta데이터 세팅 슬라이드 영역 바로가기 소개 영역 바로가기 멤버 영역 바로가기 포트폴리오 영역 바로가기 유튜브 영역 바로가기 언스플래쉬 영역 바로가기 영화 영역 바로가기 리뷰 영역 바로가기 web site 소개 멤버 포트폴리오 유튜브 이미지 영화 - skip메뉴 작성하기 - header에 최근 큰 사이트들에서 보여지는 role태그도 넣어주기

[Vite] Veu에서 빠른 React 사용을 위해 만든 로컬 개발 서버 https://vitejs.dev/ Vite Next Generation Frontend Tooling vitejs.dev Vue에서 만든 node.js기반의 bundle Vite는 최신 JavaScript 프레임워크 및 라이브러리에서 사용되는 도구로, 개발자가 웹 애플리케이션을 개발하고 빌드하는 데 도움을 주는 빠르고 경량화된 빌드 도구입니다. Vite는 Vue.js 프레임워크를 위해 만들어졌지만 React, Preact, Svelte 등 다른 프레임워크와도 함께 사용할 수 있습니다. Vite의 주요 의도는 개발자가 개발 및 디버깅 과정에서 빠르고 효율적인 개발 환경을 제공하는 것입니다. 장점: 빠른 개발 환경: Vite는 빠른 ..

PHP 를 이용하여 게시판의 검색 페이지 만들기 board.php ✈. 게시판의 검색창 영역 : 검색 될 키워드와 검색 옵션 선택 정보를 input과 select 태그에 넣어줍니다. : name과 id를 달아줍니다 : 검색창이 빈칸이 되지 않도록 require를 넣습니다 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 boardSearch.php ✈. 게시판 검색 게시판에 총 게시글 갯수를 보여주는 코드입니다

01. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 🏴. 정답 . 129 🏁. 해설 이 코드는 1부터 10까지의 수를 3으로 나누었을 때 나머지가 0, 1, 2인 경우에 따라 각각 다른 계산을 수행하고 그 결과를 합산하는 코드입니다. ▶ 변수 i는 0으로 초기화되고, while문을 통해 i가 10보다 작을 때까지 반복합니다. ▶ 반복문 안에서는 i를 1씩 증가시키면서, i를 3으로 나눈 나머지에 따라서 다른 계산을 수행합니다. ▶ i를 3으로 나눈 나머지가 0인 경우, 현재의 sum에 i..

웹디자인기능사 실기 레이아웃 만들기 완성화면

자바스크립트를 이용하여 GAME EFFECT 뮤직플레이어 만들기 완성화면 script -음악에 대한 정보 저장하기 const allMusic = [ { name : "1. summer", artist : "Joe Hisaishi", img : "music_img01", audio : "1.mp3" },{ name : "2. spring", artist : "Joe Hisaishi", img : "music_img02", audio : "2.mp3" },{ name : "3. hello", artist : "patric", img : "music_img03", audio : "3.mp3" },{ name : "4. hello", artist : "patric", img : "music_img04", aud..

PHP 웹사이트 게시판 페이지 만들기 게시판 한 페이지에 20개씩 보이기 // $page = 1; if(isset($_GET['page'])){ $page = (int) $_GET['page'];//숫자로 인식해서 오류 없도록 선언해줌 } else { $page = 1; } $viewNum =20; $viewLimit = ($viewNum * $page) - $viewNum; //1페이지부터 페이지당 2-개씩 내림차순으로 보여줌(최근이 먼저나와야하니까) //1~20 DESC LIMIT 0, 20 -->page1 (viewNum * 1) - viewNum //21~40 DESC LIMIT 20, 20 -->page2 (viewNum * 2) - viewNum //41~60 DESC LIMIT 40, 20 ..

게임 이펙트 웹 페이지 만들기 완성화면 script ✈. 운영체제 정보 보여주기(하단) function printAgent(){ // 운영체제 정보 알아내기 let os = navigator.userAgent.toLowerCase(); let sw = screen.width; let sh = screen.height; let info = document.querySelector(".info"); if (os.indexOf("windows") >= 0) { info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다." } else if (os.indexOf("macintosh") >= 0) { info.innerHTML = "현재 맥을 사용하..

✈. 01 다음의 결괏값을 작성하시오. { let data = [10, 6, 7, 9, 3]; let temp; for(let i=0; i d)) ▷ 1이 b와 c가 같지 않거나 c와 d가 같은지 확인합니다. (1 == b ^ c != d) ▷ 위의 두 가지 조건문이 모두 true이면 a를 b+c로 할당합니다. 그렇지 않으면 b를 출력합니다. ▷ 따라서 위의 조건문이 참이면 a는 b+c인 7이 됩니다. 따라서 이 코드의 출력 결과는 7이 됩니다. ✈. 09 다음의 결괏값을 작성하시오. { function func(a){ if( a < 1 ) return 1 return a * func(a - 1); } console.log(func(5)) } 이 코드는 팩토리얼 계산 함수를 구현하는 코드입니다. 함수 '..

자바스크립트에서 문자열 객체에 대해 알아보기 문자열객체란? 자바스크립트에서 문자열(string)객체는 문자열 데이터를 나타내기 위한 객체 입니다. 문자열 데이터를 문자열 객체로 생성하면 , 문자열 객체의 다양한 메서드와 속성을 사용하여 문자열 데이터를 조작하고 분석할 수 있습니다. 문자열객체는 String()생성자를 사용하여 생성할 수 있습니다. 예를 들어, var str=new String("Hello, World!"); 와 같이 String()생성자를 사용하여 문자열 객체를 생성할 수 있습니다. 그러나 일반적으로 문자열데이터를 리터럴(literal)로 작성하여 문자열 객체를 자동으로 생성합니다. 예를 들어 , "Hello, World"와 같은 문자열 데이터를 리터럴로 표현하면 자동으로 문자열 객체가 ..

01. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 02. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 03. { function func(begin, diff, n){ cnt = 1; ret = begin; while(true){ cnt += 1; r..

scrollr.js 라이브러리를 이용하여 패럴랙스 페이지 만들기 -scrollr.js 라이브러리를 이용하여 스크롤값에 따라 화면이 다양하게 보여지는 패럴랙스 페이지 만들기 scrollr.js "scrollr.js"는 스크롤 이벤트를 사용하여 패럴랙스 효과를 만드는 자바스크립트 라이브러리입니다. 스크롤 이벤트에 따라 요소의 위치, 크기, 회전 등의 CSS 속성을 변경하여 패럴랙스 효과를 구현합니다. 또한, 요소의 위치나 속성을 스크롤 위치에 따라 동적으로 계산하고 조작할 수 있어서 매우 다양한 효과를 구현할 수 있습니다. scrollr.js는 jQuery를 기반으로 작성되었으며, 사용하기 쉬운 API와 다양한 설정 옵션을 제공 🏳‍🌈. 패럴랙스 란? 패럴랙스 효과(Parallax Effect)는 웹사이트에..

PHP를 이용하여 웹페이지 만들기 01. PHP란 02. 회원가입 페이지, 로그인 페이지, 로그아웃 페이지 🚨. PHP 뭔가요? PHP는 서버 측 웹 개발 언어로, 동적 웹 페이지를 생성하는 데 사용됩니다. 유사 프로그램으로는 Java, Python, Ruby 등이 있습니다. 각각의 언어는 고유한 특징을 가지고 있으며, 비교적 장단점이 있습니다. PHP는 문법이 쉽고 배우기 쉬우며, 다른 언어와 호환성이 높아 웹 개발에 유용합니다. 또한 PHP는 웹 개발을 위한 다양한 라이브러리와 프레임워크가 많이 존재하며, 대부분 무료로 사용할 수 있습니다. Java는 PHP와 비슷한 웹 개발 언어입니다. Java는 PHP보다 엄격한 문법 규칙과 더 많은 기능을 제공합니다. 그러나 Java의 배우기 어렵고 복잡한 구조..

패럴랙스를 이용하여 이미지 스크롤 페이지 만들기 이미지와 함께 명언이 나오고, 보고있는 화면의 위치도 알려주는 페이지를 만들어 보았습니다. 완성화면 .✈ . HTML Javascript parallax Effect01 패럴랙스 이펙트 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 시간은 금이다 02 section2 배우고 때때로 익히면 또한 기쁘지 않겠는가 03 section3 아는 사람은 좋아하는 사람만 못하고, 좋아하는 사람은 즐기는 사람만 못하다. 04 section4 지혜로운 사람은 물을 좋아하고 어진사람은 산을 좋아한다. 05 section5 지혜로운 사람은 미혹되지 않고, 어진사람은 근심하지 않고 용감한 사람은 두려워하지 않는다 06..

자바스크립트를 이용하여 배경이 바뀌는 명언슬라이드를 만들어 보았습니다. 완성화면 .✈ . HTML .✈ . CSS .✈ . JAVASCRIPT const Result = document.querySelector("#result"); const Quote = result.querySelector(".quote"); const Author = result.querySelector(".author"); const dataresult = () => { fetch('json/dummy01.json') .then(res => res.json()) .then(items => { const randomIndex = Math.floor(Math.random() * items.length); Quote.textConten..

자바스크립트를 이용하여 로또 번호 추출하기 자바스크립트를 이용하여 1부터 45까지의 숫자를 무작위로 추출해주는 스크립트를 만들어 보았습니다. 완성화면 ✈. HTML LOTTO LUCKY NUMBERS COMING CLICK ✈. CSS *{ margin: 0; padding: 0; } #wrap { width: 100%; height: 100vh; background-color: #d6d7d3; padding-top: 100px; } .container { margin: 0 auto; border : dotted 10px #c4a43f; width: 1000px; height: 280px; text-align: center; } h1 { font-size: 50px; font-weight: bold; c..

명언 나오는 화면 만들기 자바스크립트를 이용하여 json파일에 저장된 명언 10개가 무작위로 추출되어 보여지는 화면을 만들어 보았습니다. 완성화면 .✈ . HTML .✈ . CSS @font-face { font-family: 'Cafe24Shiningstar'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; color: #34190e; background-color: #9fb6be; } .wrap { width:100%; m..

자바스크립트를 이용해 슬라이더를 만들어 보기 완성화면