개발시넌

SIPE : 인프콘 커뮤니티 부스 운영 후기

synun — Mon, 12 Aug 2024 02:02:48 +0900

8월 2일에 코엑스에서 IT 컨퍼런스인 인프콘이 열렸다.

인프콘은 올해로만 벌써 세번째나 진행된 행사이고, IT 관련 종사자라면 누구나 가고 싶어하는 행사이다.

그래서 항상 티켓팅에 실패하기만 했었던 기억이 있다.

이번에 좋은 기회로 인프런에서 커뮤니티 협업 제안을 주셔서

감사하게도 인프콘의 한자리를 담당할 수 있었다.

우리가 여기 올라가 있다니... (감격)

부스 운영을 기획하고 준비한 경험부터

SIPE에 대해서까지 간단하게 나눠보려고 한다.

부스 이벤트 기획하기

부스에서 진행하는 두가지 이벤트를 기획해야 했다.

첫번째는 인프콘에서 커뮤니티 부스에서 스탬프를 받을 수 있는 이벤트

두번째는 부스에서 자체적으로 준비한 이벤트

이벤트 상품으로 주어질 굿즈들과 부스를 지나가는 모두에게 사이프 홍보용으로 주어질 팜플렛이 필요했다.

팜플렛의 특성 상 쉽게 버려지고 쓸모 없는 데다가 만드는 리소스가 너무 많이 든다는 단점이 있었다.

무엇보다 준비한 굿즈가 버려져있는 걸 보면 너무 가슴이 아팠기 때문에

여름에 가장 실용적인 부채를 팜플렛으로 사용하자고 의견이 모여졌다.

금전적인 사정과 준비 시간 등등의 여러 사정으로 인해서

메인 굿즈는 스티커로 확정했다.

여러 행사를 준비해본 경험으로는 스티커가 제일 가심비가 있는 굿즈이고

한 사이퍼분 만들어 주신 스티커 디자인이 너무너무너무 귀엽고 예뻐서

인프콘 참여자 분들을 충분히 사로잡을 수 있을 거라고 확신했다.

사이프가 개발자만을 위한 동아리이기 때문에

IT 관련 종사자 모두가 찾아오는 인프콘에서 모두의 관심을 끌기 어려울 것이라는 고민이 있었다.

하지만, 남녀노소, 직군을 가리지 않고 좋아하는 기특한 효묘(?) 역할을 해주어서

개발자가 아니더라도 사이프 부스에 관심을 보여주시는 분들이 참 많았다.

인프콘 참여자들이 줄서서 대기하면서 사이프 부채로 열심히 부치는 모습,

고양이 스티커가 너무 귀엽다고 스티커를 받아가시는 모습들을 보면서

특별한 기획이 아니었는데도 참 뿌듯한 마음이 들었다.

우당탕탕 부스 운영

처음에 오자마자 사이프 부스 위치를 확인하고 부스 세팅을 했다.

그리고 행사 부스를 찾아와 주시는 분들에게 어떤 식으로 설명해주면 좋을지 전략 회의를 가졌다.

여담이기는 하지만, 나중에는 그런 전략들이 딱히 큰 의미는 없었다.

동아리에 관심 가져주시는 분들에게 다음 기수에 꼭 같이 함께했으면 좋겠는 마음이 들어서

그냥 솔직하게 사이프가 어떤 동아리인지, 내가 왜 사이프를 애정하는지 설명드렸다.

정말 많은 분들이 찾아와 주셨다.

감사하게도 마음이 동하셨는지 자리에서 바로 다음기수 모집 알림 신청해주시는 분들이 많았다.

찾아와 주시고 관심가져주신 분들 모두 사이프 3기에서 꼭 만나서 함께 활동하게 되면 좋겠다 :)

SIPE 소개

사이프가 뭐하는 동아리인지, 내가 왜 사이프를 애정하는지 궁금하시는 분들이 계실 것 같아 짤막한 설명을 추가해본다.

사이프는 현직자 동아리인 만큼 현생의 부담이 훨씬 많다.

그렇기 때문에 사이퍼들의 부담이 덜할 수 있도록 1기수에 격주로 9회, 총 18주 동안 진행한다.

(파워 I이신 분들도 2주에 한번만 용기내시면 된다..!!)

사이프는 프로젝트성 동아리가 아니라 네트워킹 위주의 동아리이다.

프로젝트성 동아리는 프로젝트 팀안에서만 친해질 수 있다는 아쉬움이 존재하는데,

사이프에서는 팀 외에도 친해지고 네트워킹할 수 있는 기회가 정말 많다.

그렇기 때문에 프로젝트만 진행하지는 않고 미션이라는 것을 진행한다.

미션은 원하는 자유 주제를 발제하고 다른 사이퍼들과 마음이 맞는 주제로 팀을 만들어서 진행한다.

지금까지 정말 인기가 많았던 주제는 러스트 스터디, 생성형 AI로 무언가 만들어내기였다.

그 안에서 정말 다양한 활동들과 경험을 할 수 있다는 것이 장점인데,

사이프 컨퍼런스인 사담콘

무박2일 사이프 해커톤 사이프톤

IT 업계 친구를 소개하는 큰 규모의 행사인 내친소

총 세 가지의 행사를 진행한다.

게다가 위 행사에 기여하고 싶다면 TF팀으로 함께하고 행사를 꾸려갈 수 있다.

때문에 격주로 진행한다고 전혀 루즈하지 않아도 된다.

사이프가 활동이 많은 만큼 그리고 네트워킹 위주인 만큼

하고 싶은게 얼마나 많은지에 따라 더 많이 얻어 갈 수 있는 동아리라고 생각한다.

경험 뿐만이 아니라 사람도!

그 무엇보다도 나는 사이프에서 소중한 인연들과 인생 친구들을 만날 수 있었다.

