최종 발표

참고용 자료

기동 2팀 ReacTree 기획서의 사본

PPT 템플릿 선정

미리캔버스 디자인 페이지

누구나 무료 템플릿을 통해 디자인을 3분만에 완성할 수 있습니다.

https://www.miricanvas.com/design?sheetW=MTkyMA%3D%3D&sheetH=MTA4MA%3D%3D&templateTypeId=cHJlc2VudGF0aW9u&templateIdx=NDIzOTI%3D

중간 발표 기획서

기동 2팀 ReacTree 기획서

기동 2팀 프로젝트 기획서

https://www.notion.so/2-ReacTree-a2b64be970cd4659ae233b9ca522c99b

프로젝트 개요 (필수)

프로젝트 주제

• 자기주도적 React 학습 SNS 서비스

• 주제, 선정 배경, 로고, 색상, 의 의미..., 서비스 확장성...(기대효과처럼 발표 마지막에 ex)이러이러한 서비스인데, 미래에는 저러저러한 서비스로 확장될 가능성이 충분하다...라고 생각합니다... 리엑트→ 프론트엔드 → 다양한 주제의 커스텀 챌린지)

• 주제 선정 배경: 기존 서비스와의 비교가 아니라, 타겟층이 프롱이 2기인만큼, 프롱이 1기로서 리액트 학습을 진행하면서 더 갈급했던 점, 필요했던 점, 불편했던 점, 비대면으로 학습이 진행되면서 아쉬웠던 점....
• 소통
• 비대면 ⇒ 메꿔준다

• 서비스의 확장성 : ReacTree → FronTree → EveryTree

주제 선정 배경(문제 제기, 어느 한 프롱이의 인터뷰)

현재 프롱이 1기의 온라인 학습 관련 상황 설명!!! - 한계점

• 위에서 아래로 전달되는 방식 (강의)

• 강의를 들으면서 배우긴 배웠는데...기억이 안나네..

• 왜 기억이 안날까? ⇒ 학습 효율성 피라미드 step1

• 내가 알고 있는 지식이 맞는건지 잘 모르겠어...다른 사람의 의견도 궁금해!

• 동일 키워드에 대해 서로 공부하고 의견을 나눠보면 어떨까? step2

• 리액트 재밌긴한데.. 난 의지가 약해서 꾸준히 공부하기가 어려워...

• 어떻게하면 의지를 키워줄 수 있을까? ⇒ 게임처럼 재미있는 퀘스트 형식(트리가 자라나요) step3

왜 주제를 리액트로 잡았는지?

• 타겟층 : 프롱이들

• 프론트엔드 분야에서 가장 핫한 라이브러리는 단연코 React!

• 사용자가 많은데 진입 장벽이 높은 리액트
• https://www.npmtrends.com/angular-vs-react-vs-vue
최근 1년 자료



• https://github.com/vuejs
• 진입 장벽이 높은 자료 필요!!!, 프롱이 1기 설문 조사

• 뷰보다 리액트가 더 어렵게 느껴짐

• 그래서 이걸 쉽게 배울 수 있도록 주제를 선정 ⇒ 기술 스택 리액트 선정이랑 연결

이러한 프롱이들(사람들)의 니즈를 어떻게 하면 해소할 수 있을까? (완료)

• step1. 강의로 또는 책으로 배운 지식을 먼저 나에게 설명해봐! (매일 받는 질문을 통해서) (개인 = 나무)

• step2. 같은 질문에 해당하는 사람들의 답변을 확인하고 소통하며 더 견고한 지식을 쌓아보자! (집단 = 숲)

• step3. 꾸준히 질문에 답변을 남기면 나만의 리액트리는 쑥쑥 자라서 나만의 정리 노트가 완성될꺼야! (성장)

핵심 가치 (완료)

브랜딩 (선택) (완료)

로고

로고가 나무인 이유 (우리와 닮음)

나 : 정체성 ⇒ 집단 ⇒ 성장

• 나무 한그루로는 숲이 만들어지지않음

• 나무 여러 그루가 모여야만 비로소 숲이 됨

리액트라는 숲에서 우리 프롱이들이 함께 성장하면 좋겠다!!!!!

대표 색상

#14bd7e

 

• 나무와 연관있고 사용자 눈에 편안

• 초록은 가장 자연적인 색으로 생명, 성장, 풍요

• 겨울에 두꺼운 땅을 뚫고 나오는 느낌 (새 생명이 움트는 색)

• 개발자 준비생에서 주니어 개발자라는 싹을 틔우는 느낌 (즉, 서비스의 정체성 = 성장과 생명)

기능 소개 (필수)

• 어떤 기능이 탑재되어 있는지 트리처럼 만들면 좋겠다

• 이렇게 페이지별로 기능 정리된 트리 간단 설명(리아님이 올려주신 영상2)

• 페이지 캡쳐해서 화살표로 각 UI에 해당하는 기능 설명 (리아님이 올려주신 영상1)
이렇게 하면 더 눈에 잘 들어올 것 같아요!

이러한 프롱이들(사람들)의 니즈를 어떻게 하면 해소할 수 있을까?

• step1. 강의로 또는 책으로 배운 지식을 먼저 나에게 설명해봐! (매일 받는 질문을 통해서)
• 메인 페이지
• step2. 같은 질문에 해당하는 사람들의 답변을 확인하고 소통하며 더 견고한 지식을 쌓아보자!
• 피드 페이지
• step3. 꾸준히 질문에 답변을 남기면 나만의 리액트리는 쑥쑥 자라서 나만의 정리 노트가 완성될꺼야!
• 마이 트리 페이지

기술 스택 (필수)

