그린그린티라떼

Ajax나 DOM 이벤트 조작 등을 코드로 작성할 때 크로스 브라우저 호환을 고려해 많은 조건 분기를 사용해 코드가 불필요하게 길어졌다. 이런 상황 속에서 제이쿼리를 사용하면 간결하게 코드를 작성할 수 있었다. JQuery의 장점 - 크로스 브라우저 호환을 구현할 수 있다. - DOM을 간결하게 조작할 수 있다. - 애니메이션을 간결하게 구현할 수 있다. - JQuery UI등 주변 라이브러리가 풍부하다. 프론트엔드 요건이 점점 더 복잡해지면서 제이쿼리의 인기가 하락하기 시작했다. JQuery의 단점 - 글로벌 스코퍼를 오염시킨다. - DOM 조작 구현이 복잡해지기 쉽다. - 라우팅(routing)등, 여러 페이지의 애플리케이션을 구현하는 구조가 없다. - 브라우저의 표준화로 작동의 차이가 점점 눈에 띄..

Webpack? Webpack은 모던 자바스크립트 애플리케이션을 위한 강력한 모듈 번들러이다. 웹 애플리케이션의 다양한 자원들(JavaScript, StyleSheet, Image 등)을 하나의 파일 또는 여러 파일로 번들링하는 데 사용한다. Webpack의 핵심 원칙은 모든 것을 module로 취급한다는 것이다. 즉 CSS, 이미지, 폰트 등도 자바스크립트 모듈처럼 처리된다. Webpack 설정 방법 웹팩이 모듈 번들러인거는 알겠는데 그래서 웹팩이 뭐하는 거야?라고 하면 우리가 웹 개발하면서 만나는 package.json파일을 설정하는 거라고 생각하면 됩니다. npm init을 실행하여 package.json파일을 생성한 후 웹팩과 관련된 패키지를 설치하면 됩니다. 1. 프로젝트 초기화 mkdir my..

전역 변수의 문제점? ✔️ 암묵적 결합 모든 코드가 전역 변수를 참조하고 변경할 수 있게 된다. 변수의 유효 범위가 크기 때문에 코드의 가독성은 나빠지고 의도하지 않은 상태 변경이 발생할 수 있는 위험이 높아진다. ✔️ 긴 생명 주기 전역 변수는 생명 주기가 길다. 메모리 리소스가 오랜 기간 소비된다. 전역 변수의 상태를 변경할 수 있는 시간과 기회가 많다. ✔️ 스코프 체인 상에서 종점에 존재 전역 변수는 스코프 체인 상에서 종점에 존재한다. 전역 변수의 검색 속도가 가장 느리다. ✔️ 네임스페이스 오염 자바스크립트의 가장 큰 문제점 중 하나는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 것이다. 전역 변수의 사용을 줄이는 방법? ✔️ 즉시 실행 함수 함수 정의와 동시에 호출되는 즉시 실행 ..

현재 사내 홈페이지에 구글 광고와 네이버 광고를 게재하였다. 구글 애널리틱스에서 어느 채널에서 광고로 유입되는 지 확인하기 위해 utm 태그를 달아서 광고에 띄워주기로 했다. 네이버, 구글 광고 링트에 첨부할 때 아래의 https로 시작하는 url과 같은 형태로 url을 구성하여 만들어주면 된다. 네이버 광고의 경우 https://도메인주소?utm_source=naver&utm_medium=cpc&utm_campaign=naver_상품_sales 이런 식으로 작성해주면 된다. 마지막의 / 유무는 상관 없이 작성해주면 된다. 구글 애널리틱스 > 보고서 > 수명 주기 > 참여도 > 이벤트 보여지는 표에서 이벤트 이름 옆의 추가 항목을 선택하여 트개픽 소스의 세션 소스/매체를 선택해준다. 그러면 다음과 같이 ..

