Dev Diary 💻

Intro 안녕하세요. 이번시간에는 React 에서 return 시 컴포넌트를 하나로 감싸는 이유에 대해 알아보도록 하겠습니다. Why? React에서 JSX를 사용하면 HTML과 유사한 구문으로 JavaScript를 작성할 수 있습니다. JSX는 JavaScript 표현식이므로, 리액트 컴포넌트의 반환 값으로 여러 요소를 사용하려면 이러한 요소들을 하나의 루트 요소로 묶어주어야 합니다. React의 가상 DOM(virtual DOM)이 기본적으로 단일 루트 노드만을 가지기 때문입니다. 컴포넌트가 여러 요소를 반환하면 React는 요소들을 단일 루트 노드로 꼭 묶어줘야 합니다. Method React에서 이러한 작업을 수행하기 위한 일반적인 방법은, 여러 요소들을 또는 와 같은 노드로 묶어주는 것입니다...

Intro 안녕하세요. 이번에 MUI 기반 회사 홈페이지 개발 업무를 지원하여 맡게 되었습니다. mui 를 사용하다보면 아래와 같은 소스코드를 많이 볼 수 있습니다. theme.spacing(1) 처음에는 2px인가 싶었는데, 2px이 아니더라고요. theme.spacing(2) 의미 Material-UI (mui) 에서 1은 theme.spacing(1)과 같은 의미를 갖습니다. 보통 theme.spacing()은 테마 설정에 따라 다르지만, 기본적으로 8px을 반환합니다. 1은 기본적으로 8px을 나타내며, 2는 16px, 3은 24px, ... 와 같이 8px 간격으로 증가합니다. 그렇다면 픽셀 커스텀이 불가능한가? 커스텀도 가능합니다. createTheme() 함수를 사용하여 수정할 수 있습니다...

Intro 안녕하세요. 이번시간에는 Next의 Link와 MUI(Material-UI)의 Link 차이점에 대해 알아보겠습니다. Next의 Link와 MUI(Material-UI)의 Link Next.js + React + MUI 조합으로 개발경험이 있으신 분들이 꽤 있으실 텐데요, 개발하다보면 Link 컴포넌트를 거의 필수로 사용하게 됩니다. Next.js와 MUI 에는 공통으로 Link 컴포넌트가 들어있습니다. 보통 자동 IDE 툴을 사용하면 자동으로 import 하는 경우가 많은데요, 꼭 확인하고 import를 하셔야 합니다. Next.js의 Link와 MUI(Material-UI)의 Link는 목적이 다른 요소이기 때문입니다. Why? Next.js의 Link 컴포넌트 Next.js의 Link 는..

Intro 안녕하세요. 저는 recharts chart 차트 라이브러리를 사용하여 차트의 넓이를 화면 100%에 맞춰서 뿌려주고 싶었는데요. width 값을 100%로 설정하자 다음의 에러가 발생했습니다. TS2322: Type 'string' is not assignable to type 'number'. import {NextPage} from "next"; import React from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; const data = [ { name: 'Jan', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Feb'..

Intro mongodb 에서 추가된 컬렉션을 스프링부트에서 활용하던 도중 아래의 에러가 발생했습니다. Failed to instantiate [org.springframework.data.mongodb.core.SimpleReactiveMongoDatabaseFactory]: Factory method 'someHotMongoFactory' threw exception with message: Cannot invoke "String.startsWith(String)" because "connectionString" is null Why? 이 오류는 connectionString이 null이기 때문에 "String.startsWith(String)"를 호출할 수 없다는 것을 나타냅니다. SomeHotMo..

Intro 안녕하세요. 이번시간에는 Next.js에서 Viewport(뷰포인트)를 설정하는 방법에 대해 알아보겠습니다. How to apply viewport in nextjs _document.js 파일을 사용하여 아래와 같이 전체 페이지에 meta 태그를 추가해주면 됩니다. import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return ( ); } } export default MyDocument;

Intro 안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) How to install Zustand Zustand 설치방법은 아래와 같습니다. 각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 1. npm npm install zustand 2. yarn yarn add zustand Zustand Simple Example 간단한 예제로 카운터를 만들어 보겠습니다. zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다. import create fro..

Intro 안녕하세요. 이번 시간에는 React Zustand 라이브러리에 대해 알아보도록 하겠습니다. Zustand 리액트를 공부하신 분이라면, 상태 (State)라는 개념에 대해 들어보셨을 겁니다. 간단히 말하자면 React Zustand는 리액트에서 사용가능한 상태 관리 라이브러리입니다. 리액트 상태 관리 라이브러리는 Redux, MobX 등이 존재하지만 Zustand는 위 라이브러에 비해 더 가볍고 간단하게 활용할 수 있습니다. Zustand Features Zustand는 State를 전역으로 관리하며 컴포넌트 간에 공유되는 State Container를 제공합니다. 이 Container 는 리액트 컴포넌트에서 직접 사용할 수 있으며 useStore()을 통해 상태를 가져오고 (get), 업데이..

이 글은 코딩애플님의쉬운 플러터 강좌를 바탕으로 정리한 내용입니다. Intro 새로운 사이드 프로젝트를 시작하면서 Flutter를 사용해보기로 했습니다. Flutter는 한번도 다뤄본 적이 없기 때문에 강좌 내용을 간단히 정리하며 공부해보려고 합니다 :-) Flutter 개발환경 셋팅 1. Flutter SDK 다운 https://docs.flutter.dev/get-started/install 2. Android Studio 설치 https://developer.android.com/studio plugin 메뉴에서 Flutter 플러그인 검색 후 설치 SDK Manager 눌러서 Android SDK Command-line Tools 설치 3. 환경변수등록 제 경우 터미널 이름이 zsh 이므로 아래 ..

Intro 안녕하세요. 앵귤러에서 SVG path element에 click 이벤트 함수 실행하는 방법에 대해 알아보도록 하겠습니다. My Case 제 케이스의 경우 특정 SVG 요소를 클릭했을 때 함수를 호출하도록 하고 싶었습니다. 따라서 아래와 같이 구현하였습니다. svg 파일은 다음과 같습니다. ts 파일은 다음과 같습니다. @ViewChild('myPath') myPath: ElementRef; handleClick() { console.log("handleClick!!"); } 하지만, svg 파일의 path 요소를 클릭해도 handleClick 함수가 동작하지 않았습니다. Why? 클릭 이벤트가 발생하지 않는 문제는 조건이 충족하지 않았기 때문입니다. 클릭 이벤트를 처리하기 위해서는 해당 요소..