프론트엔드

Programming Language/Javascript

[JS] this를 포함한 구조 분해 할당의 문제와 해결 방법

this를 포함한 property를 구조분해할당하면this가 가리키는 객체가 다를 것이라는 것은 머릿 속으로는 알고 있었는데,정리해보려고 남겨보는 글이다.this를 포함한 구조 분해 할당의 문제와 해결 방법구조 분해 할당은 객체나 배열에서 원하는 속성 또는 값을 추출해 별도의 변수로 할당하는 방식이다.코드의 간결성과 가독성을 높이는데 자주 사용된다.예시: 단순 속성 구조 분해this를 사용하지 않는 경우, 구조 분해 할당은 아무 문제 없이 동작한다.함수형 예제const obj = { a: 1, b: 2, c: 3 };const { a, b } = obj;console.log(a, b); // 출력: 1, 2클래스 예제 (this 제외)class MyClass { constructor() { thi..

IT

[TEO Conf] 2024 테오콘 후기

올해로 3회차를 맞은 테오의 컨퍼런스가 11월 23/24일 양일간 약 60명 씩을 추첨하여 진행되었다.카카오나, 배민, FE콘, 당근, 인프콘 등 여러 컨퍼런스를 무수히 지원했지만, 한 번도 되어본 적이없는데,이번에는 운이 좋게도 24일에 참여할 수 있었고, 오늘은 그 후기를 간단하게 남겨보고자 한다.테오콘, 어떻게 구성되어있을까?테오콘은 항해99에서 장소협찬을 받아 진행되었고,입장과 동시에 일정 브로셔와 신청 당시에 작성한 정보를 바탕으로 제작한 명함, 항해과 새겨져있는 펜과 바디 태그가 있는 티셔츠와 음료를 제공받을 수 있었다. 일정은 아래 첨부한 사진처럼 진행되었다!(TMI로, 명함은 배송문제가 생겨 운영진 분들이 한땀한땀 밤새 수작업했다고 한다 ㅠㅠ... 감사합니다...)기억에 남았던 점세션을 듣..

Programming Language/React

[React] 리액트의 전역상태관리 도구, 어떤 것을 선택할까

리액트의 전역상태관리 도구들에 대해 claude에게 대화를 나눠서 얻은 글이다.리액트의 전역상태관리 도구, 어떤 것을 선택할까?들어가며React 애플리케이션 개발시 전역 상태 관리의 필요성을 마주치게 된다.React의 기본 제공되는 Context API부터 다양한 서드파티 라이브러리까지, 각각의 도구들은 저마다의 특징과 장단점을 가지고 있다.React의 기본 제공 도구: Context APIContext API의 특징React의 기본 제공되는 Context API는 간단한 전역 상태 관리에 적합하다.// Context 생성const ThemeContext = React.createContext(null);// Provider 구현const ThemeProvider = ({ children }) => { ..

Programming Language/React

[React] 조건부 스타일 vs 조건부 클래스

조건부 스타일 vs 조건부 클래스웹 개발에서 스타일링을 적용하는 방법은 다양한데, 그 중에서도 조건부 스타일과 조건부 클래스는 자주 사용되는 두 가지 접근 방식이다. 이 글에서는 두 방법의 특징과 비교를 해보려 한다.조건부 스타일조건부 스타일은 특정 조건에 따라 인라인 스타일을 적용하는 방식으로,주로 React와 같은 프레임워크에서 사용되며, 동적으로 스타일을 변경할 수 있는 장점이 있다.예시 코드const MyComponent = ({ isActive }) => { return ( {isActive ? '활성 상태' : '비활성 상태'} );}; 위 코드에서 isActive가 true일 때 텍스트 색상이 파란색으로 변경되며, 인라인 스타일을 사용하여 조건에 따라 동적으로 스타..

개발자참치
'프론트엔드' 태그의 글 목록 (2 Page)