본문 바로가기

프로젝트/✍️ [전공자들]

 (16)
[전공자들 8] 7일차 - 로그인 /회원가입/비밀번호 재설정 화면 메인 페이지들을 끝내고 드디어 비중낮은 로그인/회원가입/비밀번호 재설정 페이지만 남아서 쉽게 생각했는데 막상 시작해보니 절대 쉽지않았다.. UI 구성은 심플하게 빨리 끝냈는데 여러 조건설정때문에 애를 먹었다. 특히 회원가입 화면에서는 이메일과 비밀번호에는 각각 형식 검증을, 이메일형식이 맞았을 때 인증번호 화면 출력과 인증번호가 맞았는지 검증, 그리고 비밀번호도 사용자 경험을 위해 비밀번호 재입력하는 과정을 거쳐야 하다보니 코드가 복잡해지고 많은 변수가 필요해졌다. 단계별 진행이 아니라 한 화면에 모든 입력을 받고 뭔가 실시간으로 즉시 체크되는 것처럼 화면을 만들고 싶어서 더 복잡해졌던 것 같다. 게다가 혹시나 인증을 받고 이메일을 수정하면 어떻게 되는거지? 비밀번호 재입력을 통과한 다음 원래 비밀번호를..
[전공자들 7] 6일차 - 댓글 숨기기, 답글 닉네임 @태그 붙이기 화면작업은 거의 막바지에 접어들었다. 이제 로그인/회원가입 등등만 하면 끝나는데 오늘은 드디어 야심차게 기획했지만 미뤄뒀던 피드 페이지를 만들 차례.. 프론트적으로 가장 중요한 작업은 두가지정도 있었다. 댓글 숨기기 리스트 형식의 게시판은 어차피 글제목 클릭을 통해 세부화면으로 넘어가기 때문에 댓글 숨기기 기능이 필요하진 않았지만 피드형식의 게시판엔 댓글을 모두 노출시키기엔 너무 스크롤이 많이 생겨서 불편할 것 같았다. 그래서 이렇게 처음엔 댓글이 숨겨져 있다가 댓글버튼을 클릭하면 이런식으로 아래에 댓글창과 댓글작성칸을 띄우기로 했다. 늘 그렇듯이 useState를 사용해 onCilck()이벤트가 발생할 때마다 토글을 만들면 되지 않을까 했지만 곧 한가지 문제점을 떠올렸다. 게시글은 각각 독립적이어야 하..
[전공자들 6] 개발 5일차 - modal 하나로 가성비를 챙겨보자 글 쓰기 버튼을 누르자마자 글이 써지는 페이지는 거의 없다. 마찬가지로 그 중요성과 영향력이 큰 활동일수록, 모달을 통해 재확인하는 작업을 필연적으로 거치게 된다. 앞선 프로젝트에서는 리액트를 처음해봐서 일단 적응하는게 우선이었다. 그래서 여러페이지에서 필요한 모달을 한 번만 구현할 수 있지 않을까 생각은 했었는데 실력 부족으로 실패했다.. (일일이 모든 페이지의 모달을 다 만들었음..) 하지만 이번엔 다름! 효율성은 아직 알 수 없지만 별다른 gpt의 도움 없이 스스로 해냈다는 것에 뿌듯! 일단 내가 필요한 모달의 종류는 글쓰기/회원탈퇴/각종 활동 삭제기능 해서 일단 7개정도이다. 먼저, 모달의 내용을 제외한 나머지 틀을 만들어 주고 props를 사용해 모달을 불러주는 곳에서 type이라는 변수에 어떤..
[전공자들 5] 개발 3일차 - 검색결과에서 검색단어를 파란색으로 표시해보자 풀스택 웹개발 프로젝트를 할 때 나는 처음에 퍼블리싱 - 백엔드 - 프론트 순서로 작업을 하곤 했다. (화면을 이쁘게 만들어 놔야 보기가 좋아서.. ?) 한 번 해보고 나서 비효율적인 부분을 발견했는데 게시판 목록같은 기능이 그랬다. 예를 들어서, 화면을 이렇게 설계했다면 처음에 똑같은 디자인을 만들기 위해 각 게시글들을 모두 하드코딩해서 박았었다. (줄간격 설정이나 크기 설정 등,,) 그러니까 나중에 백엔드 기능을 완성하고 그걸 프론트로 받아와서 보여주는 작업을 할 때 다시 수정을 했어야 했다 그래서 이번 프로젝트땐 백엔드부터 완성하고 여유롭게 프론트를 해볼까 싶었는데 아무래도 db도 처음써보고 다른 어려운 기능도 새롭게 도전하는게 많아서 엄두가 안났다.. ㅋㅋ,, 그래서 만만한 퍼블부터 시작하되 더미..
[전공자들 4] 개발 1일차 - 프론트 컴포넌트 구조 설계 내 화면설계는 크게 5가지 부분으로 나뉜다. 헤더, 푸터, 그리고 메인이 될 부분과 프로필 부분, 마지막으로 스크롤에 상관없이 고정적으로 오른쪽 아래 띄워질 채팅. 헤더푸터는 간단했는데 중간에 위치하는 세개를 구현하는 부분에서 시간이 좀 걸렸던 것 같다. 특히 오픈채팅부분이 원래는 안보이는 상태에서 버튼을 누르면 보여야 하기 때문에 저 화면 만들기가 제일 어려웠다. 결과적으로 성공하긴 했지만 App.js가 좀 지저분해진 것 같다. 일단 프로젝트를 모두 완성해서 배포 후 클린코드로 리팩토링을 해야겠다. 일단 오늘까지 한 것(프론트) 대충 큰 틀만 잡아놓고, 각각 메뉴를 클릭 했을 때의 연결정도만 시켜놨다. 오늘은 프레임을 짜는 작업이었고, 내일모레까지는 계속 퍼블리싱만 할 것 같다. 빡세게 하면 내일 끝날..
[ 전공자들 3 ] 화면설계 원래 한달 반 정도의 개발기간 중 3일을 화면설계 기간으로 잡았지만 현실적인 여건 때문에 한 달 안에 끝내고자 마음먹었다. 그래서 화면설계도 반나절만에 후딱 해치워버렸다... 역시 화면설계를 하면서 기능의 디테일을 잡거나 어긋난 부분을 많이 발견하는 것 같다. 회원관리(로그인/회원가입/아이디찾기 등등...) 를 제외한 메인 페이지 분량. 1. 반응형 화면설계를 하면서 고민했던 부분이 몇 가지 있었는데 반응형으로 만들고 싶어서 처음엔 웹 버전과 모바일 버전을 따로 만들기 시작했다. 하지만 한 달 내에 다 만들기엔 모바일 버전까지 하기엔 너무 오래걸릴 것 같아서 일단 웹을 완성시키고 추후 업데이트 식으로 모바일 버전을 추가하려고 생각중이다. 모바일 버전은 몇 개 화면을 만들다가 중지.. 또 개발하다가 여차하..
[ 전공자들 2 ] 기능분석 전공자들 : 같은 학문을 공부하는 사람들 학교의 구분 없이 내 전공에 대한 질의응답을 주고받는 커뮤니티 플랫폼 주요기능 게시판 공통 - 조회수/추천 순 랭킹 top10 - 댓글 및 대댓글(글쓴이 표시) - 스크랩 - 게시글 추천 기능 1. 시험공부 질문 게시판(메인) - 글쓴이 채택 기능(네이버 지식인 벤치마킹) 기능 2. 전공별 실시간 오픈채팅 - 웹소켓을 이용한 전공별 실시간 오픈채팅방. - 타전공생 참여 가능. 프로필에 타전공 표시 - 현재 참여멤버 수 표시 - 채팅에 대한 답글 기능 기능 3. 진로 게시판 - 졸업생 표시 기능 4. 자유게시판 기능 5. 활동에 따른 뱃지 획득 - 사이트 내 활발한 활동을 한 전공별 5명은 종류별 뱃지 획득 - 오픈채팅 및 모든 게시판 내 게시글 작성/댓글에 뱃지 ..
[ 전공자들 1 ] 기획 및 개발일정계획 프로젝트 목적 개발감각 되살리기 react, spring boot 사용 안해본 기능 및 해보고 싶은 기능 공부 jwt 및 카카오 등의 간편로그인 웹소켓을 사용한 채팅기능 반응형 웹 댓글 및 대댓글 TDD(테스트 주도 개발) 새로운 기술스택과 IDE 경험 mongoDB사용 InteliJ 사용 실제 배포를 통한 실시간 트래픽/유지보수/CI/CD 경험쌓기 프로젝트 주제 전공자들 : 같은 학문을 공부하는 사람들 학교의 구분 없이 내 전공에 대한 질의응답을 주고받는 커뮤니티 플랫폼 개발일정계획 전체기간 : 2023.11.15 ~ 2023. 12. 30 (45일) 일 월 화 수 목 금 토 11/15 16 17 18 기획 및 개발일정계획 기능분석 및 화면설계 화면설계 화면설계 19 20 21 22 23 24 25 개..

티스토리툴바