태그 - 미분류

@kimyoungjo

1개월 전

4분 분량

스크롤을 항상 최하단으로 유지하는 방법

팀 프로젝트 진행 중 채팅 봇 개발을 위해 채팅창을 퍼블리싱 하고 있었는데 채팅이 많아져 스크롤이 생겼을 때 항상 최신의 채팅 내역을 보여주기 위해 채팅창의 최하단을 항상 보여주고 싶어서 이것저것 알아봤는데 내가 떠올리지 못했던 방향으로 해결 하게 되어 포스팅을 하게됐다. 만든 채팅창 모습 import React, { useState, useEffect, useRef } from …

@kimyoungjo

1개월 전

2분 분량

Spring Boot의 구조

백엔드에서 중요한 개념 중 하나인 DTO는 계층간 데이터를 전달하기 위해 사용되는 객체이다. 처음에 이 DTO에 대해 공부할 때 저 계층이라는 것이 프론트엔드 - 백엔드 - DB의 계층을 말하는 것인 줄 알았는데 아니었다. 정확히는 Spring Boot의 구성 요소인 프레젠테이션 계층, 비즈니스 계층, 퍼시스텀스 계층의 3계층을 의미하는 것이었고 그것에 대해서 좀 심도있게 …

@kimyoungjo

1개월 전

4분 분량

Spring Boot의 디렉터리 구조

몇 번의 프로젝트를 진행하면서 디렉터리 구조는 항상 후반부에 제 발목을 잡았습니다. 치밀하게 계획을 해서 프로젝트에 돌입해도 끝에는 코드가 뒤죽박죽 섞여 정리가 안되는 현상이 반복이 되어서 항상 고민이었는데 이번 프로젝트의 백엔드로 선정한 Spring Boot는 MVC 패턴이라는 정해진 구조 패턴이 있어 이번에는 이를 적극 활용하여 깔끔하게 프로젝트를 끝내는 것을 목표로 잡았습니다. MVC …

@kimyoungjo

1개월 전

0분 분량

8.14 개발 일지 [YOUR.LOL 제작기]

어제 정상적으로 데이터 안받아와진다는 유저 오늘은 또 잘 됨 ㅋㅋ 개발 일지 AddMatch 컴포넌트를 누를 시 매치 데이터를 추가적으로 받아와 상태 업데이트를 통해 매치 정보를 추가적으로 요청 할 수 있도록 구현 여러 함수에 기능적인 부분 설명 주석 작성 (앞으로 계속해서 추가해나갈 예정) 주절주절일단 오픈 api로 구현할 수 있는 모든 것은 …

@kimyoungjo

2개월 전

2분 분량

그냥 안됐고 이젠 그냥 됨 [YOUR.LOL 제작기]

받은 피해량과 가한 피해량 막대 그래프를 추가했다. 매치ID를 이용한 매치 정보 요청 API를 백엔드로 옮겼고 클라이언트는 react-query로 리펙토링 했다. 왜정말 잘 되다가 갑자기 안됐다. 중요한 것은 왜 안됐었는지 아직도 모르겠다는 것이었다. 지금 YOUR.LOL의 전적 검색 구조는 여러번의 API 요청을 통해 ZUSTAND 전역 상태를 업데이트를 해가며 일종의 트리거가 되는 상태들의 변화로 …

@kimyoungjo

2개월 전

2분 분량

08.12 개발 일지 + RIOT DATA DRAGON 사용법 [YOUR.LOL 제작기]

