부트캠프 (57) 썸네일형 리스트형 [FE_Bootcamp] Main Project_로그인/회원가입 홈 화면을 만들고, 홈 화면에서 바로 이동 할 수 있는 페이지인 로그인과 회원가입 페이지를 만들기로 했다. 드디어 서버 통신을 사용하고, 백엔드와의 협업을 하는 페이지라 조금 무섭기도 했지만 프리 프로젝트를 참고해서 천천히 해보기로 했다 1. 서버 통신 로그인을 하기 위해서는 회원 가입이 먼저 필요했지만, 로그인을 우선 구현하기로 했다. 일단 서버에 테스트 이메일과 비밀번호를 넣어놓고, 그 이메일로 로그인을 했을 때 성공하는지 확인을 해 보았다. 로그인은 POST 메서드를 사용하므로, 따로 Header 없이 Body만 전송해주면 됐다. Body도 email과 password만 포함되면 되므로, email과 password를 입력받아 Body에 넣고, 이를 axios를 통해 서버로 전송해주고자 했다. co.. [FE_Bootcamp] Main Project_Home 메인 프로젝트의 개요를 전부 잡고, 본격적으로 개발에 들어가게 되었다. 개요를 대강 설명하자면, '위시리스트 기능이 포함된 가계부'로, 크게 5개의 페이지로 나눌 수 있다. 가계부 소비 패턴 분석 위시리스트 유료 구독 결제 마이페이지 여기에 홈 화면과 로그인/회원가입까지. 프론트엔드 팀원은 3명이었으므로, 한명씩 만들고 싶은 페이지를 가져간 뒤, JIRA를 통해 작업 상황을 공유하고 맡은 작업이 끝나면 다음 작업을 가져오는 방법을 사용했다. 우선 개발 첫날이었으므로, 서버 통신이 딱히 필요하지 않은 홈 화면을 만들기로 하였다. 개발 과정은 전부 쓰지 않고, 내가 처음 써보았거나 공부가 좀더 필요해서 많이 알아보고 썼던 기능 또는 라이브러리 등에 대해서만 쓸 예정이다. 1. 화살표를 클릭하면 자동 스크롤 .. [FE_Bootcamp] Main Project_프로젝트 시작 블로그를 몇달만에 쓰는 것 같다. 프리 프로젝트 중간 정도부터, 메인 프로젝트가 끝날 때 까지 정말 온갖 사건사고에 휘말리다 보니 블로그는 생각조차 안났고, 그 덕분에 약 2달정도의 커다란 공백이 생기고야 말았다. 꾸준히 쓰겠다던 나 어디? 아무튼, 지난 8월 3일부로 코드스테이츠 모든 과정이 끝났고, 조금 휴식을 취하며 본격적인 취업 준비에 들어가게 되었다. 그 전에, 내가 만든 메인 프로젝트를 돌아보고, 만들면서 어려웠던 것이나 잘 안됐던 것들, 또는 새롭게 배웠던 것들에 대해 정리해보고자 한다. 1. 프로젝트 시작 전 프리 프로젝트를 통해 만나게 된 백엔드 분과 같은 팀을 하게 되었다. 많은 사람들과 만났지만 딱 스터디나 페어 프로그래밍 이상의 친분은 쌓지 않았고, 그래서 딱히 같이 할 사람이 없던.. [FE_Bootcamp] Pre-Project_구현 <header> footer에 이어 header를 구현하기로 했다. 비교적 간단했던 footer에 비해 header는 구현해야 할 기능도 많고, CSS도 꽤나 복잡했다. 일단 예상 시간을 6시간으로 잡긴 했으나,.,.지켜질지는,.,.,. 1. 구현해야 하는 기능 로고를 누르면 메인 페이지로 이동 → router 이용 각 링크를 누르면 해당하는 페이지로 이동 → 태그 이용(하이퍼링크) 사실 footer의 기능 자체에는 크게 신경쓸 것이 없다. 링크를 달아주는 것이 가장 큰 할일이고, 그나마 신경쓸 것은 hover 했을 때 글자 색이 바뀌는 것 정도? 때문에 기능 구현보다는 CSS를 어떻게 설정할지를 중점적으로 생각해 보았다. 2. Wire-Frame footer와 비슷하게 header 태그 안에 내용물을 담을 contai.. [FE_Bootcamp] Pre-Project_구현 <footer> 드디어 Stack Overflow 페이지 클론코딩이 시작되었다. 바로 어제까지 작성한 사용자 명세서를 통해 구현해야 하는 내용을 파악하고, 이를 코드로 옮겨 실제 기능이 동작할 수 있게 만드는 것이 목표. 나는 시멘틱 HTML 파트를 맡아 header, footer, sidebar, 그리고 질문 작성 페이지까지 작성하게 되었다. 예상 소요 시간별로 우선 순위를 세워 작업 순서를 정하였고, 소요시간이 가장 짧을 것으로 예상되는 footer 부분을 먼저 구현하기로 했다. 1. 구현해야 하는 기능 로고를 누르면 메인 페이지로 이동 → router 이용 각 링크를 누르면 해당하는 페이지로 이동 → 태그 이용(하이퍼링크) 사실 footer의 기능 자체에는 크게 신경쓸 것이 없다. 링크를 달아주는 것이 가장 큰 할.. [FE_Bootcamp] Pre-Project_사용자 요구사항 작성 및 Issue 관리 오늘은 Pre-Project에 들어가기 전 우리가 구현해야 하는 것들을 정하고, 상세한 구현 내용을 적어 Github Isuue에 등록하는 시간을 가졌다. Pre-Project는 개발자 지망생들이라면 아주 익숙할 StackOverflow 웹 페이지를 클론하는 것! 우리 팀원들이 이 페이지를 처음 보고 하나같이 했던 말은 'UI가 구리다,.,.'였을 정도로 썩 좋지 않은 UI를 가졌다. 하지만 다양한 기능이 있고, 우리가 그동안 배웠던 수많은 라이브러리나 모듈을 사용 해 볼 수 있는 환경을 가진 페이지라 아마 클론을 시키지 않았을까 싶다. 처음에는 이미 SO가 정해진지 몰라서 팀원들끼리 긴 회의 끝에 Velog를 클론하기로 했는데,.,.,알고보니 시작도 전부터 SO로 정해져 있었다는 사실! 이거 완전 아X.. [FE_Bootcamp] Pre-Project_Git Flow 이번주부터 본격적으로 Pre-Project가 시작되었다. 첫날은 가장 중요한 버전 관리 툴인 git과 github을 다루는 방법에 대해 배웠다. 지금까지 프로젝트를 포크하고 클론 하는 방법만 배웠었는데, 막상 직접 레포지토리를 만들고 pull, push 해보려니 난관이 많았다,,.,, 1. git 레포지토리 만들고 remote 하기 이미 만들어져 있는 레포지토리(이하 레포)라면 clone을 하면 되겠지만, 프로젝트는 아예 처음부터 만들어야 하기 때문에 레포를 먼저 만들고 터미널에서 remote 하여 로컬 환경과 연결하는 방법을 사용했다. 원격 환경을 만들기 위해 먼저 git에 새로운 레포를 만들어 보자. 외부에 공개하는 것이 아니라 일단 깃허브 사용 연습을 하는 것이기 때문에 private로 만들었다. .. [FE_Bootcamp] 79일차_Proxy 1. CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의된다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말하는데, 일부 작업은 동일 출처 콘텐츠로 제한되나 CORS를 통해 제한을 해제할 수 있다. 로컬 환경에서 개발한 앱은 기본적으로 localhost:3000으로 시작하지만, 나중에 로컬 환경에서 개발한 실제 서비스 및 프로젝트의 클라이언트에서 서버의 .. 이전 1 2 3 4 ··· 8 다음
