분류 전체보기 117

토이 프로젝트 - A - JAE GAG 트러블 슈팅 - api 타입 문제

선 요약 : GPT랑 구글을 믿고 이용하는 건 좋은데 이것만 믿으면 큰일난다. 며칠동안 다양한 방법으로 혈압을 올리는 과정을 겪은 후, 타입 관련 문제를 해결했다. 우선 타입을 개별 스크립트로 분리 및 관리한다. . . . export interface GagAnswer { id: number; answer: string; } export interface GagBoxBackColor{ solved : boolean; } export interface GagDetailContent{ title:string; content:string; gagId:string; nextGagId:number | null; prevGagId:number | null; } export interface PostGagType{..

개발공부 2023.09.07

토이 프로젝트 - A - JAE GAG 페이지 구성 - 마이 페이지

사용 기술 - react-query, styled-components, react, type-script, react-js-pagination 깃허브 페이지 - https://github.com/Nidurolak/asd/blob/master/src/pages/MyGag.tsx 이 페이지는 개그리스트 페이지와 구조적으로 완전히 똑같다. 다만 차이점은 GagListComp 컴포넌트에서 현재 페이지가 프로필 페이지인 것을 확인하고 삭제 버튼을 우상단에 노출시키는 것 뿐이다. 더 적고 싶어도 정말 구조적으로 완전히 똑같아서 더 적을 것이 없어보인다... 요 한동안 계속 머리를 썩히게 하는 api 관련 타입 문제를 계속해서 주시하고 있다. 이 방법 저 방법을 시도해보지만 코드가 너무 너저분해지거나, 커스텀 타입을..

개발공부 2023.08.31

토이 프로젝트 - A - JAE GAG 페이지 구성 - 개그 풀어보기 페이지

사용 기술 - react-query, styled-components, react, type-script 깃허브 페이지 - https://github.com/Nidurolak/asd/blob/master/src/pages/GagDetail.tsx 이 페이지는 시간 제한에 따라 문제를 맞추는지 못 맞추는지를 결정하는 퀴즈 페이지이다. 여기서 문제를 맞추느냐 시간초과가 되느냐에 따라 정답률에 영향을 끼친다.(회원일 때만) const [gagData, setGagData] = useState() const { isLoading } = useQuery(["getList", { Id: pam.id }], () => getGagDetailPage({ Id: detailId }), { onSuccess: ({ dat..

개발공부 2023.08.31

토이 프로젝트 - A - JAE GAG 페이지 구성 - 개그 리스트 페이지

사용 기술 - react-query, styled-components, react, type-script, react-js-pagination 깃허브 페이지 - https://github.com/Nidurolak/asd/blob/master/src/pages/GagList.tsx 이 페이지 역시 골자는 메인 페이지와 비슷하다. 다른 페이지, 개그를 풀어보는 페이지로의 이동을 관리하는 페이지이지만 여기서는 비/로그인 상태를 체크하는 추가적인 코드가 활용되었다. 마켓컬리같은 홈쇼핑 페이지를 보면 비로그인 상태일 때의 장바구니와 로그인 상태일 때의 장바구니가 서로 다른 경우가 있다. 이런 경우는 대게 비로그인 상태일 때에는 로컬 스토리지에 따로 저장한 리스트를 활용하는 것인데, 이것을 따라한 것이다. cons..

개발공부 2023.08.30

토이 프로젝트 - A - JAE GAG 페이지 구성 - 메인 페이지, 헤더

사용 기술 - react-query, styled-components, react, type-script 깃허브 페이지 - https://github.com/Nidurolak/asd/blob/master/src/pages/Main.tsx 이 페이지에서는 기본적인 방식으로만 제작되어 크게 리뷰할 부분이 있지는 않다. 역할은 다른 페이지로의 이동을 관리하는 것으로 끝이며, 스크립트 구조는 위 링크를 따라가면 볼 수 있다. 이 페이지 자체는 유니크한 역할이 부여되지 않고 간단한 네비게이트와 api 연결 하나만 제공되어 있다. const [contentlist, setContentlist] = useState([]) const { isLoading } = useQuery(["getMain",], getMainG..

개발공부 2023.08.27

토이 프로젝트 - A - JAE GAG 1차 완성

특이사항 - 정신 차려보니 끝났다.... 코로나로 정신이 반쯤 나간 상태에서, 내가 권유해서 합류해준 벡 친구한테 미안해서라도 억지로 하루 한 스크립트라도 짜내고 엎어지는 짓을 일주일 즈음 하고나서야 끝났다. 간단할 줄 알았던 프로젝트는 건강 이슈로 한 쪽이 삐걱거리니 급도로 상황이 악화되었고(전적으로 내 책임이다) 그로 인해 결국 구상했던 신고 기능은 제외한 채로 완성하게 되었다. 완성했다고 끝이 아니라, 반응형 웹 추가, 리팩토링, 코드 리뷰, 타입 스크립트 정리, 깃허브 리드미 작성 등 할 것이 많다. 벌써 확인된 버그도 3개가 넘는다. 작업 내용 우선 버셀로 배포한 기본 사이트부터 https://asd-kappa-flax.vercel.app/ React App asd-kappa-flax.verce..

개발공부 2023.08.24

토이 프로젝트 - A-JAE GAG 6일차

특이사항 - 일정 변경 불가피 입으로 뭘 말해본지 오래된 것 같다. 10일로 생각한 프로젝트가 불가능해질 듯 싶다...... 작업 내용 체력이 있을 때 미리 짜두었던 프레임을 새로 받아온 api에 맞춰 수정 및 적용하였다. 버셀 배포에도 적용시켰으며, 이번에 기술할만한 특이점은 (비)회원에 맞춰 틀을 짜는 것이다. 비회원의 경우 열람목록을 로컬 스토리지에 적용시키고, 회원일 경우에는 api에서 보내준 데이터를 대조하는 것이다. 코드 원리는 다 만들고 리뷰 겸 분석을 진행할 것이다.

카테고리 없음 2023.08.17

토이 프로젝트 - A-JAE GAG 5일차

특이사항 - 쉬어가는 구간 토이 프로젝트에 쉬어가는 것이 어딨냐 싶지만, 두 번째인 코로나로 뻗어서 강제로 쉬어가야했다. 작업 내용 저번에 말했던 페이지 구성 작업을 시작했다. 페이지네이션 하다가 라이브러리 업데이트 꼬여서 깃 풀 하고, 컴포넌트 구조 좀 더 자세하게 짜고, 더 하고 싶어도 목이 부어서 말도 못하는 몸이 크게 버텨주질 못하고 있다. 하..... 개그 리스트 데이터 관리 구조 api에서 전체 리스트 받아옴 받아온 데이터 페이지네이션 관련 데이터 개그 리스트 관련 데이터 페이지네이션 데이터 개그 리스트 관련 데이터 페이지네이션 정보를 통한 api 재호출 받아온 개그 리스트로 개그 풀어보기 링크 컴포넌트 생성

개발공부 2023.08.15

토이 프로젝트 - A-JAE GAG 4일차

특이사항 - 혹 떼려다가 혹 붙이는게 아닐까? 타입스크립트를 사용하는데, 특히 api 통신 부분에서 너무 많은 any 타입을 쓰는 것 같아 걱정이었다. 그래서 이 참에 interface를 적용해보려고 했지만 난관에 부딪혔다. 1. 넘겨주고 받는 데이터 타입의 크기가 정해지지 않았을 때 예외 처리 하다보면 결국 any로 귀결된다. 2. 1과 연계되어, 같은 타입 구조를 쓰기 위해선 별도의 타입 유형을 모아둔 파일을 만들어야한다. 2의 해답을 도출하기까지 1의 과정을 몇 번이고 반복했다. 미안하다 챗 gpt야...네가 보기엔 같은 질문인데 다르다고 한 시간을 우겨대서..... 작업 내용 몸살이 크게 낫지 않았다. 갈수록 목이 아프기보단 붓는데, 이거 코로나 아닌가 싶다. 그래서 오늘도 살살하는 의미로 개그 ..

개발공부 2023.08.12

토이 프로젝트 - A-JAE GAG 2~3일차

특이사항 타입스크립트 사용 - interface 활용 자바스크립트로 작업할 때에는 쉽게 설정되던 부분에서 많은 에러를 겪었다. 에러를 겪는 순간순간에는 그걸 해결하는데 집중했지만, 지금 정리하면서 보니 interface를 활용하여 해결한 경우가 많다. 객체의 구조와 타입을 정의하는 개념으로, 주로 많이 쓰인(문제를 겪은) 부분은 axios에서 payload를 관리하는 부분이었다. 하도 많은 interface가 생겨서 일단 payload의 타입을 any로 임시 뗌빵을 하거나하는 식으로 간략화 시켰다. 이건 별로 좋지 못한 것이, any를 남발할거면 그냥 자바스크립트를 쓰지 뭐하러 쓰는건가...... 다음으로 쓰인 부분은 의외로, 스타일드 컴포넌트였다. props로 버튼 크기를 임의로 조절하는 기능을 만들었..

개발공부 2023.08.12