Hello, Im-hass!

Intro

안녕하세요! 프론트엔드 개발자 임희선입니다.

지식을 공유하고 함께 성장하는 것을 즐깁니다. 정리를 좋아하여 배운 것을 문서화하고 공유합니다.

공유한 문서 프로젝트 설정, Git 튜토리얼, 에러로그 등

탄탄한 기본기를 바탕으로 문제 원인을 파악하는 것을 중요하게 생각합니다.

이해하기 쉽고 재사용이 용이한 코드를 작성하려 노력합니다.

사회적 가치에 관심이 있으며 꾸준히 성장하여 지식 공유자가 되는 것이 목표입니다.

Contact

•

Github : https://github.com/Im-hass

•

Velog : https://velog.io/@im_hass_

•

Phone : 010-9346-4107

•

E-mail : gmltjs4107@gmail.com

Skills

Frontend

HTML CSS JavaScript TypeScript React.js Next.js SCSS Styled-component Recoil

•

HTML의 시맨틱 태그를 활용하여 웹 접근성을 고려할 수 있습니다.

•

CSS를 참고 자료 없이 활용할 수 있습니다.

•

JavaScript를 TypeScript로 마이그레이션 할 수 있습니다.

•

React.js를 활용하여 자료를 참고하지 않고 기본적인 기능(게시판, TODO 등)을 구현할 수 있습니다.

•

Next.js의 Pages Router, App Router 코드를 읽고 이해하며 자료를 참고하여 구현할 수 있습니다.

Backend

Java Spring Boot MySQL Mybatis

•

Java 코드를 읽고 이해할 수 있습니다.

•

SQL문을 읽고 이해할 수 있습니다.

•

Spring Boot와 Mybatis를 활용하여 기본적인 CRUD API를 구현할 수 있습니다.

DevOps

AWS EC2 NGINX Docker

•

NGINX를 활용하여 웹 서버를 설치하고 구성할 수 있습니다.

•

Docker를 활용하여 빌드하고 컨테이너를 실행시키고, 로그를 확인하여 에러 원인을 파악할 수 있습니다.

Tools

Git Github Figma Jira

•

Git, Github를 활용하여 버전을 관리할 수 있습니다.

•

Git Flow 브랜치 전략을 활용하여 브랜치를 관리할 수 있습니다.

•

Commit, PR Message에 컨벤션을 정하여 사용합니다.

•

Commit Message만 보아도 어떤 변경사항이 있었는지 알 수 있도록 작성하려 합니다.

•

Figma의 색상/텍스트 변수, 컴포넌트 등을 만들고 활용할 수 있습니다.

Education

2023.01. ~ 2023.12.     삼성 청년 소프트웨어 아카데미 (SSAFY) 9기 수료                     삼성전자

2022.07. ~ 2022.11.     스파로스 아카데미 1기 수료                                                 신세계 I&C

2017.03. ~ 2021.02.     신라대학교 컴퓨터소프트웨어공학부 졸업

Licenses

•

2021.06.02.                  정보처리기사                                                               한국산업인력공단

Awards

•

2022.11.11.                   스파로스 아카데미 - 2차 기업 연계 프로젝트 우수상

•

2022.09.08.                   스파로스 아카데미 - 1차 클론 코딩 프로젝트 최우수상

Projects

1. Play, Place

함께 만드는 위치 기반 공유 플레이리스트 서비스
2023.10. ~ 2023.11. (6주)
6인 팀 프로젝트 : 기여도 20%) 기획, 랜딩페이지 개발, Frontend 개발

2. Foody

일일 권장 영양소와 보유 식재료를 고려한 식단 및 레시피 추천 웹 서비스
2023.08. ~ 2023.10. (7주)
6인 팀 프로젝트 : 기여도 25%) 기획, Frontend 개발

3. Planty

WebRTC를 활용한 식물 화상 컨설팅 웹 서비스
2023.07. ~ 2023.08. (7주)
6인 팀 프로젝트 : 기여도 35%) 기획, DevOps, Frontend 개발

4. TriPlan

한국 관광 정보 Open API를 활용한 여행지 리뷰 커뮤니티 사이트

2023.05. ~ 2023.05. (1주)

2인 토이 프로젝트 : 기여도 45%) Frontend 개발, Backend 개발

5. Noctem