Redux의 단방향 데이터 흐름이란? - state는 특정 시점의 앱 상태를 설명한다. - UI는 해당 상태를 기반으로 렌더링된다. - 어떤 이벤트가 발생하면 발생한 일에 따라 state가 업데이트 된다. - 새로운 상태에 따라 UI가 다시 렌더링된다. 위의 이미지는 리덕스에 대해 알고 있어요! 하면 무조건 설명이 가능해야하는 그림이다. 아래의 설명을 외우기보다는 그림을 보며 꼭! 이해해야한다. 사실 별 거 없다ㅎㅎ Redux에 대해 기억해야 되는 것들 ✔️Redux는 전역 어플리케이션 상태를 관리하기 위한 라이브러리이다. - Redux는 일반적으로 Redux와 React를 함께 통합하기 위해 React-Redux 라이브러리와 함께 사용된다. - Redux Toolkit는 Redux 로직을 작성하는 데 ..

JavaScript에서 객체와 배열은 모두 변경 가능하다. 객체를 생성하면 해당 필드의 내용을 아래와 같이 변경 가능하다. 메모리 안에서 객체나 배열의 참조값은 같지만 객체/배열 내부 값이 바뀌었다. (불변성을 지키지 못함) const obj = { a: 1, b: 2 } // still the same object outside, but the contents have changed obj.b = 3 const arr = ['a', 'b'] // In the same way, we can change the contents of this array arr.push('c') arr[1] = 'd' 값을 불변하게 업데이트하려면 기존의 객체/배열의 복사본을 만든 다음 복사본을 수정해야 된다.(불변성 지킴) ..

React를 사용하면 거의 필수적으로 사용하는 Redux 그런데 막상 Redux에 대해 설명하려고 하니 잘 모르겠어서 정리해본다. 우선 공식 홈페이지를 참고해서 글을 작성한다. https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Redux? JS앱을 위한 예측 가능한 상태 컨테이터 ✔️ 예측 가능 - Redux는 일관성 있게 동작하고 다양한 환경(클라이언트, 서버)에서 실행되며 테스트하기 쉬운 어플리케이션을 작성하는데 도움이 된다. ✔️ 중앙 집중식 - Redux DevTools를 사용..

Page view란? GA4에서 ‘page_view’는 주요 내장 이벤트 중 하나입니다. 사용자가 웹 사이트를 방문할 때마다 자동으로 추적되는 이벤트입니다. 기본적으로 추적되는 정보: 사용자가 페이지를 로드하거나 새로 고치면 ‘page_view’ 이벤트가 자동으로 보내집니다. 관련 파라미터: 이 이벤트와 함께 전송되는 기본 파라미터에는 다음과 같은 정보가 포함될 수 있습니다. page_location: 방문한 페이지의 URL page_referrer: 사용자를 해당 페이지로 인도한 이전 페이지의 URL page_title: 방문한 페이지의 제목 사용자 정의 파라미터: 필요에 따라 추가 파라미터를 설정하여 page_view 이벤트에 추가 정보를 포함시킬 수 있습니다. 이용 사례: 웹사이트의 특정 페이지 방..

VSCode 에디터를 더 유용하게 쓰기 위한 단축키들을 알아봅시다! 같은 단어/변수명을 모두 선택하는 2가지 단축키가 있는데 각각 어떤 것인지 정리해보았습니다. cmd + shift + L / ctrl + shift + L 1. 원하는 단어로 커서를 가져다 놓고 2. cmd + shift + L / ctrl + shift + L 단축키를 이용하면 3. 모든 potato 변수에 커서가 가는 것을 볼 수 있다. cmd + D/ ctrl + D 1. 원하는 단어로 커서를 가져다 놓고 2. cmd + D / ctrl + D 단축키를 이용하면 3. 단축키를 누른 횟수만큼의 potato 변수에 커서가 가는 것을 볼 수 있다. VSCode 에디터에서 단축키로 같은 변수명/단어를 선택하는 방법에 대해 알아보았습니다! ..

JavaScript 함수에 원시값과 객체를 매개변수로 넣었을 때 어떻게 다른 지에 대해서 궁금증이 생겼다. 조금 더 확실하게 정리하고자 기록으로 남긴다. 원시값(primitive values)을 매개변수로 전달할 때 Boolean, Number, String, BigInt, Symbol, null, undefined은 JS의 원시값에 해당합니다. 함수에 원시값을 매개변수로 전달하면 그 값의 복사본이 함수 내부로 전달됩니다. 따라서 함수 내에서 해당 매개변수를 변경해도 원래의 값에는 영향을 주지 않습니다. function modifyValue(x) { x = x + 1; console.log('Inside function:', x); } let value = 5; modifyValue(value); // ..