Web

[자바스크립트] 전개연산자

전개 연산자는 ... 으로 표시되며, 배열, 객체, 문자열 등을 개별 요소로 분해한다. 이를 통해 배열이나 객체를 풀어서 각각의 요소로 사용할 수 있다. 다음은 전개 연산자를 사용하는 몇 가지 예시이다. 배열 분해 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..

gulp + nunjucks

gulp + nunjucks를 쓰게 된 계기 구축 프로젝트를 진행하게 되었다. html 산출물이 필요하다. 공통적으로 쓰이는 코드들이 많다. 이것들을 컴포넌트화 해서 어느 페이지에서든 재사용하면 좋지 않을까? pug가 좋다고? > 너무 생소하다. nunjucks 라는게 있네? > 인클루드/컴포넌트/자바스크립트 제어 익숙하다 > 선택 html 산출물이 필요하기 때문에 이를 빌드할 툴이 필요하다. 웹팩을 많이 쓴다고? > html 산출물만을 위해 쓰기엔 너무 무거운데? gulp는 어떨까? > 쉽고 가볍다 > 선택 gulp 셋팅 js, css 파일 minify scss 컴파일 css autoprefixer 라이브 서버 이미지 경량화 babel 빌드된 html 파일 beautify 라이브러리 설치(swiper,..

[자바스크립트] 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..

[리액트] Redux

1. Redux? 리액트 전역 상태 관리 라이브러리 여러개의 컴포넌트가 개별적으로 관리하는 상태값들을 하나의 파일에 모아서 통합 관리하는 것이 목적 컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. React나 다른 뷰 라이브러리와 함께 사용할 수 있다. 2. Redux 기본 요소 Slice 리덕스에서 관리하고자 하는 상태값과 상태값 갱신 기능을 포함하는 단위 모듈 상태값 - 리덕스를 통해 관리하고자 하는 전역 상태값 리듀서 - 상태값을 갱신하기 위한 함수(=액션함수)들을 포함하고 있는 모듈 액션함수 - 리듀서에 포함된 메서드들로서 상태값을 갱신하는 역할을 수행한다. Store Slice를 저장하고 있는 통합 모듈 이 모듈을 ReactA..

[리액트] export와 export default의 차이

리액트에서 export와 export default는 모듈을 내보내는 데 사용되는 키워드이다. 이 두 키워드를 JavaScript 모듈 시스템에서 사용되며, 다른 파일에서 해당 모듈을 가져와 사용할 수 있도록 한다. export 👉 import 시 { 함수이름 } ~ 로 불러온다. export default 👉 import 시 { } 가 필요없다. export export는 모듈에서 특정한 요소(함수, 변수, 클래스 등)를 내보내는 역할을 한다. export 키워드를 사용하여 특정 요소를 내보내면, 해당 요소는 다른 파일에서 import 키워드를 사용하여 가져올 수 있다. export는 여러 개의 요소를 동시에 내보낼 수 있으며, 내보낸 요소들은 이름을 가지고 있어야 한다. 이러한 요소들은 가져올 때 동..

[리액트] Props

🎀 Props properties의 줄임말 props는 읽기 전용이다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다. 아래와 같은 함수들은 순수 함수라고 호칭한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과 값을 반환하기 때문이다. function sum(a, b) { return a + b; } 반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다. function withdraw(account, amount) { account.total -= amount; } 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. props 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용 App.js impor..