서버는 처음부터 '무료로 운영될 수 있는' 서버로 진행해달라고 요청했었고 로컬에 저장할 수 있도록 해달라고 요청했었다.

1. localStorage로 저장

"로컬에 저장해달라"는 말로 인해 localStorage에 저장하는 기능으로 구현이 되었다. 하지만 이는 치명적인 단점이 너무 많았다.

• 보안 취약성
  • XSS 공격에 취약
  • 암호화 없음 : 브라우저 개발자 도구만 열면 누구나 내용 확인 가능
• 데이터 동기화 불가 (기기 간 단절)
  • 해당 기기의 해당 브라우저에 만 저장
• 용량 제한
  • 5MB ~ 10MB 정도의 텍스트만 저장 가능
  • 많은 양의 프로젝트/할일 핸들링 불가
• 성능 저하 (동기식 처리)
  • localStorage의 작동 방식 : 동기(Synchronous) 방식
  • 데이터를 읽고 쓰는 동안 메인 스레드가 멈춤
  • 저장된 데이터 양이 많아질수록 버벅거림, Freezing 현상이 발생 가능성이 높음
• 데이터 타입의 제약
  • localStorage는 오직 String(문자열) 형태만 저장할 수 있다.
  • 객체(Object)나 배열(Array)를 저장하려면 json으로 변환해야하는 번거로움

로컬이라는 단어 때문인지 뭔진 몰라도 제미나이는 처음에 localStorage 저장 방식을 택했다.. 이건 너무 아쉬운 선택이었다.

다시 파일로 저장하고 불러올 수 있는, 배포해도 괜찮은 방법을 알려달라고 했고 그 결과 json 파일에 저장하는 것으로 변경하였다.

2. json 파일로 데이터 저장하기, 불러오기 (projects.json, todos.json)

localStorage를 쓰지 않고 저장하는 방법으로 적용해달라고 하니, JSON 파일로 저장하는 방법으로 적용해주었다.

json 파일로 DB를 운영하는 것은 아래와 같은 장단점이 있다.

장점

• 별도 DB 설치 필요 없음
  • 파일만으로 정리 가능
• 높은 가독성
  • 직접 파일을 수정하거나 확인 가능
• 편리한 이동성
  • 파일을 옮기고자 할 때, 복사/붙여넣기만 하면 됨

    단점

• 동시성 문제
  • 여러 사람이 동시에 작업 불가
• 데이터 읽기 성능 저하
  • 데이터를 수정하려면 파일 전체를 읽어야 하기 때문에 데이터가 커지면 속도가 매우 느려짐
• 검색 기능 부재
  • 검색 기능을 넣기 위해서는 모든 데이터에 filter 반복문으로 적용해야 함

지금은 단점이 부각되지 않아 JSON 파일로 진행하지만, 1. 추가되는 프로젝트가 많아지거나 2. 파일이 깨지는 현상 을 대비하기 위해서라도 SQLite로 데이터베이스를 변경하는 게 좋을 것 같다.

SQLite에 대해 간략하게 알아보자면,

SQLite란?

• 서버리스(Server less) 데이터베이스
• 파일 하나에 모든 데이터가 저장되지만, SQL 문법을 쓸 수 있는 데이터베이스

작동 방식 데이터베이스 엔진이 관리

데이터 수정 데이터 전체 저장이 아닌 데이터 1개만 수정(속도 빠름)

데이터 검색 SQL 쿼리를 통한 검색 가능

안정성 트랜잭션(Transaction) 지원으로 데이터가 절대 깨지지 않음

파일 형태 data.db 또는.splite

후기

백엔드(서버+DB) 관련된 내용을 공부해야 겠다는 생각이 들었는데, 직접 체험해볼 수 있는 경험이 되었다. 서버와 DB의 차이점도 명확하게 알 수 있었다. DB = AWS 라는 생각을 했었는데, 크게 배포할 게 아니라면 그것도 필요 없다는 게 신기했고 SQLite를 쓰면서 SQL도 공부해봐야겠다는 생각이 들었다! 바이브코딩 진짜 재밌는 것 같다.. 나에게 코딩의 재미를 다시 줬다(아님.. 이건 코딩이 아님..)

서버와 관련된 이야기는 여기까지이다. 다음에 SQLite를 적용하게 된다면 다시 가져오도록 하겠다. 자동으로 클라이언트와 서버를 구동하기 위해 배치파일 & 빌드파일을 만들어봤는데, 이와 관련된 얘기는 3편에서 다루도록 하겠다 (빡침주의*)

작년에 회사에서 프로젝트가 무수히 많이 쏟아지는데, 프로젝트에 대한 작업이나 일정을 메일로만 전달받으니 프로젝트 건별로 트래킹이 어려운 점이 있었다.

신년이 되어서 프로젝트 숨고르기 중이라 프로젝트를 관리할 수 있는 사이트를 만들어 보기로 했다.

gemini CLI를 통핸 바이브코딩으로 말이다.

🛠 기술 스펙 (Specifications)

1. Frontend (클라이언트)

• Framework: Next.js 16 (App Router)
• Library: React 19, TypeScript
• Styling: Tailwind CSS 4 (PostCSS)
• Icons: Lucide-React
• Date Library: date-fns
• Key Features:
  • Full-screen Calendar UI
  • Project/Todo CRUD (Modal & SidePanel)
  • 자동 마감 및 할 일 이월 로직

2. Backend (서버 & API)

