Front-End

[React] Zustand란? 사용하는 이유! (상태 관리 라이브러리, 사용 방법 예시)

Zustand는 독일어로 '상태'라는 뜻으로 React 생태계에서 사용하는 상태 관리 라이브러리입니다. 현재 Redux가 압도적으로 많이 사용되고 있지만, 문법이 더러운 편이라 학습에 시간이 필요합니다. Post Redux로서 사용자가 빠르게 늘고 있는 힙한 곰돌이 친구 Zustand에 대해서 알아봅시다. 😎 📝 사용하는 이유 ⦁ React에서 데이터는 단방향 기본적으로 React의 데이터 흐름은 State & Props를 사용해 단방향으로 이루어져야 한다는 원칙이 있습니다. 이러한 데이터 흐름은 단순하고 예측 가능하며, 컴포넌트 간의 관계를 명확히 정의하기 때문에 유지 보수성을 향상시킵니다. ⦁ 음.. 컴포넌트가 너무 많으면? 하지만 데이터를 전달하는 과정에서 거쳐야 하는 컴포넌트가 너무 많은 상황이라..

[React Native] react-native-vector-icons 아이콘 깨짐 현상 해결방법 (엑박)

react-native-voctor-icons를 설치했는데, 아이콘이 깨지는 현상이 발생했습니다. 해결 방법 알아봅시다. 😀 📝 해결 방법 https://github.com/oblador/react-native-vector-icons#android GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: C..

[React] 리액트 CSS 초기화란? (CSS Reset, 여백 제거)

React 프로젝트를 생성하면 기본적으로 Padding, Margin 등 CSS가 적용되어 있습니다. 또한, 브라우저마다 태그를 렌더링 하는 기본 스타일이 다릅니다. 따라서 원하는 디자인을 구현하기 위해 기본적인 CSS를 초기화 시켜주는 작업이 필요합니다. 😀 📝CSS 초기화 방법 https://meyerweb.com/eric/tools/css/reset/index.html CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and ..

[React & Vue] 조건부 렌더링이란? (사용 예시, 사용 목적)

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 뜻합니다. 주로 React, Vue, Angular 등의 프론트엔드 프레임워크에서 사용되고, 각각 조건부 렌더링을 처리하는 특별한 문법이 제공됩니다. 그렇다면 어째서 조건부 렌더링이라는 개념이 등장하게 되었고, 왜 필요한 건지 알아봅시다. 😎 📝조건부 렌더링 사용방법 ⦁ 웹 개발 초기 환영합니다! 사실 조건부 렌더링은 초기 웹 개발부터 존재한 개념입니다. React와 같은 프론트엔드 라이브러리의 등장 이후 점점 더 많이 사용되기 시작한 개념이지만, 웹 개발에서 조건부 렌더링을 사용하는 것은 이전부터 일반적인 방법 중 하나였습니다. 당시에는 동적인 UI를 구현하기 위해 JavaScript와 HTML을 활용했습니다. ⦁ 프론트엔드 프레임워크..

[Vue.js] Vue란? (2023 웹 프레임워크 순위, 통계, Vue를 사용하는 이유)

Vue.js는 공식 문서에 대문짝만 하게 쓰여있듯이 프로그레시브 자바스크립트 프레임워크입니다. 이는 애플리케이션을 단계적으로 개발하고 향상시킬 수 있으며, 개발하려는 웹 사이트의 규모와 요구사항에 따라 추가적인 기능과 기술을 적용할 수 있는 방식을 말합니다. 공식적인 내용은 위와 같고, 왜 Vue가 React와 Angular와 더불어 프론트엔드 프레임워크 3대장이 되었는지 알아보겠습니다. 😀 📝통계로 현황 살펴보기 ⦁ 2023 프로그래머스 개발자 설문조사 리포트 ✔ 국내 4,034명의 개발자가 참여한 온라인 설문조사 결과입니다. 주로 사용하는 웹 프레임워크에 대한 응답으로, 역시 국내에서는 React가 대장인 모습을 볼 수 있습니다. 하지만 그에 못지 않게 Vue.js도 많이 사용되고 있습니다. Angu..

[TypeScript] 타입스크립트란? (개념, 문법 총 정리)

2012년 마이크로소프트가 발표한 타입스크립트는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. Stack Overflow에서 개발자가 가장 좋아하고 관심을 가지는 프로그래밍 언어 2위로 선정되었습니다. 또한, 개발자 채용공고를 보면 우대사항에 타입스크립트가 거의 항상 기재되어 있습니다. 이젠 거의 필수 교양이 되어버린 타입스크립트에 대해서 알아봅시다. 📝 타입스크립트의 특징 ⦁ 컴파일 언어, 정적 타입 언어 자바스크립트(JS)는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견합니다. 하지만 타입스크립트(TS)는 컴파일 언어입니다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 JS코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을..

[React Native] 리액트 네이티브 차트 라이브러리 추천

웹이나 앱을 개발하다 보면 데이터를 예쁘게 차트로 시각화하고 싶은 경우가 생깁니다. 리액트 네이티브에도 다양한 차트 라이브러리가 존재합니다. ✔ 하지만 기업이 아닌 개인 사용자들이 만든 커뮤니티 라이브러리가 대부분이기 때문에 사용하기 전에 다운로드 수, 최근 업데이트 날짜 등을 잘 확인해야 합니다. 제가 사용해 보고 좋다고 생각한 차트 라이브러리 2가지를 추천해 드리겠습니다. 😀 1. react-native-chart-kit https://www.npmjs.com/package/react-native-chart-kit?activeTab=readme react-native-chart-kit If you're looking to **build a website or a cross-platform mobile..

[React Native] RNSVGSvsViewAndroid 에러, ReadableMap 에러 해결방법

리액트 네이티브 차트 라이브러리를 사용하기 위해서 install 했더니 다음과 같은 에러가 발생했습니다. 패키지 버전들이 충돌 나서 안되는 줄 알고 2일 동안 스택 오버플로와 깃허브 이슈를 엄청 찾아다녔습니다. 😪 2일간의 삽질의 흔적입니다. 😂 📝 해결방법 ⦁ java.lang.Double cannot be cast to abi47_0_0.com.facebook.react.bridge.ReadableMap ⦁ requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager ✔ 다음 코드를 터미널에 순서대로 입력해 줍니다. 🎉 expo update expo prebuild rm node_modules yarn install 참고 문..