• 이런식으로 넣고 상태 관리만 변경하면 될 것 같네요 (리아님이 올려주신 영상2)

• 기술 스택을 선택한 이유 넣기
• 리액트 : 리액트리
리액트를 선택한 이유
• 3명 다 리액트를 처음 학습하는 점과 마지막 최종 프로젝트로 리액트로 정해놓은 상황이었습니다. 리액트로 무언가를 만들어본 경험이 필요했기에 뷰와 리액트 중 리액트를 선택하게 되었습니다.
 
스토리북을 선택한 이유
• 스토리북으로 각자가 만든 컴포넌트를 한눈에 파악하기 위함
 
컨텍스트 API를 사용하는 이유
• 형제 또는 조상, 자식 컴포넌트간의 프롭스 드릴링을 개선하고 중앙집권적으로 데이터를 관리하고 활용하기 위함
 
netlify를 사용한 이유
• 가능한 간편한 배포를 할 수 있게끔 해당 서비스를 선택함
 
전체적으로
배운 지식을 조금 더 진짜 내 지식으로 만들기 위해서 이러한 기술 스택을 채용하였습니다.

시연 (필수)

• 영상 (2~3분)

간단 팀 소개 및 역할 소개 (필수)

• 윤승록

• 문승희

• 김다슬

• 팀 활동 중, 기억에 남는 점: 사소한 이슈라도 모여서 이야기를 나누었다, '나의 에러? 곧 너의 에러' 라는 마음가짐. 노션과 githubProjects, PR 등을 통해서 서로의 프로젝트 진행 상황, 공통 이슈에 대한 정보량의 평등? 유지할 수 있었다.서로서로 믿고 의지할 수 있었다.

• 성향이 다른 팀원들끼리의 조합...오히려 좋아! 단짠단짠의 느낌 서로가 필요한 부분을 채워줬다...

• 완전 수평적이지만 그때그때마다 모두의 에너지를 끌어내서 프로젝트를 진행시켜주는 역할을 맡은 다슬 & 승희, 의견 조율 listener의 역할 승록?

• 김다슬: "한 번 출발한 프로젝트는 멈추지 않는다고 boy~♡"
• 실질적 대장
• 다른 팀원들이 생각하지 못했던 이슈들을 생각하고, 적극적으로 공유합니다
• 프로젝트 일정 관련해서 (PM과 같이) 큰 그림을 제시하고, 팀원들에게 상기시켜줌으로써, 기능개발 과정 중 늘어질 수 있는 스케줄을 다잡아 줌

• 문승희: "이거 맞아? 한 번 더 확인해 봅시다! 팀원들의 코드를 보고, 발생가능한 시나리오를 예측한다고 해야하나? '이렇게하면~? 이렇게 되겠죠?' 예언자 느낌.
• 코드 리뷰 과정에서, 의문이 드는 코드에 대해 바로바로 적극적으로 코드 작성자에게 질문 → 코드 작성자 자신이 자신의 코드에 대해 한 번 더 생각해보게 되고, 더 좋은 코드를 작성자 스스로 생각해 낼 수 있도록 Nudge함
• 코드 suggestion 을 해주는데, 좋은 관점에서 개선안을 제시해 줌
• "코드 길잡이"

• 윤승록: "맞지맞지~"
• ??처음에 느렸다가 나중에 빨라지는? 영양분을 많이 품은 씨앗...?
• 아무도 나서지 않을 때 자연스레 먼저 나서는 역할 총대매기
• 칭찬에 인색하지 않다
• 리액션이 좋다

배포 링크 추가 (필수)

최종 발표 막바지 작업

업무 분배

시연 영상 시나리오

1. 회원가입 클릭
1. Enter →에러 발생
1. reactree 입력 → Enter 에러
2. 김다슬입력 → 통과
3. 비밀번호 test1234 → 에러
4. 비밀번호 test1234! → 통과

1. 로그인
1. 바로 로그인

1. 메인 페이지
1. 채널 1부터 시작하고, Answer에 답변 적는다
2. 저장버튼 클릭, 피드로 머무르기 클릭
3. 채널 열린 것 확인
4. 헤더의 피드 눌러서 이동
 

2. 피드페이지
1. 첫 번째 글에 좋아요 를 클릭한다
2. 첫 번째 글에 댓글을 단다
3. 마음이 바뀌어 첫번째 글의 좋아요를 해제하고, 내가 쓴 글의 좋아요를 클릭한다
4. 친구 검색 모달 클릭
1. (사전에) '윤승록문' 이름의 계정이 로그인 되어 있다
2. (사전에)'문타리' 계정은 로그아웃 되어 있다
3. 서치바를 클릭하여 활성화 한 후, '문타리'를 적는다
4. 문타리를 follow한다
5. 접속 중인 문타리와 승록을 확인하고 모달 바깥을 클릭하여 친구 검색 모달을 닫는다

1. 세팅페이지
1. 아바타 이미지 추가 버튼을 누르고, 아바타 이미지 (자신감 넘치는 다람이)를 추가한다
2. 커버 이미지 추가 버튼을 누르고, 오프라인 모임 이미지를 추가한다
3. 이름을 '김다슬짱짱걸'로 변경하고
4. 비밀번호는 daseul8086!로 바꾸는 척 바꾸지 않는다
5. '변경하기' 버튼을 누르고 '저장완료' alert가 뜸
6. 새로고침을 안 해도 적용이 되니까 걱정하지 말자

2. 메인페이지로 이동
1. 1번 게시물을 수정합니다
2. 이동하기 버튼을 클릭합니다
3. 피드페이지에서 수정된 글과 바뀐 이미지를 확인합니다
 

3. 로그아웃을 통해 시연 종료