미리보기
기본 정보
안녕하세요. 디테일 바라기 개발자, 최윤석입니다. UI/UX를 중시하며 웹앱의 일체감과 사용자 만족을 목표로 하는 개발자입니다. 구름 풀스택 과정의 프론트엔드 팀장 경험을 통해 4개 이상의 프로젝트에서 원활한 커뮤니케이션과 높은 완성도의 서비스를 제공하였고, 효율적인 코드 작성 및 오류 해결 능력을 갖추었습니다. 또한 디테일한 디자인과 애니메이션으로 성능에 지장을 주지 않으면서도 매끄러운 사용자 경험을 구현합니다.
포트폴리오
기술 스택
HTML/CSS, JavaScript, TypeScript, React, Next.js, React Native, scss, tailwind-css, zustand, react-query, Redux, Three.js, Git, GitHub, Notion
프로젝트
Palette*
구름
2024.03. ~ 2024.04.
🙇 프로젝트 소개
개발자의 프로젝트, 이력서, 평판을 작성할 수 있고, 기업이 채팅을 통해 채용할 수 있는 서비스입니다.
⏱️ 개발 기간
2024.03.04 ~ 2024.04.22 (49일)
👨 구성 인원
FE 3명, BE 3명
⚙️ 기술 스택
Next.js,
TypeScript, Emotion,
Zustand,
React-query
성능 향상
받아오는 response값의 id및 데이터를 전역상태관리에 담아서 같은 페이지를 들어갔을 시에 통신을 막아 서버부하 및 페이지 응답속도를 4배 개선시켰습니다.
트러블 슈팅
•어드민과 일반 이용자 로그인 후 동작 차이
로그인 후 API 응답을 받아서 role의 값을 쿠키에 저장한 다음, 그 값이 admin이면 어드민 페이지로 라우팅되게 구현하려고 했지만 실패했다. 자바스크립트의 비동기적 특성을 알아차리지 못하고 순서대로 진행된다는 안일한 생각을 알아차리고, async/await 함수 안에서 await의 response값을 사용하는 식으로 코드를 변경하고 문제를 해결할 수 있었다.
•섹션 추가할 때 인풋의 변화
map()함수로 인풋을 렌더링하는 작업에서 버튼을 눌러 추가하고 제거하는 동작을 구현하는 과정에서 문제가 발생했다. 어떤 순서의 제거버튼을 누르던, 가장 마지막 순서의 인풋이 제거되는 것이다. input에 상태 value를 넣지 않았기 때문에 가상돔 비교 후 리렌더링 될 때 해당 input에 있던 input DOM의 attribute를 그대로 가져가서 마지막 것만 사라지는 것처럼 보였던 것이어서 인풋에 value를 넣고 해결하였다.
•사진의 유무에 따른 HTTP 통신 header
API 통신을 할 때 문제가 발생했는데 http 관련 문제였다. 헤더에 content-type을 multipart/form-data로 해주었는데 사진을 넣지 않았을 때 에러가 나는 것이다. 그래서 여러 가지 방법을 시도하다가 사진을 넣지 않았을 때는 조건 삼항 연산자를 이용해서 header의 content-type을 application/json으로 하고, 사진이 있을 때는 multipart/form-data로 통신하게 구현하였다.
My Portfolio v2.0
개인
2024.08. ~ 2024.08.
🙇 프로젝트 소개
프론트엔드 개발자 최윤석을 소개하는 포트폴리오 웹사이트입니다.
⏱ 개발 기간
2024.08.14 ~ 2024.08.22 (9일)
👨 구성 인원
개인 프로젝트
⚙ 기술 스택
Next.js, TypeScript, Emotion, Recoil
성능 향상
받아오는 이미지에 lazyLoading과 sharp를 사용 및 처음 렌더링되는 화면의 애니메이션 최소화를 통해 LCP를 줄여 페이지 로드시간을 4.6배 빠르게 만들고 lighthouse 87점의 성능에서 100점까지 올렸습니다.
트러블 슈팅
•이미지의 동적경로
포트폴리오의 테크스택에 맵을 돌려서 이미지를 넣으려고 경로를 사용하는데 src에 import를 해서 변수넣는 방식은 잘 되었지만 백틱으로 동적경로를 넣으니까 이미지가 로드되지 않았다. require()함수를 쓰지 않았기 때문인데, src에 백틱을 사용해서 동적으로 경로를 불러올 경우, 해당 경로를 string으로만 인식을 하기 때문에 경로를 찾지 못했던 것이다. require()함수로 백틱을 감싸주었고 해당 경로가 string에서 data-url로 인식이 됨으로써 이미지가 잘 로드될 수 있었다.
Earth-IDE-N
구름
2024.01. ~ 2024.02.
🙇 프로젝트 소개
초보자를 위한 웹 기반 통합개발 환경 서비스입니다.
⏱️ 개발 기간
2024.01.28 ~ 2024.02.28 (32일)
👨 구성 인원
FE 2명, BE 4명
⚙️ 기술 스택
React, vite,
TypeScript,
SCSS,
Zustand,
React-query
트러블슈팅
•파일트리
파일 트리 CRUD 과정에서 많은 많은 어려움을 겪었다. 하지만 다른 사람의 코드를 보면서 react-arborist 라이브러리의 동작 이해를 하고, 코드를 구현하면서 재귀 함수를 사용하여 디렉토리의 깊이가 있어도 파일의 CRUD가 제대로 동작하게 구현하였다. 물론 재귀 함수의 return쪽 반환하는 타입 관련해서 골머리가 아팠지만 여러 번의 시도 끝에 반환해야 되는 타입과 내용을 줄 수 있었다.
•파일 탭
파일 탭을 구현하였는데, 파일 트리에서 파일을 업데이트하거나 삭제할 때 탭에서 연동되지 않는 문제가 있었다. 그래서 파일의 id를 비교해서 본 파일이 맞으면 이름이 같이 연동되고 파일이 삭제되면 탭에서도 삭제되게 구현하였다.
외국어
영어
비즈니스 회화 가능
교육
BrownInternationalSchool
고등학교 | -
2018.10. ~ 2020.03. | 졸업
대외활동
[구름] 자바 스프링 & 리액트 풀스택 개발자 성장 과정 3회차
구름
인프런 강의로 코딩 지식을 쌓은 후 프론트엔드 코스를 정한 뒤 백엔드 개발자분들과 함께 여러 프로젝트를 통해 코딩 실력 및 지식, 커뮤니케이션의 능력을 향상시켰습니다.
자기소개
안녕하세요, 디테일 바라기 개발자, 최윤석입니다.
# 성장 과정
학생 시절, 친구가 개발자 도구를 이용해 구글 페이지의 디자인을 변경하는 모습을 보고 개발에 대한 강한 흥미를 느꼈습니다. 이후 독학으로 HTML, CSS, JavaScript와 같은 프론트엔드 기술을 공부하였고, 구름 트레이닝에 지원하여 개발 실력을 체계적으로 쌓아갔습니다.구름에서 주최한 풀스택 과정에서 프론트를 선택해, 프론트엔드 및 백엔드 개발자들과 함께 웹 개발에 대한 지식을 쌓기 위해 노력했습니다.
이 과정에서 '오늘의 운세' 프로젝트에서는 프론트엔드 개발을 담당하여 사용자 인터페이스를 디자인하고 구현하였으며, 'Earth-IDE-N' 프로젝트에서는 백엔드와의 통합 작업을 수행하여 데이터 연동을 성공적으로 완료했습니다. 'Palette' 프로젝트에서는 팀 리더로서 프로젝트의 전반적인 진행을 관리하고 팀원들과 협업하여 목표를 달성했습니다.
# 개발에 대한 저의 특징
사용자 친화적인 UI/UX 디자인과 개발에 깊은 관심을 가지고 있으며, 이를 통해 사용자 경험을 극대화하는 데 주력하고 있습니다.
제가 본 회사에 입사하게 된다면, 다음 두 가지를 반드시 지키겠습니다.
저는 사용자가 사이트를 이용할 때 일체감을 느끼며, 물 흐르듯 원활하게 진행되도록 디자인하고 프론트엔드 코드를 구현하는 것이 중요하다고 생각합니다. 디테일한 디자인 요소와 'transform' 및 'opacity' 속성을 애용해 애니메이션으로 성능에 지장을 주지 않으면서도 매끄러운 사용자 경험을 구현합니다.
그러므로 첫째, 디테일한 디자인 요소와 최대한 리플로우를 피한 리페인트와 레이어 업데이트만 일어나는 속성을 활용해, 예를 들어, 페이지 전환 시 부드러운 페이드인 효과를 구현하여 성능에 지장을 주지 않으면서도 매끄러운 사용자 경험을 제공하도록 하겠습니다.
둘째, 문제해결 능력을 키우기 위해 매주 새로운 기술을 학습하고 이를 프로젝트에 적용해보는 습관을 기르겠습니다.
저는 팀원들과의 협업을 통해 'Earth-IDE-N', 'Palette' 프로젝트를 성공적으로 완료하며 서로의 실력을 향상시켰습니다. 'Earth-IDE-N' 프로젝트에서는 UI 디자인을, 'Palette' 프로젝트에서는 프론트엔드 개발을 주도하여 성공적으로 완료했습니다. 코드 리뷰를 통해 서로의 실력을 향상시키고, 팀 노션 페이지에 지식을 공유하며 성장하는 문화를 조성했습니다. 이러한 경험으로 사용자들이 더 편하게 퀴즈릭스를 이용할 수 있도록 노력하겠습니다.
또한 반복실수를 줄이고자 노력한 경험이 있습니다. 포트폴리오 트러블 슈팅에 나와 있는 'API 통신 시 사진의 유무에 따른 HTTP header', '파일 트리에 관한 재귀함수' 등과 같은 문제를 해결한 경험을 Velog에 정리하는 습관을 들여, 반복 실수를 줄이고 지식을 단단하게 쌓아가고 있습니다. 이러한 습관을 바탕으로 새로운 개발 기술을 만들어 보겠습니다.
#경험 : <원할한 의사소통과 자기주도 학습 실현>
3개 이상의 프로젝트에서 프론트엔드 리더 역할을 수행하며, 뛰어난 커뮤니케이션 능력과 문제 해결 능력으로 프로젝트를 성공적으로 이끌어 1등 및 인기상을 수상한 경험이 있습니다. 프로젝트 중 발생한 버그를 신속하게 수정하여 업무 효율성을 높였으며, 팀원이 코드 리뷰를 필요로 할 때 즉각 지원하였습니다.
또한, 주요 기술적 문제에 대해서는 팀원들과 함께 심도 있는 리서치를 통해 해결책을 도출하였습니다.자기 주도적 학습을 통해 프론트엔드 역량을 강화하는 것을 중요시합니다. 매주 5회 이상 코딩 테스트를 풀고, 최신 프론트엔드 기술을 학습하며 개발 지식과 논리력을 지속적으로 향상시키고 있습니다.
#마무리
프론트엔드 개발자로서 사용자 경험의 시작과 끝을 모두 책임지는 과정을 통해, 프론트엔드 개발의 중요성을 깊이 깨닫게 되었습니다. 개발자로서 책임감과 본 회사의 신념을 가지고, 본 회사에서 실무자님들과 함께 배우며 실력을 쌓아가고 싶습니다. 프론트엔드 개발 분야에서 뛰어난 역량을 발휘하여 성공적인 프로젝트를 만들고 모두에게 도움이 되는 개발자가 되겠습니다.
감사합니다.