[강의평가사이트] SUWIKI 전공 즐겨찾기 로직 변경 - 성능개선 웹 SUWIKI 배포 전부터 성능상 불만이 있는 부분이 있었는데 아래의 학과 즐겨찾기 모달이었다. 기존 로직에 불필요하고 비효율적인 서버 요청들이 있어서 매번 고치고 싶었는데 마땅한 방법이 생각나지 않다가 오늘 번뜩 떠올라서 바로 수정하고 배포본도 업데이트 했다. {db .filter((v) => { return searchMajor === '' ? v : v.includes(searchMajor) ? v : null; }) .map((v, i) => { return ( {v} ); })} 즐겨찾기 설정/해제 작동원리는 db(전공 리스트)가 favoriteDb(즐겨찾기 리스트) 안에 포함된 값을 가지고 있으면 꽉 찬 별을 보여주고, 그게 아니라면 빈 별을 보여주는 방식이다. 기존 onClick(onFav.. [강의평가사이트-SUWIKI] 로그인 로직 및 발생 문제 수위키 로그인 로직 클라이언트에서 서버로 id,pw 넘겨줌 -> 데이터 일치하면 액세스,리프레시 토큰 내려줌 현재 토큰 만료 시간 : 액세스토큰 - 1분 / 리프레시토큰 - 7일 ----------------------------------------------- API - 인터셉터로 관리(API모듈화) 인터셉터 : 클라이언트와 서버 사이의 미들웨어 역할(프론트 측에서 에러 처리) 클라이언트측에서 서버로 요청 보낼 때 서버에 요청 도착하기 전에 인터셉터가 요청 가로채고 발생될 오류 파악해서 config/error 반환해줌 인터셉터로 모든 GET요청 헤더에 액세스토큰 넣어놔서 편함 const instance = axios.create({ baseURL: `${PROXY_URL}`, timeout: 5000.. [강의평가사이트] 개발일지 - axios interceptors의 사용 API 사용을 단순화 하기 위해서 axios interceptors 를 사용하여 api를 모듈화하기로 그리고 어제 조금이나마 구현을 했다. 기존에 사용하던 Api와 이후에 구현된 Api의 코드 길이가 차이가 많이 난다. //공지사항 자세히보기 api export const noticeDetailApi = async (notice) => { const url = `${PROXY_URL}/notice/?noticeId=${notice}` const options = { method: "GET", headers: { "Content-Type": "application/json", AccessToken: getCookie("AccessToken") }, url, } try { const response = aw.. [강의평가사이트] 개발 일지 개발 일지를 꽤 오랫동안 작성하지 못했다. 강의평가사이트 프로젝트에 많은 변화가 있었다. 디자이너가 영입이 되어, 페이지 디자인이 한층 업그레이드 되었다. 플랫폼의 이름도 수강 -> 수위키 로 변경이 되었고, 메인 페이지부터 시작하여 전체페이지의 디자인이 대폭 수정되었다. 이전에는 내가 로그인, 아이디/비밀번호 찾기, 내 정보 페이지 등 상당 페이지의 디자인을 맡고 있었지만, 팀원 중에 디자인 코딩을 잘하시는 분이 계셔서 이제는 그 분이 페이지 전체 디자인을 담당하신다. 사실 이제 대부분의 작업은 거의 완료되었고, 검색기능과 토큰재발급 로직만 구현이 완료되면 1.0.0 버전은 배포할 수 있을 것으로 보인다. 나랑 나머지 한 분은 axios를 이용한 서버 통신과, 데이터 바인딩에 주력하고 있다. expor.. [강의평가사이트] 개발 일지(4) 프로젝트 진행 중 개발 일지를 너무 안 쓴 것 같아서 기록하려고 한다. 내가 맡은 페이지(하위 컴포넌트/모달 포함) - 로그인, 아이디 찾기, 비밀번호 찾기, 내 정보, 내가 쓴 글 현재 전체적인 디자인 작업은 거의 끝나가는 과정이며, 팀원들과 페이지 작업물을 합치는 작업을 진행중에 있다. - nav바에 있는 각 버튼들 위치 수정중에 있음 - 전에 쓰던 디자인이랑 달라졌는데, 이유는 다른 팀원이 만든 페이지랑 UI를 통일하는게 좋을 것 같아서 원래 있던 로고 삭제 및 로그인 버튼을 교체했다.(원래 Material UI를 사용했는데 팀원이 직접 만든 버튼으로 통일) 밑에 아이디 찾기/ 비밀번호 찾기 링크도 hover시 색변환하도록 디자인하였다. export const IdPwSearchLink = styl.. [학교강의평가사이트] 개발일지(3) 오늘은 로그인창의 기능을 좀 수정하고 react-router-dom으로 아이디찾기 페이지와 비밀번호찾기 페이지를 연결해주었다. 처음에 로그인 기능을 구현할 때 썼던 함수이다. const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); // 기능구현때는 콘솔안찍고 바로 백엔드로 넘겨주기 console.log({ id: data.get('id'), password: data.get('password'), checkbox: checked }); }; FormData를 통해 (아직 서버가 미구현이라) 콘솔에 찍는 형식으로 구현을 했는데, 이렇게 구현을 하면 input에 입력받은 것을.. [학교강의평가사이트] 개발일지(2) 오늘은 기존에 만들었던 로그인 페이지의 코드를 수정하는 시간을 가졌다. 기존 코드가 너무 길고, 다른 작업자들이 봤을 때 알아보기 어려워서 styled-component로 뺄 수 있는건 빼버렸다. 따로 login.element.js라는 파일을 만들어 component들을 담아놓아 필요할때마다 가져다 쓰는 방식이다. export const IdPwSearchLink = styled.div` padding: 10px; font-size: 16px; color:rgb(158,158,158); font-weight: bold ` 하나의 컴포넌트 구성은 거의 이런식이다. 이런 모양의 컴포넌트들이 element파일 안에 들어있다. 어려웠던 점은 Material UI를 사용하다보니 CSS를 사용하기가 까다로웠는데 (.. [학교강의평가사이트] 개발일지(1) 개발 동기 원래 학교의 모든 학생들이 에브리타임이라는 어플을 사용하여 강의 시간표를 계획하고 학기가 끝나면 수강했던 강의들을 평가할 수 있었는데, 학교 측에서 더이상 강의목록을 제공하지 않아 2020년 하반기부터는 새롭게 강의평가를 쓰기가 불가능하게 됐다. 그래서 내가 속해 있는 동아리에서 팀 프로젝트로 학교의 강의평가 웹 및 안드로이드, IOS 어플을 개발하기로 했다. 팀원은 총 8명으로 프론트엔드 3명, 백엔드 2명, 안드로이드 2명, IOS 1명으로 구성되어 있다. 나는 프론트엔드 팀에 속해있고 로그인, ID/PW찾기, 회원가입, 내정보/내가쓴글 컴포넌트 구현을 맡았다. 언어는 JS이고 react라이브러리를 사용한다. 이미 와이어프레임을 제작하여 선정하였고, 와이어프레임에 맞춰 구현하였다. 처음 시.. [학교강의평가사이트] FRONTEND 개발일지 frontend팀원 : 3명 개발 언어: JS(react.js) 내가 맡은 사항 로그인 아이디찾기 비번찾기 회원가입 내정보 내가쓴글 ------------------------------------- 위에서 아래순으로 와이어프레임을 토대로 구현 예정 이전 1 다음
