👨‍💻 About.

다양한 것을 시도해 새로운 지식을 얻는 것을 좋아합니다.

코드를 작성할 때 더 효율적으로 작성할 수 있는 방법에 대해 많이 고민하고 이야기하는것을 좋아합니다.

사용자의 편의성을 고려하여 개발하는 것을 선호합니다.

자신의 업무를 책임감 있게 수행하며, 끊임없이 발전하기 위해 항상 자기개발에 노력합니다.

• Github https://github.com/HWANBINYOO
• Email  [email protected]
• blog https://velog.io/@hawnbin
• Phone 010-8098-3435

📖 Project.

DOTORI

Frontend Leader

V1

2022.01.23 ~ 2023.04.02

https://github.com/Team-Ampersand/Dotori-client

V2

2023.2.3 ~ 서비스중

https://github.com/Team-Ampersand/Dotori-client-v2

DOTORI

DOTORI 회고록

소개

Dormitory(기숙사) 라는 단어에서 만들어진 **Dotori** 프로젝트는

학교 기숙사의 자습신청, 안마의자 사용, 규정 위반, 기상음악 신청 등을 웹사이트로 간편하게 관리 할 수 있도록 만든 웹사이트입니다.

220명의 전교생이 사용중이고 매일 평균 5000번이상의 트래픽이 발생하고 있습니다.

수행업무

V1

프로모션 페이지 제작했습니다.

로그인, 회원가입, 메인페이지 반응형, 유지보수 했습니다.

V2

SSR + SWR 을 사용해 SSR, CSR 환경에서 더 좋게 데이터를 관리할 수 있도록 구현했습니다.

Atomic 디자인 패턴을 사용한 파일구조로 더 효율적이고 유지보수관점에서 더 좋게 했습니다.

다크모드, 토큰, SEO 설정을 했습니다.

채널톡을 이용해 사감쌤과의 일대일 문의할 수 있도록 했습니다.

Axios interceptor를 사용하여 http 요청에 대한 코드 중복을 제거했습니다.

middleware 를 사용해 로그인여부에따라 url 직접접근을 막았습니다.

프로모션, 로그인, 회원가입, 메인 페이지 제작, 반응형 했습니다.

React-hook-form 을 사용해 효율적으로 state 를 관리했습니다.

env-cmd 를 이용해 개발환경과 운영환경 환경변수를 분리했습니다.

Dynamic Import 을 사용해 pre-rendering 이 필요없는 부분을 csr 로 받았습니다.

React-easy-crop 을 사용해 이미지를 프로토타입으로 수정가능하게 했습니다.

기술

  Next.js, Typescript, Emotion.js , Recoil, Axios, Swr, Env-cmd

시행착오

V1

• 로그인,회원가입 에러처리

V2

• url 직접접근 방식
• 다크모드 깜빡임
• 홈페이지 Promise.all 사용

Devlog

Design, Frontend

V1

2022.4.16 ~ 2022.7.4

React-project/vlog at main · HWANBINYOO/React-project

웹 첫 배포후기

V2

2023.3.12 ~ 2023.4.13

GitHub - Devlog-v2/front: 개발자들을 위한 블로그 front 부분

소개

Developer Blog 의 약자인 Devlog 는

개발자들을 위한 블로그 플랫폼을 제작했습니다.

수행업무

V1

remark-gfm 를 사용해 마크다운형식으로 블로그를 CRUD가 가능하게 했습니다.

AWS S3 + CloudFront 을 사용해 배포했습니다.

프로필,게시글,로그인,회원가입 페이지 제작했습니다.

V2

댓글, 좋아요 기능을 추가했습니다.

next.js 로 마이그레이션 및 ssr 환경에서 데이터를 받아올 수 있게 했습니다.

프로필에 잔디 기능을 추가해서 사용자들이 블로그를 쓸 때마다 잔디가 채워지도록 했습니다.

vercel 을 사용해 배포했습니다.

기술

Next.js, Typescript, Emotion.js, Recoil, Axios, Remark-gfm, Nookies

시행착오

V2

• 이미지와 글 겹쳐넣기

🛠️ Skills.