• Runtime: Node.js (Next.js 내장 서버)
• API Architecture: Next.js Route Handlers (App Router)
• Data Storage: Local JSON Files (/data/*.json)
• File I/O: Node.js fs 모듈 기반 (서버 사이드 로컬 저장)
• Main Endpoints:
  • GET/POST /api/data/projects: 프로젝트 데이터 관리
  • GET/POST /api/data/todos: 할 일 데이터 관리
  • GET /api/heartbeat: 서버 상태 체크

    3. Infrastructure & Ops

• Port: 3002 (고정 사용)
• Automation:
  • start-app.bat: 앱 실행 스크립트
  • start-silent.vbs: 백그라운드 실행용 스크립트
  • status-app.bat, stop-app.bat: 상태 확인 및 종료

프로젝트 사이트를 운영하기에 next.js가 조금 무거울 수 있지만, 앞으로 더 많은 기능들을 추가하고 싶어서 next.js로 진행했다.

서버 운용 비용을 따로 지불하고 싶지 않았고, 프로젝트 내용의 경우 외부로 유출되면 안되기에 로컬 내에서 서버를 운용하고자 했다.

정확하게 기억은 안나지만, 제미나이에게 요청했던 부분은 아래와 같다

프로젝트 관리 시스템 사이트를 생성
기능 
- 프로젝트 등록(프로젝트 번호, 프로젝트 제목, 작업 시작일, 작업 종료일, 프로젝트 시작일, 프로젝트 종료일, 최종 종료일, 비고)
- 프로젝트 수정 가능
- 캘린더에 작업 시작일과 프로젝트 시작일을 보여주기
- 프로젝트가 종료되고 2일 후에 프로젝트 자동 삭제(저장되는 값을 최소화하기 위함)
프론트엔드 : React+Typescript + tailwind
백엔드 : Next.js

초반엔 이런 식으로 간단하게 적용했고, 간단한 프롬프트대로 간단하게 만들어졌다.

이 부분에서 내가 놓친 것

• 캘린더에서 프로젝트를 클릭하면 프로젝트 수정 화면으로 연결 -> 캘린더를 누를 때 불편함
• 프로젝트에 대한 자세한 내용을 프로젝트 수정 화면에서만 확인 가능
• 프로젝트 삭제 기능 누락

그래서 다시 요청을 보냈고, 지금까지 이루어진 기능들은 아래와 같다

🚀 주요 기능

1. 프로젝트 관리

• 상세 일정 관리: 프로젝트 번호, 제목, 작업 기간, 프로젝트 기간, 최종 종료일 등을 관리.
• 자동 마감 설정: 실사 종료일 입력 시 최종 종료일이 자동으로 맵핑됩니다 (수정 가능).
• 상태 추적: 웹업 완료 여부 및 실사 시작 여부를 아이콘으로 한눈에 확인.
• 종료 알림: 종료일이 지난 프로젝트는 상단 배너를 통해 알려주며, 종료 처리 후 3일 뒤에 자동으로 데이터가 삭제됩니다.

2. 할 일(To-Do) 관리

• 빠른 생성: 날짜 선택 후 Space 키를 눌러 즉시 생성 가능.
• 빠른 등록: 제목 입력 후 Enter 키를 눌러 즉시 등록 가능.
• 중요도 설정: 별점(1~5점) 시스템을 통한 우선순위 관리.
• 자동 이월: 오늘 끝내지 못한 할 일은 다음 날로 자동 이월되어 잊지 않게 도와줍니다.

3. 스마트 캘린더 & 사이드 패널

• 다중 일정 표시: 한 칸에 여러 개의 프로젝트와 할 일을 모두 표시.
• 일별 요약: 날짜별 프로젝트(P)와 할 일(T) 개수를 요약 뱃지로 제공.
• 필터 기능: 상세 세션에서 '프로젝트만', '할 일만' 혹은 '모두 보기' 필터링 가능.

🔎 생성형 AI를 통한 바이브 코딩을 할 때 중요한 내용

• 효율적인 요청 제미나이의 경우 하루 최대 100개 프롬프트를 생성할 수 있다. 그렇기 때문에 많은 수정을 요하는 프롬프트보단, 한 번에 확실하게 만들어질 수 있는 프롬프트를 생성하는 것이 더 효율적이다. 처음부터 개발을 시키는 것보단, 초안을 주고 계획 단계를 진행 => 계획이 잘 진행되었다 생각할 때 개발 단계 진행
• 정확한 프롬프트 작성 제미나이에게 원하는 것을 보낼 때, 굉장히 간결하고 짧게 전송을 했었다. 주어를 빼고 얘기를 한다던지 내 아이디어 중 당연하다고 생각하는 것을 제외하고 전송을 했다. 그렇다.. 얘는 내가 아니다 !!! 정말 디테일한 부분까지 자세하게 설명해야 원하는 결과값을 도출해낼 수 있었다.

후기

아직 여러 부분을 시도 중에 있지만, 바이브코딩을 통해 프론드엔드와 백엔드가 모두 설정이 원활하게 될 수 있다는 것을 느꼈다. 또 한번 생성형 AI의 위대함을 실감하고 나의 일자리가 줄어드는 것을 실감한다.. 내 일은 얘가 다 대체할 수 있을 것 같다는 생각이 든다. 아직은 사람의 손길이 있어야 하지만, 종종 기업들에서 AI로 인한 자동화 시스템을 만든다는 소리가 들려오는 것을 보면 머지 않은 순간인 것 같다. 나는 뭘 하고 먹고 살아야지.. 다음에는 데이터베이스 관련된 내용을 들고 오겠다!

글로벌 뷰티&헬스 트렌드 리딩 옴니채널의 라이프스타일 플랫폼

• 국내 대표 헬스&뷰티(H&B) 스토어
• 건강(Health) + 아름다움(Beauty) + 라이프스타일
• 오프라인 매장 1,371개, 월간 활성 이용자 수 523만명, 상품 종류 63,973개 (24년 12월 기준)

TAGET

• 뷰티/트렌드에 민감한 옴니채널을 잘 활용하는 2030 여성
• 뷰티&헬스케어에 관심많은 전 연령대

비즈니스 모델

✔️ 타사 벤치마킹

CHICOR(시코르)

S(강점)

• 프리미엄 멀티 브랜드 편집숍
• 강화된 K-뷰티 구성 및 특화 MD 구성
• 체험 중심의 오프라인 공간 구성
• PB 제품
• 다양한 글로벌 브랜드 입점

  W(약점)

• 오프라인 매장 수 감소
• 브랜드 인지도 부족

  O(기회)

• 향수 시장 공략
• 체험형 리테일 트렌드
• PB 제품 강화
• 브랜드 홍보

  T(위협)

• 경쟁사의 성장으로 인한 성장 정체
• 국내 뷰티&헬스 시장에서의 경쟁성 저하

아모레퍼시픽 공식몰

S(강점)

• 아모레퍼시픽 제품을 저렴하게 구매 가능
• R&D 역량과 혁신 기반 컨텐츠 제공

  W(약점)

• 자사 브랜드만으로 확장 어려움
• 사용자 수가 적음
• 뷰티&헬스 케어에서 뷰티로 취중됨

  O(기회)

• 브랜드 홍보를 통한 자사몰 가입 유도
• 자사몰 프로모션
• 자사몰 큐레이션 제공
• 자사 브랜드 간의 협업

  T(위협)

• 활동사용자층 확보 어려움
• 타사 브랜드들 사이에서 가격/제품 경쟁력 위협

🔑 KEY 서비스

1. AI기술 기반 맞춤형 추천 서비스

1,500만 멤버십과 연 1억 건 이상의 결제 데이터 기반 빅데이터로 이루어진 다양한 AI 추천 알고리즘 기획·개발 및 고도화를 통해 고객 개개인을 위한 최적화된 맞춤형 큐레이션 제공

2. 옴니서비스 _ 오늘드림, 픽업

올리브영 온라인몰에서 구매한 상품을 주문 후 당일 최대 3시간 안에 배송 받아볼 수 있는 ‘오늘드림’ 서비스와 올리브영 온라인몰 구매 상품을 가까운 매장에서 바로 찾아갈 수 있는 ‘픽업’ 서비스

3. 웰니스 전문관 _ 헬스+

기존에 하나로 묶여있던 뷰티&헬스에서 헬스만의 탭을 따로 만들어 헬스의 가치를 높여주는 서비스

4. 올리브영만의 콘텐츠 _ 발견

올리브영 SNS ‘셔터’와 ‘매거진’, ‘라이브’를 통해 올리브영에서 구매할 수 있는 상품들을 추천하고, 혜택을 받을 수 있는 콘텐츠 서비스

5. 오늘의 특별 할인가 _ 오특

하루에 한 번씩 변경되는 세일 목록으로 기존보다 훨씬 더 할인된 가격으로 상품을 구매할 수 있는 서비스

6. 세분화된 카테고리

트렌드에 맞춰 세분화되는 카테고리 구성 예) 마스크팩 > 패드 탭, 스킨케어 > 스킨케어 디바이스 카테고리 새로 생성

7. 상품 리뷰 서비스

구매한 상품의 리뷰를 작성할 수 있는 기능, 완성도 높은 리뷰에는 ‘도움이 돼요(좋아요)’를 누를 수 있어 리뷰의 신뢰감을 높임

10. 랭킹 서비스

온라인 판매 데이터를 통한 판매 랭킹, 브랜드 랭킹 제공

📱 UX Pain Point 분석

발견 > 라이브

Pain Point 라이브 창에서 ‘라이브 예고’는 맨 위쪽 상단에 위치해있지만, 라이브를 기다리며 작성하는 ‘라이브 예고 댓글창’은 ‘숏폼’과 ‘지난 라이브 다시보기’와 ‘오직 올영 라이브에서만’ 콘텐츠들을 모두 본 이후에 나오기 때문에 관계가 있다는 느낌이 잘 들지 않는다.

해결책 라이브 예고 바로 밑으로 댓글창을 옮겨서 ‘라이브 예고’에 대한 댓글창이라는 것을 인식시켜준다.

기대효과

• 라이브 예고 댓글 이벤트를 하게 된다면, 사용자들이 댓글을 더욱 잘 찾을 수 있어 참여도가 높아질 것이다.
• 라이브 예고 댓글을 보고 호기심에 라이브를 챙겨보게 되는 사용자들이 많아질 것이다.

헬스+ > 건기식 상세 페이지

Pain Point 헬스+에서 건기식 상세페이지를 보면 주요 정보, 권장 섭취 정보를 알려주는 것은 정말 좋은 접근법이다. 하지만, 여러 건기식을 비교해보고 싶을 때 비교할 수 있는 창이 없어서 하나하나 상세페이지를 들어가서 주요 정보와 권장 섭취 정보를 확인해야 한다.

해결책 주요 성분 아래쪽에 비교하고 싶은 상품 하나를 선택해서 가져올 수 있는 기능이 존재하여, 상품 이름과 주요 정보, 권장 섭취 정보, 주요 성분을 같이 보고, 비교할 수 있게 기능을 추가한다.

기대효과

• 많은 건기식들 사이에서 비교를 제대로 하지 못해 고민만 하다가 이탈하는 사용자들을 감소시킬 수 있다.

마이페이지 > 기프트카드

Pain Point 올리브영 내부에 기프트카드 서비스가 있지만, 카드 충전 기능이 있지 않아, 여러 기프트카드를 받았을 경우 하나로 합칠 수 가 없다.

해결책

• 올영 페이를 만들어서 기프트카드의 잔액을 올영 페이에 옮겨서 사용할 수 있도록 한다.
• ‘스타벅스 카드’처럼 다른 카드에 잔액 이동이 가능하게 한다.

기대효과

• 올영 페이를 만들 경우, 페이 자동충전을 진행하여 결제를 할 때, 보다 간편한 결제를 할 수 있다.
• 카드 잔액 이동 기능을 추가할 경우, 올리브영 카드를 ‘번거롭다’라고 생각하는 사람보다 ‘편하다’라고 생각하는 사람들이 증가할 것이다.

과제 작성 시 고민이나, 어려웠던 점

• 케이스 스터디 작성법이 이게 맞는지 궁금했습니다.
• 어떤 요소들을 넣어야하는지에 대한 어려움이 많았습니다.
• 벤치마킹을 할 때, 여러가지 서비스 분석법들을 가지고 분석을 해야하는 건지, 아니면 다른 벤치마킹하는 방법이 있는 건지 궁금합니다.
• 처음 작성해보는 케이스 스터디라.. 어떻게 작성하는 게 좋은 작성법이고, 케이스 스터디를 할 때에는 어떤 부분에 집중하고 강조해야하는지 궁금합니다.

🔔 멘토 피드백

좋은 점

1. 비즈니스 모델이 구조적으로 잘 정리되어 있어, 처음 보는 사람도 올리브영의 사업 구조와 강점을 한눈에 이해할 수 있을 것 같네요 ㅎㅎ
2. 경쟁사 벤치마킹에서 강점/약점/기회/위협을 구분해 서술한 부분이 명확해, 비교 분석의 가독성이 높습니다.
3. UX 페인포인트 분석에서 실제 화면 캡처를 근거로 제시하여 문제 상황이 직관적으로 전달된 점이 좋습니다. 덕분에 개선 방향의 필요성이 설득력 있게 보입니다.

개선 사항

1. 페인포인트가 잘 정리해주셨으나, 중요도나 우선순위 판단 기준이 드러나지 않아 모든 문제가 동등하게 보입니다. VOC 빈도나 매출·전환율 영향 등을 근거로 가중치를 부여하면 전략적 설득력이 높아집니다.
2. 개선안에서 기능 아이디어는 명확하지만, 도입 시 예상되는 사용자 행동 변화와 비즈니스 지표 변화를 연결하면 더 완성도가 높아질 것 같아요.
3. ‘헬스+ > 건기식 상세 페이지’ 페인포인트는 해결안이 기능 추가 중심으로만 제시되어 있는데, 사용자 여정상 진입 경로나 비교 과정의 UX 흐름까지 설계하면 더 현실적인 개선안이 될 수 있습니다.

<과제 작성 시 고민이나, 어려웠던 점에 대한 답변>

• 케이스 스터디 작성 방식에 대한 고민이 있었다는 점이 공감됩니다. 실제로 서비스 분석만 나열하면 단순 정보 전달로 끝날 수 있어, 문제 정의 → 가설 설정 → 개선안 → 기대효과의 흐름을 의도적으로 구조화하는 훈련이 필요합니다.해서, 단순히 비즈니스모델 등 시장이나 거시적으로 분석하기보다는 주제를 정해서 접근해보시는 것을 조금 더 추천해보고 싶습니다.

• 처음 작성하는 경우, 분석 깊이와 범위를 어떻게 설정할지가 가장 어렵습니다. 모든 문제를 다루기보다, 사용자 영향과 비즈니스 임팩트가 큰 핵심 과제 1~2개에 집중하는 것이 효율적입니다.

• 화면 분석에서 실제 사용자 리뷰나 정량 데이터 부족이 어려움으로 보이는데, 이는 공용 설문·앱스토어 리뷰·SNS 검색 등을 통해 보완할 수 있습니다.

피드백을 구체적으로 달아주셔서 앞으로 케이스 스터디를 할 때 어떻게 갈피를 잡아야 하는지 알 수 있었다. 피드백을 반영한 케이스 스터디도 꼭 만들어서 올리겠다 만약 지나가다가 보시고 보완할 사항이 있다면 진심어린 댓글 부탁드립니다

나는 개발이 좋다는 생각을 한 번도 해본 적이 없는 것 같다. 소프트웨어전공을 나왔으니까, 내가 할 줄 아는 게 이거니까, 이런 이유들로 전공을 살릴려고 무진장 애를 썼다. 그렇게 들어온 회사는 개발 회사도 아니었고, 다른 친구들은 개발 회사에 들어가서 한 자리를 어엿하게 꾀고 있는데 나는 여기서 뭐하는 거지?라는 생각이 들었다. 하지만 그 친구들처럼 코딩테스트를 통과하고 '개발자'라는 이름으로 어딘가에 선다는 것. 난 그럴 수 없다고 생각했다. 나는 턱없이 부족하니까. 내 자신이 턱없이 부족하다고 느껴지더라도 나는 별다른 노력을 하지 않았다. 모두들 사이드 프로젝트를 진행한다는데, 나는 퇴근하고 개발이 하고 싶지 않았다. 결국 내가 정말로 하고 싶은 것은 무엇일까? 본질적인 질문을 던지기 시작했다. 나는 여러 분야에 두루두루 관심이 있고, 회의가 재밌고, 같이 성장해 나가는 희열을 느끼고 싶었다. 한 번 애정이 가면 받는 돈이고 뭐고 난 그걸 성공 시키고 싶다는 마음을 강하게 느낀다. 아, 나 기획이 하고 싶나봐 어렸을 때부터 PD, 무대 연출 등.. 이런 거에만 관심이 있던 나는, 이번에 PM에 도전해보려고 한다. 이번에도 시작도 하기 전에 지레 겁부터 먹고 내가 잘 할 수 있을까?라는 질문을 수도없이 던져본다. 하지만 지금보다는 재밌을 것 같다. 내가 열정을 가지고 임할 수 있는 일이라고 생각해서 난 PM을 준비한다.

왜 제로베이스 PM 스쿨인가

사실 인스타 알고리즘 때문에 알게 되었다. 하지만 직장에 다니면서도 가능하다는 것을 알고 꽤나 흥미로웠다. 그때 당시가 아니었다면 나는 변하려고 시도를 안했을 것이다. 내가 원하는 시간에 강의를 듣고 과제를 해낼 수 있고 이번 100% 취업보장이 또 내 귀를 살랑 건드렸다.

그래서 내가 하고싶은 PM은 뭐야?

PM은 프로덕트 매니저, 어떻게 보면 서비스 기획자이다.

서비스 기획자 : 사용자가 겪고 있는 문제를 발굴하고 이를 해결하기 위한 모든 과정을 설계하는 사람

하나의 서비스가 출시하기까지, 무수히 많은 팀을 거치게 된다. 기획팀, 디자인팀, 퍼블리싱팀, 개발팀, 마케팅팀, 운영팀, 사업팀.. 이 모든 사람들과 소통할 수 있는 사람이 PM이다. PM은 타당성과 사업성을 검토하여 서비스를 개발하거나 기능을 추가하는 등 더 나은 서비스를 만들기 위해 노력한다. 하지만 이 노력에는 반드시 사용자로부터 나온 데이터 즉, 근거가 필요하다. 이러한 근거들을 바탕으로 이해관계자와 팀들을 설득시켜 새로운 기능과 서비스를 만들어낼 수 있어야 한다. 서비스를 총괄하는 사람 = PM 이다.

내가 되고 싶은 PM의 모습

아직은 초창기라 이제야 걸음마를 떼고 있는 느낌이다. 현업에서는 어떤 역할일지 감도 안잡힌다. 하지만, 내가 PM이 된다면 책임감을 가지고 하나의 프로젝트를 성장시켜 사용자들에게 더 나은 내일을 제공해줄 수 있는 PM이 되고싶다.

앞으로 4개월의 각오

이번 제로베이스 PM스쿨은 8월에 시작해 11월에 막을 내린다. 앞으로 4개월동안 전공 하나 속공으로 배운다고 생각하면서 열심히 임해야겠다고 생각한다. 중간에 낙오되지 않게 남들보다 2배는 더 열심히 임해야겠다. 투자한 돈과 시간만큼 제대로 된 학습을 하여 새로운 앞길로 나아가는 점프를 하고 싶다. 해낼 수 있다. 아자아자!

다음 내용을 자신의 블로그에 포스팅합니다.

① 아티클 링크 ② 간단 요약 - 주제, 핵심정보 ③ 나의 생각

* 얼리버드 퀘스트 10개 완수 혜택을 받으시려면, 최소 700자 이상 작성해야 합니다. 내용이 짧을 경우, 아티클 2개를 소개해주세요.

요즘 IT

'요즘 IT'라는 사이트는 나도 자주 들어가서 확인하는 사이트이다. 이 사이트에 들어가면 현재 어떤 것들이 세간의 관심을 받고 있는지 알 수 있다.

프로젝트보다 '프로덕트' 중심 마인드셋이 중요한 이유

이 아티클을 선택한 이유

최근에 '프로젝트'보다 더 넓은 범위의 용어로 '프로덕트'라는 말이 사용되고 있는 것 같은데, 이 '프로덕트'라는 말이 정확하게 내포하는 의미가 무엇인지 궁금하여 이 아티클을 선택하게 되었다.

간단 요약

- 주제 : 기획에서 가장 중요한 것은 가치와 혜택

*- 핵심 정보 * 가치를 최우선으로 생각해야한다. 과거에는 '아이언 트라이앵글'이라는 '작업 범위, 시간, 비용'에 관하여 프로젝트가 진행이 되었다. 주어진 시간 안에 일을 완료할 수 있을지, 충분한 자원(예산)이 있는지, 시간과 자원에 맞춰 작업 범위가 설정되어 있는지를 확인했다. 하지만 현대적인 제품에서는 '가치와 혜택'이 우선순위가 된다. 아이언 트라이앵글을 사용했을 때 IT 프로젝트의 실패율은 높았고, '가치'를 중점적으로 설계해야만 살아남을 수 있다.

제품 사고방식에 접근하는 방법

• 이 기능 아이디어가 해결하려는 문제가 무엇인가?
• 그 문제가 지금 개발 중인 제품과 실제로 연관이 있는가?
• 더 빠르거나 더 효율적인 해결 방법은 없는가?
• 지금 당장 해결해야 할 가장 가치 있는 문제인가?
• 이 문제의 해결이 현재 또는 미래 전략과 일치하는가? 만약 그러지 않다면, 전략을 수정하거나 업데이트해야 하는가?

=> 이것들이 해결되지 않는다면 제대로 된 프로덕트가 나올 수 없다.

'프로젝트 매니저'와 달리 '프로덕트 매니저'는 해당하는 도메인에 대한 깊은 이해도가 필요하고, 자신의 기술, 역량, 도구를 활용하여 본인이 처한 상황을 해결할 수 있어야 한다. 문제의 본질을 파악하기 위해 정성적 또는 정량적 연구를 포함한 1차 연구를 직접 수행할 수도 있고, UX 디자이너와 엔지니어와 함께 새로운 아이디어를 도출하여 가정이나 가설을 테스트할 수도 있다. 문제를 독립적으로 해결할 수 있어야 하며, 명확하지 않은 전략이나 불확실한 결과에 대해서는 상위 리더들이랑 논의할 수도 있어야 한다. '프로덕트 매니저'는 조율자 역할인 '프로젝트 매니저'의 역할에 그치지 않고 이 과정을 주도하는 핵심적인 리더의 역할을 한다.

프로덕트 매니저는 이 제품이 어떤 가치를 더할 수 있는가? 이 제품이 해결하는 문제는 무엇인가? 이 제품이 바꾸는 사용자의 행동은 무엇인가? 를 고민하며 새로운 기능을 생각해낸다.

프로덕트 매니저는 이해 관계자들에게 '우리가 무엇을 해야 할까요?'라고 묻지 않고, '우리는 이걸 해야합니다.', 혹은 '다음과 같은 옵션들이 있습니다.'라고 얘기한다.

누군가가 시키기 때문에 하는 일이 아닌 본인이 주도적으로 나서서 일을 해야 한다는 것. 그리고 그 일에는 분명한 근거가 있어야 한다는 것. 그것이 프로덕트 매니저가 가져야하는 마인드셋이다.

나의 생각

이번 아티클을 보면서, 단순히 프로젝트 매니저에 그치는 것이 아니라 프로덕트 매니저가 되기 위해서 주도하는 리더십을 길러야겠다는 생각을 했다. 결국 끊임없이 사고하고 소통하면서 사람들을 이끌어나가는 진정한 리더가 되는 것이 나의 큰 목표인 것 같다. 하나의 서비스를 맡는다는 게, 누군가에겐 그냥 일일 수도 있지만 나에게는 크나큰 책임이라고 느껴진다. 그걸 어떻게 성장시키냐에 따라 서비스에 대한 애증도 생길 것이다. 나는 그런 애증을 느껴보고 싶다.

한성규 기획자님 아티클 요약

1. 타입폼을 활용하는 다섯 가지 색다른 방법

KEYWORD : 타입폼, 설문조사, 기존의 텍스트만 있는 서베이가 아닌 여러 미디어를 활용할 수 있는 서베이

흥미로웠던 점

• 한성규 기획자님께서 해당 아티클을 준비하면서 실제로 A,B,C 그룹을 나누어 피드백 설문을 진행했었는데, 이 설문에서 제일 동적인 '타입폼'을 통한 응답률이 가장 높았다는 것
• 설문조사뿐만 아니라 신규 입사자를 위한 튜토리얼, 이미지를 활용한 가벼운 게임, 팀을 위한 소개글 작성하기, 회의 또는 기타 우선 순위의 설정, 아이디어의 검증 및 확인 등 여러 방면으로 툴을 활용하는 능력이 뛰어나다는 것

내용 : https://ditoday.com/%ed%83%80%ec%9e%85%ed%8f%bc%ec%9d%84-%ed%99%9c%ec%9a%a9%ed%95%98%eb%8a%94-%eb%8b%a4%ec%84%af-%ea%b0%80%ec%a7%80-%ec%83%89%eb%8b%a4%eb%a5%b8-%eb%b0%a9%eb%b2%95/

2. 리뷰 기능 기획 시 참고해야 할 7가지 기준과 사례①

KEYWORD : 리뷰 서비스 역이용, 리뷰에 대한 신뢰도, 리뷰 정책 개선을 위한 기업들의 노력

흥미로웠던 점

• 지금은 키워드 단위의 검색과 리뷰 서비스가 많이 발전해있지만, 글을 쓰는 21년까지만 해도 키워크 단위로 리뷰를 쪼개고 검증하는 일들이 많지 않았다는 것
• 21년부터 25년이 되면서도 여전히 리뷰에 대한 불신은 있지만, 소정의 원고료나 협찬을 받았을 경우 무조건 기재를 해놓게 변하고 돈을 받고 리뷰를 쓰는 리뷰어들이 정말 많아졌다는 것
• 과거에서부터 지금까지 리뷰에 대한 고민이 정말 많다는 것
• 각 서비스들이 각기 다른 문제에 포커싱을 하며 리뷰에 접근하고 있다는 것

내용 : https://ditoday.com/%eb%a6%ac%eb%b7%b0-%ea%b8%b0%eb%8a%a5-%ea%b8%b0%ed%9a%8d-%ec%8b%9c-%ec%b0%b8%ea%b3%a0%ed%95%b4%ec%95%bc-%ed%95%a0-7%ea%b0%80%ec%a7%80-%ea%b8%b0%ec%a4%80%ea%b3%bc-%ec%82%ac%eb%a1%80%e2%91%a0/

3. 기획자의 서비스 뜯어보기

KEYWORD : 카카오 검색, 마이리얼트립-홈, 쑥쑥찰칵-온보딩, 웨이브-상세

흥미로웠던 점

• 일반 사람들은 그냥 바뀌었네?라고 생각하고 넘어갈만한 요소들을 다시 한번 짚고 넘어가면서, 바뀌기 전과 후를 비교하면서 더 나은 방안을 알아보는 것
• 각각의 기능의 요소와 배치와 사용자 UX를 '왜 이렇게 했지?'라는 시각으로 분석하는 것
• 분석을 하면 할수록 사용자의 니즈를 유추할 수 있었고 그에 따른 기획자의 의도를 알아볼 수 있었다는 것

내용 : https://ditoday.com/%ea%b8%b0%ed%9a%8d%ec%9e%90%ec%9d%98-%ec%84%9c%eb%b9%84%ec%8a%a4-%eb%9c%af%ec%96%b4%eb%b3%b4%ea%b8%b0-4/

오늘 새롭게 알게 된 점 + 느낀점

기획자들은 결코 없는 데이터를 가지고 두루뭉실하게 넘어가지 않는다. 직접 사용자와 소통하고 조사하고 쌓인 데이터를 가지고 더 넓은 시야로 서비스에 집중한다. 서비스 기획 프로세스에는 더블 다이아몬드 프로세스 뿐만 아니라 서비스 기획 프로세스 등 많은 방법이 있고, 내가 처한 상황에 따라 맞는 프로세스로 진행해 나가는 것이 중요하다. 사람들은 서비스가 완성되기까지 기다려주지 않는다. 일단 시장에 서비스를 내보내고, 그 다음에 사용자와 소통하면서 서비스를 갈고 닦게 된다. 완벽한 건 없다. 끊임없이 발전할 때 사람들은 환호한다.

Q. 게임 서비스 기획자나 뷰티 서비스 기획자가 되려면 어떻게 준비해야할까요?

A. 게임 서비스 기획자나 뷰티 서비스 기획자가 되고 싶다면, 각각의 산업 특성과 기획자의 역할을 잘 이해하고, 실제 경험 중심의 포트폴리오와 시장과 사용자에 대한 감각을 함께 갖추는 것이 핵심이에요. 아래에 각 분야별로 필요한 준비 과정을 정리해 드릴게요:

🎮 게임 서비스 기획자 준비 방법

1. 게임 산업 전반에 대한 이해 게임 장르, 플랫폼(모바일, PC, 콘솔), 유통 구조, 수익 모델(F2P, P2P, 광고 등) 등 전반적인 생태계를 이해해야 해요.

최근 인기 게임의 구조나 수익화 모델 분석도 도움이 됩니다.

2. 게임 기획 문서 작성 능력 기획자는 GDD(Game Design Document), 플로우차트, UI/UX 기획서 등을 작성해야 하므로 논리적 사고력과 문서화 능력이 중요해요.

Notion, Figma, Miro 등 협업 도구 활용도 함께 익혀두세요.

3. 운영/라이브 서비스 이해 라이브 서비스 기획자는 출시 이후 유저 데이터를 기반으로 밸런싱, 이벤트 설계, 패치 기획 등을 담당합니다.

유저 리텐션, DAU/MAU, ARPU 같은 지표 기반 분석 역량이 중요합니다.

4. 실습 및 포트폴리오 Unity로 간단한 게임 프로토타입을 만들어 보거나, 웹 브라우저 기반의 기획 샘플을 만들어보세요.

인턴, 공모전 참여 경험, 기획 샘플 (예: 캐릭터 성장 시스템 기획, UI 플로우 설계 등)이 도움이 됩니다.

💄 뷰티 서비스 기획자 준비 방법

1. 뷰티 산업 트렌드 파악 화장품/피부 관리 트렌드, 주요 브랜드, 타겟별 제품군 이해가 기본이에요.

SNS(인스타그램, 틱톡), 뷰티 유튜버, 마켓플레이스 리뷰를 정기적으로 분석해 감각을 키우세요.

2. 서비스 기획 역량 뷰티 앱, 플랫폼(예: 화해, 언니의 파우치, Sephora, Olive Young) 분석

추천 알고리즘, 사용자 여정(Journey Map), UI/UX 기획 등 디지털 서비스 기획 역량이 중요합니다.

3. 사용자 관점 기획 훈련 사용자의 피부 타입, 관심사, 구매 패턴 등을 바탕으로 개인화된 서비스 설계를 훈련하세요.

A/B 테스트나 유저 인터뷰 기획 능력도 큰 강점이에요.

4. 포트폴리오 구축 가상의 뷰티 앱을 기획해 보고 와이어프레임을 제작해보세요.

주요 구성: 메인화면 플로우, 맞춤형 추천 시스템, 리뷰 기능, 이벤트 기획 등

🎓 공통적으로 필요한 역량 역량 설명 논리적 기획력 문제를 정의하고 구조화해 해결하는 능력 데이터 분석력 지표 기반의 기획과 개선을 위한 사고방식 UX/UI 감각 사용자 중심의 흐름 설계 능력 트렌드 민감도 빠르게 변하는 시장과 사용자 욕구 파악 능력 커뮤니케이션 디자이너, 개발자와의 협업 능력

📘 추천 자료 책

《게임 기획자의 생각법》 – 게임 기획 입문서로 훌륭해요

《트렌드 코리아 시리즈》 – 시장 통찰력

《UX 디자인 실무 가이드》 – 실전 중심 UX 지식

교육 플랫폼

패스트캠퍼스, 인프런, Udemy: 기획, UX, 데이터 기반 강좌들

포트폴리오 참고

브런치, 노션, Wanted 포트폴리오 게시판 참고

Q1. 게임 기획 포트폴리오에는 어떤 내용을 포함해야 경쟁력이 높아질까요?

Q2. 뷰티 서비스 기획에서 사용자 데이터를 어떻게 활용하면 좋을까요?

Q3. 초보 기획자가 실무 경험 없이도 실력을 입증할 수 있는 방법은 어떤 게 있을까요?

Q.서비스 기획을 잘하기 위해서 키워야하는 역량과 어떻게 키울 수 있는지를 알려주세요

A. 서비스 기획을 잘하려면 단순한 아이디어 발상 능력뿐 아니라, 문제를 정의하고, 사용자 관점에서 해결책을 설계하고, 이를 실행 가능한 플랜으로 만드는 복합적 역량이 필요해요. 아래에 핵심 역량을 정리하고, 각 역량을 어떻게 키울 수 있는지도 구체적으로 안내드릴게요.

💡 서비스 기획자가 반드시 키워야 할 6가지 핵심 역량과 성장 방법

1. 문제 정의력 (Problem Framing) ✅ 왜 필요한가? 기획은 ‘무엇을 만들 것인가’보다 ‘왜 만들어야 하는가’를 정확히 정의하는 것에서 시작해요.

사용자의 불편, 시장의 공백을 문제 정의 → 기회 발굴로 연결할 수 있어야 합니다.

🚀 어떻게 키울까? 실습: 다양한 앱이나 서비스를 사용하면서 "이건 왜 이렇게 만들었을까?"를 끊임없이 질문하고 노트에 정리.

프레임워크 훈련: 5Whys, Fishbone Diagram, 사용자 여정 맵 등을 사용해 문제를 다각도로 바라보는 연습.

2. 논리적 사고력과 구조화 (Logical Thinking & Structuring) ✅ 왜 필요한가? 기획안을 설명할 때 누구나 이해할 수 있게 정보와 아이디어를 정리하는 힘이 필요해요.

기획은 설득의 예술이기도 하거든요.

🚀 어떻게 키울까? MECE 방식(Mutually Exclusive, Collectively Exhaustive)으로 항목 구분 훈련.

피라미드 구조 훈련: 결론 → 근거 → 사례 순으로 문서나 발표 준비.

보고서, 기획서 작성 습관: Notion, PPT, 워드로 매일 1가지 서비스 분석 기록.

3. UX/UI 감각과 사용자 관점 ✅ 왜 필요한가? 서비스는 ‘사용자 경험’의 총합이에요. 겉만 예뻐서는 안 되고, 행동 흐름이 매끄러워야 합니다.

🚀 어떻게 키울까? 1일 1앱 분석: 인기 앱을 설치하고 사용 흐름, 불편함, 강점을 정리 (Ex: 와이어프레임으로 그려보기).

Figma나 Miro로 UI/UX 그려보기.

Google Analytics / Hotjar로 사용자 행동 데이터 시뮬레이션 경험.

4. 데이터 기반 사고력 (Data Literacy) ✅ 왜 필요한가? 기획의 효과는 숫자로 증명돼야 해요. “느낌상 좋아요”는 먹히지 않아요.

지표 설정, 분석, 인사이트 도출 능력이 필수입니다.

🚀 어떻게 키울까? SQL 기초 학습 (SELECT, JOIN, COUNT 등)

Google Analytics, Amplitude, Firebase 기본 사용법 익히기

AARRR, RICE, NPS 등의 서비스 지표 프레임워크 숙지

5. 시장/트렌드 통찰력 ✅ 왜 필요한가? 서비스는 사용자뿐만 아니라 경쟁과 타이밍도 중요해요.

남보다 먼저 트렌드를 감지하는 능력이 경쟁력입니다.

🚀 어떻게 키울까? 브런치/퍼블리/트렌드 코리아 등에서 시장 사례 구독.

글쓰기 실습: “요즘 20대는 왜 이 앱을 쓸까?” 같은 질문을 던지고 매주 블로그로 정리.

6. 커뮤니케이션 & 협업 역량 ✅ 왜 필요한가? 개발자, 디자이너, 마케터 등과 함께 일하며 조율하고 협업하는 것이 기획자의 일상이에요.

문서화, 회의 리딩, 이슈 대응 능력이 중요합니다.

🚀 어떻게 키울까? 기획 스터디 참여: 다양한 직군과 협업하는 실전 스터디나 사이드 프로젝트

문서 훈련: PRD(Product Requirements Document), Jira 티켓 작성 등 실무 문서 연습

🔧 추천 실습 플랜 (초중급 기준) 주차 실습 과제 사용 도구 1주차 1일 1앱 분석 + 불편한 점 정리 Notion, Google Docs 2주차 개선 아이디어 → 와이어프레임 Figma, Whimsical 3주차 기획서 작성 연습 (주제 자유) PPT, Notion 4주차 기획안 발표 & 피드백 받기 Zoom, Google Meet

✨ 마지막 팁 이해 못한 기능, 불편한 UX를 그냥 넘기지 마세요. 항상 “왜 이렇게 했을까?”를 질문하면서 기획자의 눈으로 세상을 보기 시작하면 자연스럽게 실력이 쌓입니다.

기획은 혼자 하지 않아요. 다양한 직군과 소통하면서 사용자, 사업, 기술의 균형을 맞추는 ‘브레인 센터’ 역할을 지향하세요.

Q1. 서비스 기획에서 실제 사용자 인터뷰를 진행할 때 어떤 질문을 던지면 효과적일까요?

Q2. UX 분석을 위한 와이어프레임 작성 시 어떤 기준으로 화면을 나누어야 할까요?

Q3. 데이터 없이도 좋은 기획을 설득력 있게 제시하려면 어떤 구조나 기법이 효과적일까요?

Q.앞으로 4개월동안 PM에 대해 배우게 될텐데 그걸 가장 잘 정리하고 이해하고 학습할 수 있는 방법은 무엇이 있나요? 노트에 직접 적는게 편하긴 한데 아이패드도 있고 노션도 있고.. 어떤 방법이 가장 효율적이고 그 방법을 잘 사용하기 위해서는 어떤 루틴을 만들어야할까요?

A. 앞으로 4개월간 PM (Product Manager)으로서의 실력을 체계적으로 키우시려는 그 계획, 너무 멋져요. 중요한 건 ‘기록’이 학습을 강화하는 도구가 되어야 하고, 단순히 적는 걸 넘어서 이해 → 요약 → 적용으로 이어지는 구조와 루틴을 갖추는 거예요.

🔧 가장 효율적인 학습 정리 방식: 디지털+아날로그 하이브리드 시스템 📚 핵심 전략: "아이패드 필기 + 노션 정리" 구조로 이중화하고, '리듬'을 만드는 것이 핵심이에요.

도구 목적 장점 ✍️ 아이패드 필기 (GoodNotes / Notability) 강의 들을 때 빠른 메모, 마인드맵, 다이어그램 손으로 쓰면 뇌에 더 오래 남고, 집중력 ↑ 🧠 Notion 정리 개념 구조화, 복습용 요약, 리서치 아카이빙 검색 가능 + 템플릿 활용 + 체계적 관리 가능 📒 종이노트 (보조) 사색 정리, 아이디어 스케치, 감정 정리 디지털에서 벗어나 사고 확장

📆 추천 학습 루틴 (주 단위/일 단위) 🔁 주간 루틴 예시 요일 루틴 목적 월요일 학습 목표 설정 (이번 주 배울 개념/스킬) → Notion에 Task 등록 방향 설정 화~금 강의 수강 + 아이패드 필기 → 하루 15분 노션 요약 집중 + 복습 토요일 한 주 필기 정리 → 핵심만 정리해서 Notion에 "PM 위키"로 저장 장기 기억 일요일 Notion 위키 복습 + [PM 사례 분석] 1건 쓰기 (블로그or노션) 적용 + 아카이빙

🧠 Notion 활용법 (PM 맞춤 구조 제안)

1. PM 위키 → 개념, 프레임워크, 실무 용어 정리

예: AARRR / OKR / PRD / MVP / Jira 흐름

탭: 정의 / 언제 사용 / 예시 / 나의 생각

2. 실전 사례 노트 → PM 인터뷰, 리서치, 실습 사례 저장

예: 쿠팡의 검색 UX 개선 사례 분석

포맷: 상황 - 문제 - 해결 - 배운 점

3. 강의 요약 보드 → 챕터별 핵심 슬라이드/노트 스냅샷 + 요약

Notion에 슬라이드 캡처 + 한줄 요약 + TODO 연결

4. PM 일지 (일간/주간) → 배운 점, 느낀 점, 질문들 기록

“오늘 배운 개념 중 기억에 남는 것 3가지”

“실무에 적용한다면 어떤 상황?”

🔄 루틴을 오래 유지하기 위한 팁 매일 Notion 열기만 해도 OK: 모든 걸 매일 정리하려 하지 말고, “열고 5분 보기”를 습관화

완벽하게 적으려 하지 않기: 요약은 “이해된 것만” 남기는 것이 중요해요

주 1회 리디자인: 매주 일요일에 Notion을 조금씩 리팩토링해서 학습 구조를 자산화

📱 도구 추천 목적 도구 필기/그림 GoodNotes / Notability / Freeform (Apple 기본앱) 정리/관리 Notion, Obsidian (텍스트 기반), Logseq 일정/루틴 TickTick / Google Calendar + 리마인더 복습 RemNote / Quizlet (개념 자동 복습 카드)

🎯 정리하면 학습의 흐름은 반드시 듣기 → 정리 → 요약 → 적용 구조로 설계하세요.

도구는 목적에 따라 병행하면 오히려 기억력과 관리력이 올라갑니다.

중요한 건 정보를 ‘남의 것’에서 ‘내 것’으로 전환시키는 습관입니다.

Q1. 강의에서 배운 내용을 나만의 관점으로 정리하려면 어떤 질문을 던지면 좋을까요?

Q2. PM 지식을 실제 프로젝트나 서비스에 연결하려면 어떤 방식으로 접근하면 좋을까요?

Q3. Notion으로 PM 공부를 정리할 때 효율적인 템플릿 구성은 어떻게 만들 수 있을까요?

2. 해당 질문들을 한 이유

당장 나에게 부족한 부분이 무엇이고, 내가 나아가야 할 곳은 어디인가를 생각했다. 나는 뷰티와 게임쪽에 관심이 많기 때문에 그쪽 도메인으로 성장하고 싶기에 해당 도메인에 관한 정보를 물어보았다. 또한, 나는 '용두사미'가 잘 되는 사람이다. 시작이 창대하고 끝이 미약한 사람으로 그런 행동을 이번에는 하지 않기 위해 어떻게 하면 끝까지 열심히 놓치는 부분이 없이 성장할 수 있을지 물어보았다.

3. 오늘 알게 된 내용(간단 요약)

게임은 전반적인 시장의 흐름을 이해하고 게임 기획 문서 작성 능력이 중요하다. 뷰티는 빠르게 변화되는 시장 중 하나이기 때문에 사용자 관점 기획 훈련을 하는 것이 중요하고 트렌드를 잘 따라가는 것이 중요 요소이다. 서비스 기획자의 모든 생각의 뿌리는 "왜 필요한가?"이다. 이 생각이 뿌리가 되어 뻗어가야지만 다른 역량들이 빛을 낼 수 있다.

① 찾으신 채용 공고 5건 이미지 - 업무 내용 및 지원자격이 포함되어 있어야 합니다.

② 공통적으로 요구하는 사항은 무엇인지 자유롭게 정리해주세요.

• API 연동 관리 가능한 사람
• 도메인에 대한 이해도가 높은 사람
• 각종 협업 tool에 능숙한 사람
• 영어 커뮤니케이션이 능숙한 사람
• 경력직

③ 채용 공고를 검색하며 느낀 점과 앞으로의 학습 각오를 남겨주세요. 개발적인 요소도 분명히 필요한 역량 중 하나이지만, 결국 회사의 서비스를 제대로 이해하고 발전시킬 수 있는 가를 가장 많이 보는 것 같다. 결코 쉬운 일은 아닌 만큼, 신입 보다는 경력직을 훨씬 더 많이 뽑고 있다. 경력과 차이가 아예 안날 순 없겠지만 끊임없이 공부하고 단련해서 내가 지금 성장시킬 수 있는 것부터 차근차근 성장해 나가야겠다는 생각이 들었다. 아직 얼리버드의 단계지만 지레 겁을 먹고 있다.. 용기를 가지고 차근차근 풀어나가야겠다라는 생각이 든다. 아자아자 파이팅 !!

안전행이란?

'안전한 여행'의 줄임말로, 해외 여행 시 안전하게 여행할 수 있도록 여행 관련 안전 정보를 알려주는 커뮤니티이다. 나라별로 안전 정보를 확인할 수 있고, 타 여행 커뮤니티처럼 나라에 대한 정보들을 서로 공유할 수 있는 게시판도 존재한다. 우리는 일본에서 사라진 청년, 동남아에서 살해된 여성에 관한 뉴스를 보면서 우리나라 사람들의 안전한 여행을 도와주기 위해 이러한 서비스를 기획하게 되었다.

나의 역할

나는 Back-end, Front-end, Design 중 'Front-end 개발자'로 해당 프로덕트에 참여했다.

개발 범위를 나눌 때, 페이지 별로 나누어 안전정보 페이지, 로그인 페이지, 회원가입 페이지, 마이페이지를 맡아 개발했다.

과정

전체 회의를 통해 아이디어를 도출하고, 전체적인 사이트 구조를 잡고, 디자인을 Fimga로 진행했다. 다같이 공유한 Fimga를 보면서 수정하고 보완하며 확정을 지은 후, 프론트엔드와 백엔드를 나누어 개발하기 시작했다.

팀원들 모두 API를 제대로 연결해본 적이 없고, 협업이 처음이라 자신이 어떤 역할을 해야하는 지 몰랐다. 나 또한, 3월에 진행한 해커톤에서만 협업을 진행해보았고 그 외에는 프론트엔드 개발자들끼리 진행한 프로젝트들이라 백엔드와 연결을 어떻게 해야되는지 몰랐다. 프로젝트를 개발하면서 axios를 사용해보고, RestAPI 보는 법을 배웠다. DB와 계속 연결을 시도했지만 여러가지 에러에, 뭐가 잘못됐는 지도 알지 못했다. 가까스로 정보를 받아오는 것만 성공해서 차근차근 풀릴 줄 알았는데, 로그인 API에 문제가 있어서 로그인 정보는 주고 받기가 되지 않았다.

결국 해커톤 당일까지 백엔드와 프론트엔드는 연결되지 않았고, 나는 백엔드와 연결이 되면 그 정보들을 보여주는 스타일을 정하려고 했는데, 결국 아무것도 하지 못하고 멈춰버리게 되었다.

회고

'왜 우리는 이 프로덕트를 제대로 완성시키지 못했을까' 생각을 해봤다.

정기적이지 않은 회의 처음에는 매주 회의를 하자고 얘기를 했지만, 그때그때 상황에 따라 매주 회의를 하지 않고 서로 텍스트로만 주고 받았다. 가끔 진행한 회의 조차 비대면으로 진행되어 서로 제대로 된 진행 체크가 이루어지지 않았다.

처음부터 끝까지를 경험한 경험자 부족 나 포함한 모든 팀원들은 프로젝트를 기획부터 배포까지 한 경험이 없었다. 경험이 없다보니 각 과정 속에 필요한 것들을 제대로 캐치해내지 못했고, 엄한 곳에 꽂혀서 회의만 길어지기 일쑤였다. 어떠한 과정을 밟아야 하는지 모르니까 어버버 거리면서 누군가는 시간만 축내기도 했다. 만약 프론트엔드와 백엔드를 연결하는 법이나 API 명세서를 제대로 알려줄 수 있는 사람이 있었다면 연결하는 데에 시간을 덜 소비하지 않았을까 싶다.

컴포넌트 별로 개발하는 게 아닌, 페이지 별로 개발 협업을 하면서, 서로 서로의 코드를 가져다 쓰는 게 아닌 온전히 내 코드만 들여다보는 개발을 했다. 페이지 별로 개발을 했기 때문에 검색바를 공통으로 쓰더라도 메인페이지와 안전정보 페이지에 있는 검색바의 스타일도, 기능도 다르게 개발이 되었다. 컴포넌트로 개발했다면, 하나의 코드를 재사용할 수 있었을텐데 그러지 못했다. 결국 각 페이지마다 서로의 스타일이 잘 묻어났고 서로가 개발한 페이지가 아니면 제대로 알지도 못했다. 협업보다는 서로 다른 곳에서 가져다 붙인 꼴이 되어버려 나는 아직도 코드를 보고 이해하지 못하는 부분이 생겼다.

주석의 중요성 아무리 어제 짰던 코드라도 오늘이 되거나 다음주가 되면 어떤 코드였는지 잊어버리기 일쑤다. 하지만 당장의 개발이 급급해서 주석을 다는 것을 귀찮아하거나 스킵했다. 결국 다른 곳에 사용할 수 있는 코드도 어떤 코드가 무슨 기능인지 알 수 없어서 새로 작성해야 했다. 특히 스타일을 작성할 때는 더 애를 먹었다. 분명 이미 있는 스타일인데 어디에 있는지 몰라서 못찾고 다시 작성해야 해서 비효율적이었다.

느낀점

이번 프로덕트를 통해 이러면 안되겠구나.를 느꼈다. 어디선가 잘못 끼워진 단추를 다시 맞추기엔 너무 오랜 시간이 지나있었고, 팀원들도 이번 프로덕트를 완성할 여력이 안된다고 하여 결국 미완성으로 두게 되었지만 협업에 대한 많은 것들을 알 수 있게 되었던 경험이었다. 다음 프로덕트에선 이번에 회고한 것들을 보완하여 더 나은 협업을 진행했으면 좋겠다.

해당 프로젝트의 깃허브 : https://github.com/zeonzeon-e/LikeLion_Hackathon

홈페이지 : https://programmers.co.kr/ 개발자라면 모두가 알고 있는 코딩테스트 사이트 프로그래머스에서는 코딩테스트 연습을 할 수 있고 교육, 채용 등 개발자에게 필요한 것은 대부분 갖춰져 있다. 실제로 코드를 실행해 볼 수 있는 창이 잘 되어져 있고, 코드 실행하는 창에서 모든 코드를 실행, 채점을 할 수 있다.

2. 백준이란?

홈페이지 : https://www.acmicpc.net/ 개발자라면 모두가 알고 있는 대표적인 코딩테스트 사이트 프로그래머스는 개발자를 위한 모든 것이 갖춰져있다면, 백준같은 경우는 코딩테스트 문제로만 이루어진 사이트다. 프로그래머스보다 다양한 언어를 지원하고 있다.

3. 프로그래머스로 처음을 시작한 이유

프로그래머스는 처음 코딩테스트를 처음 시작하는 사람들에게 최적화되어 있다고 생각한다. 개발 환경을 구성하지 않아도 되고, 어느 pc로 접속해도 코딩테스트 연습을 할 수 있다는 것이 가장 큰 장점이다. 처음에는 장점으로 와닿았던 것들이 문제를 풀면 풀수록 단점으로 와닿아진다.

4. 프로그래머스로 연습을 그만두는 이유

프로그래머스에서 주는 예제를 프로그래머스 코드 실행창이 아닌 다른 개발 환경(VSCode 등)에서 풀려고 하면, 정말 풀기가 난해하다. 그리고 똑같이 입력을 하더라도 값이 다르거나 에러가 나기가 일쑤다.

최근에 VSCode에서 node.js로 개발환경을 갖추고, 프로그래머스 문제를 풀려고 하니 계속 에러가 나고 조건을 까다롭게 맞춰줘야 해서 시간을 많이 허비했다.

5. 백준으로 옮긴 이유

백준에는 javascript라는 항목은 없지만 node.js라는 항목으로 작성하여 풀 수 있다. 내가 VSCode에서 node.js를 사용하여 푼 문제를 그대로 ctrl+c ctrl+v 해도 아무런 문제가 없다. 고로, 나는 오늘부터 백준으로 문제를 풀 것이다.

_다만.. Node.js의 특성인지 모르겠으나.. 런타임은 다소 느리긴 하다.. _

S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다.

물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다.

부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요.

• 제한사항 d는 부서별로 신청한 금액이 들어있는 배열이며, 길이(전체 부서의 개수)는 1 이상 100 이하입니다. d의 각 원소는 부서별로 신청한 금액을 나타내며, 부서별 신청 금액은 1 이상 100,000 이하의 자연수입니다. budget은 예산을 나타내며, 1 이상 10,000,000 이하의 자연수입니다.

입출력 예

입출력 예 설명

입출력 예 #1 각 부서에서 [1원, 3원, 2원, 5원, 4원]만큼의 금액을 신청했습니다. 만약에, 1원, 2원, 4원을 신청한 부서의 물품을 구매해주면 예산 9원에서 7원이 소비되어 2원이 남습니다. 항상 정확히 신청한 금액만큼 지원해 줘야 하므로 남은 2원으로 나머지 부서를 지원해 주지 않습니다. 위 방법 외에 3개 부서를 지원해 줄 방법들은 다음과 같습니다.

1원, 2원, 3원을 신청한 부서의 물품을 구매해주려면 6원이 필요합니다. 1원, 2원, 5원을 신청한 부서의 물품을 구매해주려면 8원이 필요합니다. 1원, 3원, 4원을 신청한 부서의 물품을 구매해주려면 8원이 필요합니다. 1원, 3원, 5원을 신청한 부서의 물품을 구매해주려면 9원이 필요합니다. 3개 부서보다 더 많은 부서의 물품을 구매해 줄 수는 없으므로 최대 3개 부서의 물품을 구매해 줄 수 있습니다.

입출력 예 #2 모든 부서의 물품을 구매해주면 10원이 됩니다. 따라서 최대 4개 부서의 물품을 구매해 줄 수 있습니다.

코드 작성

function solution(d, budget) {
    var answer = 0;
    var result = 0;

      //오름차순으로 정렬한 후 d에 들어있는 배열의 각각을 계산
    d.sort((a, b) => a - b).forEach(price => {
          //만약 result+price가 예산보다 작으면
        if((result+price) <= budget) {
              //resulte에 price를 추가해주고
            result += price; 
              //answer에 개수로 추가해준다.
            answer++;
        }
    });

    return answer;
}

Node.js로 풀어보기

프로그래머스에서 푸는 것과 달리 형변환에 신경썼어야 했어서 꽤나 복잡했다. input으로 받은 건 string으로 받아들여져서 object로 바꾸면 [ [String: '[1,5,4,3,2]'] ] 이렇게.. 생겨먹었따. .. 그래서 되게 혼돈이 왔지만, 일단 Object.values를 사용하여 값을 하나씩 빼주고 배열에다가 추가해주니 해결할 수 있었다. 중간중간에 Number로 형변환했을 때, 값을 바꿀 수 없는 [나 ]나 ,가 NaN으로 설정되어 있는 게 보기 싫어서 필터를 사용해서 없애주었다.

const readline= require("readline");

const rl = readline.createInterface({
    input : process.stdin,
    output : process.stdout,
});
//input 배열로 받아오기
var input = []

rl.on("line", (line) => {
      //엔터로 input값 나누기
    input = line.split(' ');

      //input[0]을 Object 타입으로 명시적 형변환
    input[0] = Object(input[0])
      //input[1]을 Number 타입으로 명시적 형변환
    input[1] = Number(input[1])
    rl.close();
})

rl.on('close', ()=> {
      //함수 실행
    solution(input[0], input[1])
    process.exit();
})

//함수
function solution(d, budget) {
    var answer = 0;
    var result = 0;
      //새로운 배열 생성
    var arr = new Array();
      //명시적 형변환을 해준 d의 values 값만 가져오기
    d = Object.values(d)

      //for문으로 배열에 오브젝트를 숫자형으로 형변환시켜 넣어주기
    for(let i = 0; i <d.length; i++){
        arr[i] = Number(d[i])
    }

      //중간에 들어있는 [ 나 , 나 ] 가 NaN으로 들어가있으니 filter를 사용하여 걸러주기
    arr = arr.filter(Boolean)

      //배열을 오름차순으로 변경, 배열의 각각 원소들 계산
    arr.sort((a, b) => a - b).forEach(price => {
          //result와 price가 budget보다 작으면
        if((result+price) <= budget) {
              //result에 값 더해주고
            result += price;
              //개수 세어주기
            answer++;
        }
    });
    return answer;
}

느낀 점

프로그래머스보다 Node.js로 푸는 것이 더 힘들지만.. 이렇게 풀어보고 에러가 나오는 걸 확인하고 나니까, Node.js로도 에러가 안나야지 진정한 풀이인 것 같아서 힘들어도 이렇게 해야할 것 같다. 그럼 언젠간 익숙해지겠지!

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

• 제한사항 s는 길이가 1 이상, 100이하인 스트링입니다.

입출력 예

코드 작성

function solution(s){
    var answer = '';
      //길이가 짝수이면
    if(s.length % 2 === 0)
          //가운데 두 개 리턴
        answer = s[s.length/2 - 1] + s[s.length/2];
      //길이가 홀수면
    if(s.length % 2 !== 0)
          //가운데 한 개 리턴
          //홀수는 제대로 나누어 떨어지지 않으니까 정수로 바꿔줘야 한다
        answer = s[parseInt(s.length/2)]
    return answer;
}

Node.js로 실행하기

//run.js
const readline= require("readline");

const rl = readline.createInterface({
    input : process.stdin,
    output : process.stdout,
});

var input = ""
rl.on("line", (line) => {
    input = line.split(' ');
    rl.close();
})

rl.on('close', ()=> {
    //input을 String으로 바꿔줘야지 값이 나온다
    input = String(input)
    solution(input)
    process.exit();
})

function solution(s){
    var answer = '';
    if(s.length % 2 === 0)
        answer = s[s.length/2 - 1] + s[s.length/2];
    if(s.length % 2 !== 0)
        answer = s[parseInt(s.length/2)]
    console.log(answer);
    return answer;
}

한 마디

input으로 받아왔을 때 형변환을 제대로 해줘야지 제대로된 값이 나온다. 형변환을 해주지 않으면 배열로 인식한다. 애초에 문제가 String 형식의 단어 였기 때문에 이 부분을 주의하면 된다. node.js로 실행시키는 게 더 성장되는 것 같다.

1. 환경 세팅

먼저 'Code Runner'라는 확장팩을 추가해준다.

Node.js도 설치되어있는지 확인한다. node -v로 node 버전을 확인해서 설치 유무를 확인해볼 수 있다.

node가 설치되어 있지 않다면 아래 링크를 통해 설치받으면 된다.

<node 설치 링크> https://nodejs.org/en/download

2. 코드 실행하기

코드를 실행하기 위해 코드를 실행할 수 있는 js 파일을 하나 만들어준다. 필자는 run.js 로 만들어봤다.

//자바스크립트 내장 모듈 중 readline 사용
const readline= require("readline");

const rl = readline.createInterface({
    input : process.stdin,
    output : process.stdout,
});

//node.js로 받아올 값
var input = ""
//받아온 값을 어떻게 자를지
rl.on("line", (line) => {
    //input = line.split(' '); 등 스페이스, 엔터 등으로 나눌 거 체크
    rl.close();
})

//close가 실행되면 실행될 것들
rl.on('close', ()=> {
  //여기에 input 받은 걸로 실행시키고 싶은 코드 작성
  process.exit();
})

프로그래머스보다 더 정확하게 코드를 확인할 수 있는 것 같다.

참고링크 https://velog.io/@jy777hi/JS%EC%9D%98-%EB%82%B4%EC%9E%A5-%EB%AA%A8%EB%93%88-readline-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EA%B0%92-%EC%9E%85%EB%A0%A5%EB%B0%9B%EA%B8%B0

https://school.programmers.co.kr/learn/courses/30/lessons/77884

문제 설명

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

제한사항

• 1 <= left <= right <= 1,000

입출력 예

입출력 예 설명

입출력 예 #1

• 다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다.

• 따라서,13 + 14 + 15 - 16 + 17 = 43 을 return 해야 합니다.

문제 풀이

먼저 left 부터 시작하여 right로 끝날 때까지 각각의 수의 약수를 구했다.

function solution(left, right){
    var answer = 0;
  //숫자 하나씩 반복
    for(let i=left; i<=right; i++){
      //약수가 짝수인지 홀수인지 판별
       let count = 0;
      //약수 구하기
       for(let j=0; j<=i;j++){
            if(i%j===0)
                count++;
       }
      //짝수이면 더해주고 홀수이면 빼주기
       if(count % 2 === 0)
        answer += i;
       else
        answer -= i;
    }
    return answer;
}

해당 코드를 실행했을 때, 프로그래머스에서는 문제없이 실행이 되었지만 VSCode에서는 실행이 이상하게 되었다.

왜 이렇게 되었을까? 분석해보니 아무래도 숫자를 문자로 인식해서 문자로 합쳐지다보니 count가 짝수인 것만 나온 것 같다.

문자를 정수로 바꾸는 방법

Javascript에서 문자를 정수로 바꾸는 방법은 2가지가 대표적이다.

1. Number()
2. parseInt()

나는 둘 중 Number를 사용하여 풀어봤다.

const readline= require("readline");

const rl = readline.createInterface({
    input : process.stdin,
    output : process.stdout,
});

let input = []
rl.on("line", (line) => {
    input = line.split(' ');
    rl.close();
})

rl.on('close', ()=> {

    solution(input[0],input[1])
    process.exit();
})

function solution(left, right){
    var answer = 0;
    for(let i=left; i<=right; i++){
       let count = 0;
       for(let j=1; j<=i;j++){
            if(i%j===0)
                count++;
       }
    console.log(count)
       if(count % 2 === 0)
         //수정한 부분
        answer += Number(i);
       else
        //수정한 부분
        answer -= Number(i);
    }
    console.log(answer);
    return answer;
}

수정하니 결괏값을 잘 받을 수 있었다.

프로그래머스로 항상 실행해오던 걸 VSCode로 처음 실행해봤는데, 이러한 오류(?)를 발현하게 되었다. 앞으로도 VSCode로 실행해 볼 거 같다. 이중으로 해주는 게 최고일 듯

경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가 서로 다른 종류의 수의 최솟값을 return 하도록 solution 함수를 작성해주세요.

제한사항

• 1 <= k <= tangerine의 길이 <= 100,000
• 1 <= tangerine의 원소 <= 10,000,000

풀이 작성

내 첫 풀이가 에러가 나길래 뭘까.. 싶었는데 console.log를 너무 많이 작성하면 에러가 나더라.. '출력 크기 초과'라는 이름으로 나기 때문에 다음부터 이런 실패 사유가 뜨면 console.log를 다 지워보고 해야겠다.

여기서 중복된 귤을 어떻게 정렬하느냐가 관건인 것 같았다.

중복된 귤이 많은 숫자가 먼저 오게 나열하기. 찾아보니까 중복된 수를 나열하는 방법은 꽤 있었다. reduce, map 등.. 그 중에 나는 reduce로 풀어보았다. return 값은 서로 다른 종류의 수의 최솟값이다. 즉, 무게가 다른 종류가 하나가 더 들어올 때 return 값이 증가된다.

function solution(k, tangerine) {
    var answer = 0;
      //원하는 개수를 담아둔다. 이건 아래의 for문에서 숫자가 줄어들기 때문에 복사를 해놓는 것이다. k의 숫자가 줄어들면 그만큼 for문도 안돌게 되서 계속 틀리게 된다.
    var n = k
    //count 값에 reduce 메소드를 써서 누적을 시켜준다. a[b] 배열에 누적값 a와 현재 요소 b를 받아서 처리한다. 이때 a[b]가 undefined인 경우를 대비하여 (a[b] || 0)으로 처리하는데 이러면 undefined일 때 0이 대신 집어넣어진다. 이를 통해 count 객체에는 각 무게별로 귤의 개수가 저장된다.
    const count = tangerine.reduce((a, b) => {
        a[b]=(a[b] || 0) + 1
        return a;
    }, {})
    console.log(count)

    //count는 요소로만 되어있는 게 아니고 { '1': 2, '2':1 ...} 이런식으로 저장되어 있기때문에 해당하는 값만 꺼내오는 작업이 필요하다.
      //sorted는 해당 오브젝트에서 count values만 꺼내와서 크기 순서대로 정렬해준다.
    const sorted = Object.values(count).sort((a, b) => b - a)
    console.log(sorted)
      //원하는 k 개수만큼 돌면서 개수를 세어준다.
    for(let i =0 ; i < k; i++){
          //먼저 종류가 들어오기 때문에 answer를 늘려준다.
        answer++;
          //만약 원하는 개수가 sorted[i]에 해당하는 개수보다 많으면
        if(n > sorted[i])
              //n에서 sorted[i] 개수만큼 빼주고 다시 돌게 된다.
            n -= sorted[i]
          //만약 남은 n의 개수가 sorted[i] 개수보다 작게 되면 그만 돌게 된다. 왜나면, 굳이 빼주는 작업을 하지 않아도 되고, 여기서 더 빼게되면 n은 음수가 되고 결국 그러면 k개 만큼 다 채워진 게 되기 때문이다.
        else break;
        console.log(n)
    }
    return answer;
}

for문 종류에도 여러가지가 있는데, 이번에는 for of문을 가지고 문제를 푼 사람들이 많길래 이렇게도 풀어보았다. for of는 sorted 배열의 길이만큼 i가 알아서 늘어나는 형식인 것 같았고 나머지는 다 같았다. 어차피 끝까지 돌거면 이것도 나쁘지 않은 방법 같았다. 다음에 반복문에 대해서도 다시 한번 다뤄봐야겠다!

function solution(k, tangerine) {
    var answer = 0;
    var n = k
    const count = tangerine.reduce((a, b) => {
        a[b]=(a[b] || 0) + 1
        return a;
    }, {})
    const sorted = Object.values(count).sort((a, b) => b - a)
    for(let i of sorted){
        answer++
        if(k > i) k-=i
        else break;
    }
    return answer;
}

1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → dream → mother → robot → tank 위 끝말잇기는 다음과 같이 진행됩니다. 1번 사람이 자신의 첫 번째 차례에 tank를 말합니다. 2번 사람이 자신의 첫 번째 차례에 kick을 말합니다. 3번 사람이 자신의 첫 번째 차례에 know를 말합니다. 1번 사람이 자신의 두 번째 차례에 wheel을 말합니다. (계속 진행) 끝말잇기를 계속 진행해 나가다 보면, 3번 사람이 자신의 세 번째 차례에 말한 tank 라는 단어는 이전에 등장했던 단어이므로 탈락하게 됩니다. 사람의 수 n과 사람들이 순서대로 말한 단어 words 가 매개변수로 주어질 때, 가장 먼저 탈락하는 사람의 번호와 그 사람이 자신의 몇 번째 차례에 탈락하는지를 구해서 return 하도록 solution 함수를 완성해주세요.

제한 사항

• 끝말잇기에 참여하는 사람의 수 n은 2 이상 10 이하의 자연수입니다.
• words는 끝말잇기에 사용한 단어들이 순서대로 들어있는 배열이며, 길이는 n 이상 100 이하입니다.
• 단어의 길이는 2 이상 50 이하입니다.
• 모든 단어는 알파벳 소문자로만 이루어져 있습니다.
• 끝말잇기에 사용되는 단어의 뜻(의미)은 신경 쓰지 않으셔도 됩니다.
• 정답은 [ 번호, 차례 ] 형태로 return 해주세요.
• 만약 주어진 단어들로 탈락자가 생기지 않는다면, [0, 0]을 return 해주세요.

풀이 작성

일단 문제가 너무 길어서 보고 놀랬다.. 허거걱 그리고 어떻게 풀어야 할 지 감이 잘 안왔던 것 같다. 이렇게 생각하면 저게 문제고 저렇게 생각하면 이게 문제였다. 그래도 차근히.. 내가 풀 수 있는 선에서 문제를 풀어본다.

용기만 가득해서 for문으로 어떻게 해보겠다고 만들어 낸 코드이다. 보기가 너무 안좋고 더 나은 방법이 있을 거 같은데.. 라고 생각하게 만든다. 이거 짜는데도 시간이 오래 걸렸다. 분발해야지..

내가 짠 코드

function solution(n, words) {
    // n은 사람 수
    // words : 단어 개수

      //정답을 담기 위한 배열
    var answer = [0, 0];
      //마지막 글자가 담길 곳. 첫 단어의 마지막 글자를 넣어놓으면 처음부터 에러가 발생하기 때문에 처음에 첫 단어의 첫 글자를 넣어두고, 첫 단어의 첫 글자와 비교하게 된다.
    var lastWord = words[0].slice(0,1);
      //중복된 단어 반별을 위한 배열
    var same = [];

     //끝까지 돌기 위한 for문
    for(let i=0; i < words.length; i++){
          // 중복된 단어가 있는지 알아보기 
        for(let j=0; j < same.length; j++){
              //same 배열에 들어있는 단어 중 하나라도 같은 단어가 나온다면
            if(same[j] === words[i]){
                answer = [ (i % n)+1, Math.floor(i/n)+1]
                return answer;
            }
        }

          //지금 단어 첫 글자가 이전 단어의 마지막 글자와 같지 않다면
        if(words[i].slice(0, 1) !== lastWord){
            answer = [ i % n + 1, Math.floor(i/n)+1]
            return answer;
        }
          //이전 단어 마지막 글자로 저장되어 있는 lastWord를 지금 단어의 마지막 글자로 바꿔주기
        lastWord = words[i].slice(-1);
          //지금 단어를 same 배열에 넣기
        same.push(words[i]);
    }
    return answer;
}

이게 최선일까 싶어 다른 사람이 짠 코드를 보니까.. 메소드를 정말 잘 이용하셨다.. 나도 이렇게 이용할 수 있는 사람이 되어야겠다고 생각했다. 그렇기 위해선 아직 공부가 많이 필요한 거 같다. 아자아자!

다른 사람이 짠 코드

let lastWord = words[0].slice(0,1);
    let answer = [0, 0]
    var same = []
    words.every((word, idx) => {
        if(same.includes(word)){
            answer = [ idx % n + 1, Math.floor(idx / n) + 1]
            return false
        }
        if(word[0].slice(0, 1) !== lastWord){
            answer = [ idx % n + 1, Math.floor(idx / n) + 1]
            return false
        }

        lastWord = word.slice(-1);
        same.push(word)
        return true;
    })
    return answer;
}

참고 링크 https://school.programmers.co.kr/questions/51632

every() : boolean, 모두 맞거나 틀린 것을 찾아야 할 때 some() : boolean, 하나라도 맞거나 틀린 것을 찾아야 할 때 find() : 배열에서 찾은 첫 번째 요소의 값이 필요할 때 findIndex() : 배열에서 찾은 요소의 인덱스 값이 필요할 때 includes() : boolean, 배열에 찾고 싶은 값이 있는지 알고 싶을 때 filter() : 조건을 만족하는 요소로만 새로운 배열을 만들고 싶을 때

1. Array.prototype.every()

• 배열 순회 메소드
• every()는 배열의 각 엘리먼트에 대해서 테스트 함수의 반환 값이 모두 true인지 확인한다.
• 모든 case가 true일 때 true를 반환, 하나라도 false이면 false 반환.
• 논리연산자 and와 유사하다.
• 어떤 배열 메소드에서도 그랬 듯, 기존 배열 값은 변경되지 않는다.

array. every(functioin(currentValue, index, array), thisValue))

예제 1
function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

예제 2
const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false

2. Array.prototype.some()

• 배열 순회 메소드
• some()은 배열의 각 엘리먼트에 대해서 테스트 함수의 반환 값이 하나라도 true가 있는지 확인한다.
• 하나라도 true가 발생하면 true 반환, 모두 false인 경우만 false 반환.
• 논리연산자 or과 유사하다.
• 역시나 배열 메소드가 그렇 듯 기존 배열 값은 변경되지 않는다.

array.some(function(currentValue, index, array), thisValue))

3. Array.prototype.find()

• 배열 순회 메소드
• find()는 배열에서 테스트 함수를 만족하는 첫 번쨰 요소를 반환한다.
• 역시나 배열 메소드가 그렇 듯 기존 배열 값은 변경되지 않는다.하지만 find 내부에 비교 대상으로 들어가는 배열은 수정될 수 있으니 주의해야 한다.

array.find(function(element, index, array), thisArg))

4. Array.prototype.findIndex()

• 배열 반복 메소드
• 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환
• 없으면 -1 반환

array.findindex(function(currentValue, index, array), thisValue))

5. Array.prototype.includes()

• 배열 순회 메소드
• 배열의 항목에 특정한 값이 포함되어 있는지를 판단한다.
• 판단 여부에 따라 true 혹은 false를 반환한다.
• 역시나 배열 메소드가 그렇 듯 기존 배열 값은 변경되지 않는다.

array.includes(searchElement, formIndex)

• searchElement : 찾을 값
• fromIndex : 검색을 시작할 0 기반 인덱스(음수~0일 경우 배열 전체 검색), 정수로 변환. 단, fromIndex가 배열의 길이보다 크거나 같으면 false가 반환되며 배열 검색이 안된다.
• 반환 값 : fromIndex에서 지정한 값, 또는 true/false

6. Array.prototype.filter()

• 배열 순회 메소드
• 복사 메서드
• 주어진 배열의 일부에 대한 얕은 복사를 하고, 주어진 배열에서 제공된 함수를 통과한 요소로만 필터링한다.

array.filter(function(element, index, array), thisArg)

나의 의견

해당하는 메소드들은 배열 전체에서 조건과 하나라도 틀린 것을 골라내거나 하나라도 맞는 것을 골라낼 때 아주 잘 쓰일 수 있을 것 같다.

참고 링크 https://paperblock.tistory.com/67 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every

길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) = 21) A에서 세번째 숫자인 2, B에서 두번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 21 + 8(2x4) = 29) 즉, 이 경우가 최소가 되므로 29를 return 합니다. 배열 A, B가 주어질 때 최종적으로 누적된 최솟값을 return 하는 solution 함수를 완성해 주세요.

제한사항

• 배열 A, B의 크기 : 1,000 이하의 자연수
• 배열 A, B의 원소의 크기 : 1,000 이하의 자연수

문제풀이

문제를 보자마자 A와 B를 정렬하고 그 둘을 곱해주면 된다고 생각했다. 왜냐하면 A와 B를 곱하고 더한 값을 최소로 만들려면, A의 최대값과 B의 최소값을 곱해줘야 한다. 그래야지 가장 작은 값이 나온다. 예시에 나온 A=[1, 4, 2]와 B=[5, 4, 4]를 보아도, B의 5가 배수를 했을 때 가장 크게 커질 수 있는 수 이므로 A에서 가장 작은 숫자인 1을 곱해줘야만 5가 커지는 현상을 막을 수 있다. 이러한 문제 해석을 바탕으로 코드를 작성하였다. 해당 코드를 한 번에 작성하고 통과를 받아서 굉장히 뿌듯했다.

//정확성: 69.6, 효율성: 30.4
function solution(A,B){
    var answer = 0;
    var array1 = A.sort((a, b) => b - a)
    var array2 = B.sort((a, b) => a - b)

    for(let i =0; i < A.length; i++){
        answer += array1[i] * array2[i]
    }
    return answer;
}

다른 사람 풀이는 이렇다. 정확성과 효율성에서는 똑같은 점수가 나오는 거 보니 내 코드랑 별반 다르지 않은 것 같다. 하지만 reduce 함수를 모르기 때문에 공부해보겠다.

// 정확성: 69.6, 효율성: 30.4
function solution(A,B){
    A.sort((a,b)=>a-b)
    B.sort((a,b)=>b-a)
    const answer = A.reduce((acc,val,idx)=>acc+val*B[idx],0)
    return answer
}

reduce 함수

reduce 함수는 배열의 왼쪽부터 콜박 함수를 실행 후 누적 계산한다.

array.reduce(function(acc, cur, index, arr) { }[, initialValue] )

acc : 누산기 cur : 현재 값 idx : 현재 인덱스 src : 원본 배열 initialValue : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

reduce는 고차함수라고 불리우며 꽤나 많은 사용방법이 있었다. 나머지는 참고 링크를 참고하도록..

참고 링크 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B0%B0%EC%97%B4-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98-reduce

JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요.

제한 조건

• s는 길이 1 이상 200 이하인 문자열입니다.
• s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다.
  • 숫자는 단어의 첫 문자로만 나옵니다.
  • 숫자로만 이루어진 단어는 없습니다.
  • 공백문자가 연속해서 나올 수 있습니다.

문제 풀이

원래 처음에는 for문으로 풀려고 했으나.. 너무 복잡하고 런타임 에러까지 났다.. 일단 코드는 올려보겠다.

function solution(s) {
    var answer = '';
    answer = s.toLowerCase()
    answer = answer.split(' ')
    var result = ''; 
    for(let i= 0; i < answer.length; i++){
        let word = answer[i];
        let fristString = word[0].toUpperCase(0)
        let lastString = word.slice(1).toLowerCase();
        let JadenCase = fristString + lastString;
        result += JadenCase + ' ';
    }
    return result.trim();
}

결국 다른 방도를 찾아봐야 했고, 제일 간단하게 나온 해답이 밑에 있는 코드이다.

function solution(s) {
    return s.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ')
}

map 함수를 사용하면 for문을 돌린 것과 같은 결과를 낳는다.

map() 함수

간단하게 map() 함수에 대해 리마인드 해보겠다.

map()은 배열을 순회하며 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행한다.

Array.map(function(array){ }); 혹은 함수를 작성하는 대신 Array.map(x => x.~~); 이렇게 사용도 가능하다. 두 번째에서 x는 배열의 값을 말한다.

예를 들어 array=[1, 2, 3, 4, 5]가 있으면 x는 0번째부터 도는 배열이기 때문에 순서대로 1, 2, 3, 4, 5의 값을 가지게 된다. 그래서 array.map(x => x*2) 로 사용한다면 각각의 값에 2를 곱한 값이 저장되게 된다. 이 처럼 for문을 돌 필요 없이 간단하게 나타낼 수 있기 때문에 자주 사용된다.