그게 1기 이후에 2기에 운영진으로 활동하기로 마음 먹은 가장 큰 이유이다.

정말 정말 진심으로 사이프를 추천한다.

마무리

인프콘에 초대해주신 인프랩 분들

연차내면서까지 함께 고생해준 사이프 운영진 친구들

후원으로 함께해준 사이퍼들

부스에 직접 찾아와서 응원해준 사이퍼들

그외에도 사이프에 마음쓰고 함께해준 모든 분들께 감사의 말씀을 전하고 싶다.

[항해99] 14주차 지원주차 회고

synun — Sat, 18 Feb 2023 00:24:13 +0900

수료식에서 다같이!

이번주는

이번주는 항해의 마지막 주간이자 지원주차이다.

이력서를 준비하고, 기술 인터뷰를 준비하는 기간이다.

항해 자체 플랫폼인 취업 지원 사이트 인텔리픽과 면접 준비 사이트 목터뷰를 주로 사용하게 된다.

인텔리픽에서는 이력서 피드백과 모의면접 피드백을 받을 수 있고 1회까지는 필수로 받아야한다.

또한 채용공고도 잘 올라오고 항해 과정에서 동료들의 평가같은 나에 대한 정보도 회사들에게 제공하기 때문에

내가 입증해야할 것이 줄어들고 회사 입장에서도 인증이 되는 시스템이라서 서로 윈윈할 수 있다.

이런 부분은 스파르타가 정말 사업을 잘하는 것 같다.

목터뷰는 인터뷰에 대한 핵심 50문제를 모아놓은 사이트이다.

50문제 퀄이 그럭저럭 나쁘지 않지만, 이것만으로는 부족한 감이 있어서

목터뷰 50문제를 다 풀고나서도 따로 더 준비하거나 항해에서 주관하는 취업 스터디를 하는 게 좋을 것 같다.

드디어 수료...!!

수료증도 받았다. 조금 조잡한 수료증이기는 하지만, 내 기억으로는 대학교 졸업장받을 때보다 더 기분이 좋았던 것 같다.

고생한 만큼 느껴지는 성취감도 다른 것 같다. 물론 대학교를 다니면서 힘들지 않았다는 건 아니지만, 짧은 기간에 너무 힘들었던 기억들이 많아서 그런지 수료증을 보면서 기분이 너무 좋았다.

모두에게 남기고 싶은 한마디

우리 소수 정예 B반은 못갈것같은 사람은 아무도 없음

한명 한명이 뚝심있고 끈기있는 사람들 뿐이다.

다들 결국 좋은 성과가 있을 거라는 건 빈말이 아니다.

우리 조가 최고의 프로젝트 상을 수상하게 되었다!!

좋게 봐주신 분들께 너무 감사드리고 우리 팀원들 너무 많이 고생했고 상 받지 못했더라도

끝까지 함께해주신 분들 모두가 칭찬받을만한 분들이다.

그리고 개인적으로 WIL 열심히 썼다고 상도 받았다 ㅋㅋ

10기 B반 눈치코치캐치

온라인 코딩 부트캠프 항해99, 현업에서 인정받는 개발자로

가장 단기간에 프론트엔드, 백엔드 개발자로 취업할 수 있는 부트캠프 항해99. 4개의 팀 프로젝트, 수료 후에도 끝까지 지원되는 이력서, 포트폴리오, 면접 취업지원까지.

hanghae99.spartacodingclub.kr

항해99의 수강생 작품에 우리 작품이 올라가게 되면 어떻게 될까 선배 기수들 작품을 보면서 상상하고는 했는데

벌써 우리팀 작품이 올라가게 됐다.

그래도 후배 기수들에게 보여주기에 부끄럽지 않은 작품이 된 것 같아서 뿌듯하다.

항해가 끝나도 우린 함께야...☆

항해는 수료했지만 실제로는 취업까지가 진짜 항해의 끝이다.

취업 이후에 항해 후기글로 돌아오겠습니다

[항해99] 13주차 실전프로젝트(6) 회고: 최종발표

synun — Sat, 18 Feb 2023 00:14:24 +0900

최종발표회가 끝나고 다같이!!

고마운 우리 팀원들!

[TIL] 죽어있는 웹사이트에 생명 불어넣기

synun — Wed, 8 Feb 2023 23:46:01 +0900

프로젝트가 게임인데 꽤 밋밋하다는 피드백이 있었다.

해결책은 이 세가지 정도 있을 수 있다.

1. 효과음 넣기

2. 애니메이션 넣기

3. 인터렉션 넣기

인터렉션은 디자인 및 여러가지 기획이 필요하기 때문에 당장에는 어렵고

1, 2번을 넣어보도록하자!

효과음 넣기

react에서 효과음 넣기 괜찮은 라이브러리를 발견해서 공부해본다.

use-sound

GitHub - joshwcomeau/use-sound: A React Hook for playing sound effects

A React Hook for playing sound effects. Contribute to joshwcomeau/use-sound development by creating an account on GitHub.

github.com

오디오 재생 관련 라이브러리로 유명한 howler.js를 기반으로 만들어진 라이브러리이다.

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

다음과 같이 훅의 형태로 쉽게 소리를 재생시킬 수 있어서 간단하게 효과음을 실행시키고 싶다면 사용하기 적합한 라이브러리가 될 수 있다.

이 라이브러리의 다양한 사용 방법에 대해서는 joshwcomeau 블로그에서 정말 재밌게 다루고 있으니까 보면 너무 재미있다.

Announcing “use-sound”, a React Hook for Sound Effects

By and large, using the web is a visual experience. This is in terrible contrast to mobile apps, which interact with three of our human senses (sight, sound, and touch, through haptic feedback). I just released a library to make it easy to add sound to you

www.joshwcomeau.com

스토리북으로 컴포넌트를 만들어서 사용예시를 볼 수 있다.

Storybook

