COCO World

⛄ Sass (Syntactically Awesome Stylesheets)란? : 스타일 시트를 생성하기 위한 확장된 CSS 프리프로세서로, CSS의 한계를 극복하고 코드의 재사용성과 유지보수성을 향상시키기 위해 만들어졌다. 주로 웹 개발에서 스타일링을 더 효과적으로 관리하고 구조화하기 위해 사용한다. 그치만 장점이 곧 단점이 되기도 하기 때문에 프로젝트의 목적성을 고려하여 투자해야한다. 장점 중첩을 지원하여 코드의 가독성을 향상시키고, 중첩 구조는 HTML 요소의 계층 구조와 비슷하게 코드를 작성할 수 있도록 도와준다 변수를 사용하여 스타일에서 사용되는 값을 중앙에서 관리할 수 있어 유지보수성이 향상되고, 재사용이 가능하다. 여러 개의 파일로 스타일을 나누고, '@import'를 통해 불러와 사용하기..

의외로 자주 사용되는 스킬이라 이번에 두번째 만들게 되면서 포스팅하게 되었다. 여러가지 배열값들을 나열하여 일치된 classname 중에서 특정 div값을 클릭하였을 때, 해당 요소만 CSS를 변경하여 사용자에게 보여주는데 이는 classname 동적으로 활용하는 방법이다. 보통 useState를 사용하여 값을 상태관리하겠지만 본 사용자는 리덕스를 사용하고 있어 slice를 통해 상태관리하였다. 따라서, Redux와 useState 두 가지 사용방법을 적용해보겠다. 1. Redux Toolkit의 Slice를 사용해 적용하기 메인 컴포넌트의 HTML {storeObj.state.employeeList?.map((item, idx) => ( storeObj.callbacks.selecteNameState(..

코드 구조 const Page = () => { const onChanged = useCallback((e) => { e.target.value = e.target.value.trim() const value = e.target.value; onChange(e); },[onChange]); return ( ) } onChange의 역할 : 입력 상태가 실시간으로 업데이트되어 최신 상태를 유지하며, 사용자에게 실시간 피드백을 제공 단점: 상태 업데이트가 발생할 때마다 컴포넌트가 재렌더링되어 성능에 영향을 줄 수 있다. 따라서, onChange 메서드 값의 변경이 있을 때에만 onChanged의 함수가 실행될 수 있도록 useCallback을 통해 onChange를 의존성 배열에 넣어두었고, input의 입..

1. 리덕스 사가(Redux Saga) Redux-Thunk는 함수를 디스패치 할 수 있게 해주는 미들웨어였다면, Redux-Saga의 경우엔, Action을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 수행하는 방식으로 사용한다. 야기서 특정 작업이란, 특정 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 Dispatch하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있다. Redux-Thunk 다음으로 가장 사용되고 있는 라이브러리로써 주로 애플리케이션에서 비동기적으로 API를 호출하여 데이터를 가져오는 일과 같은 부수 효과(Side Effect)를 쉽게 처리하기 위해 사용하는 라이브러리이다.위의 특정 작업에 API의 비동기 호출 행위가 포함되며, 때에 따라 기존 요..

🥕 개요 TS 라이브러리 설치하기 tsconfig.json 생성하기 파일 확장자 변경하고, 코드 수정하기 기타 주의사항 🥕 TS 라이브러리 설치 리액트의 새로운 프로젝트(CRA)에서 TS 설치하기 # npm 버전 npm create-react-app my-app --template typescript # yarn 버전 yarn create react-app my-app --template typescript 기존 리액트에 프로젝트가 존재하고, TS만 추가설치하기 # npm 버전 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # yarn 버전 yarn add typescript @types/node @t..

🍡 Redux에 대해 알아보자 개념 상태 관리를 하기 위한 라이브러리로서, 상태관리 로직을 컴포넌트 밖에서 처리하여 State를 보다 효율적으로 관리하기 위한 목적을 가지고 있다. 리덕스를 사용하는 이유는 상태 관리를 하는 이유부터 알아본다면 훨씬 이해하기 쉽다. 상태 관리를 하는 이유? 2023.06.11 - [Front-End/React] - [리액트/React] 상태 관리는 왜, 어떻게 하는가? 사용 이유 Redux를 사용하는 이유는 상태 관리를 State를 전역적(Global)으로 관리하기 위해 사용하는데 이는 위에 개념에서 아시다시피 컴포넌트 밖에서 처리하기 위한 이유와 동일하다. 전역에서 사용하는 목적은 방대하게 커지는 프로젝트 규모에 의하여 리액트 특유의 단방향 데이터흐름의 문제점인 Pr..

🌱 리액트에서의 State(상태) 의미 State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위하여 사용한다 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다 State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다 State는 컴포넌트에 대한 데이터 또는 정보를 포함하는데 쓰이는 리액트 내장 객체이다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있는데 변경될 때마다 컴포넌트는 다시 렌더링해야 사용자에게 변경된 상태값을 보여줄 수 있다. State 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다. 3가지의..

🐼 JSX의 의미 자바스크립트로 안에 있는 HTML 코드로서 자바스크립트 XML을 의미한다. HTML은 결국 XML이라고 할 수 있다. 화면 뒷단에서 실행되는 변환 과정이 이루어지는 파일이다. XML이란? 더보기 eXtensible Markup Language의 약어. W3C에서 여러 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. 마크업 언어는 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지이다. 가장 친숙하고 흔하게 접할 수 있는 마크업 언어로 HTML이 있다. JSX 특징 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다 JSX는 하나의 파일에 자바..