개발 연습 블로그

옛날부터 이 사이트 저 사이트 전전하면서 내가 옛날에 만들었던 마비노기 게임의 펫 ai를 배포해 왔었다. 하지만 이제 내가, 서버 데이터만 최소한으로 관리할 수만 있다면 이제 샛방살이 안하고 만들 수 있지 않을까? 구상 1. 기본적인 ai 다운로더 사이트로 제작 구성 - 기초적인 파일 목록 뷰, 다운 기능 제공 예상 사용 기술 - api 통신까지 갈 필요없이 사이트 내에 저장된 데이터로 해결 가능, 이러면 자기계발에 큰 의미가 없다고 판단 구상 2. 기본적인 ai 다운로더 및 ai 맞춤 사이트로 제작 구성 - 기초적인 파일 목록 뷰, 다운 기능 제공, 질답 형태를 통해 데이터 수집, 사용자가 원하는 ai 파일 추천 예상 사용 기술 - 마찬가지로 api 통신을 안해도 사용할 수 있지만, 구상 1보다는 좀 ..

선 요약 : 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{..

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

사용 기술 - 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..

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

사용 기술 - 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..

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

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

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

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