DevStep Logo
준비는 됐으니까
세상이 깜짝 놀랄
무언가를 만들어 볼까요?

세상을 좀 더 유익하고 재밌게

프로젝트

SkipAD

2023.03.08 - 2023.04.19

크롬 확장 프로그램 SKIPAD 썸네일

유튜브 5초 광고를 넘겨주는 크롬 확장 프로그램입니다

순수 자바스크립트로 작성하였고 웹 구성 요소를 파악할 수 있는 좋은 기회였습니다

SWEETY

2023.11.07 - 2023.11.17

SWEETY 회원가입 썸네일

글자 하나당 타이핑 속도는 평균적으로 0.2 ~ 0.5s 이라고 합니다.

그래서 debounce를 적용하여 아이디를 잠시 머뭇거릴 시간을 고려한 1.5초를 주어 api 호출 수를 최소화 했습니다

최소 아이디 길이가 8자이기 때문에 최대 7번의 api 호출을 감소시킬 수 있습니다

중복검사 버튼을 사용하지 않고 즉각적인 피드백을 제공합니다

SWEETY 궁합점수 썸네일

회원가입에서 받은 정보를 기반하여 궁합점수 보기 제작하여 채팅에 대한 부담을 감소시킵니다

STAYINN

2023.11.17 - 2023.12.15

STAYINN 상세 페이지 썸네일

관광공사에서 제공하는 TourAPI를 활용하여 가상 숙박예약 서비스를 제작했습니다

STAYINN 마이페이지와 로그인 페이지의 쿠키참조 불가로 발생하는 덜컥임 현상 썸네일STAYINN 덜컥임이 해결된 부드러운 로그인 페이지 이동 썸네일

NEXT SSR 서버에서 직접 쿠키에 접근할 수 없는 이슈로 동적으로 로그인 화면과 마이페이지 화면을 렌더링하는 과정에 짧은 깜빡임이 발생했습니다

‘next-client-cookies’와 미들웨어를 적용하여 쿠키문제와 깜빡임 현상을 해결했습니다

JWT를 쿠키에 저장하고 http-only속성을 부여하여 인증 인가에 보안을 적용했습니다

TripVote

2023.12.22 - 진행중

...일행과 함께 세우는 여행 일정 서비스

React Icon

React

커스텀 훅을 분리하고 공통 컴포넌트를 통해 코드의 재사용성을 높힐 수 있습니다
웹표준을 준수하여 코드를 작성하며 Lighthouse 점수를 고려합니다

Next Icon

Next

SEO 최적화와 서버컴포넌트를 사용하기 위해 App Router를 사용헀습니다

Typescript Icon

Typescript

컴파일 과정에서 타입을 확인하고 에러를 미리 확인할 수 있어 코드의 안정성을 높일 수 있습니다

Android Icon

React
Native

JSX 문법을 기반으로 크로스 플랫폼 개발을 쉽게 시작할 수 있어 채택했습니다

Android Icon
Cypress Icon

Playwright

크로스 브라우징에 대한 병렬 테스트를 간단히 수행할 수 있고
웹접근성에 대한 테스트를 수행할 수 있어서 사용했습니다