🐬 긴호흡/고스락 티켓

랜딩페이지와 로그인페이지는 토큰 없이도 접근할 수 있어야 하고, 마이페이지와 티켓팅 페이지는 인증이 되어 있는 상태에서만 접근할 수 있어야 한다. 티켓 QR코드 페이지는 인증이 되어 있지 않아도 접근할 수 있도록 했다. 한명이 티켓을 여러장을 사서 '공유하기'를 통해 친구들에게 줄 수 있어야 했기 때문에. 라우팅과 관련된 코드는 다음과 같다. 라우팅 return ( ); 문서에서 React-Route-dom 만을 이용해서 접근을 제한하는 방식에 대한 예시가 잘 되어 있어서 참고했다. 1차 프로젝트에서 사용했던 HOC로 만들어 컴포넌트를 인자를 넘기고 걸러서 리턴하는 방식에 비해 훨신 깔끔하고 직관적이어서 좋다. RequireAuth.tsx const RequireAuth = () => { const { ..

저번 3월 공연때 사용한 티켓 예매 서비스는 꽤 성공적이었다. 공연 예매는 물론 새 기수 선발에도 꽤 많은 신입생들이 지원을 했고, 웹서비스가 큰 영향을 끼쳤다고 생각한다. 103명 예약 ( 코로나 19 로 인한 최대 입장 가능 인원 ) 신입생 54명 면접 지원 ( 소모임 기능을 통한 접근성 , 웹페이지를 통한 홍보 ) 관리자 웹페이지 제공을 통한 입금 확인, 소모임 검색 기능 지원 QR 코드를 통한 빠른 입장 확인 , 입금 정산 storybook 을 활용한 npm 모듈제작, 디자인시스템 구축 이번 9월 공연에는 공연을 하고싶어하는 선후배들이 많아서 무려 12팀이나 나왔다. 어쩔 수 없이 공연을 이틀로 나누어 개강 후 첫 목요일과 금요일에 진행한다. 사회적 거리두기도 완화되어 공연장 최대 입장 가능 인원..

프로젝트가 벌써 마무리 단계에 있다. 21학번 메인 기수 친구들이 만들고 있는 학회 홍보물에 같이 껴서 뿌려질 계획이다. 그 친구들과 시간을 맞춰서 개발을 진행해왔다. 세세한 문구들을 마지막으로 다듬었고 테스트용으로 넣어놓은 것들, 콘솔.로그들, 등등을 지우고 마무리할 준비를 끝냈다. 두둥. 메인 랜딩 페이지 ​메인 랜딩 페이지 디자인은 좀 급하게 끝났다. 세로로 긴 형태의 카드뉴스(?)는 많이 만들어봤지만 데스크톱 원페이지 웹사이트는 처음이라.. 생각보다 생각해야할게 많더라. 스크롤 애니메이션은 주안이형이 맡아서 이쁘게 잘 해주었다. 큰 이미지는 여기서 볼 수 있다. (피그마) 구현을 하면서 기존 디자인과 달라진 부분들이 많다. 피그마에서 한 디자인과 실제로 한 것과 뭔지 모르게 다른게 있더라. 계속 ..

공연장 입장 시 QR코드 티켓을 찍고 입장 확인을 받은 후에 들어간다. 코드를 찍는 안드로이드 앱에서 입금 여부를 확인한 후에 직접 입장할 수도 있겠지만 아무래도 눈에 보이는 변화가 있으면 좋을거란 생각이 들었다. 소켓을 이용한 실시간 통신을 넣어보기로 했다. 서버에서 입장 확인이 되면 클라이언트(해당 관객 기기)로 데이터를 보내주는 방식이다. 백엔드 대장님이 작업한 백엔드 코드이다. 열심히 배워왔다. const { Server } = require('socket.io'); const { httpServer } = require('../index'); class SocketSingleton { constructor(httpServer) { // try catch 없이 초기 설정이 fail 하면 서버 바로..

거의다 완성되어간다고 느낄 즈음에 기획이 대폭 수정되었다. 17-19 OB들이 진행하는 프로젝트이지만 우리 좋자고 하는게 아니라 후배들 도와주려는 목적이 크기 때문에. 코로나 거리두기 때문에 공연에 들어올 수 있는 인원수가 제한이 걸렸다. 관련해서 21학번 임원 친구들과 회의를 진행했다. 크게 두가지이다. 인당 티켓은 1매씩만 구입할 수 있고 새내기는 공짜. 그리고 새내기의 경우에는 '공연 전 소모임'을 신청할 수 있도록. 보통은 처음 사귄 친구들끼리 삼삼오오 모여서 다같이 공연을 보러 왔었는데 코로나 시국에는 그러기가 어렵지 않을까 라는 의견에서 나온 기획이었다. 공연 이틀 전쯤에 예비대학처럼 새내기 몇명과 선배들 몇명이 미리 만나서 연을 맺고, 친해진 친구들끼리 공연을 올 수 있도록 하는... 잘 될..

지난 몇주간 프론트 개발을 진행하면서 했던 여러 고민들과 해결들, 그리고 이것저것들을 기록해본다. 제목을 뭐라 지어야할지 한참 동안 고민했다. 적절한 제목 추천 받습니다. 1. 레이아웃 스토리북을 도입하면서 이걸 어떻게 하면 잘 쓸 수 있을까 생각하다가 전체 페이지에서 쓰는 컨테이너와 레이아웃을 모듈화시켜보기로 했다. 디자인한 페이지들의 레이아웃을 보면 세가지로 나눌 수 있다. [제목과 설명/내용(주로 인풋)/다음으로 버튼]으로 이루어진 페이지, [제목과 설명/내용(예매 관련 정보)]로 이루어진 페이지, 그리고 [티켓 콘텐츠] 하나로만 이루어진 페이지. 그리고 모든 페이지들에는 상태에 따라 뒤로가기 버튼이 있을 수 있지만 그와 상관 없이 항상 그만큼의 여백을 두었다. .InfoLayout { height..

프로젝트를 하면서 얻어간 지식과 경험을 몇개 정리해본다. 레오가 많이 알려주고 도와주었다. 1. 리덕스 활용 처음 리덕스를 공부할 때 읽었던 책에서 Ducks 패턴을 배웠다. 막상 써보려니까 괜히 복잡한 느낌이 들어서 그 후로 리덕스를 별로 안 좋아했던... 기억이.. 이번에 쓰게된 구조는 아래와 같다. 리덕스 공식 사이트에 적혀있는 것과 비슷할걸? 액션 타입, 액션 생성함수 그리고 리듀서를 각각 하나의 폴더에 담는다. 한가지 기능을 수정할 일이 생겼을 때 3개의 파일을 모두 건드려야 한다는 단점으로 어쩌구저쩌구 하는 글들을 많이 봤는데, 파일 하나에 타입, 액션, 리듀서 다 때려박아서 코드 길어지는게 더 오히려 불편했다. 개인적으로는 더 마음에 드는 방식이다. reducer/index.js 은 불러온 ..

기획단계에서부터 컴포넌트의 재사용을 염두에 두고 페이지들을 꾸리고 디자인했다. 모든 페이지들의 레이아웃과 컴포넌트들이 일관성을 유지하는게 제일 중요하다. 기획한 페이지들의 일부이다. 제목과 설명, 인풋창, 버튼 등이 모두 재활용될 수 있는 컴포넌트들이다. 세부적인 것들 (글의 내용, 인풋의 placeholder와 오른쪽에 있는 인디케이터, 버튼의 내용과 색깔, 동그란 테두리 유무 등등) 만 바꾸고 모든 코드를 재활용할 것을 염두에 두고 디자인했다. 티켓 예매 프로젝트 (1) - 기획, 디자인 학과 밴드 동아리를 하고 있다. 그래도 명색이 컴퓨터공학과 동아리인데, 결과물 하나정도는 있어야지. 0. 프로젝트의 시작은 이렇다. 평소 공연이었다면 티켓을 종이 명함으로 제작해 친구들에 9yujin.tistory...