use-sound.netlify.app

하지만 나는 그냥 howler.js로 커스텀훅을 만들어서 사용했다.

사운드관련 npm 라이브러리 중에서는 상당히 유명하고 강력한 라이브러리이다.

GitHub - goldfire/howler.js: Javascript audio library for the modern web.

Javascript audio library for the modern web. Contribute to goldfire/howler.js development by creating an account on GitHub.

github.com

howler.js는 오디오 객체를 만들어서 사용하는 것과 사용법에서 크게 차이가 없으며

모든 코덱과 크로스 브라우징 및 소리를 이용한다면 편리한 기능들을 지원하고 있어서 소리 관련으로는 라이브러리를 사용하는 것이 좋아보인다.

// useSound.jsx
import { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import turnOnSound from '../utils/turnOnSound';

const useSound = (src) => {
  const soundRef = useRef(null);
  const volume = useSelector((state) => state.sound.volume);

  useEffect(() => {
    soundRef.current = new Howl({ src });
  }, [src]);

  useEffect(() => {
    soundRef.current.volume(volume);
  }, [volume]);

  return soundRef;
};

export default useSound;

소리를 조절하는 기능이 있어서 세팅을 반영할 수 있도록 훅을 만들었다.

// 사용
const soundRef = useSound(src);
// 사운드 실행
soundRef.current.play();

애니메이션 넣기

css로 애니메이션 넣는 건 누구나 다 알지만 너무 힘들다.

사라지는 애니메이션의 경우에는 DOM에서 사라지기 이전에 애니메이션 시간을 계산해서 미리 보여주도록 해야한다.

하지만 이걸 조금 더 쉽게 사용할 수 있도록 해주는 라이브러리가 있다.

framer-motion

GitHub - framer/motion: Open source, production-ready animation and gesture library for React

Open source, production-ready animation and gesture library for React - GitHub - framer/motion: Open source, production-ready animation and gesture library for React

github.com

내가 정말정말 좋아하는 라이브러리인 framer-motion이다.

포브스 선정 공식문서 보기 제일 재밌는 라이브러리 1위

Documentation | Framer for Developers

An open source, production-ready motion library for React on the web.

www.framer.com

공식 문서에 보면 자세한 예시를 웹사이트에서 직접 인터렉션하면서 볼 수 있고 코드도 다양하게 지원하고 있다.

애니메이션은 공식문서를 잘 살펴보면 될 것 같고, 제일 유용했던 것은 AnimatePresence라는 컴포넌트 였는데.

    {isVisible && (
      <div>
      	{animation}
      </div>
    )}

위와 같은 경우에는 isVisible에 따라서 컴포넌트가 그려지고 사라지는데, 이런 경우에는 사라지는 애니메이션을 넣기가 상당히 까다롭다. 하지만 AnimatePresence를 사용하게 되면 엄청나게 간단해진다.

import { motion, AnimatePresence } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

애니메이션이 있는 컴포넌트를 감싸주면 사라질 때 애니메이션이 먼저 보여지게 할 수 있다.

1. 모달 나타나고 사라지는 애니메이션

2. 모달이 생길 때 올라오고 사라질때 내려가는 애니메이션

3. 모달에 마우스가 hover되면 opacity가 생기고 마우스가 내려가면 opacity가 없어지는 애니메이션

세가지를 정말 쉽게 적용할 수 있었다.

이제야 좀 웹사이트가 살아움직이는 것 같다.

[항해99] 12주차 실전프로젝트(5) 회고: 서비스런칭

synun — Sun, 5 Feb 2023 01:43:30 +0900

퇴근 없이 맞이한 아침 8시. 왜 다들 퇴근 안해요...?

이번주에 한 일

✨서비스 런칭

1월 30일 월요일 오전 9시 20분에 3200명이 존재하는 슬랙방에 글을 올리며 런칭을 시작했다.

런칭 이후에 각자의 영역에서 세워둔 마케팅 전략에 따라 마케팅을 진행했으며,

사용자들의 원활한 이용을 위해서 게임 응대도 했으며,

채널톡을 통해서 문의사항을 추가적으로 처리하였다.

와중에 팀원들 모두 남아있는 개발까지 진행했다.

게임하랴, 개발하랴, 운영하랴 정말 바빴다.

우리 팀원들 대단해

마케팅

마케팅은 다양한 관련 커뮤니티에 서비스 이벤트 게시글을 올리는 방식으로 진행했다.

항해99 슬랙, 각자 학교의 에브리타임, OKKY, 생활코딩, 각자의 지인들을 대상으로 하였다.

생활코딩 게시글

그래도 역시나 항해 커뮤니티가 진짜 강력하다

유저 피드백

구글폼 이벤트를 통해서 마케팅 및 유저 피드백을 수집하였다.

감사한 마음을 담아 찾아오셔서 정성스럽게 피드백을 남겨주신 분들께 선물을 전달드릴 수 있어서 좋았다.

총 101개의 피드백을 하나하나 모두 읽어보고, 모두 정리해보았다.

피드백에 대해서 반영 가능한지 여부와 우선순위를 나누어서 작업에 바로 착수했다.

유저 피드백 반영

유저 피드백을 통해 반영된 사항들이다.

1	게임 안내 가이드(게임 설명, 그림툴 툴팁)	02.04(토)	✅
2	게임 진행 중 시간 제한(타이머)	02.04(토)	✅
3	게임 모드 추가(난이도 조절, 제한 시간 변경)	02.04(토)	✅
4	혼자서도 그려볼 수 있는 연습장	02.04(토)	✅
5	본인 마이크 음소거	02.04(토)	✅
6	배경음 음량조절 기능	02.04(토)	✅
7	그림툴 기능 추가(두께, ctrl+z, 색상 등등…)	02.04(토)	✅
8	채팅 글자수 제한	02.04(토)	✅
9	로비에서 게임방의 변동 실시간 반영(SSE)	02.04(토)	✅
10	입력 부분 기능 고도화 (입력 형식 제한 표시)	02.04(토)	✅

유저 데이터(ga)

일주일 동안의 유저 데이터를 정리해보려고한다.

데이터 수집은 구글 애널리틱스를 이용해 진행되었다.

일주일동안 790명의 사용자가 눈치코치캐치를 찾아와주셨다.

페이지 조회 이벤트는 24,693회 발생했다.

490개의 게임방이 생성되었으며 게임은 308판 진행되었다.

1,506개의 그림이 제출되었으며, 키워드는 1,960회 제출되었다.

런칭 첫날에는 엄청난 숫자의 그림이 데이터베이스에 저장되는 것을 목격했다.

‍ 이번주 개발 정리

‍♀️팀

기능 추가
- 게임 난이도 조절 기능 추가
- 제한시간 변경 기능 추가
- 이미지 좋아요 기능
- 배경음악 조절 기능
- 마이페이지 추가 (로그아웃, 뱃지, 좋아요한 이미지)
- 게임방 조회 SSE 적용
- 게임 중 제한 시간이 넘어가면 자동 제출되는 기능
에러 해결
- 오류 발생한 gameRoom 나와서 다른 방 입장 시도 시 입장 안 되는 에러 해결
- 방을 나갔다 왔을 시 webRTC 연결이 되지 않는 에러 해결

‍♂️개인

배경음악 볼륨 조절 기능
방 나가기 이후 뒤로가기 누르면 방으로 재접속되는 이슈로 뒤로가기 막기
UX를 위한 툴팁 추가
결과창에서 이미지 좋아요 기능 추가
마이페이지 기능 추가
- 뱃지, 좋아요한 이미지 보기, 로그아웃
UX개선을 위한 세부적인 UI 수정

다음주에 할 일

2차 런칭
프로젝트 최종 마무리
발표 준비
최종 발표회

코멘트

제일 힘들었지만, 그동안의 결실을 확인할 수 있었던 제일 행복한 주간이었다.

벌써 항해가 끝나간다는 생각에 후련함과 취업을 준비해야된다는 생각에 떨림과 기대감이 공존한다.

이제 프로젝트를 잘 마무리할 일만 남았다.

[항해99] 11주차 실전프로젝트(4) 회고

synun — Mon, 30 Jan 2023 03:34:36 +0900

매일 새벽 늦게까지 남아있는 우리 팀원들!

게임 결과 화면

이번주에 한 일

‍♀️팀

MVP 기준 뷰 작업 완료
Naver, Kakao, Google 소셜 로그인
게임 진행 중 예외 처리
- 재게임시 방장 여부 미전달 해결
- 중복 제출 해결
- 게임 중 퇴장 유저 발생 시 정상 진행되도록 처리
- 게임 중 진행 인원 4명 미만될 시 강제종료
게임 부가 기능 구현
- 방장에 의한 강퇴 기능
- 게임 진행에 타이머 장착하여 시간 내 제출 못할 시 자동 일괄 제출
마이페이지 구현
- 회원 정보 조회 관련 API
- 유저 활동 내역 저장하여 업적 시스템 구현 ( 추후 업적별 뱃지 부여 예정 )
UX 향상
- 효과음 적용
- 마이크 음소거 기능
- 다른 참가자 사운드 조절 기능
런칭 전 마케팅 전략 수립
- 서비스 홍보글 작성
- 유저 피드백을 위한 장치 마련
  - 채널톡 : 즉각적인 에러 피드백
  - 구글폼 : 디테일한 설문조사
- 설문 참여 이벤트 계획
- 페이스북(유료), 에브리타임, 코딩 커뮤니티에 홍보글 게시 예정
- 지인 찬스

‍♂️개인

라이브러리 없이 토스트 컴포넌트 제작
이미지 라이크, 다운로드 기능
사운드 적용
Google Analystics 적용
게임방 소켓 연결 코드 리펙토링
게임방 입장 시 예외 상황 처리
네이버 로그인, 구글 로그인
게임중일 때 뒤로가기, 새로고침 막기
UX 개선 작업
마이페이지 제작 중

‍♀️베타테스트

정식 런칭 직전의 베타 테스트를 진행했다.

지인들과 항해 동기들이 찾아와주었다.

항해 동기분이 작성해주신 피드백!

1. 게임을 하고 있을 때, 아이콘이 4개중에 동그라미 아이콘이 있는데 어떤 것을 의미하는지 이해가 안됌.
가이드가 부족함
=> 가이드를 추가할 예정

펜의 굵기가 굵은 것 밖에 없어서 세부적인 그림 묘사가 어려움.
=> 펜의 굵기를 유용한 크기들로 추릴 예정

2. 연필아이콘을 클릭했을 때 색깔을 지정할 수 있던데,
색깔을 클릭했을때 내가 현재 어떤 것을 클릭하고 있는지
파악할 수 있었으면 조금 더 사용자들 배려한다는 느낌으로 현재 상태를 알 수 있게했으면 좋겠음.
예를들어 현재 선택된 색깔에 테두리를 둔다던가 연필아이콘의 바탕이나 선의
색이 현재 선택된 컬러색으로 변한다던가 등
=> 지정한 컬러가 표시되도록 변경

3. 게임 중간에 카운트 시간이 줄지 않는 상황이 나옴. 이유는 모르겠음.
다들 안되서 나가는 상황 발생.
=> 시간 관련 부분은 자동 제출을 포함해서 에러가 너무 많아서 런칭 스펙에서 제외

4. 방에 들어왔을 때 새로고침을 했을 때 아무것도 되지 않음. 버그? 안되는 것.
=> 방에서 새로고침을 하지 않도록 안내 필요

5. 방에 들어 왔을 때 마이크가 안들릴 때 어떻게 해야할지 잘 모르겠음. 우선은 마이크가 들리지 않음.
나갔다가 새로고침하고 들어오면 된다고 하는 답변을 들었는데 했음에도 되지 않음. 사용자의 입장에서는 어떻게 해야할지 모를 것 같다는 생각.
=> webRTC 연결이 항상 완벽하지는 않기 때문이라고 생각. 재연결 버튼을 추가할 예정

기능적으로 문제가 되는 부분들은 당연히 피드백이 왔으며 생각보다 UX적인 측면에서 피드백이 많이 왔다.

1. 일단 잘되는 것이 제일 중요하다고 느껴졌다.

치명적인 오류가 생기는 기능들은 없애고 런칭하기로 했다.

예를 들어서 제한시간이 끝나면 자동 제출되는 기능이 있는데 이 부분에서 오류가 발생해버렸다.

이 부분은 빼고 런칭하기로 했다.

2. UX에 많은 노력을 들여야 한다.

어떻게 하면 더 사용자가 편할 지 생각해보아야 한다.

런칭을 정식으로 시작한다면 얼마나 피드백이 들어올지 기대된다.

✅런칭 전 체크리스트

모든 기능이 정상 작동하나요?
해결한 이슈
[x] 중도 이탈 유저 관련 이슈
[x] 게임방 중복 입장으로 인해 로비에 갇히는 이슈
[x] 첫 이미지 라운드에서 undo하면 이전 그림 나오는 이슈
[x] STOMP 버퍼 부족 이슈
[x] 이미지 좋아요, 저장 기능
[x] 프로필 편집 기능
[x] 키워드 제출 위치 변경

해결하지 못해 제거한 기능
[x] 자동제출 기능
[x] 시간초 효과음

준비 되지 않은 기능이 그대로 노출되어 있지는 않나요?
[x] 검수 받지 못한 네이버 로그인
[x] 소리 설정 관련 기능
[x] 마이페이지

트러블 슈팅해야 할 부분을 인지하고 있나요?
[x] 자동 제출 관련 이슈

배포 자료
[x] 슬랙에 올릴 홍보 문구가 작성 되었나요?
[x] 슬랙에 올릴 홍보용 이미지가 제작 되었나요?
[x] 슬랙에 올릴 구글폼 설문조사가 제작 되었나요?
[x] 각자의 트러블 슈팅이 추가 된 깃헙 리드미가 완성 되었나요?
[x] 대외용 팀노션 제작 되었나요?

마케팅
[x] 채널톡이 정상적으로 연결 되었나요?
[x] 고객의 문의에 응대할 준비가 되었나요?
[x] 이벤트 일정과 방식이 구체화 되었나요?

모든 체크리스트를 충족하고 내일인 월요일 오전 9시 런칭 예정!!

이번주 키워드

라이브러리 없이 toast 제작하기
애니메이션을 위한 framer
사운드를 위한 howler.js
react-ga4 (google analytics)
google, naver login
UX/UI

다음주에 할 일

런칭
서비스 관리 및 유지보수
마케팅
마이페이지 제작
CI/CD
코드 리펙토링

코멘트

너무 너무 힘들었다. 항해를 시작하고 나서 제일 힘들었던 주간이 아니었나 싶다.

새벽 6시까지 밤을 새다가 자려는데 컨디션이 너무 안좋았다. 아니나 다를까 일어나자마자 제 정신을 차릴 수가 없었다. 몸살이 나버린 거다. 그래도 도저히 쉴 수가 없어서 힘든 몸을 이끌고 책상 앞에 앉았다.

런칭은 사실 금요일 예정이었는데, 테스트를 진행하면서 치명적인 오류가 계속해서 발생해서

하루에 두 세개 씩 이슈를 해결하느라 런칭이 계속해서 밀렸다.

그러다가 일요일에 정상적인 테스트가 가능할 것 같아서 베타테스트를 진행했다.

베타테스트에 함께 해주신 지인 항해 동기분들께 정말 정말 감사하다.

내일부터는 서비스 시작인데, 무관심이 대부분이겠지만서도 세상에 선보인다는 생각에 은근히 떨린다.

눈치 코치 캐치!

음성 채팅으로 즐기는 드로잉 게임

trys-ketch.com

[TIL] 소셜 로그인 한페이지에서 함께 처리하기

synun — Tue, 24 Jan 2023 11:55:03 +0900

로그인 페이지에서 3개의 sns 로그인을 처리할 필요가 있다

뭐가 문제일까?

sns 인증 과정이후에 페이지 내에서 callback으로 토큰 값을 받아서 토큰 값을 서버로 보내주는 식으로 인증과정을 거쳐가고 있었다. 다만 이 설계가 한가지의 sns 로그인이었다면 문제가 없겠지만, 세가지의 sns 로그인을 처리하려면 각각의 sns로그인이 어떤 sns인지 식별할 수 있어야한다.

1. sns 인증 과정 이후 callback

2. url parameter에 code가 존재하면 token으로 로그인 api 요청

https://trys-ketch.com/login?code={token}

3. 서버의 로그인 절차 이후 response를 받아서 토큰값 쿠키에 저장

어떻게 처리하면 될까?

이전에는 이렇게 callback되고 있었는데,

https://trys-ketch.com/login?code={token}

여러개의 sns를 식별하기 위해서 각각의 callback url에 계층을 한가지를 더해주는 방법을 사용했다.

https://trys-ketch.com/login/google?code={token}
https://trys-ketch.com/login/naver?code={token}
https://trys-ketch.com/login/kakao?code={token}

sns 로그인 api 서비스에 접속해서 callback url 설정을 변경해주어야 문제없이 작동할 수 있다.

이렇게 하면 sns를 각각 인식할 수 있다.

이제 저 방법대로 설계하러 가보자!

라우터 처리

1. 라우터에서 url parameter로 sns부분으로 접근할 수 있게 처리한다.

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/login/:sns" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

2. 로그인 페이지 내에서 sns 값을 받아서 처리하기

function Login() {
  const { sns } = useParams();

  const code = searchParams.get('code');
  const state = searchParams.get('state');

  const handleLogin = useCallback(
    (res) => {
      if (res.data.statusCode === 200) {
      	...
        setCookie(res.headers.authorization);
        navigate('/');
      }
    },
    [dispatch, navigate, openModal, sns],
  );

  const kakaoLogin = useCallback(() => {
    authAPI.kakaoLogin(code)
      .then((res) => handleLogin(res))
      .catch((err) => {...});
  }, [code, handleLogin]);

  const googleLogin = useCallback(() => {
    authAPI.googleLogin(code)
      .then((res) => handleLogin(res))
      .catch((err) => {...});
  }, [code, handleLogin]);

  const naverLogin = useCallback(() => {
    authAPI.naverLogin(code, state)
      .then((res) => handleLogin(res))
      .catch((err) => {...});
  }, [code, handleLogin, state]);

  useEffect(() => {
    if (code) {
      switch (sns) {
        case 'kakao':
          kakaoLogin();
          break;
        case 'google':
          googleLogin();
          break;
        case 'naver':
          naverLogin();
          break;
        default:
          break;
      }
    }
  }, [googleLogin, kakaoLogin, naverLogin, sns, code]);

  return (
    ...
  );
}

useEffect에서 sns 값에 대한 분기처리를 해준 뒤 각각 로그인 api에 맞게 호출해주면 된다.

+쿠키 처리

여기서 쿠키 처리가 문제가 될 수 있는데, 그 이유는 url 계층을 하나더 늘렸기 때문이다.

만약에 쿠키 path설정을 default로 했다면, 해당 계층에서만 접근가능하기 때문이다.

로그인 정보를 다른 모든 페이지에서 접근할 수 없다면 상당히 곤란하다.

모든 페이지에서 접근할 수 있도록 path를 지정해주자.

path를 root로 설정해주면 모든 url계층에서 접근가능하다.

export const setCookie = (value, name = TOKEN_KEY) => {
  return cookies.set(name, value, { path: '/' });
};

[TIL] SSE와 고군분투하기

synun — Tue, 24 Jan 2023 11:54:45 +0900

SSE로 인한 Timeout 수정하기

SSE가 작동하고 있는 동안에는 다른 모든 요청이 느려진다.

axios로 api를 호출하면 timeout이 발생한다.

useRef를 붙여서 eventSource 객체를 관리해봤는데 이상하게 해결이 됐다.

⇒ (나중에는 결국 백엔드에서의 이슈였던 것으로 밝혀졌다고…)

useRef의 원리에 따라서 증거를 찾아나가 보면,

모든 렌더링에서 동일한 객체를 제공하기 때문인 것 같다.

원래는 eventSource 생성을 함수 최상단에서 다음과 같이 생성했었다.

const evtSource = new EventSource(${process.env.REACT\_APP\_API\_URL}/api/sse/rooms);

    const evtSource = useRef(null);

    const closeEvtSource = () => {
    evtSource.current.close();
    console.log('evtSource closed!');
    console.log(evtSource);
  };

  const openEvtSource = () => {
    evtSource.current.onerror = async (err) => {
      console.error('EventSource failed:', err);
      closeEvtSource();
      // 재연결 시도
            openEvtSource()
    };
    // 연결됐을때 방 정보 받아오기
    evtSource.current.addEventListener('connect', async (event) => {
      console.log('evtSource connected!');
      console.log(evtSource);
      const data = JSON.parse(event.data);
      setRooms(data);
    });
    // 방 정보가 변할 때 방 정보 받아오기
    evtSource.current.addEventListener('changeRoom', async (event) => {
      console.log('evtSource changeRoom!');
      console.log(evtSource);
      const data = JSON.parse(event.data);
      setRooms(data);
    });
  };

  useEffect(() => {
    evtSource.current = new EventSource(`${process.env.REACT_APP_API_URL}/api/sse/rooms`);
    openEvtSource();
    return () => {
      closeEvtSource();
    };
  }, []);

하지만 이 과정에서 방 정보가 변한다면 eventSource 객체를 재생성하게 되니 이 부분에서 문제가 생기지 않았을까 싶다.

근데 재연결 시도하는 부분이 조금 마음에 안든다. 연결이 되지 않고 계속해서 에러가 난다면 무한 재귀가 발생할 수 있는 부분이라고 생각이 든다.

호출 스케줄링 (setTimeout vs SetInterval)

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 한다

setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법

여기서 간단하게 타임아웃만 설정해주면 된다.

evtSource.current.onerror = async (err) => {
  console.error('EventSource failed:', err);
  closeEvtSource();
  // 재연결 시도
  setTimeout(openEvtSource(), 3000);
};

적절한 시간이 3초라고 생각해서 3초로 적용해놓았다.

setTimeout과 setInterval을 이용한 호출 스케줄링

ko.javascript.info

React에서 setInterval 현명하게 사용하기(feat. useInterval)

들어가기 Babble의 방 목록 페이지에 들어가면 유저가 생성한 방들이 쭉 나열되어 있는 것을 볼 수 있다. (안타깝게도 유저가 없으면 방도 없다ㅜㅜ) 그리고 이 방들은 5초마다 서버에 요청을 보내

mingule.tistory.com

D2

D2는 Declarative Diagramming(선언적 다이어그래밍)이다.

프로젝트 발표할 때 스트럭쳐 소개할때 항상 고민이 되는 부분인데, 개발자답게 다이어그램할 수 있는 언어가 나오게 된 것 같아서 굉장히 기쁘다. 디자인도 꽤 다양하게 지원하고 있고 러닝커브도 굉장히 높고 쉬워서 앞으로 써봄직함한 것 같다.

D2 Tour | D2 Documentation

D2 is a diagram scripting language that turns text to diagrams. It stands for

d2lang.com

사용성 높이기 (UX)

방생성 모달에서 편의성을 위한 두가지 피드백이 있었다

1. 모달이 생성되면 input에 자동 focus하기

useRef를 써도 되고 다양한 방법이 있겠지만, 가장 쉬운 방법은 autoFocus 속성을 추가해주는 것이다.

<input autoFocus ... />

2. 엔터를 누르면 버튼이 작동되게하기

=> children을 감싸고 있는 Content 컴포넌트에 onKeyPress 이벤트 리스너를 추가해줌

function Modal({ children, title, btnText, onConfirm }) {
  const { closeModal } = useModal();

  const handleClose = () => {
    closeModal();
  };

  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      onConfirm();
    }
  };

  return (
    <Overlay>
      <ModalWrap>
        <CloseButton onClick={handleClose}>
          <img src={cancel} alt="X" />
        </CloseButton>
        <ContentsWrap>
          <Title>{title}</Title>
          <Content onKeyPress={handleKeyPress}>{children}</Content>
          <BtnArea>
            <FlatButton onClick={onConfirm}>{btnText}</FlatButton>
          </BtnArea>
        </ContentsWrap>
      </ModalWrap>
    </Overlay>
  );
}

