• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Front-end116

728x90
[React]npm과 yarn이란? react는 페이스북(Facebook, 현재 메타 Platforms)의 소프트웨어 엔지니어였던 **조던 워크(Jordan Walke)**가 개발했습니다. 그는 2011년에 React의 초기 버전을 만들었으며, 이는 Facebook에서 내부적으로 사용되던 XHP라는 PHP 기반 라이브러리에서 영감을 받았습니다.React는 처음에는 Facebook의 뉴스피드와 Instagram에 사용되었으며, 2013년에 오픈 소스로 공개되었습니다. 공개된 이후로 React는 웹 개발 커뮤니티에서 큰 인기를 얻었고, 현재는 전 세계적으로 가장 널리 사용되는 프론트엔드 라이브러리 중 하나로 자리 잡았습니다. 리액트를 사용하려면 npm or yarn을 통해 라이브러리를 내려받아야합니다. npm(Node Package Manag..
[Javascript]HTMLCollection과 querySelector의 차이 HTMLCollection과 querySelector (또는 querySelectorAll)의 차이는 주로 반환 객체의 형태, 동작 방식, 사용 사례에 있습니다. 이를 아래에서 자세히 비교합니다.1. 반환 객체의 차이메서드getElementsByClassName, getElementsByTagName, 등querySelector, querySelectorAll반환 객체HTMLCollectionElement 또는 NodeList실시간 업데이트문서가 변경되면 자동 업데이트문서가 변경되어도 업데이트되지 않음다중 요소 선택항상 여러 요소를 반환 (HTMLCollection)querySelector: 첫 번째 요소만 반환 querySelectorAll: NodeList로 모든 요소 반환예시// HTML 구조Ite..
[Javascript]HTMLCollection을 반환하는 주요 DOM 메서드 HTMLCollection을 반환하는 주요 DOM 메서드document.getElementsByTagName(tagName)특정 태그 이름을 가진 모든 요소를 선택합니다.예: document.getElementsByTagName('div')→ 태그를 모두 포함하는 HTMLCollection 반환.document.getElementsByClassName(className)특정 클래스를 가진 모든 요소를 선택합니다.예: document.getElementsByClassName('item')→ 클래스가 item인 모든 요소를 포함하는 HTMLCollection 반환.document.forms현재 문서의 모든 요소를 선택합니다.예: document.forms→ 문서의 모든 태그를 포함하는 HTMLColle..
[Javascript]DOM Script 이벤트와 선택자 이벤트HTML DOM에서 지원하는 스크립트 이벤트 종류는 웹 페이지에서 다양한 사용자 상호작용과 브라우저 동작을 처리하기 위해 사용됩니다. 주요 이벤트는 다음과 같은 그룹으로 나눌 수 있습니다.1. 마우스 이벤트onclick: 요소를 클릭했을 때 발생ondblclick: 요소를 더블 클릭했을 때 발생onmousedown: 마우스 버튼을 눌렀을 때 발생onmouseup: 마우스 버튼을 뗐을 때 발생onmousemove: 마우스가 요소 위에서 움직일 때 발생onmouseover: 마우스가 요소 위로 들어갈 때 발생onmouseout: 마우스가 요소를 벗어날 때 발생onmouseenter: 마우스가 요소 위로 들어갈 때 (버블링 없음)onmouseleave: 마우스가 요소를 벗어날 때 (버블링 없음)Click..
[Javascript]많이 사용되고 유용한 JavaScript 라이브러리와 프레임워크 웹사이트에서 많이 사용되고 유용한 JavaScript 라이브러리들은 다양한 기능을 제공하며, 웹 개발을 더욱 효율적이고 편리하게 만들어 줍니다. 여기 몇 가지 인기 있고 유용한 JavaScript 라이브러리와 프레임워크를 소개합니다1. React용도: UI 구축설명: React는 Facebook에서 개발한 사용자 인터페이스(UI) 라이브러리입니다. 컴포넌트 기반 아키텍처를 사용하여 효율적으로 복잡한 UI를 관리할 수 있습니다. React는 Virtual DOM을 사용하여 성능 최적화와 빠른 렌더링을 제공합니다.추천 이유: 현대 웹 애플리케이션에서 가장 인기 있는 라이브러리로, 대규모 애플리케이션에 적합하고 많은 커뮤니티와 리소스가 존재합니다.링크: https://reactjs.org/ ReactReact..
[CSS]css 최신문법에서 추가되는 기능과 설명, 호환성 여부 CSS 기능 중 주목할 만한 몇 가지와 그 설명들입니다.브라우저에서 지원가능한 시기에는 구지 SASS를 사용할 필요가 없는 날이 오겠네요. 1. CSS Nesting설명:Sass와 같은 CSS 전처리기에서 제공되던 네스팅(Nesting) 기능이 이제 CSS 표준으로 도입되고 있습니다. 사용법:.container { color: black; .child { color: red; }} 장점: 코드를 더 간결하게 작성할 수 있고 구조적으로 이해하기 쉬움. 지원 여부:Chrome: 부분 지원 (플래그 설정 필요)Firefox: 미지원 (개발 중)Safari: 미지원 (예정)Edge: Chrome 기반으로 부분 지원호환성 팁: Sass 또는 PostCSS 같은 전처리기를 활용해 네스팅을 사용 가능. 2..
[Javascript]반복문의 종류와 사용 용도 JavaScript에서 for...of, for...in, forEach, map, filter, reduce는 모두 반복문이지만, 각기 다른 용도와 특성을 가지고 있습니다. 특정 상황에 맞는 반복문을 선택하는 것이 중요합니다. 아래에 각 반복문의 사용 용도와 차이점을 설명하겠습니다.1. for...of용도: 배열, 문자열, Map, Set 등의 iterable 객체의 값을 순회할 때 사용.언제 사용해야 할까?배열이나 iterable 객체의 요소 값을 순회할 때 가장 유연하게 사용 가능.요소의 순서대로 값을 읽어오는 작업에 적합.중간에 break 또는 continue로 반복을 중단하거나 건너뛰고 싶을 때 사용.const arr = [1, 2, 3];for (const value of arr) { con..
[CSS]버튼이나 링크에 애니메이션 제공해주는 라이브러리 버튼이나 링크에 마우스를 올렸을 때 적용할 수 있는 여러 애니메이션 효과를 제공하는 라이브러리입니다. 다양한 버튼 애니메이션을 구현해주며, 버튼 제작시 참고용으로도 괜찮은거 같습니다.https://ianlunn.github.io/Hover/ Hover.css - A collection of CSS3 powered hover effects ianlunn.github.io설치방법사용하려면 먼저 라이브러리를 포함시켜야 합니다. 두 가지 방법으로 사용할 수 있습니다:(1) CDN으로 포함하기HTML 파일의  (2) 직접 다운로드하여 사용하기https://github.com/IanLunn/Hover 에서 파일을 다운로드합니다.프로젝트에 hover.css 파일을 포함시킵니다.HTML 파일에 해당 CSS 파일을 링크..
[Javascript]비동기 처리 Promise, async/await 살펴보기 javascript에서 비동기 처리를 다루는 방법으로는 Promise와 async/await이 있습니다. 이 두 가지 방법은 비동기 작업(예: API 호출, 파일 읽기 등)을 처리하는 데 매우 유용합니다.1. Promise 예제Promise는 비동기 작업이 성공했는지 실패했는지에 따라 결과를 처리할 수 있는 객체입니다.// 비동기 작업을 시뮬레이션하는 Promise 생성const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { const success = true; // 작업이 성공했다고 가정 if (success) { re..
[Javascript]고차함수, 익명함수, 콜백함수 설명 및 예제 1. 고차 함수 (Higher-Order Function)고차 함수는 하나 이상의 함수를 인수로 받거나, 함수를 반환하는 함수입니다.// 고차 함수: 함수를 인수로 받음function higherOrderFunction(callback) { console.log("고차 함수가 호출되었습니다."); callback(); // 전달받은 함수를 호출}// 인수로 전달될 함수 (익명 함수 형태로 작성)higherOrderFunction(function() { console.log("이 함수는 콜백 함수로 전달되었습니다.");}); 고차 함수는 함수를 인수로 받아 호출합니다.2. 익명 함수 (Anonymous Function)익명 함수는 이름이 없는 함수로, 변수에 할당하거나 다른 함수에 전달될..
[React]리액트 기본 폴더 구조(SCSS포함) React 애플리케이션의 폴더 구조는 프로젝트의 복잡도와 팀의 선호도에 따라 다를 수 있습니다. 1.기본 폴더 구조my-react-app/│├── public/ # 정적 파일 (HTML, 이미지, 아이콘 등)│ ├── index.html # 기본 HTML 파일│ └── ...│├── src/ # 소스 코드 폴더│ ├── assets/ # 이미지, 폰트, CSS 파일 등│ ├── components/ # 재사용 가능한 컴포넌트│ ├── hooks/ # 커스텀 훅│ ├── pages/ # 페이지 컴포넌트│ ├── services/ # API 요청, ..
[React]리액트 설치 및 프로젝트 진행 과정 개발 환경 설정node.js 가 설치되어있는지 확인합니다.node -vnpm -v 설치가 안되어있다면 node.js 공식사이트에서 설치합니다.https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. React 프로젝트 생성Create React App 사용Create React App은 React 프로젝트를 쉽게 시작할 수 있도록 도와주는 도구입니다.터미널을 열고, 프로젝트를 생성할 디렉토리로 이동합니다.다음 명령어를 입력하..
[웹접근성]aria-lable 속성과 title 속성의 차이점과 쓰임새 웹접근성 고려 시 aria-label와 title를 언제 어떻게 쓰는지 비슷해서 헷갈릴 수 있어 차이점과 쓰임새를 알아보도록 하겠습니다.  aria-label과 title은 추가정보를 제공하지만 사용 방법과 목적성이 다릅니다. title 속성title은 추가 정보를 제공하는 툴팁(도구 설명)이라고 보시면 됩니다.예를 들어 '바로가기'란 버튼이 있을경우 클릭하면 어디로 가는 버튼인지에 대한 추가 설명을 제공할 때 사용합니다.도움말 개념입니다. 홈으로 위처럼 버튼 텍스트에 대한 추가 설명을 제공하기 위해 사용되는것이 title 속성입니다.button 태그에만 해당되는것은 아니고, 이해하기 쉽게 button 태그를 예시로 했습니다.aria-label 속성aria-label은 스크린 리더와 같은 보조 기술을 사..
[웹접근성]웹접근성을 고려한 탭메뉴 만들기 웹 접근성을 고려한 탭 메뉴는 키보드 사용자, 스크린 리더 사용자 등 다양한 사용자들이 접근할 수 있도록 구성해야 합니다.탭 메뉴 구성 요소탭 컨테이너: 탭 메뉴를 감싸는 컨테이너.탭 리스트: 각 탭 버튼을 포함하는 리스트.탭 버튼: 클릭 또는 키보드로 선택할 수 있는 버튼.탭 패널: 각 탭 버튼이 활성화될 때 보여줄 콘텐츠.접근성을 고려한 HTML 구조다음은 웹 접근성을 고려한 탭 메뉴의 기본 HTML 구조입니다. 탭 1 탭 2 탭 3 탭 1의 내용 탭 2의 내용 탭 3의 내용HTML 구조role="tablist": 탭 버튼들을 감싸는 컨테이너로 역할을 지정합니다.role="tab": 각각의 탭 버튼에 역할을 지정합니다.role="tabpanel": 각각의 탭 패널에 역..
[Git]새로운 브랜치를 기존 브랜치에 merge(병합)하기 앞서 새로운 브랜치를 생성하고 기존 브랜치를 새로운 브랜치에 복제하는 방법을 설명했는데요. https://webmini.tistory.com/482522 [Git]새로운 브랜치(branch)에 다른 브랜치 복제하기기존에 만들어진 브랜치를 그대로 가져와서 새로운 브랜치에 복제하는 방법입니다.브랜치 생성, 복제, 푸시하기먼저 복제당할 브랜치 즉, 기존 브랜치에 체크아웃되어있어야 합니다.이해하기webmini.tistory.com 그 후에 새로운 브랜치에서 작업 후 기존 브랜치에 merge(병합)하는 방법입니다.기존 브랜치에 체크아웃먼저, 기존 브랜치에 체크아웃을 합니다.기존 브랜치 = branchA새로운 브랜치 = branchB위처럼 가정할때, 기존 브랜치(복제당한 브랜치) branchA로 체크아웃합니다.gi..
[Git]새로운 브랜치(branch)에 다른 브랜치 복제하기 기존에 만들어진 브랜치를 그대로 가져와서 새로운 브랜치에 복제하는 방법입니다.브랜치 생성, 복제, 푸시하기먼저 복제당할 브랜치 즉, 기존 브랜치에 체크아웃되어있어야 합니다.이해하기 쉽게 기존 브랜치명을 "branchA"라 하고 새로운 브랜치명을 "branchB"라 하겠습니다. 먼저, 기존 브랜치에 체크아웃합니다. (복제당할 대상)git checkout branchA 그 후에 새로운 브랜치를 생성해 줍니다. (branchA 브랜치의 복제를 받을 대상)git checkout -b branchB 여기서 git checkout -b 명령어에서 -b는 "새 브랜치를 생성하고 그 브랜치로 체크아웃"하라는 의미입니다. 이 명령어를 사용하면 새로운 브랜치를 만들고 동시에 그 브랜치로 이동할 수 있습니다. 마지막으로 로..
[SEO]SEO 검색엔진 최적화 기본문서 SEO(검색 엔진 최적화, Search Engine Optimization)는 웹사이트나 웹페이지를 검색 엔진에서 상위에 노출되도록 최적화하는 과정입니다. SEO의 목적은 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지하여 더 많은 유기적(organic) 트래픽을 얻는 것입니다. SEO는 크게 온페이지 SEO(On-page SEO)와 오프페이지 SEO(Off-page SEO)로 나눌 수 있습니다.주요 SEO 최적화 요소1. 온페이지 SEO(On-page SEO)온페이지 SEO는 웹사이트 내부의 요소를 최적화하는 작업입니다. 주요 요소로는 다음과 같습니다:키워드 리서치(Keywords Research): 사용자들이 검색할 때 사용하는 관련 키워드를 찾고 이를 콘텐츠에 포함시키는 과정입니다.메타 ..
[CSS]게임하면서 CSS(flex,grid) 공부해보자 Flexbox Froggyhttps://flexboxfroggy.com/#ko개구리가 수련잎에 올라가는거 도와주는 게임 Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.comGrid Gardenhttps://cssgridgarden.com/#ko당근밭 가꾸는 게임 Grid GardenA game for learning CSS grid layoutcssgridgarden.comFlexboxDefensehttp://www.flexboxdefense.com/적들을 물리치는 디펜스게임 Flexbox DefenseYour job is to stop the incoming enemies from getting past your defenses. Unlike ..
[HTML]PDF 파일 등을 열리지 않고 다운로드 받게 하는 방법 PDF 파일을 브라우저에서 열지 않고 직접 다운로드 하게 하는 방법입니다.  태그의 href 속성과 download 속성을 사용하여 PDF 파일을 클릭했을 때 다운로드할 수 있도록 설정한 것입니다. 기본 형식은 맞습니다. 다만, 태그를 사용할 때 속성 값 주위에 공백이 있으면 안 됩니다. 올바른 형식은 다음과 같습니다.다운로드 download 속성에 값을 주어 다운로드될 파일명을 지정할 수도 있습니다.다운로드
[웹접근성]한국웹접근성인증평가원이 인증한 사이트 목록 지능정보화기본법 제 47조(장애인.고령자 등의 정보통신접근성 품질인증 등) 및 동법 시행령 제3조등에 의거하여 과학기술정보통신부로부터 공인된 인증기관인 (사)한국장애인단체총연합회 한국웹접근성인증평가원이 인증한 사이트 목록을 보시려면 아래 링크에서 확인가능합니다. http://www.wa.or.kr/board/list.asp?BoardID=0006 WA : 한국웹접근성인증평가원 (목록)" data-og-description="" data-og-host="www.wa.or.kr" data-og-source-url="http://www.wa.or.kr/board/list.asp?BoardID=0006" data-og-url="http://www.wa.or.kr/board/list.asp?BoardID=0006..
반응형