<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/boostcamp-challenge/">부스트캠프 웹・모바일 8기 챌린지 수료</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/2023/">부스트캠프 웹・모바일 8기 멤버쉽 수료</a></li></ul>

김수민

혼자서 면접 시뮬레이션을 하며 연습하는 것을 도와주는 웹사이트입니다.Tech Stack: React, TypeScript, TanStack Query, Emotion, Recoil, MSW, Jira, Cloudflare, Github ActionsLink: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/the-NDD/Gomterview-FE">Github </a>🔗 | <a target="_blank" rel="noopener noreferrer nofollow" href="https://gomterview.com">Service </a>🔗<hr><h4>Description</h4><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/gomterview-1/">React 프로젝트를 자동으로 배포하기 위한 환경을 구축 </a>🔗</h5><ul><li>Docker, AWS, Cloudflare 세 가지 선택지를 비교해보며 현재 팀의 상황에 가장 적절한 기술을 선택했습니다.</li><li>SPA배포시 라우터가 처리되는 방식을 학습했고, 단순히 사이트 배포 뿐만 아니라 동작 원리까지 이해할 수 있는 계기가 되었습니다.</li></ul><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/gomterview-2/">쿠키를 이용해 OAuth 2.0 로그인을 구현하며 cors에 대한 깊은 이해, DX에 대한 고민 </a>🔗</h5><ul><li>개발 환경에서 브라우저 쿠키 정책으로 인해 로그인을 테스트할 수 없다는 문제를 해결하기 위해 리버스 프록시 구축부터 다양한 방법에 대해 고민해보며 브라우저 쿠키 정책과 cors에 대한 깊은 이해를 할 수 있었습니다.</li><li>단순히 문제만 해결하는 것이 아닌, 팀원들에게 번거로움을 안겨주지 않는 방법에 대해 고민하며 DX도 고려한 해결책을 찾았습니다.</li></ul><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/gomterview-3/">console.log처럼 동작하는 toast 개발 </a>🔗</h5><ul><li>react-toastify 라이브러리 코드에서 아이디어를 얻어, 커스텀 EventManager를 사용해 console.log처럼 동작하는 toast를 개발했습니다.</li><li>라이브러리 코드를 분석해보는 경험을 통해 오픈소스 생태계에 관심을 갖게 되었고, 이는 추후 개인프로젝트로 라이브러리를 개발하는데 중요한 밑거름이 되는 경험이 되었습니다.</li></ul><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/gomterview-4/">MSW로 에러 시나리오를 목업해서 에러 핸들링을 위한 기반 구축 </a>🔗</h5><ul><li>MSW를 사용해 서버에서 정의한 커스텀 에러 코드에 대한 시나리오를 테스트하기 위한 기반을 구축했습니다.</li><li>성공 케이스 뿐만 아니라 에러 케이스에 대해서도 고민해보게 되는 계기가 되었습니다.</li></ul>

blockquote로 파싱되는 마크다운 요소에서 obsidian callout 문법을 사용할 수 있도록 해주는 라이브러리입니다.Tech Stack: React, Typescript, tailwindCSS, Cloudflare, Github ActionsService: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/milk717/obsidian-callouts-markdown">Github 🔗</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.npmjs.com/package/obsidian-callouts-markdown">npm 🔗</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://obsidian-callouts-markdown.milk717.com/">Playground 🔗</a><hr><h4>Description</h4><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.milk717.com/making-blog1">불편한 점을 기술적으로 해결해서 생산성을 향상시키는 경험 </a>🔗</h5><ul><li>Gatsby로 개인 블로그를 운영하면서 코드 에디터를 통해 게시글을 작성하는 행위에 대해 불편함을 느끼고, 이를 개선하기 위해 obsidian을 블로그 에디터처럼 사용할 수 있도록 커스텀했습니다.</li><li>하지만 obsidian의 callout 문법을 사용해 글을 작성하면 블로그에서 단지 blockquote로만 파싱된다는 점에 아쉬움을 느꼈고, 이를 해결하기 위해npm을 둘러봤지만 제가 원하는 기능을 수행하는 패키지를 찾을 수 없었습니다.</li><li>그래서 불편함을 해소하기 위해 직접 라이브러리를 개발해 npm에 배포했습니다.</li></ul><h5>Github Action을 활용한 npm 패키지 배포 자동화</h5><ul><li>Github Action을 사용해서 npm 레지스트리에 패키지를 올리고 npm에 게시하는 작업을 자동화했습니다.</li></ul><h5>ReactElement를 파싱하며 ReactElement 자료형에 대한 이해</h5><ul><li>blockquote로 파싱된 element에서 obsidian callout 문법을 사용하기 위해 분석하며 ReactElement 자료형을 실질적으로 이해하게된 경험이 되었습니다.</li></ul>