1주일 게시판 만들기 프로젝트 후기
안녕하세요 개발적금입니다.
오늘은 1주일동안 게시판 만들기 프로젝트를 해서
후기를 남기려고합니다.
우선 3명이서 작업을 하였고
각자 USER / BOARD / MAIN 및 ADMIN 부분을 맡아 진행하였습니다.
저는 USER 부분을 맡아 진행하였습니다.
결론부터 말씀드리면 협업을 통한 작업은 언제나 너무 어렵습니다.
1. GITHUB을 잘 다뤘었다면 일이 조금 수월하게 진행되었을텐데..
2. 초기에 작업의 방향성을 명확하게 가지고 갔으면 좀더 어땠을까?
3. 안되는것 구현의 시간이 오래걸리는것을 과감하게 포기했으면 어땠을까?
언제나 결과를보고 후회하기 마련이네요.. 다음 프로젝트는 좀더 이러한
생각들을 가지고 작업을 해야될것같습니다.
1. Login Page
Login 페이지입니다.
아이디와 패스워드가 동일하지않으면 당연히 로그인이 안됩니다.
사실 이부분에서도 많은 고민을했습니다. 로그인하는 부분 Back-End는
오래걸리진 않았지만 화면 구성하는데 시간이 좀 걸렸습니다.
어떻게넣으면 이쁠까..? CSS의 Animation 효과를 넣어보자 해서
BODY부분에 background 속성을 animation으로 주었고
- linear-gradient(선형 그라디언트) 로 주었습니다.
기본적으로 gradient는 '기울어짐' 이라는 단어입니다.
`css에서의 gradient는 한방향에서 다른방향으로 색이 점차 흐려지거나
색이 변화하는 효과를 줄때 사용하는 속성입니다`
저는 4가지 색상을 활용하였습니다 .
2. Join Page
Join 페이지입니다.
Login페이지와 마찬가지로 배경은 맞췄습니다.
한가지 다른점이 있다면 input box를 좀 색다르게 꾸며보고싶어서
1. transition을 이용하여 애니메이션 효과를 주었습니다.
input속성의 vaild와 focus를 이용하여 inputbox 옆에 span을 focus가 되었을때
아닐때 transition을 주어 이동하도록 하였습니다.
2. 또한 input속성 중 required를 사용하여 값을 입력하지 않고
가입하기를 누르면 포커스를 두어서 입력하라고 메세지를 띄웠습니다.
3. 아이디와 별명 중복값을 걸러내었습니다.
이부분은 가입하기 버튼을 눌렀을때, DB쪽에 요청을 보내어
INSERT 하기전에 아이디와 별명을 찾아보고 ,
중복된 값이 있다면 return true
중복된 값이 없다면 return false 를 통해서
중복된 값이 있다면 true값이 반환되어, 응답을 join페이지로 갈수있도록 구현하였고
중복된 값이 없다면 false값이 반환되어, 회원가입이 완료되고 -> 로그인이 된상태로
내정보를 확인할수 있는 Profile 화면으로 이동하게 됩니다.
이슈가 있었다면 크게 두가지가 있었습니다.
- ISSUE
1. 아이디와 이름의 한글값을 전달할 시에 깨져서 나오는 현상
ex)%1244%%124%^123
-> TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Set-Cookie"]
이런식의 에러가 나왔었습니다.
한글형식의 cookies 값을 전달할때 발생하는 에러입니다.
HTTP 프로토콜에서 허용하는 문자가 아니어서 오류가 나는것인데,
->값을 전달할때에 encodeURI(변수명) 을 통하여 해결할수있습니다.
2. input 속성 required 사용시 데이터를 전달할때 겹쳐지는 현상
이문제는 아직 해결을 못했는데 required 속성을 제대로 이해하지 못했던것 같습니다.
3. Profile
Profile 페이지입니다.
가입한 회원의 정보를 볼수있고, 게시판으로 이동이 가능합니다.
너무 비어있는거 같아서 TEXT에 Animation 효과를 주어 정적인 표현을 하였습니다.
Profile 페이지에서는 딱히 이슈라고할것은 없었는데,
굳이 꼽자면
1. 값불러오기
-> Profile 정보를 볼때 id를 기준으로 id에 해당하는 값들을 전부 가져와서 표현했습니다.
-> Query문을 좀더 많이 , 잘다룰수있다면 좀더 멋있게 표현할수있겠구나..
-> 다른기능을 좀더 표현할수 있겠구나(검색기능같은거) 생각했습니다.
2. 화면구성
-> Profile화면 구성을 초기에 했을때 너무 허전해보였습니다.
-> Login/Join/Profile 화면의 User관련 화면의 Background를 통일성있게
-> 우선 맞추었습니다. 그 후에 화면 아래쪽에 TEXT를 넣었었는데
-> TEXT는 animation이없나? 생각하여 찾아서 구현했습니다..
-> <h2></h2>안에 <span></span>에 TEXT를 각각 넣은 후에
-> class를 주어서 각각 4가지의 색깔을 주었고 , keyframes color-animation을 통해
-> 점차 색이 변화하는 효과를 주었습니다.(0%일때는 1번색상,30%일때는 2번색상 ....)
4.Logout
Logout Page입니다.
로그아웃 버튼을 누르면 res.setHeader를 통해 Cookie token값을 초기화 시켜주며
Main Page로 이동하게됩니다.
Logout은 쿠키값을 날려주는 방식으로 작업을 진행하여서
크게 어려운점은 없었습니다.
이번 프로젝트에서 MVC패턴을 통한 통신작업의 흐름도를 조금 이해하게 되었고
기존의 공부했던것들을 복습하기 위한 좋은 시간이었다고 생각합니다.
개발적인 사고라고 해야할까요 생각의 방식도 조금은 발전했다고 생각합니다.
후회만 남는 프로젝트지만 오늘을 발판 삼아서 다음번에는 더 잘할수있도록
기반을 더 잘 다져야 겠습니다..
감사합니다.