잘된다!!

[항해99] 10주차 실전프로젝트(3) 회고

synun — Sun, 22 Jan 2023 23:14:09 +0900

이번 주에 한일

SSE를 통한 게임방 조회
SockJS + Stomp를 이용한 채팅 기능
전역상태관리를 이용한 효율적인 모달 관리
디자이너님과 협업 + 스타일 작업
ec2에 배포하기
이슈 정리 및 해결
중간 발표회

‍♂️중간 발표회

게더에서 중간 발표회

한 조 당 주어진 발표시간은 5분입니다.
- 1분 : MVP 시연
- 1분 : 서비스 아키텍쳐 설명
- 1분 30초 : 기술적 의사 결정
- 1분 30초 : 추후 개발 및 기술적인 도전 계획

5분의 발표가 끝나면 25분(기술 면접 질문 & MVP 기능 피드백) 동안 멘토님들의 기술 면접과 피드백이 진행됩니다.

멘토님 피드백

우리팀 피드백

1. API 호출에 있어서 공통된 에러 처리를 하지 않은 이유?

명세가 초기 단계에서는 불분명하고 수정이 많았기 때문에 공통 에러 처리를 하지 않았습니다. axios의 interceptors를 이용해서 각각의 에러 상황과 에러 코드에 대한 명세를 맞춰서 상황에 맞게 공통적으로 처리하려고 합니다.