드디어 전적 검색 데이터를 다 정리해서 적용하고 그에 맞게 퍼블리싱을 수정했다. 앞으로 할 것 도넛 차트를 이용해보고 싶어 일단 저렇게 구현은 해놨는데 뭔가 휑하고 양질의 정보가 아닌 느낌이 든다. 개선 방향 고민해보기 +버튼 누를시 추가 전적 로드 로딩시 로딩중임을 명시할 수 있는 div 디자인 해보기 로그인 구현 (spring boot + …

@kimyoungjo

2개월 전

0분 분량

MATCH DATA 활용하기 [YOUR.LOL 제작기]

전적 검색의 핵심인 매치 정보를 요청하면 저런 형식의 데이터 객체가 10개가 온다. (5vs5 게임이므로) 좀 적어 보일 수 있는데 원래는 8만 글자가 넘는 데이터가 오는데 내가 필요한 것만 추려서 보기 좋게 세팅해뒀다. 이제 저 10개의 데이터 객체 중 내가 검색한 유저가 누구인지 가려내고 그 유저의 데이터를 중심으로 ui를 구성해나가면 될 …

@kimyoungjo

2개월 전

0분 분량

08.07 개발 일지 [YOUR.LOL 제작기]

전적 검색 페이지 ui를 개편했다. 로컬 상 이라서 그런 것인지는 모르겠지만 다수의 api를 순차적으로 요청하는데 렌더링 속도가 그렇게 늦다는 느낌은 받지 못해서 3-4개의 api를 추가적으로 요청하여 종합적으로는 체이닝은 5개정도 병렬 처리는 2-3개 정도 더 구성해 볼 예정이다. 주절주절솔직히 오늘은 집중이 좀 안돼서 리엑트 + typescript 관련 책을 하나 사서 읽었다. …

@kimyoungjo

2개월 전

3분 분량

의존성 체이닝(구현 편) [YOUR.LOL 제작기]

React-Query의 Query Key 의존성을 이용한 의존성 체이닝 const { data: account, error: accountError, isLoading: isAccountLoading, } = useQuery<RiotAccount, Error>({ queryKey: ["riotAccount", gameName, tagLine], queryFn: () => fetchRiotAccount(gameName, tagLine), //gameName, tagLine의 의존성 enabled: !!gameName && !!tagLine, }); // 1번 요청 const { data: accountDetail, error: accountDetailError, isLoading: isAccountDetailLoading, } = useQuery<RiotAccount, …

@kimyoungjo

2개월 전

3분 분량

비동기의 동기화 (계획편) [YOUR.LOL 제작기]

React는 사용자 인터페이스를 구축하는 라이브러리로서, 사용자 경험을 향상시키기 위해 비동기 작업을 필수적으로 처리해야 한다. 비동기 작업은 데이터 페칭, 사용자 입력 처리, 서버와의 통신 등 다양한 측면에서 핵심적인 역할을 한다. 근데 이런 비동기 작업에도 단점이 존재하는데 서로에게 의존성을 가지게 되면서 복잡성이 올라가고 그로 인해 상태 관리가 어려워져 그로 인해 발생하는 오류 …

@kimyoungjo

2개월 전

1분 분량

08.01 개발 일지 [YOUR.LOL 제작기]

메인 페이지 퍼블리싱 완료 전체를 담기 위해 배율 조정을 했다(50%) 실제로는 더 크다. 앞으로 추가 할 것은 서비스 로고 작업을 할 건데 그게 저 가운데 YOUR.LOL 부분을 대체 할 것이고 배경 사진도 lol에 맞는 동적인 이미지를 추가 할 계획이다. riot api 활용 계획전적 검색 페이지에 필요한 데이터와 그 순서를 정리해봤다. …

@kimyoungjo

2개월 전

3분 분량

구조 분해 할당과 React-Query [YOUR.LOL 제작기]

java, c ++ 같은 엄격한 언어들을 다루다가 javascript로 넘어왔을때 가장 이질적이었던 문법이 바로 구조 분해 할당이다. const array = [1, 2, 3]; const [a, b, c] = array; console.log(a, b, c); // 1 2 3 사실 이런식으로 할당하는 상상을 안해본 것도 아니고 논리적으로 이해가 안가는 것도 아닌데 막상 진짜 된다고 …

@kimyoungjo

2개월 전

1분 분량

RIOT ID를 가져오는 방법 [YOUR.LOL 제작기]

Riot IDRiot은 2023년 10월부터 게임 내 닉네임을 없애고 자사 게임 내에서 공통으로 사용하는 Riot ID를 채택했다. 형식은 gameName#tag 의 방식이며 오늘 하루를 허비하게 만든 장본인이다. 원래는 어땠는데 ?리더보드를 만들기 위해 상위 랭커들을 요청했다고 가정하면 현재는 이렇게 데이터가 도착한다. 원래는 저기에 summonerName이라는 필드가 있었고 그게 닉네임 이었어서 요청 1번에 데이터 전처리만 …

@kimyoungjo

2개월 전

0분 분량

07.29 개발 일지 [YOUR.LOL 제작기]

전체적 색상 푸른 계열로 변경 즐겨찾기 기능을 선수 순위, 팀 순위를 보여주는 div로 변경 json 서버를 제작하여 next 내장 라우팅으로 api 요청 구현 (다음 경기 일정 동적 생성) 주절주절 어제 업로드 하고 귀가 한 줄 알았는데 아니었어서 오늘이나마 업로드 했습니다.(오늘것도 따로 업로드 예정) 라이엇은 api를 따로 신청을 받아서 승인을 내주는데 …

@kimyoungjo

2개월 전

5분 분량

[7월 회고] 자기 객관화

선 요약 50여 곳 지원중 서류 2곳 합격 웹 개발 전반적으로 실력이 상향평준화 된 것을 체감하고 상용화 할 수 있는 수준의 프로젝트 경험이 필요함을 느낌 백엔드 개발자로의 전향 이번 프로젝트에 spring boot 까지 접목 시켜서 프론트, 백 가리지 않고 취업 준비 예정 1차 북벌카카오 map SDK를 이용한 프로젝트로 이번 취업 …

@kimyoungjo

2개월 전

3분 분량

종목 변경합니다. [YOUR.LOL제작기]

API 정리글 작성중이었던 것 캡처본만 봐도 화가 치밀어 오른다. 선 요약pubg api document가 너무 불친절하다. 어떤 점이 불친절하냐면 seasonId라는 파라미터를 요구를 api가 있는데 example이 없어 직접 다른 api에서 필요한 데이터를 찾아다가 넣어야한다. 그래서 모든 api를 순서대로 차근차근 따라가면서 제공 되는 데이터 유형을 파악하고 거기서 파악한 데이터들을 다음 순서의 api에 파라미터로 …

@kimyoungjo

2개월 전

1분 분량

07.23 개발 일지 [YOUR.PUBG 제작기]

디렉터리 구조next.js는 폴더 단위로 라우팅되는 파일 시스템 라우팅을 지원한다. 따라서 디렉터리 구조가 굉장히 중요해서 본격적으로 개발에 들어가기 전에 디렉터리 구조를 작성해봤다. 오늘 한 일 환경 세팅 메인 페이지 퍼블리싱 내일 할 일 전체 퍼블리싱 완료하기 소셜 로그인 구현하기 Jest 찍먹 일일 회고 진짜 상용화 할 수 있는 서비스를 만들자는 생각으로 …

@kimyoungjo

2개월 전

1분 분량

NEXT.js 프로젝트 계획서 [배틀그라운드 전적 검색 사이트 제작기]

구인 공고들을 보면 볼수록 Next.js에 대한 수요가 거진 80퍼센트 이상인 것으로 보여 현재 내가 가진 포트폴리오로는 기업의 우대사항을 만족 할 수 없을 것 같아 Next.js 프로젝트를 진행하기로 하였다. 주제배틀그라운드 전적 검색 및 패치노트 서비스 Tech Stack Next.js Express.js Tailwind css Redux Toolkit Mongo DB Docker EC2 Vercel(?) Tanstack Query 프로젝트 …

@kimyoungjo

2개월 전

7분 분량

프로젝트 회고 [지도 검색 서비스 제작기]

프로젝트 개요프로젝트 기간: 2024.05.22 ~ 2024.07.09 프로젝트 목표: 외부 라이브러리 사용해보기 개발부터 배포까지의 풀 스택 개발 경험해보기 사용자 경험 개선을 위한 성능 향상 고민 프로젝트 배경 및 목적내가 가장 많이 사용하는 서비스가 뭔지를 고민해봤습니다. 이번 프로젝트의 목표가 단순한 기능 구현이 아닌 사용자 경험 개선까지 고려하여 프로젝트의 완성도를 높이는 것에 있기 …

@kimyoungjo

3개월 전

2분 분량

[6월 회고] 이번엔 진짜 좀 다른데..?

목차 멘토링 지난 6월 남은 6월 다가올 7월 주절주절 멘토링지난 5월 중순 경에 프론트엔드 쪽으로 다시 방향을 잡고 멘토링을 받았었다. 그때는 진로에 대해 갈팡질팡 하고 있었을 때라 전체적으로 우울한 분위기로 멘토링이 진행됐었다. 당시 실시간 녹화 했던 영상을 보면 정말 왜 저렇게 주눅이 들어있나 싶을 정도로 무거웠었다. 그래서 진짜 마지막이라는 생각으로 …

@kimyoungjo

3개월 전

5분 분량

EC2, docker를 이용한 배포 후기 [지도 검색 서비스 제작기]

프로젝트 링크 지금 경로탐색 기능과 ssr로 구현한 로그인 화면이 나오지 않고 있습니다. 참고해주시길 바랍니다. 프로젝트 아키텍쳐 React는 Cloudfront에, express는 docker를 이용해 aws ec2에 배포했다. 정말 이 한 줄로 표현하는게 너무 아쉬울정도로 역대급 삽질을 경험했다. 그 삽질들 중 기억에 남는 삽질에 대해서 작성해보려한다. UBUNTU학부생때 우분투 라는게 뭔지도 모르면서 컴공 감성이라며 노트북에 …

@kimyoungjo

4개월 전

3분 분량

일단 완성은 했는데.. [지도 검색 서비스 제작기]

react, express 기반 풀스택 프로젝트 my-map의 경로탐색 기능을 사용한 모습 지난 글에서의 계획지난 글에서 앞으로의 계획을 마지막 문단에 기재했었는데 내 말을 얼마나 지켰는지 한 번 자체적으로 평가해봤다. 일단 이번 주 안으로 기능 구현을 마무리 지을 수 있을 것 같다.일단 기능 구현을 저번주 일요일까지 하기로 했었는데 그 잘 안됐어요 미안해요 그래도 …

@kimyoungjo

4개월 전

5분 분량

やあ久しぶり[기술 면접 풀어보기]

4년전에 React.js로 취업 준비를 할 때 인상 깊게 봤던 모의 인터뷰 영상이 있다. https://www.youtube.com/watch?v=gnkrDse9QKc&t=2s 이 영상인데 당시에 면접준비를 하겠답시고 여러 영상, 글들을 닥치는 대로 봤었는데 제일 인상적인 인터뷰의 형태였어서 아직도 기억을 하고 있다. 당시에는 저 면접 문제들에 대해 단 한 가지도 명쾌한 답을 내지 못했는데 다시 취업을 준비하는 지금의 나는 …

@kimyoungjo

4개월 전

3분 분량

[주간 회고] 올 해 안에 취업하기

토이 프로젝트에 대한 고민원래는 react.js 를 가볍게 복습하기 위해서 간단한 프로젝트로 진행하려 했는데 프로젝트를 진행하면 할 수록 재미있기도 하고 발전시킬 수 있는 요소들이 많아보여 백엔드까지 추가해 프로젝트 볼륨을 좀 늘려보려고 한다. 백엔드 스택을 결정하는데에 좀 고민이 됐는데 현재 내가 java spring 과정을 듣고있기에 spring을 선행학습 해서 적용할까 하다가 그러기엔 시간이 …