개발 이야기/frontend22

• 

  내가 그동안 사용했던 디자인 패턴에 대한 고찰 서론저는 그동안 디자인 패턴에 대해 개념적으로만 알고, 몇 가지 대표적인 패턴에 대해서도 이름과 간단한 소개 정도로만 익숙했습니다. 그러던 중, 면접 과정에서 디자인 패턴에 대한 흥미를 묻는 질문을 받았고, 그 순간 제가 일하면서 사용한 패턴이 무엇인지 깊게 생각해 보지 않았다는 걸 깨달았습니다.저는 회사에서 사용했던 디자인 패턴을 MVC나 MVVM 구조라고 하며 이 둘의 개념에 대해 설명할 수는 있었지만, 실제로 디자인 패턴을 어떻게 적용했는지에 대해선 명확하게 말하진 못했습니다. 결과적으로 그 면접은 탈락했답니다. 집에 돌아와 면접에서 받은 질문들을 돌이켜보며, 제가 실무에서 적용한 것들이 어떤 디자인 패턴에 해당하는지, 그리고 그 패턴들이 어떤 문제를 해결하기 위해 어떻게 사용됐는지를 더 깊이 고민.. 개발 이야기/frontend 2024. 10. 8.

• 

  React Portals와 Refs 사용법: 모달 컴포넌트 최적화하기 React 프로젝트에서 모달 컴포넌트를 구현할 때, UI의 구조를 더 깔끔하게 유지하고 접근성을 높이기 위해 React Portals와 Refs를 활용하는 방법을 알아보겠습니다. 이번 글에서는 강좌에서 소개된 코드를 바탕으로 이 두 가지 기능을 효과적으로 사용하는 방법을 설명합니다.   1. React Portals의 필요성 React에서 모달을 구현할 때, 모달 컴포넌트가 다른 요소들 위에 시각적으로 떠 있도록 설정하는 경우가 많습니다. 일반적으로 모달 컴포넌트는 div 태그 안에 중첩되어 출력됩니다.  하지만 이렇게 되면 스타일 문제나 접근성 문제를 초래할 수 있습니다. 이때 React Portals를 사용하면 모달을 실제 DOM의 더 상위 레벨, 예를 들어 body 바로 아래에 렌더링할 수 있습니다.. 개발 이야기/frontend 2024. 9. 13.

• 

  MVVM 프레임워크, Flux, Redux 제대로 이해하기 리액트 애플리케이션에서 효율적인 상태 관리를 위해서는 다양한 패턴과 아키텍처를 이해하는 것이 중요합니다. 이번 글에서는 MVVM, Flux, Redux 패턴을 비교하고, 각각의 특징과 활용법을 알아봅니다.       MVVM 프레임워크란 무엇일까?MVVM(Model-View-ViewModel) 프레임워크는 소프트웨어 개발에서 UI(User Interface)와 로직을 분리하기 위해 사용되는 아키텍처 패턴 중 하나입니다. MVVM은 특히 WPF(Windows Presentation Foundation), Xamarin, 그리고 최근에는 프론트엔드 웹 개발에서 많이 사용됩니다.  MVVM 패턴은 다음과 같은 세 가지 주요 구성 요소로 나뉩니다.  1. Model 애플리케이션의 데이터와 비즈니스 로직을 다룹니.. 개발 이야기/frontend 2024. 8. 30.

• 

  자바스크립트는 싱글 스레드 언어다 - 비동기 처리 방식과 Web API 어제 콜스택에 대한 포스팅에 이어, 오늘은 자바스크립트가 Web Api를 처리하는 방식을 통해 왜 싱글 스레드 언어라고 불리고 자바스크립트가 비동기 작업을 어떻게 처리하는지 알아보겠습니다.   이에 앞서 콜스택을 시각화해서 보여주는 사이트에서 Web Api 동작 방식을 이해할 수 있는 예시 코드가 담긴 사이트를 공유드립니다. 해당 코드는 유데미 인기강의인 The Web Developer 부트캠프 2024 를 참고했습니다.   Web Api 동작 보러가기        위 사이트에 들어가면 간단한 코드가 있을텐데요. save+run 버튼을 누르면 자동으로 실행됩니다. 중간에 pause를 눌러 잠시 멈출 수 있고, resume을 눌러 코드를 재개할 수도 있습니다.이 때 중요한 것은 저 setTimeOut 함수.. 개발 이야기/frontend 2024. 8. 28.

• 

  자바스크립트 콜스택 쌓이는 순서 확인하는 방법 자바스크립트를 잘 이해하기 위해선 콜스택이 쌓이는 방식을 눈으로 직접 확인해보는 것이 좋습니다.콜스택이 쌓이는 순서를 확인하기 위한 두 방법을 먼저 소개해 드리겠습니다.   loupe 사이트 이용하기 아래는 콜스택을 시각화된 자료로 보여주는 loupe라는 사이트입니다.       아래 링크에서 콜스택을 시각화된 자료로 확인할 수 있습니다.  콜스택 시각화 예시 바로가기    개발자도구 snippet 활용하기위 사이트 말고도, 크롬 개발자도구의 상단 탭에 있는 Sources탭에 snippets를 추가하여 콜스택을 확인할 수도 있습니다.    snippet에서 콜스택을 확인하는 순서는 아래와 같습니다.  1. snippets 탭에서 new snippet 추가2. 중앙 탭에서 콜스택을 확인할 코드 작성3. .. 개발 이야기/frontend 2024. 8. 27.