2. withCredentials 는 왜 붙이는지에 대한 이해가 있다면 설명

withCredentials는 서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목입니다.

여기서, credential 정보가 포함되어 있는 요청은 아래 두 가지 경우를 의미합니다.

쿠키를 첨부해서 보내는 요청
헤더에 Authorization 항목이 있는 요청

따라서, 보내고자 하는 요청이 위 두 가지 항목 중 한 가지라도 포함하고 있다면 withCredentials 옵션을 true로 설정해야만 합니다.

https://junglast.com/blog/http-ajax-withcredential

⇒ frontend에서 credential 정보가 담겨있는 요청을 하기 때문에 WithCredentials를 명시해주었습니다.

3. Frontend에 CORS 헤더들을 세팅한 것이 보이는데 의도가 무엇인지?

const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
});

요청할 때 헤더에 Origin이 함께 붙어가며 이것과 서버에서 보내주는 Access-Control-Allow-Origin이 동일하다면 CORS 이슈가 발생하지 않습니다.

항해의 협업 세션에서 사용했던 코드를 참고하여서 사용했던 코드입니다. 코드에 대한 이해도 없이 사용했기 때문에 발생했던 문제라고 생각합니다.

⇒ Access-Control-Allow-Origin헤더는 서버에서 보내주는 응답에 명시하는 부분이기 때문에 요청에서 필요 없는 부분인 request 헤더에 있던 Access-Control-Allow-Origin은 삭제하였습니다.

