미리보기

<프로젝트 정보>

프로젝트 설명 : markdown 문법을 이용하여 개발자 포트폴리오를 작성할 수 있는 블로그

데모 페이지 https://jjlog.vercel.app/

소스 코드 https://github.com/noaprost/jjlog

개발 인원 : 2명 (백엔드 1명, 프론트엔드 1명)

<사용 기술>

언어 : Typescript

프레임워크 : Next.js

스타일링 : tailwindCSS

라이브러리 : nodemailer, react-icons, react-markdown, react-multi-carousel, axios

<담당 역할 및 협업 내용>

• 프론트엔드, 메일 구현을 담당했습니다.

• 디자인 전반적으로 제가 담당하고 매주 줌 미팅을 통해 스타일링 한 레퍼런스를 보며 함께 수정하는 방식으로 결정했습니다.

• 애자일 방법론을 채택하여 줌 미팅을 통해 일주일 단위로 스프린트를 진행했습니다.

• 백엔드와의 협업을 명확하게 진행하기 위한 문서 작성을 통해 서로 개발 중인 기능과 추가로 필요한 기능이 무엇인지 쉽게 알 수 있었습니다. 문서는 Google sheet로 작성했습니다.

• 동작이 잘 되는지 테스트는 수시로 진행하였고, 오류가 발생한 경우 서로에게 연락해서 바로 수정하는 방식으로 진행했습니다.

<구현 사항>

• nodemailer를 이용하여 메일 주소와 내용을 입력하면 블로그 개발자에게 메일이 보내지는 기능을 구현했습니다.

• 블로그 글은 로그인이 가능한 admin 사용자가 기본적인 CRUD를 할 수 있도록 구현했고, 코드 블록을 함께 작성할 수 있도록 react-markdown을 활용하여 글 작성 시 markdown 문법을 사용할 수 있도록 구현했습니다.

• 로그인 정보는 전체적으로 사용하는 정보이고 상태 변경이 거의 일어나지 않기 때문에 context api를 사용했습니다.

• react-multi-carousel을 이용해서 관심 표시를 한 포스트들과 표시를 하지 않은 포스트들이 각기 다른 줄에서 자동 슬라이드 되도록 구현했습니다.

• darkmode 토글 버튼을 통해 darkMode, lightMode를 선택할 수 있도록 구현했습니다.

• 빠르고 효율적인 스타일링을 위해 tailwindCSS를 이용했습니다.

이 프로젝트를 통해 CORS 에러와 Mixed Content 에러를 해결하면서 서버와 클라이언트 통신의 방법에 대해 고민하고 깊이 있는 학습을 할 수 있었습니다.

<프로젝트 정보>

프로젝트 설명 : 드라마 오징어 게임에 나오는 다리 건너기 게임

데모 페이지 https://bridge-game.netlify.app/

소스 코드 https://github.com/noaprost/The-Bridge-Game

개발 인원 : 1명

<사용 기술>

언어 : Javascript

라이브러리 : Three.js, Cannon.js, gsap

3D 모델링 : Blender

<구현 사항>

• Blender로 메인 캐릭터를 3D 모델링하여 만들었습니다. 애니메이션은 default, jump, fall 3가지를 만들어서 각 상황에 따라 다른 애니메이션을 보여줄 수 있도록 했습니다.

• 유리판과 캐릭터에 Cannon.js 물리 엔진을 적용하여 실제 세상과 비슷한 효과를 주었습니다.

• 개발의 효율성을 위해 공통으로 사용하는 object들을 따로 빼서 모듈로 만들어 주었습니다.

• shadowMap의 type을 PCFSoftShadowMap으로 설정하여 부드러운 그림자 연출을 해주었고, 선명함을 위해 shadow의 mapSize를 2048로 올려서 구현했습니다.

• 유리판으로 플레이어가 이동하는 장면을 자연스럽게 구현하기 위해 gsap를 사용하여 지연 시간을 주었습니다.

• 일반/강화 유리는 랜덤 함수를 사용해서 새로 고침을 할 때마다 위치가 달라지도록 구현했습니다.

• 일반 유리를 밟아서 아래로 떨어질 경우 떨어지는 모습을 아래에서 찍은 replay 영상을 보여줬습니다.

지금까지 공부해온 프론트엔드 기술의 기초를 탄탄하게 다지고, redux를 새로 공부 해보기 위해서 스터디에 참여했습니다.

Javascript, Typescript, React, Next.js, TDD(Jest), Redux 강의를 들으면서 각 개념에 대한 이해도를 높일 수 있었고, JS 웹사이트 5개와, React 웹사이트 2개, Next.js 웹사이트 1개를 요구 사항 영상을 보고 제작해보았습니다. 인프런 블로그에 매주 공부한 내용을 작성하면서 복습했습니다.

여러 프로젝트를 빠른 시간 내에 만들어야 하는 밀도 있는 스터디를 통해 가파르게 성장할 수 있었고, 프론트엔드 스터디 전체 인원 중 우수러너로 선정되었습니다.

대학교 동기 5명과 함께 코딩 테스트를 대비하여 알고리즘 실력을 상승시키기 위해 알고리즘 스터디를 진행했습니다.

언어는 Python을 사용했습니다.

<활동 내용>

• 매주 풀어올 문제를 정해서 일주일동안 3문제 정도 분량을 풀고 깃에 올렸습니다.

• 팀원들이 Java, C, Python등 다양한 언어를 사용했기 때문에 서로의 코드를 보며 각 언어에서는 어떤 방식으로 알고리즘을 푸는지, 다른 팀원들은 어떤 방식으로 문제에 접근했는지 질문하고 이해하는 시간을 가졌습니다.

<성과>

• 수업에서 이론으로 이해했던 알고리즘들을 문제에 적용해 보면서 알고리즘의 작동 방식과 왜 이 알고리즘을 이 문제에 사용해야 하는지 알 수 있게 되었습니다.

• 알고리즘에 재미를 느끼게 되어 스터디가 끝난 후 최근까지도 꾸준히 알고리즘을 풀게 되었습니다.

• 매일 1문제씩 알고리즘을 풀어온 결과 solved.ac 플레티넘 5를 달성할 수 있었습니다.

github : https://github.com/noaprost/coding-test

하나에 푹 빠져서 매진해볼 수 있는 경험이 생긴 점이 좋았고, 잘 안 풀리는 문제를 고민하고 또 고민하면서 결국 풀어냈을 때 성취감 또한 좋은 경험이었습니다.