2 August 2021 / WEB

MOA React SNS 웹 만들기(SG해커톤)

숭실대학교 소프트웨어학부와 글로벌미디어학부에서 주관하는 2박 3일 해커톤 행사에서 진행한 프로젝트 2021/7/29~2021/7/31

개요

숭실대학교 소프트웨어학부, 글로벌미디어학부에서 코로나 바이러스를 주제로 진행한 해커톤의 프로젝트입니다. 저희는 MOA라는 이름의 SNS 웹을 만들었습니다. 코로나 바이러스에 지친 사람들이 취마활동이나 여행, 게임 등을 공유할 수 있도록 게시글을 생성하여 인스타그램 처럼 서로 소통할 수 있는 앱을 목적으로 제작했습니다.

개발과정

해커톤은 3~4인의 조를 꾸려서 진행되었습니다. 저희 조는 3명의 개발자와 1명의 디자이너로 구성되었고 저는 프론트엔드의 피드 작성부분을 맡게되었습니다. 리액트로 개발한 웹이지만 저희는 컴퓨터보다 스마트폰에서의 사용이 많을 것이라고 생각하여 스마트폰 크기를 기준으로 제작하였습니다. 이 글에서는 제가 맡은 부분인 피드 작성 부분과 설정 페이지를 기준으로 작성합니다.

기술

React

피드 작성 페이지

피드 작성 부는 다음과 같습니다. 디자이너 분이 디자인 해주신대로 개발하여 멋진 외관을 만들 수 있었습니다.

피드 작성 페이지에서 필요한 기능은 다음과 같습니다.

사진 선택 기능
글쓰기 기능
글 정렬 변경 기능
태그 선택 기능(글 별로 태그를 설정해 원하는 글 들을 모아 볼 수 있습니다.)
글 업로드 기능

리액트는 기본적으로 Node.js의 모듈과 자바스크립트를 이용해 웹을 구성합니다. 모듈로는 선배님이 알려주신 https://ant.design/ 의 모듈을 가져와 사용했습니다. 다양하고 예쁜 기능들이 많아서 좋은 사이트입니다.

사진 선택과 글쓰기 기능은 위 사이트에서 쉽게 가져올 수 있습니다.

<img src={(imgValue===0)?(Center):(imgValue===1)?
(left):(right)} width={18} height={18} style= 
onClick={this.imgChange} alt="TextAlign"></img>

<div className="text" style={(imgValue===0)?
({justifyContent:"center", textAlign:"center", fontSize:"30px"}):
imgValue===1)?({justifyContent:"flex-start", textAlign:"left", fontSize:"30px"}):
({justifyContent:"flex-end", textAlign:"right", fontSize:"30px"})}>

리액트에서는 특히 삼항연산자를 많이 활용합니다. 위 두 코드는 정렬 아이콘을 클릭하면 아이콘의 사진이 정렬위치대로 바뀌고, 글의 css를 바꿔 정렬위치대로 적용하는 코드입니다. 삼항 연산자를 활용하여 imgValue를 각 정렬 아이콘마다 설정하고 이 변수의 값을 이용해서 글의 css를 바꾸는 방식입니다.

<Rodal customStyles={customStyles} visible={this.state.visible} onClose={()=>{this.hide()}}>
            <h1 style=>{categoriesList[categoryNum].Title}</h1>
            {categoriesList[categoryNum].tags.map((value, index)=>{
              return (
                <CheckableTag
                  key={value}
                  checked={(type[categoryNum].indexOf(value) > -1)} 
                  onChange={checked => this.handleChange(value, checked)}
                  style=
                >
                  {value}
                </CheckableTag>
              );
            })}
          </Rodal>

위의 코드는 태그 선택 부분입니다. 눌러서 선택하세요 버튼을 누르면 팝업 모듈인 Rodal로 팝업이 띄워지고 map함수로 태그들이 생성됩니다(태그는 antd의 모듈입니다). 이렇게 하면 선택한 태그들을 모아놓은 배열에서 가져와 선택한 태그들이 보여지게 됩니다.

사진과 글, 태그를 설정하고나면 게시하기 버튼을 눌러서 선배님(팀원)이 작업하신 DB로 정보가 보내집니다. 이 DB에서 서버가 정보를 가져와 웹으로 다시 보내는 형식입니다.

설정 페이지

다음은 설정 페이지 입니다. 설정 페이지는 시간이 없어 css 작업만 했습니다.

결과

해커톤에 참여하여 이렇게 멋진 작품을 만들었습니다. 동기들과 이런식으로 제대로 협업하여 결과물을 만들어내는 것이 처음이여서 걱정됐지만 이 과정에서 정말 많은 것을 느낀 것 같습니다. 특히 조장이신 4학년 선배님이 처음 접해보는 협업툴과 백엔드 프로그래밍을 알려주셔서 정말 많이 배웠고 앞으로의 공부에 큰 도움이 될 것 같습니다. 다음은 만들어진 MOA 서비스의 모습입니다.