SSE를 활용한 실시간 주문 현황 알림 카페 스마트 오더 웹앱 서비스
2022.09. ~ 2022.11. (7주)
6인 팀 프로젝트 : 기여도 35%) 기획, 스크럼 마스터, Frontend 리더, Frontend 개발

6. SSG.SSAG

SSG.com 신세계몰 클론 코딩 프로젝트
2022.07. ~ 2022.08. (7주)
6인 팀 프로젝트 : 기여도 35%) 팀장, Frontend 리더, Frontend 개발

7. 나는 어떤 음료일까?

나와 어울리는 음료를 알아보는 MBTI 기반 심리 테스트 웹 서비스
2022.05. ~ 2022.07. (7주)
2인 토이 프로젝트 : 기여도 50%) 기획, Frontend 개발

1. Play, Place

함께 만드는 위치 기반 공유 플레이리스트 서비스
2023.10. ~ 2023.11. (6주)

Reference

•

Github : PlayPlace

•

Landing Page : https://playplace.co.kr/

Tech Stack

•

Frontend : Typescript, Next.js, Recoil, Styled-component, Android Studio, WebSocket

•

Backend : Spring Boot, JPA, Redis, MySQL, Spring Scheduler, WebSocket

•

DevOps : AWS EC2, NGINX, Amazon S3, Docker

What I did

•

랜딩페이지 개발

◦

미디어 쿼리를 사용한 반응형 페이지 개발

◦

오픈 그래프 메타 태그 사용
SNS 공유 시 사이트에 대한 메타정보를 전송하여 SEO와 사용자 경험 향상

•

Frontend 개발

◦

소셜(Google) 로그인/회원가입 구현

◦

라우팅 구성 및 공통 레이아웃 구현

라우팅 그룹으로 그룹별 레이아웃을 관리하여 개발 편의성을 높임

◦

페이지별로 탭바의 렌더링을 제어하는 Custom hook 구현

간단한 데이터 추가로, 10분 이상 소요되던 작업을 5초로 단축하여 개발 효율 향상

◦

WebSocket 통신 구현

내 반경 100m 이내의 사용자가 듣는 음악을 탐색하는 기능(이하 플레이더) 구현

ContextAPI를 활용하여 애플리케이션 전역에서 연결 상태 관리

◦

디바운스 패턴을 활용하여 클러스터(플레이맵) 렌더링 최적화

More Reference

2. Foody

일일 권장 영양소와 보유 식재료를 고려한 식단 및 레시피 추천 웹 서비스
2023.08. ~ 2023.10. (7주)

Reference

•

Github : FOODY

Tech Stack

•

Frontend : Typescript, React.js, Recoil, SCSS, PWA

•

Backend : Spring Boot, JPA, Redis, MySQL, Rest Docs, Python, FastAPI

•

DevOps : AWS EC2, NGINX, Amazon S3, Docker

What I did

•

기획

◦

YOLO를 활용한 식단 인식과 네이버 OCR API를 활용한 영수증을 인식으로 등록 과정 간소화

식단과 재료 등록 시의 불편함(타이핑)을 해소

•

Frontend 개발

◦

재료 관리 페이지, 마이페이지, 레시피 추천 페이지, 레시피 상세 페이지 구현

◦

영수증 촬영 및 재료 등록 기능 구현

인식 중, Loading Spinner를 통해 UI 피드백 제공

인식된 문자 출력과 confirm 과정 추가, 인식이 안 됐을 경우 Toast 메시지를 통해 UI 피드백을 제공하여 UX 향상

◦

스켈레톤 로딩 적용

레시피 추천 API 요청이 오래걸리는 상황 대비, UI 깨짐을 방지하여 UX 향상

◦

영양소 차트바(오늘 채운 영양소를 표시하는 바) 컴포넌트 리팩토링

기존에 있던 컴포넌트를 리팩토링하여 레시피 상세보기 페이지에 재활용

레시피를 통해 채워지는 영양소양을 미리 볼 수 있도록 구현하여 UX 향상

More Reference

3. Planty

WebRTC를 활용한 식물 화상 컨설팅 웹 서비스

2023.07. ~ 2023.08. (7주)

Reference

•

Github : Planty

Tech Stack

•

Frontend : Typescript, React.js, Recoil, SCSS, PWA, OpenVidu

•

Backend : Spring Boot, Gradle, JPA, MySQL, Swagger

•

DevOps : AWS EC2, NGINX, Docker

What I did

•

기획 및 개발

