나의 기록생활

실무에서 이전 코드 중 react-router-dom의 useLocation을 이용하여 location.state에 데이터를 담아 이동할 페이지에 데이터를 보내는 방식이 있다는 것을 알았다. 이 방법을 보며 든 생각은 이렇다.장점:1. 데이터를 URL등에 보이지 않게 전달할 수 있다.2. 부가적인 라이브러리 사용 없이 가볍게 활용할 수 있다.단점: 1. Query Parameter를 이용하는 것 처럼 데이터가 전달되지 않을 때의 처리가 필요하다(필수 데이터에 대해서는 사용성이 좋지않다) 이 기회에 페이지를 이동할 때 데이터를 전달하는 방법이 어떤것이 있는지 더 정리해보려고 한다.1. useNavigate와 Link를 사용한 location.state 데이터 전달의 장점보안성: URL에 데이터를 노출하지 ..

1. brew로 watchman 설치 brew upgradebrew install watchman 2. watchman 설치 경로 확인 및 Disk Access 권한 추가which watchman 2-1. System Settings - Privacy & Security - Full Disk Access에서 Terminal(iTerm) 추가2-2. +버튼을 눌러 Shift + Command + G 를 눌러 brew bin 경로로 이동하여 watchman 추가 3. expo 프로젝트 생성npx create-expo-app@latest4. 프로젝트 web으로 실행npm run web Error: The watchman connection was closed at Client.cancelCommands에러 발..

고백하자면, NextJS 환경에서 frontend 개발을 하고 있지만 React 라이브러리만을 사용할 때와 차이점을 명확하게 인지하고 있지 않고 있었다. 그 예로 페이지 이동 시 `window.location.href` 구문을 사용한다든지, 페이지 리로드 시 `window.location.reload()`구문을 사용하는 등이 그러하다. 요즘 다시 UI 개발을 하고 있는데 HTML의 ``태그와 NextJS에서 제공하는 `` 태그가 혼동되어 정리해본다. 태그웹 페이지에서 하이퍼링크를 생성하는 데 사용되며, 검색 엔진 최적화 (SEO) 측면에서 아래와 같은 장점이 있다 크롤링과 인덱싱: 검색 엔진은 웹 페이지를 크롤링하여 색인화하는 프로세스를 수행하는데, `` 태그를 사용하여 하이퍼링크를 정의하면 검색 엔진이..

실무에서 아직 상태 관리 라이브러리를 사용해본 경험이 없는데 곧 그 중 하나인 Recoil을 도입할 예정이다. 간단히 알아본 결과 많은 곳에서 사용하는 Redux에 비해 사용성이 굉장히 손쉬운것 같다는 느낌을 받았다. 라이브러리 도입의 시작이자 핵심인 도입방법을 정리해보려고 한다.1. 설치npm install recoil2. Recoil Root 설정import React from 'react';import { RecoilRoot } from 'recoil';const App = () => { return ( );}3. atom 설정const textState = atom({ key: 'textState', // ID를 key로 지정 default: '', // defau..

React에서 환경변수를 사용할 때 .env 파일에 환경변수를 등록하면 process.env.xxx로 사용할 수 있고,NextJS에서는 nextconfig.js에 추가적인 선언을 통해 사용할 수 있다고 알고있었는데 NEXT_PUBLIC 이라는 prefix를 붙이는 것으로nextconfig.js에 추가적인 선언 없이 환경변수를 사용할 수 있다는 것을 알게되었다. 또한 Vite를 이용한 React 프로젝트에서도 동일하게 VITE_로 시작하는 이름으로 환경변수를 만들면 별 다른 셋팅 없이 사용할 수 있다.

Type Safety 기능이란?Next.js는 TypeScript와의 통합을 지원하면서, 코드에서 타입 안전성을 유지하고 개발자가 실수를 방지하는 기능을 제공한다.Type Safety의 주요 기능TypeScript 지원: Next.js는 기본적으로 TypeScript를 지원하며, TypeScript로 작성된 페이지 및 컴포넌트 파일을 인식한다. 이를 통해 코드의 타입 체크가 이루어지며, 개발자는 더 안전하게 코드를 작성할 수 있다.TypeScript 컴파일러 통합: TypeScript를 사용하면 코드를 컴파일할 때 타입 체크가 자동으로 이루어진다. 따라서 개발자가 코드를 작성하면서 실시간으로 타입 오류를 확인할 수 있다.자동 생성된 TypeScript 정의: Next.js는 .js 확장자를 사용한 파일도..

Typescript를 사용하면서 React 프로젝트를 새로 시작하면 react 를 import하지 않으면 아래와 같은 오류가 발생할 때가 있다.React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.이때 tsconfig.json 파일을 생성하여 아래와같이 저장하면 해결된다.{ "compilerOptions": { "jsx": "react-jsx" // React 17 이상에서 필요한 설정 }}  위와 같은 문제가 발생한 이유UMD(Global) 환경이나 17 이전의 React 버전에서는 React를 명시적으로 import해야 한다. UMD는 과거의 브라우저 및 ..

NextJS에서의 Link태그와 a태그의 차이에 대해서 이전에 정리한 바 있는데, 실제로 테스트하여 빌드 이후 Link 태그와 a태그에 차이가 있는지 있다면 어떤 차이가 있는지 정리해본다. Internal linkSEO: 동일HTML:동일External linkSEO:동일HTML:동일테스트해 본 결과 빌드 이후의 차이점은 없었고, 단순한 테스트용 페이지이기 때문에 Link태그를 사용해서 얻는 이점은 확인하기 어려웠다. 앞으로는 Link 태그를 위주로 사용해야겠다.

실무 중 관리자 기능으로 font 지정과 ul태그의 특정 marker를 추가하는 기능을 구현하게 되었다. document 객체의 getSelection 함수를 사용해야하나 싶었지만 textarea의 ref 객체에 관련 기능이 있었다.import React, { useState, useRef } from "react";const MyComponent = () => { const [text, setText] = useState(""); const textareaRef = useRef(null); const PREFIX_BOLD_FONT = ``; const SUFFIX_BOLD_FONT = `` const addFont = () => { const textarea = ..

실무에서 모든 JS파일이 Typescript로 마이그레이션 된 상태는 아닌데이 와중에 forwardRef를 사용하는 JS 컴포넌트와 부모 TSX컴포넌트 사이에서 타입에러가 발생하였다.JSDoc을 사용하여 자식 JS파일에 적용하여 타입에러를 해결했는데 이를 정리해본다. 부모 컴포넌트에서 정의한 Ref를 자식 컴포넌트로 전달할 때 사용하는 기능import React, { forwardRef, useEffect } from 'react';const ChildComponent = forwardRef((props, ref) => { useEffect(() => { if (ref.current) { ref.current.focus(); } }, [ref]); return ( );}..