SUIN

💡페이지를 구성하다 보면 생각보다 많은 곳에서 모달과 팝업을 구현해야 하는 경우가 생긴다. React에서 모달을 구현하기 위해서는 모달 컴포넌트를 별도로 만들어 부모 컴포넌트에서 모달 컴포넌트를 선언해주는 방식으로 사용하게 되는데, 우리는 React에서 제공되는 기능인 React Portal을 추가하여 모달을 구현해주었다. React Portal을 알아보고 우리 프로젝트에는 어떤 식으로 Portal을 추가하여 구현했는지 알아보자.React Portal란? React Portal은 React 애플리케이션에서 DOM 요소를 다른 위치의 DOM 노드로 렌더링할 수 있게 해주는 기능이다. 일반적으로 React는 컴포넌트를 해당 컴포넌트의 부모 요소 내에서 렌더링 하지만 때로는 특정 컴포넌트를 부모 요소가 아닌..

프로젝트에서는 구매자와 판매자 사이트를 구현하면서 페이지별로 접근 제한을 어떻게 설정할지에 대해 고민하게 되었습니다. 이 과정에서 다양한 방법을 시도해보았고 처음에는 기존에는 개별 페이지마다 useEffect를 사용하여 접근 제한을 구현했으나, 이번에 이를 개선하여 Protected Route 컴포넌트를 활용한 중앙 관리 방식으로 전환했습니다. 문제 의식각 구매자와 판매자의 접근 범위가 조금은 다릅니다. 예를들어 구매자는 로그인했을 경우 보여주어야하는 추가적인 페이지와 정보들이 필요하지만, 판매자의 경우 전체 서비스를 로그인된 사용자만이 접근할 수 있도록 설정해야 했습니다. 이러한 요구 사항을 충족시키기 위해 각 페이지별 로그인 유저의 접근 제한을 설정할 필요가 있었습니다.📌 유저의 접근 제한을 확인하..

widget (stateless / stateful) - stateless widget : 화면을 갱신할 필요 없이 정적인 화면을 구성할때 사용 //stless class MyWidget extends StatelessWidget { const MyWidget({super.key}); @override Widget build(BuildContext context) { return const Placeholder(); } } 위젯 분리 void main() { runApp(const MaterialApp( home: Scaffold( body: TestWidget(), ), )); } class TestWidget extends StatelessWidget { const TestWidget({super.k..

async / await / Future : 1회만 응답을 돌려받는경우 , 서버에서 응답을 받아오는경우에 사용 //Future , todo(매개변수) Future todo(int second) async{ //second 만큼 지연을 발생시킴 await Future.delayed(Duration(seconds: second)); print('Todo Done in $second seconds'); } todo(3); todo(1); todo(5); async* / yield / Stream : 지속적인 응답을 돌려받는경우 , 타이머 등 시간계산의 경우 사용 Stream todo() async* { int counter = 0; while(countern

오랜 기간은 아니지만, 회사에서의 6개월 동안 다양한 경험을 쌓은 회사에서 퇴사 결정을 하게 되었다. 작은 스타트업이었지만 새로운 기술을 두려워하지 않는 팀원들이 있어 다양한 기술을 이용해 보며 개발자로서 한 단계 성장할 수 있는 경험이었다. 12월부터 오늘까지 생각과 경험을 정리 미뤄왔던 회고를 간단하게 해보려 한다. 12월, 한 달 동안은 가족과 소중한 시간을 보내면서 회사를 다니기 전부터 해오던 스터디에 집중했으며, 수영이라는 취미생활을 가졌다. 기존에 5명이었던 스터디 팀은 어느새 3명으로 줄어들었고, 스터디 기간이 길어지면서 CS공부로 시작해 JavaScript공부로 변경되었고, 팀원 중 회사에서 JavaScript를 사용하지 않는 점을 고려하여 Dart 언어를 활용한 Flutter 프레임워크를..

모노래포를 공부하며 yarn berry를 알게 되었고, 최근 많은 기업들에서 프로젝트를 yarn berry로 마이그레이션 중이라는 내용을 보고 yarn berry에 대해 한번 알아보려 합니다. Yarn Berry 란 Yarn Berry는 Node.js를 위한 새로운 패키지 관리 시스템으로, 기존의 npm, yarn v1의 패키지 비효율적인 매니징 방법을 개선하며 빌드 시간을 단축시켜주고 개발 과정에서의 안정성을 높여줄 수 있습니다. 유령 의존성 NPM은 node_modules폴더를 이용하며 의존성을 관리하며, node_modules의 구조는 매우 큰 공간을 차지하고 있습니다. 만약 여러 패키지들이 의존하는 모듈을 전부 설치한다면 node_modules구조는 깊어지고 무거워질 수밖에 없습니다. NPM, Y..

1. vscode nvm integration 설치 현재 사용하고 있는 버전 v16.20.0(lts/gallium) 프로젝트에 사용할 버전 v18.16.0(lts/hydrogen) 2. .nvmrc 파일 생성 3. 사용할 버전 작성 lts/hydrogen or v18.16.0 4. vscode 종료 후 해당 파일 다시 열기 nvm use 18 버전으로 자동 동작 5. node 버전 확인해 보기 16 -> 18 버전으로 자동으로 버전 사용 확인 완료! 주의 ! nvm에 사용할 node 버전이 설치되어 있어야 한다!

nvm(Node Version Manager) - node 버전이 지속적으로 업데이트 되기 때문에 프로젝트 버전에 따라 프로젝트가 정상적으로 동작되지 않을 수있습니다. nvm을 사용하여 각상황에 맞게 여러 node버전을 간단하게 변경하고 사용할 수 있게 해주는 Node.js의 버전 관리자입니다. 1. Homebrew 설치하기 Homebrew The Missing Package Manager for macOS (or Linux). brew.sh /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. brew를 통해 nvm 설치하기 brew install nvm 3. nvm 디렉토리 생성..