Projects (13) 썸네일형 리스트형 Recoil & Custom Hook & styled-components를 활용한 전역 모달 구현 1. 서론 Modal이란, 주 창에 종속된 그래픽 인터페이스이다. 보통 사용자의 입력에 따른 피드백, 오류, 안내 등을 나타내기 위한 목적으로 사용한다. 이번에 진행하는 프로젝트에서도 이런 목적의 모달들이 기획이 되었다. 설계 단계부터 내가 맡아서 만들게 되었으므로 구조부터 잡아가야했다. 어떻게 구현할지? 구현할 서비스에서 모달은 사용자의 입력에 따른 피드백, 오류, 안내 등을 나타내기 위한 목적으로 사용될 것 이외에도 사용자의 입력을 받는 모달도 구현되어야 함 구현할 모달을 카테고리화 Alert Modal: 사용자에게 오류/안내를 나타내는 모달, Template화 필요 Custom Modal: 특정 페이지에서만 독립적으로 사용될 모달, Template화 필요 없음 why? Alert Modal은 페이지.. styled-components를 활용한 전역 스타일링과 테마 서론 현재 근무하고 있는 회사의 프론트엔드 소스코드에서 스타일링은 대부분 SCSS로 정의되어 있다. 이는 과거 퍼블리셔가 있던 흔적으로, 퍼블리셔가 마크다운과 스타일링을 하여 프론트엔드에게 넘겨주고 이를 받아 마크다운은 React JSX로 마이그레이션하고 SCSS로 스타일링을 하였다고 들었다. 하지만, 퍼블리셔가 없고 프론트 엔지니어만 있는 현재, 이 방식은 대단히 불편하다. React에서 컴포넌트 정의와 스타일링을 JS와 SCSS를 오가며 해야하는 것이 비효율적이라고 생각하기 때문이다. 또, 컴포넌트 스코프에만 스타일 시트를 적용하기 위해 classnames라는 라이브리를 사용해야 하는데 아래와 같이 보일러 플레이트가 많이 발생하는 것도 좋지 않았다. import classnames from 'clas.. Suspense & ErrorBoundary 서론 기존의 리액트 소스코드를 다루면서, 로딩처리와 에러처리는 많이 하게 되는 일들이다. 로딩 처리는 API를 호출하고 그 응답을 기다리는 동안 사용자에게 로딩 화면을 보여주는 처리이다. UX 측면에서 있어야하는 것이고 동시에 불러오지 않은 데이터에 접근함으로 발생하는 에러또한 막을 수 있다. 에러처리는 async를 사용한다면 보통 try, catch문을 사용하고 Promise Chaining을 사용한다면 catch 메서드를 사용하여 다루게 된다. 분명 에러를 방지하여 런타임 자체가 죽어버리는 문제는 막을 수 있지만 문법 특성상 반복적으로 사용할 수밖에 없다. 특히 프로젝트에서 API 호출이 많아질수록 에러처리에 대한 보일러플레이트가 그에 비례하여 늘어난다. React에서는 이 두 처리를 선언적으로 할 .. Router 서론 이전에는 기본적인 구조와 디자인 패턴을 정하였다. 그 다음으로는 소스코드 전반에 걸쳐 사용될 Router 구성 전략을 세우고 실제로 어떻게 적용할 것인지 예시를 들어볼 것이다. 1. Router 구성 전략 사용할 패키지는 react-router-dom 패키지를 사용 v6이 나왔다. Major 버전 업데이트라서 여러가지 변화한 부분들이 많은데, 추후 개발을 위해서라도 처음부터 v6를 쓰는 것이 유지, 보수 측면에서 좋을 것 같다고 생각하였다. 배우는 데 약간의 시간이 걸리더라도 그 비용이 그리 크지 않았고 당장의 도입을 위해 v5를 도입하면 기술부채가 생겨버리는 것이기 때문이었다. 또 Switch가 Routes로 바뀌고 exact가 없어지는 등 더 직관적이고 사용하기 편리해졌다는 생각이 들었다. 로딩.. 디자인패턴 0. 서론 최근 6월부터 회사에서 새로운 프로젝트를 담당하게 되었다. 많은 경험을 할 수 있는 기회를 가지게 되어 정말 기뻤고 좋은 결과를 내기 위해서 최선을 다 하고 있는 중이다. 그 고군분투를 틈틈이 정리해서 공유해보고자 한다. 1. 기존 소스코드의 문제점 다루고있는 Repository 중에서 메인 앱 소스코드는 마치 역사책과 같다. 여러 사람들을 거쳐오며, 수많은 흔적들이 남아있기 때문이다. 특히나, 디자인패턴은 일관성 없이 3가지가 혼재하고 있다. 이는 개발 생산성을 대단히 낮추고 많은 치명적인 오류들을 일으켰다. 그래서 새로 구현할 소스코드에는 이러한 메인 앱 소스코드에서 발생했던 문제들을 방지하고 서비스에 걸맞은 디자인패턴을 도입하기로 하였다. 또 추후에는 메인 앱 소스코드에도 적용할 수 있을.. AWS Amplify(1) 1. AWS Apmplify란? AWS에서 제공하는 CI/CD 및 호스팅 서비스 CI/CD란? 개발 → 배포까지의 과정 자동화 CI : Continuous Integration 지속적 통합 새로 추가한 코드가 성공적으로 배포 브랜치의 프로젝트 코드에 통합되도록 자동화하는 것 CD : Continuous Delivery & Continuous Deployment 통합된 코드가 유저에게 바로 제공되도록 배포 과정을 자동화 2. 도입하는 이유 기존 배포 방식의 비효율성 코드 변경 → 빌드 → 빌드한 파일을 S3에 직접 배포 git과 브랜치와의 연동성 메인 브랜치에 병합 하기 전 PR에서의 새 환경을 생성하여 평가 가능 3. Amplify 셋팅 💡 기존 소스코드가 Gihub에서 관리되고 있으므로, Github .. 외출난이도 weather_level 😊사이트 링크 🎬 유튜브 링크 📁 백엔드 Repositroy 링크 📕팀 노션 weather_level 프로젝트의 프론트 엔드 Repository 입니다. 개요 명칭 : weather level (외출 난이도) 개발 인원 : 6명 Front end: 전재민, 조윤경 Back end: 채수연, 강상연, 김동현 Designer: 공은지 개발 기간 : 2021.04.23 ~ 주요 기능 사용자의 선호도를 토대로 알고리즘을 통해 날씨 점수 출력 날씨 정보 큐레이팅 개발 언어 : JavaScript 개발 라이브러리 : React.js 형상 관리 툴 : git 협업 툴 : notion, 구글 스프레드 시트, 구글 드라이브 간단 소개 : 리액트 - 스프링 협업의 날씨 정보 제공 서비스 프로젝트 .. gaemangtalk 😊사이트 링크 - 현재 서버를 내렸습니다. 아래 유튜브를 참고하세요! 🎬 유튜브 링크 📁 백엔드 Repositroy 링크 gaemangtalk 프로젝트의 프론트 엔드 Repositroy 입니다. 개요 명칭 : gaemangtalk 개발 인원 : 4명 기발 기간 : 2021.04.16 ~ 2021.04.22 주요 기능 : 소셜 로그인, 채팅 개발 언어 : JavaScript 개발 라이브러리 : React.js 형상 관리 툴 : git 협업 툴 : Slack,notion 간단 소개 : 리액트 - 스프링 협업의 웹소켓 기반 채팅 프로젝트 프로젝트 특징 개.망.톡! 개발자 지망생을 위한 톡 프론트엔드와 백엔드를 분리하여 프로젝트 개발 각 파트별로 Repository를 생성 후 작업 프론트: AWS S3 백엔드:.. 이전 1 2 다음
