08.01 개발 일지 [YOUR.LOL 제작기]2024. 08. 01.1분메인 페이지 퍼블리싱 완료 전체를 담기 위해 배율 조정을 했다(50%) 실제로는 더 크다. 앞으로 추가 할 것은 서비스 로고 작업을 할 건데 그게 저 가운데 YOUR.LOL 부분을 대체 할 것이고 배경 사진도 lol에 맞는 동적인 이미지를 추가 할 계획이다. riot api 활용 계획전적 검색 페이지에 필요한 데이터와 그 순서를 정리해봤다. …
구조 분해 할당과 React-Query [YOUR.LOL 제작기]2024. 07. 31.3분java, c ++ 같은 엄격한 언어들을 다루다가 javascript로 넘어왔을때 가장 이질적이었던 문법이 바로 구조 분해 할당이다. const array = [1, 2, 3]; const [a, b, c] = array; console.log(a, b, c); // 1 2 3 사실 이런식으로 할당하는 상상을 안해본 것도 아니고 논리적으로 이해가 안가는 것도 아닌데 막상 진짜 된다고 …
RIOT ID를 가져오는 방법 [YOUR.LOL 제작기]2024. 07. 30.1분Riot IDRiot은 2023년 10월부터 게임 내 닉네임을 없애고 자사 게임 내에서 공통으로 사용하는 Riot ID를 채택했다. 형식은 gameName#tag 의 방식이며 오늘 하루를 허비하게 만든 장본인이다. 원래는 어땠는데 ?리더보드를 만들기 위해 상위 랭커들을 요청했다고 가정하면 현재는 이렇게 데이터가 도착한다. 원래는 저기에 summonerName이라는 필드가 있었고 그게 닉네임 이었어서 요청 1번에 데이터 전처리만 …
07.29 개발 일지 [YOUR.LOL 제작기]2024. 07. 30.0분전체적 색상 푸른 계열로 변경 즐겨찾기 기능을 선수 순위, 팀 순위를 보여주는 div로 변경 json 서버를 제작하여 next 내장 라우팅으로 api 요청 구현 (다음 경기 일정 동적 생성) 주절주절 어제 업로드 하고 귀가 한 줄 알았는데 아니었어서 오늘이나마 업로드 했습니다.(오늘것도 따로 업로드 예정) 라이엇은 api를 따로 신청을 받아서 승인을 내주는데 …
[7월 회고] 자기 객관화 2024. 07. 27.5분선 요약 50여 곳 지원중 서류 2곳 합격 웹 개발 전반적으로 실력이 상향평준화 된 것을 체감하고 상용화 할 수 있는 수준의 프로젝트 경험이 필요함을 느낌 백엔드 개발자로의 전향 이번 프로젝트에 spring boot 까지 접목 시켜서 프론트, 백 가리지 않고 취업 준비 예정 1차 북벌카카오 map SDK를 이용한 프로젝트로 이번 취업 …
종목 변경합니다. [YOUR.LOL제작기]2024. 07. 26.3분API 정리글 작성중이었던 것 캡처본만 봐도 화가 치밀어 오른다. 선 요약pubg api document가 너무 불친절하다. 어떤 점이 불친절하냐면 seasonId라는 파라미터를 요구를 api가 있는데 example이 없어 직접 다른 api에서 필요한 데이터를 찾아다가 넣어야한다. 그래서 모든 api를 순서대로 차근차근 따라가면서 제공 되는 데이터 유형을 파악하고 거기서 파악한 데이터들을 다음 순서의 api에 파라미터로 …
07.25 개발 일지 [YOUR.PUBG 제작기]2024. 07. 25.7분NextAuth로 로그인 구현하기여러 로그인 방식을 지원해주는 NextAuth를 이용하여 카카오, 페이스북 소셜로그인과 일반 로그인을 구현해보았다. NextAuth가 지원하는 로그인 방식을 Provider 라고 한다. 카카오 로그인 방식은 KakaoProvider 이런식으로 작명돼 있고 일반 로그인은 Credential Provider라는 이름으로 기능이 제공되고 있다. CredentialsProvider({ name: "Credentials", credentials: { // 이 부분이 로그인 폼에 들어갈 내용. username: { …
07.24 개발 일지 [YOUR.PUBG 제작기]2024. 07. 24.2분Githubhttps://github.com/yoyoyoun18/your-pubg 오늘 한 일 전체 퍼블리싱 완료하기 (o) 소셜 로그인 구현하기 (x) Jest 찍먹 (x) 내일 할 일 소셜 로그인 구현하기 Jest 찍먹 PUBG api 실습 일일 회고 커밋을 자주 해주려고 노력하는데 코딩을 하다보면 까맣게 잊어버리고 한꺼번에 커밋하는 경우가 많았다. 오늘도 그런 실수를 범하고 한꺼번에 커밋을 했는데 문득 내가 git …
07.23 개발 일지 [YOUR.PUBG 제작기]2024. 07. 23.1분디렉터리 구조next.js는 폴더 단위로 라우팅되는 파일 시스템 라우팅을 지원한다. 따라서 디렉터리 구조가 굉장히 중요해서 본격적으로 개발에 들어가기 전에 디렉터리 구조를 작성해봤다. 오늘 한 일 환경 세팅 메인 페이지 퍼블리싱 내일 할 일 전체 퍼블리싱 완료하기 소셜 로그인 구현하기 Jest 찍먹 일일 회고 진짜 상용화 할 수 있는 서비스를 만들자는 생각으로 …
NEXT.js 프로젝트 계획서 [배틀그라운드 전적 검색 사이트 제작기]2024. 07. 22.1분구인 공고들을 보면 볼수록 Next.js에 대한 수요가 거진 80퍼센트 이상인 것으로 보여 현재 내가 가진 포트폴리오로는 기업의 우대사항을 만족 할 수 없을 것 같아 Next.js 프로젝트를 진행하기로 하였다. 주제배틀그라운드 전적 검색 및 패치노트 서비스 Tech Stack Next.js Express.js Tailwind css Redux Toolkit Mongo DB Docker EC2 Vercel(?) Tanstack Query 프로젝트 …
프로젝트 회고 [지도 검색 서비스 제작기]2024. 07. 17.7분프로젝트 개요프로젝트 기간: 2024.05.22 ~ 2024.07.09 프로젝트 목표: 외부 라이브러리 사용해보기 개발부터 배포까지의 풀 스택 개발 경험해보기 사용자 경험 개선을 위한 성능 향상 고민 프로젝트 배경 및 목적내가 가장 많이 사용하는 서비스가 뭔지를 고민해봤습니다. 이번 프로젝트의 목표가 단순한 기능 구현이 아닌 사용자 경험 개선까지 고려하여 프로젝트의 완성도를 높이는 것에 있기 …
2024 3회 정보처리기사 필기 합격 후기2024. 07. 08.3분선 요약2020년 졸 4년제 전공자 2020-2022 cbt 기출 1바퀴정도 돌리고 80점으로 합격했습니다. 수험표 없어도됨. 수험번호 몰라도 됨. 사진 6개월 이내 아니어도 됨. 시험용 연습장 나눠줌. 공부 방법cbt를 위주로 보는데 문제를 푸는게 아니라 정답보기를 눌러놓고 문제와 해설을 보면서 공부했습니다. 오래되긴 했지만 그래도 전공자라 눈에 익었던 단어가 많아 이런 과정으로 시작하는게 가능했던 …
리액트 18 서스펜스 (Suspense)2024. 07. 06.2분React Suspense는 비동기 작업 완료까지 컴포넌트 렌더링을 잠시 멈추고, 로딩 상태를 보여줍니다. Suspense 컴포넌트는 fallback 속성을 사용해 대기 UI를 정의하며, React.lazy로 동적 로딩을 지원합니다. API fetch와 메모리 캐싱 기법을 통해 비동기 데이터 관리를 효율화합니다.
[6월 회고] 이번엔 진짜 좀 다른데..?2024. 06. 28.2분목차 멘토링 지난 6월 남은 6월 다가올 7월 주절주절 멘토링지난 5월 중순 경에 프론트엔드 쪽으로 다시 방향을 잡고 멘토링을 받았었다. 그때는 진로에 대해 갈팡질팡 하고 있었을 때라 전체적으로 우울한 분위기로 멘토링이 진행됐었다. 당시 실시간 녹화 했던 영상을 보면 정말 왜 저렇게 주눅이 들어있나 싶을 정도로 무거웠었다. 그래서 진짜 마지막이라는 생각으로 …
EC2, docker를 이용한 배포 후기 [지도 검색 서비스 제작기]2024. 06. 25.5분프로젝트 링크 지금 경로탐색 기능과 ssr로 구현한 로그인 화면이 나오지 않고 있습니다. 참고해주시길 바랍니다. 프로젝트 아키텍쳐 React는 Cloudfront에, express는 docker를 이용해 aws ec2에 배포했다. 정말 이 한 줄로 표현하는게 너무 아쉬울정도로 역대급 삽질을 경험했다. 그 삽질들 중 기억에 남는 삽질에 대해서 작성해보려한다. UBUNTU학부생때 우분투 라는게 뭔지도 모르면서 컴공 감성이라며 노트북에 …
프로젝트 아키텍쳐 [지도 검색 서비스 제작기]2024. 06. 24.0분프로젝트의 끝으로 향하고 있는 지금 readme와 포트폴리오에 들어갈 아키텍쳐를 시각화해봤다. 사용 툴: canva 남은 할 일 도메인 설정 후 최종 배포하기 Jest, super test로 react, express 코드 테스팅 해보기
OOP를 곁들인 Data Quality Check2024. 06. 23.7분0. To-DoData Warehouse에 Data를 적재하기 전후로 필요한 Data가 잘 적재되어 있는지, 적재한 데이터가 잘 적재되었는지를 검증할 필요가 생겼다. [사진 1]로 예를 들면 DW Table 9를 적재하기 전에는 DL Table 1, DL Table 2 데이터가 누락되지 않았는지 확인해야 한다. DW Table 9를 적재한 후에는 잘 적재되었는지 확인해야 한다. [사진 1] DW에 …
좀 더 길게 보기로 했다2024. 06. 18.2분프로젝트 데드 라인을 이제부터 6월 19일이 아닌 6월 23일까지라고 불러다오 ! 프로젝트 데드라인포트폴리오로 제출할 지도 검색 서비스의 기능 구현은 완료됐다. 이제 계획했던 테스트를 기반으로 최적화 작업을 하고 그 과정만 기록하면 완성될 것으로 예상했는데 docker를 도입하려는 중에 ec2와 ci/cd 에 대한 개념까지 학습하게 되어 볼륨이 더 늘어났다. 사실 어떻게든 19일까지 마무리 …
db optimization 경험해보기 [지도 검색 서비스 제작기]2024. 06. 17.3분프로젝트 DB 최적화 과정 기술이번 프로젝트에서 DB 성능 개선을 가장 우선시한 이유는 시스템 전체적인 성능 향상과 사용자 경험 개선을 목표로 하고 있는데 DB가 사용자 경험에 있어 가장 큰 성능적 체감을 제공한다고 생각하기 때문이다. 이번 프로젝트는 MongoDB를 사용 중이며, 성능 개선의 대상은 사용자의 가입일에 따라 동적으로 댓글 작성 권한을 부여하는 기능이다. …
일단 완성은 했는데.. [지도 검색 서비스 제작기]2024. 06. 12.3분react, express 기반 풀스택 프로젝트 my-map의 경로탐색 기능을 사용한 모습 지난 글에서의 계획지난 글에서 앞으로의 계획을 마지막 문단에 기재했었는데 내 말을 얼마나 지켰는지 한 번 자체적으로 평가해봤다. 일단 이번 주 안으로 기능 구현을 마무리 지을 수 있을 것 같다.일단 기능 구현을 저번주 일요일까지 하기로 했었는데 그 잘 안됐어요 미안해요 그래도 …
그래서 2주 동안 뭐함 ? [지도 검색 서비스 제작기]2024. 06. 04.3분GPT가 고장난 김에 지난 2주간 무엇을 했는가에 대해 성과보고회를 열고자 한다. 5월 20일 들어가 있는 개발관련 오픈카톡에서 면접관을 하셨다는 분께서 신입 지원자들의 git을 보면 commit 메시지 관리도 되지않은게 90% 이상이다 라는 말을 들었다. 정말 부끄럽게도 나도 그 말을 듣고 commit 메시지에도 규칙이 있다는 것을 알았다. 그리고 이번 프로젝트에 바로 적용해야겠다 …
[주간 회고] 이거 왜 됨 ?2024. 05. 29.3분왜 되지 ?https://www.youtube.com/shorts/0FjOhEJwmB8 얼마전 등원길에 이런 쇼츠를 봤다. 심적으로는 공감이 갔는데 경험해본적은 없어서 그냥 웃고 넘어갔던 기억이 있다. 근데 이 일이 오늘의 나에게 일어났다. 밑바닥부터 하나하나 개발해나가고 있다 보니 내 의도와는 다르게 동작하는 버그성 동작들이 많아서 그것들과 사투를 벌이고 있었다. 그 버그들 중에 지도 검색 시 이전 검색 결과에 대한 …
SWR vs React Query [지도 검색 서비스 제작기]2024. 05. 24.4분이번에 풀스택으로 개발 해 볼 서비스로 이전에 react만을 이용해 만들어봤던 지도검색 사이트를 강화해보고자 한다. 기술 스택을 어떻게 정하고 갈지 기획하는 단계인데 지도 검색 서비스 특성상 많은 데이터를 다뤄야 하는 만큼 데이터 관련 라이브러리에 대한 고민을 이어가다 SWR, React Query 두 가지로 후보군을 좁혔다. 둘 다 프로토타입을 만들어 볼 예정이긴 하지만 …