4. source map 숨기기

1) .env 파일에 명시하기.env 파일에 추가하면 빌드시 .map 파일을 생성하지 않음

GENERATE_SOURCEMAP=false

2) package.json의 build 명령어

(build ⇒ linux 환경에서의 빌드 명령어, winBuild ⇒ window 환경에서의 빌드 명령어)

"build": "GENERATE_SOURCEMAP=false react-scripts build", 
"winBuild": "set \\"GENERATE_SOURCEMAP=false\\" && react-scripts build",

1번의 해결법으로 빌드 파일에서 map 파일을 제거하였습니다.

제한된 시간에서 배포 과정에서 미처 신경쓰지 못한 부분입니다.

5. Client 와 Server 의 차이점? Git Repo를 보니 React 를 Client 라고 명명하여서 질문

React 자체가 Client라고 생각한 것이 아니고 서비스의 전체적인 관점에서 클라이언트에 대한 부분이라고 생각해서 그렇게 명명하였습니다.

6. 게스트 정보 처리 관련

: 게스트의 정보들을 삭제하는 것은 비즈니스적으로 좋지 않습니다. 데이터 하나하나가 마케팅적으로 활용될 수 있으며 데이터 하나하나가 중요한 스타트업의 입장에서는 게스트 정보까지 소중한 데이터입니다.

