그린그린티라떼

유데미 코딩 페스티벌 오늘까지 자유이용권 신청가능하니까 참고해주세요!! 퇴사하고 12월은 코딩페스티벌과 함께 불태웁니다🔥🔥 이제 아무도 날 말릴 수 업쒀...... 에어팟 맥스 제꺼에요 알죠? 유데미 사랑해요

[Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft. 오늘 개발하면서 이런 에러를 마주쳤다. immer producer가 새로운 값을 리턴한다는 내용인데 해결해보자. 간단하다! 1. 에러가 난 코드 2. 수정된 코드 차이가 보이시나요??JavaScript 화살표 함수를 사용할 때 {}에는 로직이 들어가고 {}로 감싸지 않으면 값이 리턴된다. ⭐️ 꼭 유의해서 개발하자!! ⭐️

React에서 불변성을 지키지 않으면 컴포넌트에서 예상하지 못한 동작을 일으킬 수 있다. 또한 React 성능 최적화에도 영향을 미칠 수 있다. import React, { useState } from 'react'; function MutableStateExample() { // 잘못된 방법: 불변성을 지키지 않음 const [items, setItems] = useState([1, 2, 3]); const addItem = () => { // 배열에 새로운 아이템을 추가하는데 push를 사용하면 안됨 items.push(4); setItems(items); // 상태를 직접 업데이트하면서 불변성을 지키지 않음 }; return ( {items.map(item => ( {item} ))} Add Ite..

React에서 Component를 나누는 기준 재사용성 DRY - Don't Repeat Yourself 단일책임 SR - Single Responsibility useMemo, useCallback등을 통한 최적화를 하는 이유? - 함수형 컴포넌트는 단순히 그냥 함수이다. jsx를 반환하는 함수이다. - 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출하여 실행되는 것을 의미한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다. - 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. 하위 컴포넌트에서 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않더라도 리..

원시값 (primitives) - string(문자) - number(숫자) - bigint - boolean - symbol(유일한 식별자를 만들고 싶을 때 사용) - null - undefined 객체(object) - 프로퍼티에 다양한 종류의 값 저장 가능 - {name: 'lia', age: 29} - 함수도 객체의 일부이다. let str = "Hello"; str.test = 5; // (*) alert(str.test); 엄격 모드인지 아닌지에 따라 결과가 나뉩니다. undefined (비 엄격 모드) An error (엄격 모드) (*)로 표시한 줄에서 무슨 일이 일어나는지 알아보면서, 왜 위와 같은 결과가 나타나는지 이해해 봅시다. str의 프로퍼티에 접근하려 하면 "래퍼 객체"가 만들어..

console.log('Start'); setTimeout(function() { console.log('Timeout callback'); }, 0); console.log('End');​ console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); Promise.resolve().then(() => setTimeout(() => console.log(4))); Promise.resolve().then(() => console.log(5)); setTimeout(() => console.log(6)); console.log(7); 이 코드의 출력을 맞춰보세요! (정답은 맨 아래) 지난 주 면접..

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 이런 식으로 작성해주면 된다. 마지막의 / 유무는 상관 없이 작성해주면 된다. 구글 애널리틱스 > 보고서 > 수명 주기 > 참여도 > 이벤트 보여지는 표에서 이벤트 이름 옆의 추가 항목을 선택하여 트개픽 소스의 세션 소스/매체를 선택해준다. 그러면 다음과 같이 ..