최근 프로젝트에서 React + TypeScript로 'Graduable'이란 전산전자공학부 학생들의 학점관리와 미래 학업계획에 도움이 되는 데스크탑앱을 만들었다. 이 때 사용했던 스택이 Electron이었다. 하지만 로컬에서의 개발이 끝이 아니었다...웹앱 개발의 끝은 배포... 데스크탑앱을 만들었으면 빌드 과정 후 설치파일을 만들어서 다른 컴퓨터에서도 실행이 가능하게 해야하지 않나.우리 팀은 MacOS에서만 구동되는 데스크탑앱을 만들었는데 배포를 하며 알게된 사실을 정리하고자 한다. Electron 앱 배포의 시작.. 왜 공증이 필요한가?Electron으로 데스크탑 앱을 개발하고 나서, macOS에서 앱을 배포하려고 하면 단순히 빌드만으로 끝나지 않는다는 사실을 알게 되었다.macOS는 보안 정책이 ..

최근에 다른 개발자와 이야기를 나누다가 메모이제이션에 대해 제대로 이해하지 못한체로 사용하고 있는 것을 발견했다.그래서 그런 사람들을 위해서라도 개념을 정리해보고자 한다.🚨React19 부터는 useMemo와 useCallback을 사용하지 않아도 자동으로 리액트 컴파일러가 최적화 해준다고 한다.🚨메모이제이션이란?메모이제이션(Memoization)은 컴퓨터 프로그래밍에서 사용되는 최적화 기법 중 하나.이 기법은 함수 호출의 결과를 저장해두고, 동일한 입력이 다시 발생했을 때 함수를 재실행하는 대신 저장해둔 결과를 반환하는 방식으로 작동한다.이를 통해 동일한 계산을 반복하는 상황에서 성능을 크게 향상시킬 수 있다.React에서는 컴포넌트가 불필요하게 재렌더링되는 것을 방지하기 위해 메모이제이션 기법을 ..

OCR 기술이란?OCR(Optical Character Recognition)은 광학 문자 인식 기술로, 이미지나 스캔된 문서에서 텍스트를 추출하는 기술이다.손으로 쓴 글씨, 인쇄된 텍스트, 혹은 사진 속 텍스트를 인식하여 편집 가능한 디지털 텍스트로 변환해준다.(일상에서는 명함 스캔, 영수증 디지털화, 책이나 문서 스캔 등에 활용됨.) OCR 기술은 크게 이미지 전처리, 문자 감지, 문자 인식, 후처리의 과정으로 나뉜다고 보면 된다.이미지를 조정하고 노이즈를 제거한 후 -> 텍스트 영역을 감지하고 -> 각 문자를 인식한 다음 ->오류를 수정하는 과정을 거친다.이러한 복잡한 과정은 프로그래머가 직접 구현하기 어렵지만, 다행히 Tesseract와 같은 라이브러리가 이 과정을 단순화해주어 웹 애플리케이션에서..

React는 정확히 무엇일까?공식 문서에서는 UI 구축을 위한 JavaScript 라이브러리라고 소개하고 있지만, 주변에서는 프레임워크라고 부르는 경우도 많이 보았다.이 혼란스러운 정체성에 대해 명확하게 이해하고 싶어 라이브러리와 프레임워크의 개념부터 차근차근 정리해보기로 했다.라이브러리란?라이브러리는 개발자가 필요로 하는 기능을 모아놓은 도구 모음이며, 가장 중요한 특징은 개발자가 주도권을 가진다는 점이다.라이브러리는 개발자가 필요할 때 호출하여 사용하며, 프로그램의 흐름을 개발자가 직접 제어한다. 예를 들어, 자바스크립트의 대표적인 라이브러리인 jQuery는 DOM 조작, 이벤트 처리, 애니메이션 등의 기능을 제공하지만 그것을 언제, 어떻게 사용할지는 전적으로 개발자의 몫이다. 라이브러리의 주요 특징..

최근 프로젝트를 통해 검색 기능이 있는 웹 페이지를 개발하면서 사용자 필터링 상태를 URL에 저장하고,브라우저의 뒤로 가기를 했을 때도 이전 필터링 상태가 그대로 유지되도록 만들어야 했다.Query String이란?Query String은 URL의 끝에 위치하며 웹 페이지에 특정 데이터를 전달하는 방식이다.URL에서 '?' 뒤에 오는 부분이 Query String이며, key=value 형태로 데이터를 표현한다.여러 개의 데이터는 '&'로 구분한다. 예를 들어보자.https://example.com/search?category=books&sort=newest&page=1위 URL에서 Query String은 '?category=books&sort=newest&page=1'이며,이는 category, so..