▶더 자세한 내용 보러가기

전체 팀 피드백

1. 기술을 선택한 이유가 있어야 하며, 기술에 대한 이해도와 깊이가 있어야한다.

⇒ 기술 선택의 이유가 타당해야함!! 특히나 취업을 위해서라면 기술로 설득을 할 수 있어야 함.

2. 많은 기능이 있는것도 좋지만 더 중요한 건 잘 작동하는 것

3. mvp 설정 시에는 레이어를 나눠서 작업하고 보이는 것은 후순위. 차라리 mvp는 기능하는 것만 위주로 개발해도 좋음

이번주 키워드

SSE(Server Sent Event)
socket, SockJs, stompJs
efficient modal manage
https ssl
ec2 deploy

다음주의 할 일

각종 에러 처리
SNS(naver, google) 로그인
코드 리펙토링
토스트 컴포넌트 제작
UX 향상과 UI 작업
사운드 (효과음, 배경음)
Google Analystics
github actions CI/CD
렌더링 최적화

~~할 거 대박 많네...~~

코멘트

중간 발표전에 배포한다고 잠도 3-4시간 자면서 작업했다. 시간이 너무 없어서 공부한 레퍼런스만 정리해두고 TIL을 하나도 못썼다. 치명적인 에러도 많이 발생해서 에러 해결한다고 시간도 엄청나게 많이 사용했다. 개발하면서는 하나도 없던 이슈들이 배포하고 나니까 엄청나게 많이 생겼다. 그래도 새벽까지 하면서 배포하고 발표회에서 시연할 수 있어서 기분이 좋다.