◦

광주 농업 기술 센터에 방문하여 현직자 인터뷰 진행

◦

인터뷰를 통해 프로젝트의 필요성과 목적 확립

◦

Jira를 활용하여 스프린트 일정과 일감을 관리하여 목표했던 기능의 97% 구현

•

서버 환경 구축

◦

서버와 배포에 대한 이해력을 높이고자 DevOps 담당

◦

EC2, NGINX, Docker를 활용하여 서버 배포 환경 설정

◦

배포 가이드 문서를 작성하여 팀원과 공유

•

Frontend 개발

◦

구독 상세 조회, 구독 컨설팅 예약 페이지 및 기능 구현

◦

react-calendar 라이브러리를 활용하여 달력 컴포넌트 커스터마이징

◦

화면 설계 시 공통으로 사용되는 컴포넌트를 구분하여 컴포넌트의 재사용성을 높이는데 기여

◦

컨설팅을 받는 사람(이하 사용자)은 식물을 촬영하기 편하도록 모바일 화면을 기준으로 구현

◦

Atomic Design을 도입하여 컴포넌트를 분리하고, 폴더를 명확히 구분하여 개발 편의성을 높임

150여개의 컴포넌트 분리

대부분의 컴포넌트 코드를 60줄 이내로 작성

◦

WebRTC 라이브러리 OpenVidu를 활용하여 사용자 화상 통화 기능 구현

JavaScript로 작성된 예제 코드를 TypeScript로 마이그레이션하여 커스터마이징

More Reference

4. TriPlan

한국 관광 정보 Open API를 활용한 여행계획 리뷰 커뮤니티

2023.05. ~ 2023.05. (1주)

Reference

•

Github : Triplan

Tech Stack

•

Frontend : Vue.js, Vuex, Bootstrap, Kakao Map API

•

Backend : Spring Boot, MySQL, MyBatis, Swagger

What I did

•

Frontend 개발

◦

Bootstrap flexbox 그리드를 이용한 반응형 웹 구현

◦

마이페이지 퍼블리싱

◦

공지사항, 공지사항 상세 페이지, 여행 계획 후기 페이지, 팔로잉/팔로워 기능 구현

◦

공지사항에서 필독과 일반 공지사항을 나누고, 필독을 먼저 뜨게 하여 사용성을 높임

•

Backend 개발

◦

백엔드에 대한 이해도를 높이고자 학습한 내용을 바탕으로 API 구현

◦

공지사항, 여행 계획 후기, 팔로잉/팔로워 CRUD API 구현

More Reference

5. Noctem

SSE를 활용한 실시간 주문 현황 알림 카페 스마트 오더 웹앱 서비스
2022.09. ~ 2022.11. (7주)

스파로스 아카데미 2차 프로젝트 우수상

Reference

•

Github : noctem-user-FE

Tech Stack

•

Frontend : Typescript, Next.js, Recoil, SCSS, PWA

•

Backend : Spring Boot, Gradle, JPA, Redis, MySQL, Grafana, Prometheus

•

DevOps : Vercel, Docker, Jenkins

What I did

•

기획

◦

설문 조사를 통해 기존 카페 스마트 오더의 불편점 도출(47명 참여)

◦

불편점 1위로 뽑힌 설치와 용량 문제를 개선하기 위해 웹으로 서비스를 제공하며, PWA를 적용하여 앱과 같은 사용자 경험 제공

•

스크럼 마스터

◦

데일리 스크럼 미팅을 통해 전날 작업과 오늘 할 일을 보고하며 Backlog 정리

◦

5일 단위로 스프린트를 진행하며, 마지막 날 좋았던 점 개선할 점을 도출하고 의견을 종합하여 Ground Rules에 반영

◦

백엔드/프론트엔드의 진행 상황 공유가 잘 안 된다는 의견에 Google 스프레드 시트를 통해 공유하여 팀워크 향상에 기여

•

Frontend 리더

◦

프론트엔드의 구현 목표와 작업양에 따른 일정 조율 및 일감 배분

◦

이전 프로젝트에서 경험하지 못했던 것을 하고 싶다는 팀원의 의견을 적극적으로 반영하여 역할을 배분

◦

프론트엔드 팀원 역량 향상을 위한 스터디 및 코드 리뷰 진행

•

Frontend 개발

◦