Create React App 소개와 지원 종료 소식React는 웹 애플리케이션 개발에 사용되는 인기 있는 JavaScript 라이브러리이며,React로 새 프로젝트를 시작할 때 지금까지 필자를 포함하여 많은 개발자들이 create-react-app(이하 CRA)을 사용해왔다. CRA가 뭔지는 알고 있나?!CRA는 복잡한 설정 없이 React 개발 환경을 구축해주는 도구로,초기 설정의 번거로움 없이 바로 코드 작성을 시작할 수 있게 해주었다. 🚨하지만 최근 React 공식 팀은 CRA에 대한 지원을 종료한다고 발표했다.🚨이는 단순히 도구 하나가 사라지는 것이 아니라, React 생태계의 큰 변화를 의미한다고 생각이 든다.CRA의 한계점CRA는 간편한 시작점을 제공했지만, 현대 웹 개발에서 요구되는 여..

웹 개발을 하면서 가장 중요한 부분 중 하나가 다양한 디바이스에서 동일한 사용자 경험을 제공하는 것이라고 생각했다.특히 모바일 사용자가 많아지면서 반응형 웹 디자인의 중요성이 더욱 커졌다고 개인적으로?는 생각한다.기존에는 CSS의 미디어 쿼리를 사용해 반응형 웹을 구현했지만,React 환경에서는 더 효율적인 방법이며, 반응형 웹을 쉽게 구현할 수 있게 도와주는 'react-responsive' 라이브러리를 개념정리해보고자 한다.react-responsive란? react-responsive는 React 애플리케이션에서 반응형 디자인을 구현하기 위한 라이브러리이다.이 라이브러리는 CSS 미디어 쿼리를 React 컴포넌트 레벨에서 쉽게 적용할 수 있도록 도와준다.기본적으로 브라우저의 크기나 기기 특성에 따라..

최근에 진행한 프로젝트에서 Parallax 효과를 구현한적이 있어서 이에 대해 글로 정리해보고자 한다.Parallax 효과란?웹사이트를 구경하다 보면 스크롤을 내릴 때 여러 요소들이 각각 다른 속도로 움직이며 입체감을 주는 효과를 본 적이 있을 것이다. 이런 효과를 'Parallax(시차) 효과'라고 한다. 처음 이 효과를 웹사이트에서 보았을 때 굉장히 신기했다. Parallax 효과는 원래 비디오 게임이나 애니메이션에서 자주 사용되던 기법이다. 배경은 느리게 움직이고 전경은 빠르게 움직여서 깊이감을 만들어내는 방식이다. 이 개념은 우리 눈이 멀리 있는 물체보다 가까이 있는 물체가 더 빨리 움직이는 것처럼 인식하는 원리를 활용한 것이라고 할 수 있다! 웹 개발에서 이 효과는 주로 스크롤 이벤트와 연동하여..

Protected Routes란?웹 개발을 하면서 특정 페이지들은 로그인한 사용자만 접근할 수 있도록 제한해야 할 필요성을 느꼈다.(예를 들어, 사용자의 프로필 페이지나 설정 페이지 같은 경우)React에서는 이러한 접근 제어를 'Protected Routes'라는 개념으로 구현할 수 있다.Protected Routes는 간단히 말해서 인증된 사용자만 접근할 수 있는 라우트를 의미한다.React Router v6?!React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 표준 라이브러리다.현재 v7 버전이 나오긴 하였지만 특히 v6 버전에서는 이전 버전과 비교해 더욱 직관적이고 선언적인 방식으로 라우팅을 구현할 수 있게 되었다.아래 코드를 함께 살펴볼까?import { BrowserRo..

Footer란?최근에 외주를 하면서 Footer을 적용해보는 경험을 했다.Footer는 웹페이지의 최하단에 위치하는 영역으로, 사이트의 기본 정보와 네비게이션 링크를 포함하는 중요한 구조적 요소다.특히 회사 정보, 저작권 표시, 연락처 등 핵심적인 정보를 담고 있어 UX적으로 매우 중요한 역할을 한다는 것을 알게 되었다.Flexbox를 활용한 Footer 구현Flexbox는 요소들을 유연하게 배치할 수 있게 해주는 CSS 레이아웃 모델이다.Footer 구현에 있어 Flexbox를 사용하면서 요소들을 효과적으로 정렬하고 배치할 수 있었다..footer { display: flex; justify-content: space-between; align-items: center; backg..