본문 바로가기

전체 글

 (133)
(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!";
(DOM) querySelector로 좀 더 복잡한 요소를 선택해 보자. CSS 셀렉터(=선택자)에서 '기본 속성 선택자' 를 활용하여 좀 더 복잡한 요소를 선택해 보자. HTML에서 클래스명이 tweet 이라는 요소를 조회하는 DOM메소드는 querySelector('.tweet') 이다. 그렇다면 아래의 DOM메소드는 어느 요소를 조회하는 메소드일까? let oneEle = document.querySelector("div.user-paner.main input[name=login]"); 위의 예제는 MDN querySelector에 나온 것이다. 예제의 결과는 클래스가 "user-panel main"인 안에 이름이 "login"인 중 첫번째 요소를 조회하는 것이다. input[name=login]은 CSS 선택자의 기본 속성 선택자이며, div.user-paner.mai..

티스토리툴바