Next.js, SCSS, PWA, ESLint, Prettier 프로젝트 환경 설정
환경 설정 가이드를 작성하여 팀원과 공유

◦

TypeScript를 도입하여 안정적인 개발 환경 구축

◦

타입의 재사용성과 확장을 고려하여 extends, Optional 등의 인터페이스 속성 활용

◦

회원가입, 장바구니, 주문, 실시간 알림 기능 구현

◦

실시간 주문 현황 알림의 경우 양방향 통신이 필요 없기 때문에 단방향 통신인 SSE(Server Sent Event)를 활용하여 구현

More Reference

6. SSG.SSAG

SSG.com 신세계몰 클론 코딩 프로젝트

2022.07. ~ 2022.08. (7주)

스파로스 아카데미 1차 프로젝트 최우수상

Reference

•

Github : SSG_SSAG_FE

Tech Stack

•

Frontend : React.js, Recoil, SCSS

•

Backend : Spring Boot, Gradle, JPA

•

DevOps : AWS EC2, NGINX, Amazon S3, Amazon RDS

What I did

•

팀장

◦

클론 코딩의 취지에 맞는 팀의 목표 설정(디테일을 우선시할 것, 쇼핑몰의 기본 기능은 모두 구현하기)

◦

애자일 방법론을 기반으로 3일/2일 단위로 스프린트 진행

◦

Google 스프레드 시트를 활용하여 프로젝트 기간에 맞게 백엔드/프론트엔드 진행률 관리

•

Frontend 리더

◦

프로젝트 환경 설정 및 문서화

◦

각 팀원의 역량에 맞게 일감 배분

•

Frontend 개발

◦

기존 사이트의 HTML/CSS를 React.js로 마이그레이션하여 기능 구현

◦

배송지 관리, 카페고리, 상품 목록 조회, 검색/필터 기능, 좋아요 등의 페이지 및 기능 구현

◦

React-router의 Outlet 컴포넌트를 활용하여 중첩 라우팅으로 경로 구성. 코드의 가독성을 높이고 부모 컴포넌트와 자식 컴포넌트 간의 결합도를 낮춰 코드를 유지/관리하기 쉽게 함.

◦

URL 파라미터를 통해 대/중/소 카테고리 번호를 전달하여 카테고리별 상품 목록 구현

◦

상품 목록 조회 시 react-intersection-observer 라이브러리를 활용한 무한 스크롤 구현

◦

상품 목록, 상품 상세 보기, 마이페이지, 최근 본 상품 등 많은 페이지에서 동일하게 사용되는 좋아요 컴포넌트를 구현하기 위해 wishId, productId, isWishChange, setIsWishChange 4개의 props를 넘기고 컴포넌트 내부에서 로직을 처리하여 재사용성을 높임.

◦

없는 페이지에 접근할 경우, setTimeout을 활용하여 5초 후 이전 페이지로 돌아가도록 하여 사용자 경험 향상.

More Reference

7. 나는 어떤 음료일까?

나와 어울리는 음료를 알아보는 MBTI 기반 심리 테스트 웹 서비스

2022.05. ~ 2022.07. (8주)

Reference

•

Github : BeveragePsychologicalTest

•

Demo : https://beverage-test.netlify.app/

Tech Stack

•

Frontend : Vue, Vuex

•

DevOps : Netlify

What I did

•

기획

◦

Vue.js를 익히기 위한 방법으로 토이 프로젝트 기획

◦

MBTI 관련 심리 테스트 사이트를 분석하며 컨셉, 시나리오 결과 및 문서 작성

◦

각각의 선택지에 가중치(1, 2)를 부여하는 방식으로 결과 도출

◦

주변 지인 결과 및 인터넷 자료 등을 분석하여 테스트 결과의 정확성을 높이는데 기여

•

Frontend 개발

◦

직관적인 UI/UX 화면 설계

◦

PC, 모바일 접근성을 고려하여 미디어 쿼리를 활용한 반응형 페이지 구현

◦

메인 페이지, 결과 페이지 구현

◦

테스트 결과 카카오톡 공유하기 구현

◦

CSS 방법론 BEM 도입, 구성 요소의 목적에 맞는 직관적인 클래스명 작성

More Reference

Hello, Im-hass!

Skills

Frontend

Backend

DevOps

Tools

2. Foody

3. Planty

4. TriPlan

5. Noctem

6. SSG.SSAG

7. 나는 어떤 음료일까?

감사합니다! :)