공부하자 공부 공부하자 공부

CSS가 어느정도 끝났기 때문에 슬슬 필요한 기능구현을 하기로 했다. 그 중에서 나는 무한 스크롤을 하기로 했다. 1. 무한 스크롤(Infinite Scroll) 리스트들을 보는 방법은 여러가지가 있다. 데이터를 전부 받아와서 전부 한번에 나타내기 페이지로 나누어 보기 무한 스크롤 이 중 내가 구현하려는 무한 스크롤은 데이터의 일부를 받아오고 이후 스크롤이 정해진 구간을 넘어 갔을때 다시 요청을 보내서 스크롤이 늘어나는 방식으로 리스트를 보여주는 방식을 말한다. 구현하는 방식은 얼추 알고 있었다. 일정 부분의 데이터를 처음받고 map으로 뿌려준다. 스크롤이 content의 마지막에 도달했을때 다시 데이터 요청으로 보내고 리스트 업데이트 하기. import { useState, useEffect } fro..

어제 멘토분이 말씀하시길 요즘은 반응형이 기본이다! 라고 하셨다. 초기 기획 당시에는 반응형을 할 생각을 하지 않았다. 그래서 부랴부랴 CSS가 거의 끝난 오늘 해보기로 했다. 1. 반응형 요즘에는 인터넷을 컴퓨터로만 접속하는 것이 아닌 태블릿, 핸드폰으로도 접속한다. 그 화면에 맞춰 화면이 다르게 보이는 게 반응형이라고 할 수 있다. 반응형을 하지 않았을 때 화면을 줄이게 되면 화면에 있는 item들이 이상하게 배치되는 것을 확인할 수 있다. 1. 1 @media @media only screen and (max-width: ;) { // max-width의 아래 크기일때 적용되는 CSS } 반응형을 구현하기 위해서는 @media를 사용해야 한다. ()안에 조건이 되는 크기 등을 적어 놓는다. 그리고 ..

1. 텍스트 에디터 프로젝트에 텍스트 에디터를 사용하기로 했다. 텍스트 에디터는 글을 작성하는 기능을 구현할 때 단순 textarea를 사용하는 것이 아닌 ckEditor React-MD-Editor Toast UI React-qill 위보다 많은 텍스트 에디터가 존재하지만 이번에 이미지 업로드를 구현하면서 사용해본 에디터들이다. 처음에 React-Md-Editer를 하고 싶기도 했고 가장 이뻐 보이기도 했어서 선택을 했다. 마지막엔 결국 Toast UI로 했다. 2. 이미지 업로드 구조 이미지의 업로드 구조는 위와 같다. 1. Browser에서 image 업로드시 image를 formdata형식으로 Server로 post 요청한다. 2. image를 받은 Server는 AWS S3 버킷으로 image를..

일단 순조롭게 진행 되고 있다. 아직 서버와 통신을 하고 있는 것이 아니지만 CSS는 순조롭다. 💥 Problem 순조롭지만 한가지 문제가 생겼다. board 작성시 에디터를 사용하는데 이미지도 넣을 수 있게 구현을 하려고 한다. 어렵다! 하는 방법을 찾아보고 있고 여러가지 방법을 봤지만 서버와 티키타카(?)를 해야되는데 서버에 대한 지식이 별로 없으니 맞는 방법인가 찾기 힘이 드는 것 같다. 내일 백엔드 분들이랑 이야기하며 방법을 찾아봐야겠다.

오늘을 드디어 기획을 끝내고 개발에 들어가는 단계이다. FE가 어떤 요청을 보낼지, BE가 어떤 응답을 보내줄지 정하지는 않아서 기능 구현은 어렵지만 CSS도 코드 만지는 거니까 개발에 들어가는 단계라고 생각하기로 했다. 요즘 핫하다는Typescript를 사용해보기로 했다. 어제 공부한 바로는 일단 문법 자체는 Javascript랑 똑같았다. Javascript는 원래 타입을 자동으로 지정해 주는데 Typescript는 타입을 직접 작성한다. 이것의 의미는 Javascript가 자동으로 지정하다 발생하는 오류를 잡을 수 있다는 이야기다. 즉, 개발자가 의도하지 않은 오류를 줄일 수 있다는 것이다! 그래서 지금 CSS 작업을 하고 있지만 뭔가 적은 느낌이 든다... 명심 해야할 것 1. 시간은 촉박하다고 ..

오늘은 프로젝트 처음으로 멘토링을 하는 날이었다. 나름 어제부터 긴장을 해서 더 불안했던 것 같다. 하루종일 사용자 요구사항 정의서 수정하고, 화면 정의서 수정하고, 피그마 작성하고 했지만 할때마다 이게 맞나...? 괜찮은 건가라는 생각이 자꾸 들었다. 이런 생각을 가지고 멘토링을 진행했더니 멘토분이 그런 걱정들을 모두 날려버리 셨다. 지금 하는 것만으로도 충분하다고 하셨고 우선순위를 더 세분화해서 우선순위 높은거에 신경써라, 시간 타이트하게 잡고 미리 끝낼수 있다면 미리 끝내라 그다음 버렸던 내용을 구현하면 된다 배포 미리해라 등등 좋은 말씀 많이 해주시고 질문 하는 부분도 너무 잘 대답해주시고 너무 좋았다. 덕분에 너무 걱정하지 않고 플젝에 집중할수 있을것 같다! 힘내자 화이팅!

드디어 마지막인 메인프로젝트까지 왔다. 지금부터 메인 프로젝트가 완성되는 과정에서의 나의 성공과 실패... 느낀점과 노력한점 모두 적어보고 싶다. 성공으론 성취감을 실패로는 똑같은 실수를 반복하지 않기 위해 적어보려고 노력하겠다. ✌ 팀 빌딩 난 메인 프로젝트 전인 프리 프로젝트 진행 중에 팀 빌딩을 끝냈다. 프론트엔드는 같이 스터디하던 사람으로 구성되어 있고 백엔드는 프리 프로젝트를 같이 했던 한 분이 열심히 하셔서 같이 하자고 했더니 흔쾌히 허락해 주시고 다른 한분도 데려 왔는데 그분도 다른 한분을 데려 오셨다. 이렇게 팀빌딩이 끝나고 나서 이틀후 공지가 떴다. 마음에 맞는 팀원이랑 할 수 있게 해준다고 이 내용도 나는 미리 알고 있었다. 첫번째 단서는 프로젝트 오티때다. 그 때 크루분이 말했었다. ..

CORS 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 Proxy React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반한지 모르게 된다 => 브라우저를 proxy 기능을 통해 속이는 것 webpack dev server proxy CRA 를 통해 만든 리액트 프로젝트에서는 packa..