Jaeilit

프로젝트 기간이 끝났다. 하지만 이 프로젝트에 대한 문제점은 계속 개선해 나가야했다. 성능을 위해서 지금 생각나는 부분은 크게 2가지 부분이였다. 1. 이미지 리사이징 (라이트하우스 성능) 2. 코드 컴플리트 여기는 이미지 리사이징을 글을 쓰겠음. 라이트 하우스를 돌려본 결과 이미지에 대한 문제가 많았다. 이유는 구글링을 열심히 해본 결과 110px 크기를 위해 1200px 크기를 불러온다? 라는 이유였다. AWS S3 현재는 프론트(내가) aws3에 업로드를 하고 거기서 버켓안에 이미지 객체 url을 따와서 렌더링 해준다. 렌더링 해줄 때에 위에도 말했듯이 110px크기를 위해 1200px을 불러와서 110px 크기로 css로 넣어준다. 원본 이미지 자체가 1200px 이라 용량이 큰 걸 불러와서 이미..

평소 작업하면서 의아했던 부분 시간이 없어서 나중에 리팩토링때 보자고 기억?해뒀던 부분들을 다시 보고 찾아보니 서서히 문제점이 발견되기 시작했다. 1. 로그인체크유무 axios 파일에 instance에 인터셉터와 기본헤더설정을 같이하고 있음 의아했음 인터셉터는 요청마다 가로채는 역할인데 여기에 토큰을 걸면 요청마다 헤더에 토큰유무를 알고 요청하지않을까? 근데 지금 기본헤더설정으로 토큰 값을 주고 있음, 결론은 둘중에 하나는 기능을 못하는 것임. console 로 인터셉터에 토큰이 들어오는지도 찍어보고 요청을 보내봤지만 토큰이 유지되지 않는 것, 해결 문제점... config.header.common 부분에 매개변수 config 를 받아와서 메서드를 써야하는데 이 전에는 instance.header로 작성..

1. 문제 내 정보 수정화면입니다. 수정 할 자기소개와 주소변경으로 주소를 변경했을 때 수정하기 버튼을 눌러야 수정이 됩니다. 하지만 구단변경을 누르면 본인이 응원하는 구단을 선택 할 수있는 새로운 페이지로 이동이 되는데 새로운 응원 구단을 선택한 뒤 다시 돌아오면 수정하려고 입력해놓은 자기소개와 주소변경이 초기화 되있습니다. (당연한이야기) 이거를 피드백을 통해서 수정 했던 자기소개와 주소는 사라지지 않게 해달라고 하셨습니다. 저는 웹저장소 중에 sessionStorage를 사용했습니다. 사용 한 이유는 수정하기 누르기전까지는 서버에 전송하지 않습니다. (Cookie 와 local, session의 차이) 현재 창에서만 유효해야하고, 브라우저를 껏다 켯을시에는 삭제 되어야한다. (local과 sessi..

배경설명 서버에서 받아온 이 데이터들을 가공해서 써야함 제가 원하는 데이터형태는 날짜를 큰 제목으로 그 안에 해당날짜 리스트들이 있는 것. 실제로 화면에도 그런식으로 뿌려줘야함 (밑에 실제화면) 실제코드 일단 서버에서 내려준 날짜와 같은 날짜들 경기들만 모아놔야하기 때문에 dayjs 라이브러리를 사용해서 서버와 날짜 형식을 같게 맞춰줌 사진에는 안나와있지만 dayjs를 day로 선언함. dayjs.add(14일 날짜 ++, "day).format() 서버와 형식을 맞춰줌 날짜를 date라는 ary에 담아두고 서버에서 내려준 데이터 play_list에 filter를 걸어 해당날짜가 포함된 경기들만 다시 list에 담아둠 이제 list에는 12월3일 경기가 3개가 될 수 있고 4개가 될 수 있고 많을 수 있..

// 모달 오버레이에서 스크롤 방지 useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;` return () => { const scrollY = document.body.style.top document.body.style.cssText = "" window.scrollTo(0, parseInt(scrollY || "0", 10) * -1) } }, []) Modal 컴포넌트에 넣어주면 됨 원리는 모달이 띄워졌을 시 position fixed 와 overflow-y가 핵심

아 커스텀 훅... 가끔 들려왔지만 가볍게 듣고 흘려들었는데 지금은 너무 좋은 기능이라고 생각합니다. 반복적인 코드를 줄일 수 있는 방법! 사용방법 항상 use 가 이름 앞에 붙은 js 파일을 만들어주고, 파라미터로 넘겨받을 값을 설정합니다. 저는 + - 버튼을 커스텀 훅으로 만들어서 사용했습니다. 초기 값을 0으로 받고 useState를 활용해서 버튼 클릭마다 state 에 값을 담아두고 그 값을 return 으로 훅 밖으로 내보내줬습니다. 주의사항 : 항상 return 값을 줘야지 밑에 사진처럼 return 받아서 해당 컴포넌트에서 사용이 가능합니다. 커스텀 훅을 검색하면 input 값을 받아오는 커스텀훅이 튜토리얼처럼 글 들이 많지만 저도 이 글에는 없지만 input커스텀훅을 먼저 만들고 인용해서 ..

대한민국 야구 팬들을 위한 모임 웹/앱어플리케이션 Meet Ball 링크 : http://meetball.shop/ http://meetball.shop/ meetball.shop 중간발표 회고 백엔드 대해서는 아키텍처 위주로 피드백을 주셨습니다. 저는 잘 모르는 용어들이기에 피드백 내용들이 기억에 남지는 않습니다. 더보기 프론트에 대해서는 개인적 느끼기에 발표때에는 피드백이나 질문이 많이 없었습니다. 음 그래서 발표 이후에 멘토님 스케줄이 끝나신 후에 개인적으로 찾아뵈서 피드백을 다시 받아보고싶다고 말씀을 드리고 양해를 구한 뒤 피드백을 다시 받아봤습니다. 일단 저희에게 피드백이나 질문이 많이 없었던 이유는.. 발표에서 어필을 안한 부분도 있지만 디자인적으로 많이 단순하다 컴포넌트 다 돌려쓰고 그냥 리..

https://www.next-t.co.kr/blog/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-SEO-%ED%85%8C%ED%81%AC%EB%8B%88%EC%BB%ACSEO-%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-OpenGraph-metaogtag-%ED%8A%B8%EC%9C%84%ED%84%B0%EC%B9%B4%EB%93%9C-TwitterCards

1. env 등록을 했다. 2. 어라? 왜 자꾸 undefined 가 찍히지? 3. 구글링 결과 서버를 재실행 해야한다. 제가 환경변수로 등록한 것은 백엔드 서버 주소와, 이미지를 뿌려줄 때 서버의 저장소/ 경로인데 서버주소를 노출시키고 싶지 않아서 설정했습니다. REACT_APP_ 이라는 이름이 들어가지 않으면 인식이 안됩니다. 그리고 꼭 재실행해야함

공식문서 https://formik.org/ Formik React hooks and components for hassle-free form validation. The world's leading companies use Formik to build forms and surveys in React and React Native. formik.org 기존코드 export const Login = (props) => { const { history } = props const [loginOther, setLoginOther] = useState(false) const [inputValue, setInputValue] = useState({ userid: "", password: "", }) const {..