전체 글 45

📜 useEffect 공식문서 간단 정리

💿 useEffect란?useEffect는 리액트 함수형 컴포넌트에서 외부 시스템과 동기화할 수 있는 Hook이다. 예를 들어, 네트워크 연결, 타이머 설정, 브라우저 이벤트 등록 등 리액트 외부의 작업을 처리할 때 사용한다. 📌 기본 문법 useEffect(() => { // 실행할 코드 (설정) return () => { // 정리(clean-up)할 코드 };}, [의존성]); 첫 번째 인자: 설정 함수 (컴포넌트가 마운트되면 실행된다.)두 번째 인자: 의존성 배열 (값이 변경될 때만 재실행된다.) 📌 실행 시점 컴포넌트 마운트 시 실행의존성 배열 값이 바뀔 때 언마운트 → 재실행컴포넌트 언마운트 시 정리 함수 실행개발 모드에서는 디버깅을 위해 한 번 더 실행됨 (Strict ..

🫂왜 useEffect를 쓰는가 (Umc 워크북 3주차 강의.)

📌 useEffect는 리액트에서 함수형 컴포넌트, sideEffect를 잘 처리하기 위해 제공되는 훅이다. 자세한 설명은 아래 링크 참고.https://ko.react.dev/reference/react/useEffect useEffect – ReactThe library for web and native user interfacesko.react.dev 생명주기 메소드를 하나로 통합해서 수행할 수 있게 해준다라고 생각하면 되겠다.useEffect는 보통 데이터를 가져올 때 많이 활용하고,이벤트 리스너를 윈도우나 document에 스크롤, 마우스, 키보드 등과 관련된 걸 등록을 했으면, 그것들을 remove 리스너를 통해 언마운트 해주는 역할도 한다고 볼 수 있다.그리고 웹 소켓이나 스트리밍, 푸시 ..

📱안드로이드 xml과 compose

🗨️ 혼자 공부도 깃허브에서다른 사람들과 스터디를 하면서, 깃허브도 관리하면 좋겠다는 생각에 organization을 팠고, fork를 이용해서 자신의 공부한 내용들을 공유하면서 자신의 레포지토리를 관리하려고 했다. 그래서 fork 레포지토리를 클론받고, 그 안에 초기세팅을 하고, 내부에 안드로이드 스튜디오를 실행했다.서론이 좀 길지만, 이번에 다루려는 주제는 xml과 compose에 대한 것이다. 장단점은 뭐고, 차이점이 뭔지 등을 정리하려고 한다. 📌 안드로이드 스튜디오 https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android DevelopersAndro..

카테고리 없음 2025.04.01

🌐 다크 모드 적용 (UMC 워크북 강의 참고.)

📌 다크모드 활용을 위해서 page내에 nav, body, footer에서도 Dark 모드를 쓴다는 정보를 알고 있어야 이를 공통적으로 사용할 수 있다. useState를 이용해서 다크 모드를 쓰겠다는 걸 props로 전달을 해줘야 한다. page 내부에 아래 코드를 넣어준다.const [isDark, setIsDark] = useState['Dark'] 만약에, nav에서 다크 모드를 스위칭하는 요소가 있다고 하면, setIsDark의 참조도 같이 해줘야 한다. (보통 nav바에서 많이 구현한다.) 📌 nav 바 안에는 다양한 메뉴 카테고리가 있다. isDark라는 것을 이 요소들로 넘겨주기 위해서 props로 전달을 해준다. -> 깊이가 깊어질수록 계속 props로 넘기게 된다.이렇게 계속 pro..

🌐TodoList - ts + vite + yarn 세팅(tailwind css 적용.)

더보기지난번에 todolist를 타입스크립트로 어렵게 구현하고, 스타일 컴포넌트로 구현했는데 여러 한계점이 있었다.듣기로는 스타일 컴포넌트 같은 경우, 많은 개발자들이 쓰고 있다고 생각했는데 버전 업데이트를 더이상 하지 않는다고 해서 큰 충격이었다. 그래서 tailwind css로 대체하여 쓸 생각이다.📌 pnpm 설치 (pnpm으로 하고 싶을 때.)https://pnpm.io/ko/installation 설치하기 | pnpm필수 구성 요소pnpm.iocorepack을 먼저 설치해주고, $ npm install --global corepack@latest사전에 Node.js를 이미 깔았으므로$ npm install -g pnpm@latest-10이렇게 pnpm을 깔아줘야 한다. 📌 yarn 설치..

🌐Tailwind Css 파헤쳐 보기💿

Tailwind css는 유틸리티 우선의 css 프레임워크로, 개발자가 클래스 이름을 통해 직접 스타일을 html에 적용할 수 있게 하고, 이런 방식은 매무 모듈화되어 있고, 디자인의 일관성을 유지하면서, 커스텀 디자인을 가속화시켜주는 유연성을 가지고 있다.장점 스타일을 적용하는 방식에서 직접 작성하는 시간을 대폭 줄일 수 있고, 컴포넌트 기반 접근 방식에서 유지보수가 용이, 커스터마이징 및 반응형 디자인 구현이 쉽다.단점 새로운 스타일을 적용할 때마다 css 클래스가 생성되어 css 파일의 크기가 커질 수 있고, 이는 로딩 시간으로 직결된다. 또한, 별도의 파일 생성으로 인해서 일관성 있는 형태를 보여주기 어렵다.기본적인 사용 방법은 html 태그 안 클래스에 직접 적용! 🍠 Tailwind CSS..

🌐리액트로 Todo List 만들기⛏️

더보기폴더 구조는 다음과 같이 설정했다.pages 폴더 안에 TodoList 폴더를 만들고 components 폴더 안에 CompletedList.tsx, TodoInput.tsx, TodoItem.tsx, TodoList.tsx를 나눠 컴포넌트 분리를 해서 구조를 이뤘다. 그리고 이 컴포넌트를 감싸는 Todo.tsx를 구성했고, Styles.ts 같은 경우는 한꺼번에 관리하도록 스타일 파일을 하나만 뒀다. 📌App.tsximport React from "react";import { BrowserRouter as Router, Route, Routes } from "react-router-dom";import Todo from "./pages/TodoList/Todo";const App: React.F..

내 맘대로 골라담은 리액트 스타일 적용 방법 모음

Css vs Sass vs Styled-components vs Stylesheet 리액트 스타일 적용하는 방식이 여러가지가 있지만, 그나마 관심 있는, 해보고 싶은, 해봤던, 흔한 방식을 위주로 정리를 하려고 한다.  💿 CssCascading Style Sheets(CSS) - html이나 xml(svg, xhtml 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. css는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정한다.웹페이지를 꾸미려고 작성하는 코드 실제로 프로그래밍 언어는 아니다. 마크업(markup) 언어도 아니다. - HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말.ruleset - 선택자(selector) ..

카테고리 없음 2025.03.23

TypeScript 변환

1. tsconfig.json 생성더보기더보기$ npx tsc --init2. App.tsx 함수 변경더보기더보기const App = () => {} → const App: React.FC = () => {}3. compilerOptionsTypeScript가 JSX를 사용할 수 있도록 설정되지 않아서 발생하는 문제 [ "message": "Cannot use JSX unless the '--jsx' flag is provided."] tsconfig.json 파일을 열고, "compilerOptions" 내부에 다음 설정을 추가-> "jsx": "react-jsx",  4. reportWebVitals.js를 ts로 변경더보기더보기$ npm install --save-dev @types/react @t..

카테고리 없음 2025.03.21

React Native + Expo 초기세팅

React Native + Expo를 통해 초기세팅 진행더보기1. Node.js 설치 2. React Native 설치, Expo Cli 설치3. Expo Go 설치 1. Node.js 설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  2. React Native를 쓰기 위해서 프로젝트를 생성해준다. ( My-App은 자신이 하려는 프로젝트 이름.)-> Expo Cli 설치 및 프로젝트 생성 $ npx create-expo-app My-App  3. My-App 즉, 내가 직접 만든 프로젝트 폴더로 이동한다..

카테고리 없음 2025.03.11