All
[자바스크립트] textContent와 innerText 차이
Node.textContent와 HTMLElement.innerText의 이름이 유사하지만, 중요한 차이가 있다. textContent는 와 요소를 포함한 모든 요소의 콘텐츠를 가져온다. innerText는 "사람이 읽을 수 있는" 요소만 처리한다. textContent는 노드의 모든 요소를 반환한다. innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다. iinnerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다.) IE 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노..
[자바스크립트] 전개연산자
전개 연산자는 ... 으로 표시되며, 배열, 객체, 문자열 등을 개별 요소로 분해한다. 이를 통해 배열이나 객체를 풀어서 각각의 요소로 사용할 수 있다. 다음은 전개 연산자를 사용하는 몇 가지 예시이다. 배열 분해 const arr = [1, 2, 3]; console.log(...arr); // 1 2 3 위 코드에서 전개 연산자를 사용하여 arr 배열의 각 요소를 개별적으로 출력한다. const arr1 = [1, 2]; const arr2 = [3, 4]; const combinedArr = [...arr1, ...arr2]; console.log(combinedArr); // [1, 2, 3, 4] 위 코드에서 전개 연산자를 사용하여 두 배열을 합쳐서 새로운 배열을 생성한다. 객체 분해 const..
[자바스크립트] DOMContentLoaded, load 차이
DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생한다. 스타일시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다. 즉, 스타일시트, 이미지, 하위 프레임이 로드를 완료할 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생한다. - 기본 사용법 window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); }); - 지연 - 로딩이 이미 완료되었는지 확인 function doSomething() { console.info("DOM loaded"); } if (document.readyState === "loadi..
[CSS] aspect ratio
❗ ios 구버전에서는 작동하지 않는다. aspect-ratio와 padding-bottom: % 를 같이 사용하면 좋을 듯 하다. aspect-ratio : 자동 크기 계산 및 기타 레이아웃 기능에 사용되는 박스의 기본 가로 세로 비율을 설정해준다. 👉 리스트 썸네일이 필요한 페이지에서 사용하기 좋은 css이다. e.g. 자주 사용하는 리스트! See the Pen Aspect Ratio by goldknow0928 (@goldknow0928) on CodePen. Can I Use 👉 IE 제외 사용 가능! 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio aspect-ratio - CSS: Cascading Style Sheets..
[이슈노트] iOS 이슈 모음 #7 (구버전에서 swiper 터치 슬라이드 이슈)
ios 사파리에서 swiper 터치 슬라이드가 작동하지 않음 해결 👉 swiper 다운그레이드 기존: 9.1.0 의 최신 버전 사용 변경: 5.4.3 버전 사용
gulp + nunjucks
gulp + nunjucks를 쓰게 된 계기 구축 프로젝트를 진행하게 되었다. html 산출물이 필요하다. 공통적으로 쓰이는 코드들이 많다. 이것들을 컴포넌트화 해서 어느 페이지에서든 재사용하면 좋지 않을까? pug가 좋다고? > 너무 생소하다. nunjucks 라는게 있네? > 인클루드/컴포넌트/자바스크립트 제어 익숙하다 > 선택 html 산출물이 필요하기 때문에 이를 빌드할 툴이 필요하다. 웹팩을 많이 쓴다고? > html 산출물만을 위해 쓰기엔 너무 무거운데? gulp는 어떨까? > 쉽고 가볍다 > 선택 gulp 셋팅 js, css 파일 minify scss 컴파일 css autoprefixer 라이브 서버 이미지 경량화 babel 빌드된 html 파일 beautify 라이브러리 설치(swiper,..
[안드로이드] 네이티브, 하이브리드앱 구별하는 법
비행기모드 비행기 모드를 켜고 어플을 실행해보면 대충 감이 온다. 인터넷이 안되면 웹이면 주소 호출을 못했다는 오류가 뜰 것이다. 개발자옵션 - 레이아웃 범위 표시 활성화 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 영역 터치 여러번 하면 설정 목록에 개발자 옵션이 켜져있다. 개발자 옵션 > (그림) > 레이아웃 범위 표시 활성화 네이티브면 하단처럼 레이아웃이 그려져 보인다. 웹뷰면 하단처럼 레이아웃이 있어야할 영역에 아무런 표시가 안보인다. 백프로 네이티브 앱이 있을까? 궁금했다. 그래서 확인해보았다. 내 핸드폰에 설치되어 있는 앱중 90%가 하이브리드앱으로 서비스를 하고 있었다. 어떤 페이지에서 네이티브를 하고, 웹뷰를 쓰는지 구별해보려 했으나 앱마다 달라서 아마 그 기준은 앱 자체 정책에..
[자바스크립트] Optional Chaining 연산자(?.)
Optional Chaining 연산자(?.)는 JavaScript에서 사용되는 연산자로, 객체의 프로퍼티나 메서드를 사용할 때 객체가 undefined 또는 null인 경우 에러를 방지하기 위해 사용된다. 즉, 객체에 프로퍼티나 메서드가 존재하면 그 프로퍼티나 메서드를 사용하고, 존재하지 않는다면 undefined를 반환한다. 예를 들어, let person = {name: "John", age: 25}; // undefined console.log(person.address?.street); // TypeError: Cannot read properties of undefined (reading 'street') console.log(person.address.street); `person` 객체에 ..
[scss] BEM 방식으로 깊은 중첩 하기
🙄BEM 규칙을 따르고 있다는 가정 아래와 같이 component 와 component--reversed 가 같은 위치에 있고 자식 요소의 클래스가 같다. 🤗부모의 클래스에 따라서 자식요소의 css를 다르게 주고 싶다면? reversed에서 component를 &을 이용해 가져가고 자식 요소에도 component를 같이 가져가고 싶을 때가 있다. 하지만 그렇게 &만을 이용하게 되면 아래의 코드처럼 상위 이름을 그대로 가져가기 때문에 원하던 결과를 얻지 못한다. /* scss */ .component { /* blah blah */ &--reversed { /* blah blah */ &__child-element { /* blah blah */ } } } /* css */ .component {/* bl..
[리액트] Redux Toolkit 사용해서 Counter 만들기
패키지 설치 # Yarn # redux 관련 yarn add react-redux @reduxjs/toolkit redux-devtools-extension # 추가 패키지 yarn add react-router-dom sass styled-components 패키지 이름 설명 react-redux 리액트에서 redux를 사용할 수 있도록 해주는 컨테이너. redux에 의존한다. @reduxjs/toolkit 리액트에서 리덕스를 좀 더 간결하게 사용할 수 있도록 하는 최신 패키지 redux-devtools-extension 리덕스의 상태를 크롬브라우저 개발자도구에 설치된 확장 기능과 연동할 수 있게 해주는 미들웨어 react-router-dom SPA앱을 만들 때 사용. URL에 따라 실행할 Javasc..