• 

  일렉트론 package.json 설정 및 외부에서 접근 가능하도록 빌드하기 이번 포스팅에서는 일렉트론 애플리케이션의 package.json을 설정하는 방법과, 외부에서 접근 가능한 파일을 빌드하는 방법을 다뤄보겠습니다.    우선 제가 자주 사용하는 electron.js 의 package.json파일 구성은 대체로 아래와 같습니다. { "name": "myappphone", "productName": "My Appphone", "version": "1.0.0", "description": "My Appphone Application", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-builder build --win --ia32" }, "build": { "productName": "My.. 개발 이야기/frontend 2024. 8. 22.

• 

  let과 const 심화 개념 - const의 참조 고정과 var를 요즘 안쓰는 이유 JavaScript의 let과 const는 ES6에서 도입된, 기존의 var 키워드에 비해 몇가지 개선된 개념입니다. 오늘은 const의 참조 고정 개념과 var 사용이 지양되는 이유에 대해 자세히 알아보겠습니다.     const의 참조 고정const는 상수를 선언하는 데 사용되며, 변수를 선언할 때 초기화해야 하고, 이후에는 재할당이 불가능합니다. 여기까진 많이들 알고 계셨지만, 자바스크립트 변수와 관련된 심화 개념을 익히기 위해서는 const의 참조 고정이라는 개념을 이해하는 것이 중요합니다.   참조와 메모리JavaScript에서 객체, 배열, 함수와 같은 복합 데이터 타입은 변수에 참조(Reference)로 저장됩니다. 이는 변수가 실제 데이터가 저장된 메모리 주소를 가리킨다는 것을 의미합니다... 개발 이야기/frontend 2024. 8. 12.

• 

  Electron에서 React의 특정 페이지를 로드하는 방법 오늘은 제가 electron.js와 react를 연동하는 어플리케이션을 만들면서 여러번 삽질했던 내용 중 하나인, react의 특정 페이지를 electron.js내에서 불러온 뒤 팝업시키는 방법에 대해 포스팅 해보겠습니다. 아래서도 언급하겠지만 hash router를 사용하는 것이 핵심입니다.    electron.js와 react를 연동하는 초기 세팅 방법에 대해서는 아래 링크를 참조하세요. electron.js와 react 연동하기  이후 나올 내용은 리액트와 Electron.js를 사용하여 특정 페이지를 팝업으로 띄우는 방법입니다.    1. React Router 설정우선 저희는 리액트에서 HashRouter를 사용해야 합니다.리액트에서 라우트를 설정할 때 HashRouter를 사용하여 다음과 같.. 개발 이야기/frontend 2024. 8. 6.

• 

  리액트에서 커스텀 훅을 사용해야 하는 이유 오늘은 리액트 공식문서의 커스텀 훅과 관련된 내용을 자세히 다루어보려고 합니다. 커스텀 훅을 통해 필요한 로직을 재사용하고 코드를 보다 효율적으로 구현할 수 있습니다. 해당 내용에 대해 더 깊이있게 알아보고 싶으신 분들은 아래 리액트 공식문서의 custom hook 부분을 참고해보세요. Reusing Logic with Custom Hooks – React The library for web and native user interfaces react.dev 기본 훅 (useState, useEffect 등)과 커스텀 훅의 차이점 React의 기본 훅은 useState, useEffect, useContext와 같이 React 라이브러리에 내장되어 있는 함수들로, 상태 관리, 라이프 사이클 이벤트 처리, .. 개발 이야기/frontend 2024. 4. 19.

• 

  React 에서 index.html에 스크립트 태그가 없는 이유 React 애플리케이션은 기존 자바스크립트와 다른 독특한 구조로 이루어져 있습니다. 이는 react-app 내의 index.html파일의 구조를 보면 알 수 있습니다. React 애플리케이션의 기본 구조 index.html의 역할과 구성 React 프로젝트에서 index.html은 애플리케이션의 진입점입니다. 이 파일은 매우 간단하게 유지되며, 주로 단일 div 태그를 사용합니다. 이 index.html은 리액트가 동적으로 모든 UI 컴포넌트를 렌더링하는 장소예요. 파일의 나머지 부분은 기본적으로 비어 있으며, 리액트 및 기타 자바스크립트 파일은 빌드 과정을 거쳐 이 곳에서 결합합니다. React 애플리케이션에서 HTML 파일의 사용 방식 전통적인 웹 애플리케이션과는 달리, 리액트의 html 파일은 주로.. 개발 이야기/frontend 2024. 4. 18.