목록Project in Codestates (31)
개발하고 싶은 초심자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/NmIG2/btrCVfmIW3c/vAmsh3XcGVnlU8hyuWMsF1/img.jpg)
1. 프로젝트 주제 정하기 및 기획(Conimals / ) ① 내가 강아지를 잘 키울 수 있는지 테스트해보고 결과를 알려줌(메인 킥) ② 결과와 함께 유기견을 입양할 수 있는 유기견 보호소 추천 기능(지도 api) 2. 요구 사항 요구사항 우선순위 내용 로그인(일반 회원) 1(Bare Minimum) 일반 회원의 경우 자체적인 회원가입을 통해 로그인을 가능하게 함 로그인(소셜 회원) 1 소셜 회원의 경우 카카오 로그인을 이용한 로그인을 가능하게 함 마이페이지 1 - 닉네임과 비밀번호를 수정 가능한 기능 - 회원 탈퇴 기능 견주 적합도 테스트 1 반려동물과의 생활이 사용자에게 적합한지 확인해 볼 수 있는 선택지 만들기 유기견 보호소 찾아주기 1 테스트 결과에 따른 유기견 보호소 위치 정보 제공 분양 매칭 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bAvwho/btrCWMwVYyw/esQZgfBw310ABWerVNMtx1/img.png)
UX / UI UX(사용자 경험, User eXperience) : 상품에 대해 느끼고 경험하는 모든 것들 • 새로운 스마트폰이 출시되었고, 그것을 구매하는 모든 과정(유저 테스트 등)과 그 안에서 느끼는 생각과 감정들 UI(User Interface) : 인간과 기계 간의 상호작용이 일어나는 공간. • 키보드, 마우스, 스크린, 카메라 등을 모두 포함 • UI Design : 화면 레이아웃, 버튼 위치 등을 디자인하는 것 1) 비즈니스 목적에 따른 UX • 콘텐츠(Contents) →사용자에게 다양한 형태의 콘텐츠와 관련 정보 제공 →사용자들이 생각하는 방식(멘탈 모델)에 맞는 카테고리와 효과적인 검색 도구 설계 중요 (넷플릭스, 디즈니 플러스 등) • 태스크(Task) → 사용자의 업무 처리 목적 →..
2주였지만 2주 같지 않았던, 다사다난(?)했던 첫 번째 팀 프로젝트가 끝났다. 사실 처음 시작할 때만 해도 이렇게까지 힘들 것이라고는 전혀 예상하지 못했다. 프로젝트 자체를 얕봤던 것은 아니지만, 스프린트 진행할 때처럼 기본을 어느 정도 짜두고 진행하면 되겠지 하는 안일한 생각을 가지고 있었던 것은 사실이다. 그 '기본'이 얼마나 중요한 지 제대로 체감을 하지 못했던 것이다. 아예 백지상태로 npm init과 git init을 진행하여 git flow와 필요한 모듈들을 전부 신경 써야 했고, 그러면서 기획 단계와 다르게 진행이 되기도 했다. 서버 쪽에서는 인증과 인가를 더 중요하게 생각하여 자연스레 보안에 소홀해진 부분이 있었다. 하지만 막상 회원가입 요소를 넣다 보니 보안이 중요해졌고, bcrypt ..
1. auth.js 수정 로그인은 되는데 로그인을 할 때 보내는 accessToken과 refreshToken이 제대로 보내지지 않고, 401 status를 띄운다. 그래서 다시 한 번 코드들을 쭉 봤다. tokenfunctions에 있는 checkAccessToken함수에서 요청이 아닌 req.headers[authorization]으로 보내주고 있어 정하지 않은 req.headers가 자꾸 가고 있어서 그랬던 것이었다. 그 부분을 수정해주었다. controllers/auth.js에서도 마찬가지였다. accessToken을 쿠키에 담아 보내주면서 data의 내용이 accessToken을 담고 있어야했는데, 쿠키에 담아 보내주지 않아 계속 에러가 나왔다. 2. 배포 과정에서 rds 데이터베이스에 데이터 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tU7Ll/btrCwHQwwNH/ec06pxD5puHEIyG3gsLizk/img.png)
1. 코드 작성에만 급급해서 정작 작성한 코드가 정말로 제대로 된 응답을 받아오고 있는 지 확인하지도 않았다. 내일이 발표 준비인데, 완벽한 완성까지는 그렇다 치더라도 백지로 낼 수만은 없기에, 늦게나마 postman을 활용하여 제대로 된 응답을 받아오는 지 확인해봤다. 처음에 요청을 보낼 때 http://localhost:{포트번호}/signup으로만 요청을 보내줬다. 즉, 라우터는 신경도 안쓰고 바로 클라이언트에서 서버로 요청을 보냈기 때문에 계속해서 404 에러가 뜨거나 ERR_CONNECTION_REFUSED 에러가 떴던 것이다. 결국 제일 기본적인 포스트맨 요청도 생각하지 못하고, 라우터도 신경쓰지 않았던 백엔드의 불찰이었다. 급하게 마신 물이 체한다는 말이 있듯, 단계를 밟아가면서 했어야 했는..
1. sequelize.sync() 지금까지 작성했던 모델을 자동으로 연결해주고자 server/index.js에 sync()를 활용하는 코드를 작성했다. 사실 처음에 해주었다면 좋았겠지만 프로젝트를 보다 완성도 있게 하려고 배우지 않았던 것들을 공부하다 보니 공식문서에서 이제야 발견하게 되었다. sequelize.sync({ force: false }) .then(() => { console.log('데이터베이스 연결 성공') }) .catch((err) => { console.error(err) }) 이렇게만 추가하고 저장한 뒤 서버를 실행했더니, 복수형 이름들의 데이터베이스들이 자동으로 추가되었다. 알아보니 모델을 생성할 때 freezeTableName: true 옵션을 추가해주지 않으면 그렇게 되는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bNcIC7/btrB9t0AqFf/KsOymNKc4Ss2NiFlNFNHMK/img.png)
1. 너무 많은 코드들을 작성해두어서 하나 해결하면 계속 에러가 나오는 형국이라 결국 처음 썼던 server 폴더 내의 코드들은 백업해두고 다시 mkdir server - npm init 과정부터 시작했다. 즉, 다시 처음부터 빌드하는 과정을 쌓아나갔다. 초기 세팅 후, user모델부터 다시 만들어 마이그레이션을 넣어보았다. 그랬더니 어느 정도 서버가 연결되기 시작했다. 그러나 이런 에러 메시지가 뜨면서 다시 서버가 연결이 안 되었다. 확인해보니 controllers/index.js에서 username을 연결하는 부분이 nickname으로 작성되어있었다. 이 부분을 해제하니 에러가 사라졌다. 하지만 라우터를 연결하려 하면 경로 문제가 뜨기 시작했다. 그래서 아예 라우터 별로 따로따로 경로를 설정해주었더니..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rT00T/btrCbnj1Jjw/tl9iFn1o2qJwuAI9ToCXwK/img.png)
시퀄라이즈 연결 참고 레퍼런스 1. npm start로 서버 실행 시 나왔던 에러 핸들링 참고 레퍼런스 config.json을 불러올 수 없어 나오는 에러로, dotenv를 활용하여 json 파일을 js로 바꿔주는 작업을 했다. models/index.js에서 바꿔준 코드 before const config = require('../config')[process.env.NODE_ENV]; let sequelize; if (config.use_env_variable) { sequelize = new Sequelize(process.env[config.use_env_variable], config); } else { sequelize = new Sequelize( config.database, config...