세부적으로 신경쓰지 못한 부분과 전체적으로 비즈니스적인 관점까지 세세하게 알려주셔서 너무 좋은 시간이었다. 살짝 아쉬운 점은 마지막 차례의 팀이라서 멘토님이 피곤하셨는지 피드백이 꼼꼼하게 이뤄지지 못한 점이 아쉽다.

발표회를 쭉 지켜보면서 든 생각은 아무것도 모르던 병아리들이 승선하고 언제 이렇게 늠름해졌는지 10기 B반들 진짜 너무 대단하고 수고 많았다는 생각이 들었다. 모두 취업 잘했으면 좋겠다. (물론 나도..)

3주 남은 기간동안 잘 마무리하도록 해야겠다.

[TIL] 왜 이렇게 바쁜가요?

synun — Thu, 19 Jan 2023 23:49:22 +0900

지속적인 폰트 렌더링

styled-components의 Globalstyles.js에 폰트를 적용했던게 문제였다.

폰트 부분만 CSS파일로 빼고 index.js에 import시키면서 해결했다.

이런 현상을 FOUT(Font Of Unstyled Text)라고 한다. css가 적용되기 전에 텍스트가 보여지는 현상이다.

styled-components의 globalstyle에서 font-face를 적용하면 일어나는 문제라고한다.

[Fix] 폰트 깜빡임 · Issue #23 · Trys-Ketch/trys-ketch-client

요약 최초 렌더링 이후에 버튼 클릭 시 폰트 깜빡임 완료조건 최초 렌더링 이후에 추가적인 깜빡거림 없음

github.com

[React] 리액트 깜빡임 해결기(feat. 폰트)

일단 내가 처한 상황은, 페이지를 이동하거나 state 변경이 생길 때마다 화면이 번쩍하고 깜빡거린다는 거였다. 리렌덜이 문제인가 싶어 리액트 개발자 도구를 이용해 리렌더링 되는 컴포넌트에

velog.io

react + ec2 + github actions

프로젝트 배포를 s3에서 ec2로 변경하게 되면서 ec2 환경에서의 CI/CD는 어떻게 이루어지는지 찾기 위해서 레퍼런스를 찾았다.

Deploy React app to AWS EC2 using GitHub Actions - Lightrains

This article helps you understand how you can automatically deploy your reactjs application to AWS EC2 from GitHub

lightrains.com

합성 컴포넌트

쉽게 말하면, 컴포넌트의 요소들을 필요한 것만 추가해서 사용할 수 있도록하는 컴포넌트이다.

1. contextAPI로 관리하는 방법

	
const FlyOutContext = createContext();
 
function FlyOut(props) {
  const [open, toggle] = useState(false);
 
  const providerValue = { open, toggle };
 
  return (
    <FlyOutContext.Provider value={providerValue}>
      {props.children}
    </FlyOutContext.Provider>
  );
}

2. Object 형태로 export하면서 관리하는 방법

// export
export const Dialog = Object.assign(DialogMain, {
  Dimmed: DialogDimmed,
  Title: DialogTitle,
  Subtitle: DialogSubtitle,
  Description: DialogDescription,
  Comment: DialogComment,
  CheckButton: DialogCheckButton,
  CheckBox: DialogCheckBox,
  TextButton: DialogTextButton,
  Button: DialogButton,
  LabelButton: DialogLabelButton,
  Divider: DialogDivider,
});

// Usage
<Dialog>
    <Dialog.Title>제목</Dialog.Title>
</Dialog>

밑의 두 글은 강추한다.

합성 컴포넌트로 재사용성 극대화하기 | 카카오엔터테인먼트 FE 기술블로그

방경민(Kai) 사용자들에게 보이는 부분을 개발한다는 데서 프론트엔드 개발자의 매력을 듬뿍 느끼고 있습니다.

fe-developers.kakaoent.com

[리액트 디자인 패턴] Compound Component Pattern (합성 컴포넌트 패턴) 알아보기

이 글은 Compound Pattern과 관련된 글의 한글 번역입니다. 원문 링크: https://www.patterns.dev/posts/compound-pattern/ Compound Pattern Create multiple components that work together to perform a single task www.patterns.dev Compound Patter

im-developer.tistory.com

사운드 관리

사운드를 관리하기 위해서 howler.js를 제일 먼저 고려했다. 크로스 브라우징과 모든 코덱 지원 가능하며, 외부 종속성이나 플러그인도 없이 100% javascript api로 만들어져서 7kb로 굉장히 가볍다.

howler.js - JavaScript audio library for the modern web

howler.js makes working with audio in JavaScript easy and reliable across all platforms.

howlerjs.com