Sign Ui 1. 로그인 / 회원가입 UI 로그인 및 회원가입 UI 구현 1.1. 스타일 로그인 / 회원가입 스타일이 유사하여 공용 style component로 뺐다. 유효성 검사 여부로 스타일 props를 넘겨 시각적 재미와 직관성을 강화했다. import styled from 'styled-componen...

Kakao SignIn 1. 소셜로그인 소셜로그인 기능 구현 1.1. 로그인 페이지 CLIENT_ID와 REDIRECT_URI는 백엔드 로직을 맞춰보면서 설정 계획 import React from "react"; import styled from "styled-components"; function KakaoSignIn() {...

SignUp 1. 회원가입 회원가입 기능 구현 1.1. 유효성 검사 // input value 값을 담아줄 state 선언한다. const [input, setInput] = useState({ email: '', password: '', nickname: '', ...

Eroom-Project-04 1. 기본 기능구현 각 페이지에 들어갈 기본 기능들을 미리 구현한다. 1.1. 회원가입 앤드포인트를 맞추고 필요한 요청 정보를 보낸다. 1.2. 로그인 토큰 저장 방식을 여러 라이브러리로 실험해보고 싶어서 이번에는 react-cookies를 써봤다. 처음에는 예제를 따라가다가 new Coolies 타입스...

Eroom-Project-03 1. 기술 명세서 각 페이지에 들어갈 기능들의 구현 방법들을 찾아봤다. 1.1. 패럴랙스 스크롤링 요쇼요소 속도를 조절해 원근감을 주는 기법 1.2. 캔버스 그림을 그려주는 캔버스 태그를 이용 캐릭터가 튕기는 모션 구현하기, 스크롤에 따른 라인 드로잉 구현하기(svg 이미지 stroke이용) 1.3. ...

Eroom-Project-02 1. 유저 플로우 저번에 이어서 오늘은 처음으로 유저플로우를 만들었다. 유저의 입장에서 페이지의 길을 만들고 이 길을 통해서 전체적인 UX를 상승 시키며 서비스에 유저가 오랜 시간 머무를 수 있는 방법을 고민했다. 인터렉티브한 홈페이지를 추가해서 시선을 머물게하며 서비스명에 부합하는 보상을 주어 상호작용의 ...

Eroom-Project-01 1. 실전 프로젝트 이번에는 백엔드와 프론트엔드의 두 번째 협업을 하여 실제로 서비스를 만들어 런칭까지하고 피드백을 받아보는 실전 프로젝트를 진행하였다. 2. 서비스 선정 2.1. 1차 회의 먼저 어떤 서비스를 진행할지에 대해 서치를 시작했다. 여러 아이디어중에 위치기반을 이용한 서비스를 진행하고 싶다...

웹 미니 프로젝트 1. 협업 이번 미니 프로젝트에서는 처음으로 백엔드분들과 협업을 하였다. 제이슨 서버를 사용하는 것 과는 다르게 데이터를 주고 받는 방식에서 많은 트러블 슈팅이 일어났고 그것들을 하나씩 해결해 나갔다. 이러한 과정에서 프론트에서 데이터를 보낼 때 어떤식으로 보내야하는지와 데이터를 보내면 서버에 어떻게 저장되는지 또 서...

API연동 1. 비동기 작업의 이해 서버에서 데이터를 주고받는 시간이 즉시 처리되는 것이 아니라 응답을 받는 시간이 있기 때문에 이 과정을 비동기적으로 처리하게 됩니다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 중지 상태가 되기 때문에 작업에 있어서 비효율적 입니다. function printMe() { consol...

Hooks 1. Hooks? Hooks는 리엑트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다. 2. useState 함수 컴포넌트에서 상태 관리를 위한 훅입니다 하나의 상태 값만 관리할 수 있으므로 관리해야 할 상태가 여러개라면 useState를 여러번 사용하면 됩니다...