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인 팀 프로젝트) 기획, 랜딩페이지 개발, Frontend 개발

2. Foody

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

3. Planty

WebRTC를 활용한 식물 화상 컨설팅 웹 서비스
2023.07. ~ 2023.08. (7주)
6인 팀 프로젝트) 기획, 서버 구성 및 배포, Frontend 개발

4. TriPlan

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

2023.05. ~ 2023.05. (1주)

2인 토이 프로젝트) Frontend 개발, Backend 개발

5. Noctem

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

6. SSG.SSAG

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

7. 나는 어떤 음료일까?

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

1. Play, Place

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

Reference

•

Github : Play-Place

•

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) 로그인/회원가입 구현

◦

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

Next.js 공식 문서를 참고하며 공통적으로 사용하는 레이아웃을 더 효율적으로 구현할 방법을 모색 라우팅 그룹을 사용하여 그룹별로 레이아웃을 관리하여 개발 편의성을 높이는데 기여

◦

WebSocket 통신 구현

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

애플리케이션 전역에서 플레이더를 사용

More Reference

2. Foody

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

Reference

•

Github : FOODY

Tech Stack

•

Frontend : Typescript, React.js, Recoil, SCSS

•

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

•

DevOps : AWS EC2, NGINX, Amazon S3, Docker

What I did

•

기획 및 개발

◦

재료 등록 시 영수증을 촬영하여 등록할 수 있도록 네이버 OCR API 이용

◦

프론트엔드 인원이 2명이어서 다양한 기능을 넣기보다 중심적인 기능을 정하여 집중적으로 구현.
각자 일감을 적절히 도맡아 모든 주요 기능(이미지 분석 식단 관리, 영수증 인식 재료 관리, 레시피 추천, 영양소 차트바)을 구현할 수 있었음.

•

Frontend 개발

◦

나의 냉장고(재료 관리 페이지), 마이페이지, 레시피 추천 페이지 및 기능 구현

◦

네이버 OCR API 호출을 위한 이미지 촬영 기능 구현

◦

네이버 OCR API 호출을 위해 촬영된 이미지를 64비트로 인코딩하여 백엔드에 데이터 전송

◦

초반에 추천 API 요청이 오래 걸려 몇 초 동안 글자만 떠 있는 상황이 발생.
화면이 비어보이지 않도록 스켈레톤 로딩을 적용하여 UI 깨짐을 방지하고 사용자 경험을 향상 시킴.

◦

팀원이 만들어 둔 영양소 차트바(오늘 채운 영양소를 표시하는 바) 컴포넌트를 리팩토링하여 레시피를 통해 채워지는 영양소량을 미리 볼 수 있도록 구현

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 개발

◦

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

◦

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

◦

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

◦

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. 나는 어떤 음료일까?

감사합니다! :)