본문 바로가기

전체 글

 (134)
(CSS) Skeleton UI 제작 도입 Skeleton UI로 Loading 컴포넌트를 만들어 본다. 3가지의 주요 image를 핸들링하는 요소와 2가지의 animation 요소로 구현한다. image 핸들링 요소 background-image background-position background-size animation 핸들링 요소 background-repeat animation 제작 프로세스 1. linear-gradient 로 그라데이션 이미지 구현 background-image는 배경의 이미지를 설정한다. color와는 다른 의미이다. Skeleton UI에서 hightlight 되는 이미지는 linear-gradient로 구현된다. CSS 그레이디언트 보러가기 rgba(255, 255, 255, 0)은 '흰색' 이다. 이 ..
(JavaScript) DOM 조작방법 DOM과 JavaScript의 차이에 대해 이해할 수 있다. DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API. JS는 다른 컨텍스트에서도 사용할 수 있다. DOM은 특정 프로그래밍 언어와 독립적으로 설계되어 문서의 구조적 표현을 일관된 단일 API에서 사용할 수 있습니다. createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. HTML5 template tag 사용법을 이해할 수 있다. : The Content Template element - HTML: HyperText Markup Language | MDN The HTML element is a mechanism for holding HTML that is not..
(JavaScript) 번들링과 빌드 시스템 bundler 웹서비스 규모가 커지면서 수백줄의 코드, 수십개의 JS파일을 읽어야 하면서 발생하는 문제점 전역 범위를 파일의 중복 선언 느린 로딩 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등) 번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미합니다. Webpack 프론트엔드 프레임워크에서 가정 대중적인 모듈 번들러. 모듈: 웹 애플리케이션을 구성하는 특정 기능의 자원 JS 파일 뿐만 아니라 HTML, CSS, image,Font 등의 수십개의 파일을 하나의 JS파일로 압축, 축소 장점: 서버와 여러번 통신하지 않아도 됨. 로딩 속도 높아짐 transpile 최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스..
(React) useRef : 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 사용 useRef 유스 케이스 1. 변수 관리 : 렌더링과는 무관하게 변수를 관리해야 하는 경우 const initailValue = useRef(0) //useRef는 current 객체를 가진다. console.log(initail.current) useRef는 객체이고 current라는 키에 useRef의 값을 담고 있다. let, const 키워드로 선언된 값은 컴포넌트가 렌더링되면 초기값으로 변하게 된다. 컴포넌트의 생명주기와는 무관하게 관리되어야 할 값들이 let, const에 담기게 된다면 렌더링이 발생하는 순간 그 값들은 초기값으로 변하게 되어 누적 관리된 값들이 사라지게 된다. 이런 문제를 방지하기 위해 useRef를 사용하면 렌더링과는 무관하게 변수를 관리할 수 있다. 2. DOM 접근 : ..
(에러핸들링) vue 부모 - 자식 컴포넌트간 props 전달과 리렌더링 방법 1. 에러 내용 Tab 의 idex를 props로 App.vue에 전달하여 다시 하위 컴포넌트로 전달해 준 후 index 값에 의존하는 컴포넌트를 리렌더링해야 하는 상황 2. 장애 요소 Vue 라이브러리에서 리렌더링 하는 조건이 React에 비해 까다로운 점 리렌더링하는 다양한 메소드(created(), mounted(), watch 등)와 선언된 변수의 값의 변화에 따른 리렌더링 조건 검토 어려움 index값에 의존하는 컴포넌트별로 최적의 방법 모색이 어려움 3. 미완의 핸들링 App.vue의 자식 컴포넌트인 TestTab 컴포넌트를 만들어 Tab index의 변화에 따른 값의 변화가 가능한지 여부만 구현해 보았음 App.vue /* TestTab 컴포넌트에 ref = "child_component" ..
(CSS) input[type="date"] placeholder 적용 처리 "도움이 되셨다면 공감과 댓글로 지지해주세요!!" 시작일과 종료일에 캘린더 기능을 구현하기 위해 JS의 input type='date'를 이용하였다. input type='date'와 전체 페이지가 조화롭게 보이게 하기 위해 최대한 유사한 색감을 사용했다. placeholder와 CSS 적용하였다. 처음 날짜 선택 전에 '날짜선택' placeholder를 주었다. 이를 위해서 몇가지 설정이 필요하다. HTML CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } ..
(에러핸들링) 하위 디렉토리에 소속된 local repository에 git remote설정할 경우 상위 디렉토리에 git remote 설정이 같이 되는 경우의 처리 ● 문제 상황 github page 배포 테스트를 위해 local repository를 생성하였다. local repository는 상위 디렉토리에 소속되어 있다. local repository에 git remote 설정을 해주면 그 local repo가 소속된 디렉토리의 상위 디렉토리에도 동일한 git remote가 설정되는 문제가 발생하였다. 상위 디렉토리에 git remote remove 명령을 주어서 git remote 설정을 없앤 후에 하위 디렉토리를 원격 저장소와 연결하게 되면 상위 디렉토리까지 git remote 가 설정되는 현상이 반복되고 있었다. ● 해결 방법 git clean, git remote remove, git init, git rm --cached 등 다양한 명령어를 통해서 위..
(DOM) querySelector의 부모는 꼭 document 객체여야만 하는가? document.querySelector() element.querySelecotor() 꼭 document만 들어갈 필요가 없다. document 하위의 어떤 객체이든 간에 자식 요소를 가지고 있다면 querySelector의 부모 요소가 될 수 있다. (링크) var x = document.getElementById("myDIV"); x.querySelector(".example").innerHTML = "Hello World!";

티스토리툴바