토스터 (aka 웹캠네컷) MVP 1차를 완성하고 나서, 주변 개발자 친구들에게 자랑을 했었다. ((도파민 중독))그 반응은? 예상보다 훨씬 좋았다! 그중 한 명, 개발자이자 카카오 이모티콘 작가인 리버가 “너무 귀엽다, 인터랙션 내가 해보고 싶다!”라고 했을 때, 이게 바로 천사의 강림 아니겠나. 디자인에 조금 지쳐가던 나에게 리버는 하늘에서 내려온 디자이너였다.내가 생각한 서비스 방향과 추구하는 컨셉을 설명했고, 리버는 바로 디자인 작업에 들어갔다. 기존 MVP를 만들면서 느낀 점은, 아무리 노트북 웹캠 화질이 좋아져도 포토이즘이나 인생네컷 같은 프린트된 물리적 사진 퀄리티는 못 따라간다는 거였다. 어차피 완벽한 화질은 힘들다면, 이 한계를 컨셉으로 녹이자. 그렇게 선택한 무드는 Y2K, 빈티지, 모..

마일리지 서비스가 성공적으로 운영되던 시점운영을 시작한 지 일주일이 지나면서 서비스가 안정적으로 자리 잡아갔다. 덕분에 나도 조금 여유를 가질 수 있었다. 그래서 이 시간을 활용해 개발 서적을 빌려 읽고, 매일 출근해서 공부하며, 코딩 테스트를 풀며 전기세를 낭비하면서 등록금을 열심히 탕진(?)하고 있었다.  웹캠네컷 아이디어의 시작나는 맥북 포토부스를 활용해 사진이나 영상을 남기는 걸 좋아하는데, 이게 쌓이다 보니 저장 용량만 20GB가 넘어가 버렸다. 인생네컷 같은 셀프 사진관도 자주 갔는데, 친구들이 졸업한 후에는 혼자서 맥북 포토부스로 찍는 게 유일한 취미가 되어버렸다. (ㅜㅜ) 그러다 문득 떠올랐다.'인생네컷을 브라우저에서 바로 찍고 저장할 수 있지 않을까?' 말 그대로 웹캠네컷인 셈이다.이 아..

1. 문제 설명 주어진 book_time 배열을 이용해, 호텔 방을 예약하는 문제입니다. 각 예약은 시작 시간과 종료 시간이 포함되어 있습니다. 이 문제는 예약을 처리하면서 동시에 필요한 최소 방의 개수를 구하는 문제입니다. 예약 시간은 [시작 시간, 종료 시간] 형태로 주어집니다. 각 예약은 겹치지 않게 처리되어야 하며, 방이 부족할 경우 새로 방을 할당해야 합니다. 한 예약이 종료된 후 최소 10분 이상 지나야만 다른 예약이 들어올 수 있습니다. 예약 시간이 주어졌을 때, 이 예약들을 처리하기 위한 최소 방의 수를 구하는 문제입니다.  프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 2. 해결 과정이..

MSW(Mock Service Worker)는 개발 및 테스트 환경에서 실제 서버와의 API 요청을 모킹 할 수 있는 아주 강력한 도구입니다.백엔드 서버가 아직 준비되지 않았거나, API 응답에 의존하지 않고 프론트엔드 작업을 진행하고 싶을 때 MSW는 큰 도움이 됩니다.MSW는 클라이언트(브라우저)와 Node.js 환경에서도 사용할 수 있어 매우 유연하게 활용할 수 있어요.  왜 MSW를 선택했을까요?저희 마일리지 서비스 팀은 총 3명, 프론트엔드 1명과 백엔드 2명이 함께하는 작은 팀이었어요.특히, 백엔드 팀원들이 처음으로 백엔드 개발을 시작한 학생들이다 보니 API가 완성되기 전에 프론트엔드 작업을 병렬로 진행할 필요가 있었습니다. 하지만 API가 아직 구현되지 않은 상황에서 프론트엔드에서는 어떻게..

