Project

팀 프로젝트를 끝내고 난 후 팀원으로서 맡은 부분의 구현에만 집중을 한 터라 처음 기획부터 배포까지의 개발의 전체 구현에 대한 공부가 필요하다는 것을 느꼈던 차에 todo 웹어플리케이션인 트렐로(https://trello.com)를 클로닝을 하는 과제를 하게 되었다.

Client 개발환경 세팅 : React https://velog.io/@jch9537/Project-React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85-urk4w4yl9h Server 개발환경 세팅 : Nod

Front에서는 React를 사용하기로 했다. 따라서 React 개발환경을 세팅하며 간단히 블로깅해보려 한다. 터미널에서 아래와 같이 create-react-app 명령어로 프로젝트 생성을 한다. npx를 사용한 이유는 블로그 내 https://velog.io/@j

Back-end 개발환경은 Node.js로 하고 프레임워크는 express를 사용하기로 했다. Server 개발환경 세팅 순서는 npm 설치 : node와 npm은 설치가 되어있다. express 설치 & Hello World express 공식문서 : http

이제 개발환경에 Eslint와 prettier를 설정해야한다. Eslint, 에어 비앤비의 구성 및 필수 패키지를 설치한다. image.png Prettier, 그리고 Eslint와의 충돌을 피하기 위한 패키지를 설치한다. image.png husky와 lin

API문서 작성은 이전 첫 팀 프로젝트에서 중요성을 절감했던 부분이라 처음 기획단계와 개발시작하기에 앞서 꽤나 신경을 썼던 부분이었다. 그래서 API문서를 작성하여 미리 어떻게 분기해서 어디에서 각각의 데이터를 다룰 지에 대해 계획을 세웠었다. 큰 틀의 수정은 없었지

현재 회원가입화면이다.그림에 있는 것과 같이 이름아래 email부분과 password부분에 그냥 문자를 넣어도 가입이 된다.이 부분을 1\. email형식 체크 2\. password의 유효성 체크 3\. 비밀번호 확인 4\. Database 내 중복이메일 체크까지

bootstrap 설치npm i bootstrap으로 설치가져오기html 파일에서 bootstrap을 참조하도록하고 meta태그에서 viewport를 정해준다메타태그 <meta>참조: https://webclub.tistory.com/305HTML의 메타

이런 나의 페이지에 icon을 적용하겠다.(골뱅이를 빼버리겠다.)이 페이지로 간다. https://react-icons.netlify.com화면에 친절하게 안내한 대로 npm install react-icons --save로 설치를 한다.package.json

11

서퍼를 모집하기 위한 방만들기 화면에 대한 설명이다.화면은 다음과 같이 구성되어있다. 날짜선택 > 지역선택 > 스팟선택 > 모임에 대한 내용 또는 설명 > 방만들기처음 화면이 렌더 된 후 componentDidMount에서 server로 "지역선택" 드롭다운메뉴에 표시

다음은 서핑에 참여 할 수 있는 방리스트가 있는 Board 페이지(서핑참여하기)와 나의 방 목록이다."서핑 참여하기" 버튼을 누르면 나오는 Board화면이다.화면렌더 후 ComponentDidMount로 모든방에 대한 정보를 server에 요청, 응답받은 방의 정보를

"서퍼 모집하기"에서 방을 만들었거나 "서핑 참여하기"에서 방을 선택한 경우 또는 "나의 방 목록"에서 참여한 방 중 하나를 선택하면 해당 Room페이지가 렌더된다.Room화면 렌더 시 ComponentDidMount로 유저토큰과 해당 Room의 id을 사용해 serv

회원정보를 수정하는 페이지이다.현재 이름은 "테스터 구"이다.화면 아래 TabNavigator에서 "User"버튼으로 회원정보수정화면으로 가서 이름변경 후 "회원정보수정"버튼을 누르면 유저토큰과 수정된 정보(현재는 이름)로 server에 요청을 보내 정보를 수정한다.이

기획단계에서 날씨 API에 대한 미흡한 조사ReactNative/TypeScript 숙달부족내가 Redux 사용하지 않은 점

Vid+는 2주기간동안 진행했던 프로젝트로 비디오를 보며 필요한 순간 노트를 작성 할 수 있도록 도와주는 Video Note Extension 웹 애플리케이션이다.

Vid+의 전체적인 구성도 이다. 동그라미는 Component(또는 화면 구성요소)이고 네모는 화면을 보여지는 Component이다.

로그인 시 비밀번호를 분실했을 때 사용자에게 임시 비밀번호를 발송해주는 기능이 필요했다.여러가지 참조문서를 보고 node server에서 메일을 보낼 수 있는 nodemailer라는 메일 전송 모듈을 사용해 보기로 했다. 이유는 사용법이 꽤 간편했기 때문이다.(프로젝트

2주동안 Vid+ 프로젝트를 진행하면서 느꼈던 점과 아쉬운 점에 대해 적어본다.