Jaeilit

알고리즘 할 때 또 써먹을일이 있을거같아서 포스팅합니다. 시간 계산 함수 함수로 만들어서 사용 가능 function toMinute(time){ //time[0]은 시, time[1]은 분 return time[0] * 60 + time[1] * 1 } 2. 정규식 치환 함수사용하는건 처음알았다. str.replace("지금 문자", 바뀔문자) str.replace("지금문자", (match, p1) => p1 p1 에 대한연산 함수로 진행 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace String.prototype.replace() - JavaScript | MDN replace() ..

라이트 하우스에서 우리 프로젝트가 Performance 16점이 나왔다. 번들 용량이 많다.. spa 경우 이 번들 패키지를 한번에 다운로드받고 그게 완료되면서 렌더링을 하는데그렇기 때문에 초기 로딩속도가 느리다고 하는 것임.. 우리 번들은 용량이 꽤 되보인다. 구글링 이후 16점 짜리 퍼포먼스를 끌어올리려면 필요한 번들만 가져오게끔해야한다고 했다. 리액트 공식홈에도 있듯이 lazy를 사용하는 방법인데 사실 어젯 밤에 다 일일이 바꿔주었음에도 16점이 나왔다.. 그전에도 16점이였고 변화가 없었다.. 직접 번들패키지를 눈으로 보고싶어서 webpack-bundle-analyzer 를 사용했다. cra에서 웹팩을 수정하는 방법도 있지만 수정하려면 웹팩을 꺼내기위해서 eject를 해야해서 패키지 통일성?이 깨..

프로젝트 기간이 끝났다. 하지만 이 프로젝트에 대한 문제점은 계속 개선해 나가야했다. 성능을 위해서 지금 생각나는 부분은 크게 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