프론트엔드 개발자 엄성준

오늘 React Context를 톺아보려는 이유는 많은 기업에서 React를 사용하면서 Props 전달이 필요한 상황에서 Context를 적극 활용하고 있다는 생각이 들어서입니다.이 글에서는 공식 문서(React v18.3.1)를 참고해 Context의 개념과 사용법을 정리해 보려고 합니다.https://ko.react.dev/learn/passing-data-deeply-with-context Context를 사용해 데이터를 깊게 전달하기 – ReactThe library for web and native user interfacesko.react.dev React Context는 왜 등장했을까요? React를 사용해 본 사람이라면 부모 컴포넌트에서 자식 컴포넌트로 Props를 전달하는 과정을 경험해 ..

WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.현재 블로그의 콘텐츠는 WiniLogis 관리자 사이트를 통해 관리되지만, 단순 텍스트만 입력할 수 있다는 문제가 있어 다른 플랫폼에서 운영하는 블로그에 비해 가독성이 떨어지는 문제가 있었습니다. WiniLogis 관리자의 블로그 글 작성 시 가독성 문제를 해결하기 위해, 텍스트 에디터를 도입하여 글을 편집할 수 있도록 개선한 방법에 대해 작성하려고 합니다.먼저 React 프로젝트와 잘 어울리는 텍스트 에디터를 찾기 위해 여러 정보를 조사했습니다. 아래 글을 통해 다양한 텍스트 에디터의 종류를 확인하고, 각 에디터의 장단점을 비교하여 최종적으로 적용할 에디터를 결정했습니다.https://code-b.dev/bl..

웹 브라우저 접속 시 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분을 통해 분기처리를 해야 하는 로직을 작성해야 했습니다. const navInfo = performance.getEntriesByType( "navigation" )[0] as PerformanceNavigationTiming; console.log(navInfo); console.log(navInfo.type);먼저 navInfo의 console.log입니다.navInfo 데이터에서 제가 사용한 값은 type 속성입니다.type은 아래와 같은 규칙을 따릅니다.링크이동: navigate뒤로 가기: back_forward새로고침: reload이 정보를 활용해서 분기처리할 생각입니다.

먼저 기획서에서 모바일 화면일 때 3줄 이상의 문장일 경우 Read more 버튼이 보이게 해 달라는 요청이었습니다.저는 이 요구사항을 충족시키기 위해 모바일일 경우 특정 길이 이상일 때 Read more 버튼이 보이게 직접 구현했었습니다.하지만 이때 문제점은 영어와 한글이 섞여있거나 A, b와 같이 문자열의 너비 차이 등등 여러 가지 문제 점이 등장했습니다. 이 문제를 해결하기 위해 구글 검색을 정말 많이 했었는데 딱히 마음에 드는 해결방법을 찾지 못하던 중이었습니다. 하지만 계속된 노력 끝에 WiniLogis에서 사용 중인 기술스택에 적합한 라이브러리를 찾게 되었습니다.https://www.npmjs.com/package/react-show-more-text react-show-more-textThe..

오늘 회사에서 차량의 도막을 입력받는 input의 validation을 검증하던 도중 조건이 아래와 같았습니다. - 자릿수(length)는 5이하 - e(지수), 문자,. 금지 위의 조건들을 충족하기 위해서 input type number를 vailidation 하는 건 까다롭다고 생각이 들어서 input type을 text로 지정한 뒤 문자열의 최대 길이는 maxLength 효과를 이용했고 다른 조건들은 정규식을 이용했습니다. 회사에서는 jsp + vue.js를 이용해서 구현했지만 회사 코드를 공개할 수 없어서 집에서 리액트를 이용해서 혼자 복습해 보았습니다. import React, { useState } from "react"; const YourComponent = () => { const [in..

ScrollToTop.tsx 생성 import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const ScrollToTop = () => { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }; export default ScrollToTop; 이후 main.tsx 즉 최상위 component에서 페이지 component들을 감싸게 삽입하면 완료 import ScrollToTop from './shared/ScrollToTop'; ReactDOM.createRoot(docum..

우리 팀의 프로젝트는 Front는 React -- ts를 통해서 구성하고 Back은 Spring boot를 통해서 구상하기로 하였다. Back-end 분들은 작업 Tool로 Intellij를 이용하시고 Front는 VScode를 이용하기로 하였다. 먼저 Project를 구축하기 위해 https://start.spring.io/ 접속하였다. 예전에 김영한 선생님 강의를 볼 때 제외하고 처음이었다. Group명을 제외하고 나머지는 이렇게 작성한 듯싶다. 그 후 GENERATE를 통해서 파일을 내려받았다. 그 후 아래의 링크의 내용을 적어주신 분의 글을 참고하여서 개발환경을 구축하였는데 https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99..