📋 프로젝트 개요저희 학부의 마일리지 장학금 서비스는 학생들이 지난 학기의 마일리지 내역을 확인하고, 등록 후 장학금을 신청할 수 있도록 돕는 시스템입니다. 핵심은 간소화: 학생들이 번거롭지 않게 신청할 수 있는 환경을 구축하는 것이 목표였습니다.특히 기간이 매우 중요했는데 학기 초 3월에 신청받아야 하는 프로젝트이다 보니 개발 시작이었던 2월에서 약 한 달의 기간 안에 작업해야하는 프로젝트였습니다. 🚀 개발 동기와 시작오래된 시스템, 새롭게 재탄생하다 이 프로젝트의 출발은 그리 새롭지 않았습니다.기존에는 PHP로 만들어진 구식 사이트가 운영되고 있었는데, 오래된 UI부터 사용하기 불편한 데다 유지보수도 어려운 상황이었습니다.매년 캡스톤 팀들이 마이그레이션을 시도했지만 끝내 완성하지 못한 프로젝트였습..

직사각형 타일 채우기 1. 문제 설명 가로 길이가 2, 세로 길이가 1인 직사각형 모양의 타일이 있다.이 타일을 이용하여 세로 길이가 2이고 가로 길이가 n인 바닥을 채우는 방법을 구하는 문제이다. 타일을 채우는 방법은 다음 두 가지가 있다:타일을 가로로 배치하는 경우타일을 세로로 배치하는 경우그래서 가로 길이 n = 7인 직사각형은 아래처럼 타일로 채울 수 있다.  2. 해결 과정이 문제는 동적 프로그래밍(DP)을 사용하여 풀 수 있다.DP는 작은 문제부터 차근차근 해결하여 큰 문제를 푸는 방식이다. a.  기본 아이디어가로 길이 n인 직사각형 바닥을 채우는 방법을 생각해 보면:마지막에 가로로 타일 1개를 놓은 경우, 남은 바닥의 길이는 n-1이 된다. (경우 1) 마지막에 세로로 타일 2개를 놓은 경..

구명보트를 최대한 적게 사용하여 사람들을 구출하기 소 잃고 외양간 고치듯이 그리디 문제 풀어보기..~ 문제 설명무인도에 갇힌 사람들을 구명보트로 구출해야 하는 문제입니다. 각 구명보트에는 최대 두 명이 탈 수 있으며, 보트에는 무게 제한이 있습니다. 우리는 가능한 한 최소한의 보트를 사용하여 모든 사람을 구출해야 합니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg인 경우, 2번째 사람(50kg)과 4번째 사람(50kg)은 같은 보트를 탈 수 있지만 1번째 사람(70kg)과 3번째 사람(80kg)은 같이 탈 수 없습니다. 이때 최소한 3개의 보트가 필요합니다. 문제 분석이 문제는 최적화 문제로, 사람들의 몸무게를 고려하여 최소한의 구명보..

1. 프로젝트 개요 📝프로젝트 이름: EYE CARE간략한 설명: 눈 건강을 위해 20분마다 알림을 보내주는 크롬 익스텐션개발 동기 및 목표: 개발자들은 하루의 대부분을 노트북 앞에서 보내기 때문에, 눈의 휴식이 중요하지만 잊기 쉽습니다. 이 프로젝트는 라섹 수술 후 눈 건강을 지키기 위한 개인적인 필요에서 출발했습니다.💡 바른 자세와 눈의 휴식을 챙기기 위해 EYE CARE 시스템을 개발하게 되었습니다.  Eye Care - Chrome 웹 스토어눈 건강을 위해 20분마다 휴식을 알려줍니다.chromewebstore.google.com 2. 아이디어 출발 💡눈 건강을 위한 작은 도우미이 프로젝트는 1월에 받은 라섹 수술 이후 노트북 사용이 필수였던 상황에서 시작되었습니다. 의사 선생님이 "눈을 자..

CSS 및 CSS-in-JS 코드의 일관성을 유지하고 자동으로 정렬하기 위해 stylelint를 설정하는 과정을 진행하던 중 작성되었습니다. 협업을 통해 코드를 짜다보면 팀 내 코드 스타일을 통일하는 과정이 중요하다. 그래서 주로 pretteir 나 lint를 사용하는데 stylelint 도 그중 하나로 팀 내 코드 스타일을 통일하고 코드 품질을 높이는 데 도움을 준다. 1. Stylelint란? Stylelint는 스타일시트(CSS, SCSS, CSS-in-JS 등)를 분석하고 오류를 찾아내는 린터(Linter)이다. 이를 사용해서 코드 품질을 유지하고 코드 스타일을 통일할 수 있다. 제공하는 주요 기능:문법 검사: CSS 및 SCSS, CSS-in-JS에서 발생할 수 있는 문법 오류를 자동으로 찾기...