본문 바로가기

프로젝트

[운영] 취약점 문제 해결 규모가 큰 프로젝트의 운영을 진행할 때는 여러 까다로운 절차를 주기적 거쳐야 한다. 특히 취약점을 체크할 때는 모의 해킹을 통해 취약점을 체크하고 결과 보고서를 보내준다. 안타깝게도 구축단계에서 놓친 몇 가지 문제로 인해 취약점들이 발견되었고, 내가 운영하는 웹 쪽에는 메모리 내 중요정보 노출이라는 좀 크리티컬한 취약점이 발견되었다. 이 문제는 구축단계에서 미처 다 챙기지 못한 부분으로 보였다. 발견된 문제를 간단히 설명하면 앱의 메모리 덤프를 시도했을 때 개인정보의 일부가 평문으로 노출되는 문제였다. 그래서 다시 소스를 확인해 보니 몇 가지 문제점들이 내 눈에 들어왔다. 먼저, 전역 상태관리 툴을 사용했던 문제이다. 내가 담당하는 소스는 React의 Recoil로 전역상태를 관리하는데, 이 Recoil.. 더보기
반응형 웹페이지 만들기 이번에 학습했던 styled-components를 실습하기 위해서 오픈소스 figma를 구해서 정적 웹페이지를 구현했다. 물론 기능은 아직 생략되어 있고, 단순히 뷰만 보이는 목업 상태이다. 내가 진행하면서 조금 골치아팠던 것이 레이아웃 관련된 문제였다. 페이지를 줄이고 늘리는 것에 대한 적절한 사이즈가 필요했기 때문이다. 그래서 나는 반응형 웹페이지를 한번 구현해보기로 했고, 간단히 styled-components의 global style에 미디어 쿼리를 사용했다. 반응형 웹페이지의 개념은 https://velog.io/@pyo-sh/React-Responsive 블로그를 참조했다. 감사드린다. 해당 구현 코드와 간단한 결과에 대한 화면은 https://github.com/seonghyeon-Chi/w.. 더보기
[운영] lazy와 suspense를 활용한 렌더링 속도 최적화 현재 유니티 웹뷰를 통해 보이는 React로 개발한 웹페이지를 운영하고 있다. 나는 SI 때는 초급 레벨로 이 웹 개발에 참여했었다. 주로 UI 쪽 컴포넌트의 제작이나 API 연동과 같은 세부적 개발에 참여했었고, 전체적인 그림은 고급 개발자분이 도맡아 해 주셨다. 그런데, 프로젝트가 후반으로 가면서 여러 많은 문제로 인해서 아주 급하게 프로젝트가 마무리되었다. 그리고 내가 이 프로젝트의 SM으로 즉, 운영을 담당하면서 천천히 앱의 버그나 수정사항을 수정하고 있다. 물론 급하게 마무리되면서 구축단계에서 요건에 있음에도 불구하고 완성되지 못한 Open API건에 대한 연동이나 마케팅 정책에 변경 사항 적용등을 개발하기도 한다. 이렇게 내가 운영을 하는 중에 느낀 불편함을 개선했던 경험을 소개하고자 한다. .. 더보기
모바일 학생증 프로젝트 회고 서울시 프로젝트를 끝내고 곧장 4대 은행 중 하나의 은행 프로젝트에 투입됐다. 대략 11월 말부터 3월 초까지 수행했다. 간략히 프로젝트를 소개하면 해당 은행의 계좌와 카드를 가진 대학생 고객을 대상으로 3D 메타버스 콘텐츠와 해당 대학들의 주요 정보 안내 그리고 NFT를 활용한 서류 발급 기능 등을 포함한 모바일 학생증 앱이다. 여기서 나는 React를 사용하여 네이티브 앱과 통신하는 웹화면을 개발했다. 화면은 모바일 기준인 반응형 웹을 채택했다. 개발에 사용한 언어는 Typescript이고, 주로 사용한 스택은 전역상태관리를 위한 Recoil과 스타일을 위한 css in js 툴인 styled-components를 사용했다. 사실 많은 스트레스를 받고 고생을 많이 했는데, 경험이 부족한 상황에 많이 .. 더보기
[개인 프로젝트] Agora 이번에 진행한 소규모 프로젝트는 agora를 통한 화상통화 구현이다. 사실 이 agora는 내가 구직 중에 봤던 공고들 중 하나에서 요구하는 스택이다. 그 내용을 보자마자 궁금해서 내용을 찾아봤고, 재밌어 보여 그냥 간단히 화상통화를 만들어보는 정도만 구현해보았다. 차차 사용자 기능이나 디테일한 프론트엔드를 넣어볼 계획도 있다. 현재까지 구현된 코드는 https://github.com/seonghyeon-Chi/agora-test에 있다. 내가 구현을 위해 참고한 레퍼런스는 https://medium.com/agora-io/building-a-token-server-for-agora-applications-using-node-js-15f9445c3e89 와 https://docs.agora.io/en/l.. 더보기
[개인 프로젝트] Cafe 이번에 취업을 준비하면서 개발하게 된 프로젝트이다. 간단히 커피들을 골라 장바구니에 담고 그것을 주문하고 결제하는 서비스이다. 기본적으로 클라이언트 부분은 이전에 했던 퍼스트 프로젝트의 MovieBox의 디자인을 카피하고 약간의 수정을 한 뒤 사용했다. 서버는 Node.js와 JavaScript, Express, Sequelize를 기반으로 구성했으며, 사용한 DB는 MySQL이다. 자세한 코드는 https://github.com/seonghyeon-Chi/cafe에서 확인할 수 있다. 설계 구조 1. 폴더 구조 2. Schema 3. API 문서 -API 문서: https://jiji6027.gitbook.io/cafe-api 간단한 코드 설명 기본적으로 MVC를 채용했다. 모델의 경우 user, it.. 더보기
[프로젝트] TDquest 나의 기능 구현 Express 서버 개발 TypeORM + MySQL로 DB와 컨트롤러 개발 (로그인, 로그아웃, 회원가입, 각 게임 관련 기능 컨트롤러 등) Token기반 인증 구현 프로젝트 소개 상세 프로젝트 소개 프로젝트 회고 먼저 진행했던 프로젝트 때 팀장 역할과 풀 스택을 맡아서 했었다. 그러다 보니 개인적으로 생각했던 아쉬웠던 점이 좀 더 깊게 한 부분에 집중해서 개발해보지 못했다는 점이다. 특히 나는 백엔드 개발자를 선호하고 있다 보니 더더욱 그랬다. 그래서 이번에는 팀원도 5명에다 다른 분께서 팀장 역할을 하겠다 지원해주셔서 나는 백엔드 파트를 맡게 됐다. 초기에 프로젝트를 계획하는 회의에서 TypeScript를 도입해보자는 의견이 제시됐다. 나와 함께 백엔드를 맡은 팀원과 회의를 했고, .. 더보기
[프로젝트] MovieBox 개발 계획과 내용 https://github.com/seonghyeon-Chi/MovieBox 나의 구현 내용 React를 사용하여 웹 클라이언트 구현 (회원가입, 로그인, 로그아웃, 검색, 정렬, 외부API연동, 이미지업로드 등) Node.js와 Express를 사용하여 서버 구현 (JWT인증, express-router) Sequelize와 MySql을 사용하여 DB와 컨트롤러구현 (로그인, 로그아웃, 회원가입, 댓글정보저장, 회원관리 등) 사용 스택 프로젝트 소개 MovieBox 최근 국내에 상영했던 영화를 소개하고 그 영화에 대한 소감이나 평점을 자유롭게 남기고 공유하는 웹 애플리케이션 스키마 프로젝트 회고 처음으로 진행했던 프로젝트에 팀장 역할을 맡아 대략 한 달 정도 진행했다. 우리 팀은 영화.. 더보기

티스토리툴바