코딩연습장

오늘은 백엔드의 서버배포를 기다리면서 소셜로그인을 대충 보았다. 보고도 아직 이해를 못해서 직접해봐야할것같다 ㅋㅋㅋ 서버 배포가 저녁에 완료되어서 저녁에서야 작업을 시작했고 대략 6시간밖에 못한것 같다. 그래도 mvp로잡은 api는 거의다 완료해서 디자인시안이 도착하면 해당사항을 적용하고, apif를 다 마무리하면 검색기능을 시작하든, 유효성검사를 좀 더 마무리하든 해야겠다

일단 우리조는 리더가 사전에 신청하지 않은, 시작때 리더가 없던 조였다. 리더가 사전에 신청한 조는 어느정도 리더가 자신이 생각하는 프로젝트를 구성해서 오기 때문에 시작이 빠르지만, 우리는 사전에 정해진 것이 아무것도 없었기때문에 프로젝트 주제를 정하는 것 부터 시간이 걸렸다. 인원수는 프론트3명, 백엔드3명으로, 어느정도 큰 틀을 정하고 백엔드는 데이터구조를 정하고, 프론트는 와이어프레임을 어림잡아 정했다. 디자이너님이 디자인 시안을 주기 전에 일단 타입스크립트를 공부했다. 어려울것이라고 분명히 생각했지만, 그래도 타입스크립트는 실무에서 기본으로 깔린다는 말이 많아서 사용하기로했다. 주말간 타입스크립트를 공부하고, 월요일이 되었다. 디자인이 오지않아서 일단 뼈대작업을 시작했다. 하루종일 뼈대만 그렸다...

오늘 새롭게 추가될 api와 기능들에대해 안내받았다. 지금까지 어느정도 기초적인 api를 만들었으니 월~화에 바뀌는 api를 기준으로 또 바꿔야할 것 같다. 디자인이 너무 늦게온다. 3주안에 완성해야하는데 1주가 넘은 지금 1페이지 밖에 안왔다. 목디스크가 생긴것 같다. 툭하면 목, 두통이 심하게와서 고통스럽다.

무한스크롤 어제 적었던 오류를 수정했다. 문제는 어제 생각했던 것이 아니었다. target이 mount시점에 값이 들어가다보니, 시작하자마자 pageno가 1에서 2가되고, 따라서 요청을 두번 하게된다. 그런데 dispatch가 비동기 처리이므로, pageno가 1이었을 때 요청이 완료되기전에 pageno가 2일때의 요청도 시작되어, 데이터가 정상적으로 들어오지 못한 것이다. 따라서 target에 넣는 ref값을 삼항연산자를 사용해서 적당한 때 값이 들어가서 mount시점이아닌, 스크롤이 바닥을 칠 때 작동되도록 하였다. 오늘 api를 여러개 연결했다. 내일은 수정관련해서 만들어 볼 생각이다.

오늘은 뼈대 작업을 완료했다! 아직 로그인, 회원가입 유효성검사가 완성되지않았다. 메인페이지에서 get하는 것은 잘 되었지만, 인피니트스크롤이 정상적으로 작동하지않아서 내일 백엔드 분과 이야기해볼 예정이다. 오늘 작업한 것들 중 2개를 남겨보려고한다. 시간이되면 다 남기고 싶은데 워낙 모르는게 많아 다 남기려면 하루종일 걸려서 마지막 쯤 했던 것들로 남긴다. 먼저 페이지 이동시 스크롤이 맨 위로 가게 하는 코드이다. import { useLocation } from 'react-router-dom'; import { useEffect } from 'react'; const Page = () => { //페이지 이동 시 스크롤바 상단으로 이동 const { pathname } = useLocation();..

아직 뼈대 작업중이다 ㅋㅋㅋ 내일 한 페이지 남은거 완료하고 디자이너님이 디자인 몇페이지 주신댔으니 그걸로 view작업 더 하면 될 것 같다. 내일도 아마 하루종일 css작업 할 것같고, 시간이 나온다면 api작업도 해보고싶다. 메인페이지에서 camps를 get하는 요청이 되지 않았다. 404에러가 떴는데 이건 내일 한번 확인해봐야할 것 같다. 피곤해 죽겠다. 중간중간 쉬더라도 확실히 늦게까지 하다보면 집중력이 떨어질때가 오는데 난 그게 새벽2시이다. 딱 3시까지만 집중력이 유지됐으면 좋겠는데.... 내일 몬스터음료도 사놓고 한번 달려봐야겠다. 너무너무 힘든데, 또 너무너무 재밌다. 오늘 useNavigate의 다른 능력도 알게되었다. 평소에는 그저 이동하는 툴로 사용했는데, 원하는 데이터도 이동하는 페..

오늘 팀 프로젝트 인원 중 한명이 나갔다. 그것도 리액트가 나갔다. 세명이서 해야할 스코프라 사실 이번주안에 제일 적게잡은 api조차 완성하지 못할 가능성이 크다. 나갈수있는 확률이 있으면 진작좀 말해주지 스코프는 스코프대로 다 늘려놓고... 책임감이 없는 사람이다. "그깟 팀플젝 별거있나?" 라고 생각할 수도 있지만, 적어도 나에게는 정말 중요한 프로젝트이다. 이걸 일단 성공적으로 마무리해야 내 포트폴리오에 하나가 추가되는것인데, 그 사람은 단지 변심때문에 팀프로젝트를 책임감없이 떠났다. 민폐다. 그래도 나는 주어진 스코프를 완성해야한다. 지금 주어진 api를 완성하려는데는 아마 조금 걸릴 것 같다. 일단 view에 관한 디자인도 디자이너분께서 주지않았고, 타입스크립트를 공부하느라 아직 익숙치도 않은데..

타입스크립트를 조금 공부하고 실전프로젝트 view 뼈대 만들기를 시작했다. 디자인이 도착하려면 조금 걸릴것 같아 일단 어느정도 뼈대만 만들어놓고, 디자인이 도착하면 css를 수정하는 방향으로 하려고한다. 타입스크립트를 맛보기만 공부하고 view를 만드려다보니 너무 어렵다. 아직 redux, toolkit 서버와 통신도 하지않았고, view도 완성하지 못했는데 벌써부터 이러면 어쩔까 싶다. 나중에는 검색기능도 굉장히 복잡해질텐데... 그땐 진짜 개고생할것 같다. 열심히해봐야지 뭐 별 수 있겠나 끝

브라우저마다 기본적인 default style이 적용되어있기 때문에 사용자들에게 동일한 화면을 보여주기위해서는 default style을 제거해주어야 한다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbod..

https://styled-components.com/docs/api#typescript //src/styled.d.ts // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components' { export interface DefaultTheme { textColor: string; bgColor: string; btnColor: string; } } theme에 들어갈 속성들의 타입을 지정해주고 export해준다. //src/theme.ts import { DefaultTheme } from 'styled-components'; export const l..