개발 이야기36

• 

  내가 그동안 사용했던 디자인 패턴에 대한 고찰 서론저는 그동안 디자인 패턴에 대해 개념적으로만 알고, 몇 가지 대표적인 패턴에 대해서도 이름과 간단한 소개 정도로만 익숙했습니다. 그러던 중, 면접 과정에서 디자인 패턴에 대한 흥미를 묻는 질문을 받았고, 그 순간 제가 일하면서 사용한 패턴이 무엇인지 깊게 생각해 보지 않았다는 걸 깨달았습니다.저는 회사에서 사용했던 디자인 패턴을 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.

• 

  리액트 프로젝트를 위한 koyeb 백엔드 배포 세팅법 리액트로 채팅앱을 만드려다가, 백엔드 구성에 너무 힘을 주고 싶지는 않기도 하고 AWS로 배포하기에 부담이 되어 알아보던 중 많은 분들이 Koyeb을 사용하는 것을 알고 백엔드를 이에 맞춰 구성하기로 했습니다.    배포 서비스를 Koyeb으로 설정한 이유는 간편하게 백엔드 서비스를 배포하고 관리할 수 있으며, 무료로 사용할 수 있어 비용 부담이 없기 때문입니다. 또한, GitHub 연동을 통해 코드 변경 시 자동으로 빌드 및 배포가 가능해 효율적인 개발 환경을 지원합니다. 오늘은 koyeb으로 백엔드를 초기 세팅하고 간단하게 배포하는 방법에 대해 포스팅 해보겠습니다. 이에 앞서 프론트엔드와 백엔드를 어떻게 구성했는지 알려드릴게요.       프로젝트 구성제 프로젝트는 React로 만든 프론트엔드와 No.. 개발 이야기/backend 2024. 9. 9.

• 

  알고리즘 왕초보의 [자바스크립트 알고리즘 문제풀이 입문] 강의 수강 후기 안녕하세요. 오늘은 제가 알고리즘 2단계 시작도 못했던 상태에서 지푸라기라도 잡는 심정으로 들었던 '자바스크립트 알고리즘 문제풀이 입문'이라는 강의를 완강 후 후기를 알려드리고자 합니다.  포스팅에 앞서 제가 들었던 강의는 아래와 같습니다.인프런에서 제공하는, 김태원 강사님의 강의입니다.    https://www.inflearn.com/course/     수업 방식해당 강의는 총 95개의 강좌로 되어있습니다. 해당 강의를 듣기에 앞서 아래와 같이 공부하기를 요하고 있습니다.        즉 영상을 시청하기 전, 미리 문제를 최대한 풀고 듣기를 권장하고 있습니다.(아래서도 언급하겠지만 저는 이렇게 하지는 않았습니다)동영상 1개마다 '개념설명-해답' 구조로 되어있습니다.   강사님은 각 문제가 어떤 알고.. 개발 이야기/알아두면 유용한 것들 2024. 9. 3.

• 

  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.