08.01 개발 일지 [YOUR.LOL 제작기]
1분
메인 페이지 퍼블리싱 완료 전체를 담기 위해 배율 조정을 했다(50%) 실제로는 더 크다. 앞으로 추가 할 것은 서비스 로고 작업을 할 건데 그게 저 가운데 YOUR.LOL 부분을 대체 할 것이고 배경 사진도 lol에 맞는 동적인 이미지를 추가 할 계획이다. riot api 활용 계획전적 검색 페이지에 필요한 데이터와 그 순서를 정리해봤다. …
#미분류
24 posts
구조 분해 할당과 React-Query [YOUR.LOL 제작기]
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 제작기]
1분
Riot IDRiot은 2023년 10월부터 게임 내 닉네임을 없애고 자사 게임 내에서 공통으로 사용하는 Riot ID를 채택했다. 형식은 gameName#tag 의 방식이며 오늘 하루를 허비하게 만든 장본인이다. 원래는 어땠는데 ?리더보드를 만들기 위해 상위 랭커들을 요청했다고 가정하면 현재는 이렇게 데이터가 도착한다. 원래는 저기에 summonerName이라는 필드가 있었고 그게 닉네임 이었어서 요청 1번에 데이터 전처리만 …
07.29 개발 일지 [YOUR.LOL 제작기]
0분
전체적 색상 푸른 계열로 변경 즐겨찾기 기능을 선수 순위, 팀 순위를 보여주는 div로 변경 json 서버를 제작하여 next 내장 라우팅으로 api 요청 구현 (다음 경기 일정 동적 생성) 주절주절 어제 업로드 하고 귀가 한 줄 알았는데 아니었어서 오늘이나마 업로드 했습니다.(오늘것도 따로 업로드 예정) 라이엇은 api를 따로 신청을 받아서 승인을 내주는데 …
[7월 회고] 자기 객관화
5분
선 요약 50여 곳 지원중 서류 2곳 합격 웹 개발 전반적으로 실력이 상향평준화 된 것을 체감하고 상용화 할 수 있는 수준의 프로젝트 경험이 필요함을 느낌 백엔드 개발자로의 전향 이번 프로젝트에 spring boot 까지 접목 시켜서 프론트, 백 가리지 않고 취업 준비 예정 1차 북벌카카오 map SDK를 이용한 프로젝트로 이번 취업 …
종목 변경합니다. [YOUR.LOL제작기]
3분
API 정리글 작성중이었던 것 캡처본만 봐도 화가 치밀어 오른다. 선 요약pubg api document가 너무 불친절하다. 어떤 점이 불친절하냐면 seasonId라는 파라미터를 요구를 api가 있는데 example이 없어 직접 다른 api에서 필요한 데이터를 찾아다가 넣어야한다. 그래서 모든 api를 순서대로 차근차근 따라가면서 제공 되는 데이터 유형을 파악하고 거기서 파악한 데이터들을 다음 순서의 api에 파라미터로 …
07.23 개발 일지 [YOUR.PUBG 제작기]
1분
디렉터리 구조next.js는 폴더 단위로 라우팅되는 파일 시스템 라우팅을 지원한다. 따라서 디렉터리 구조가 굉장히 중요해서 본격적으로 개발에 들어가기 전에 디렉터리 구조를 작성해봤다. 오늘 한 일 환경 세팅 메인 페이지 퍼블리싱 내일 할 일 전체 퍼블리싱 완료하기 소셜 로그인 구현하기 Jest 찍먹 일일 회고 진짜 상용화 할 수 있는 서비스를 만들자는 생각으로 …
NEXT.js 프로젝트 계획서 [배틀그라운드 전적 검색 사이트 제작기]
1분
구인 공고들을 보면 볼수록 Next.js에 대한 수요가 거진 80퍼센트 이상인 것으로 보여 현재 내가 가진 포트폴리오로는 기업의 우대사항을 만족 할 수 없을 것 같아 Next.js 프로젝트를 진행하기로 하였다. 주제배틀그라운드 전적 검색 및 패치노트 서비스 Tech Stack Next.js Express.js Tailwind css Redux Toolkit Mongo DB Docker EC2 Vercel(?) Tanstack Query 프로젝트 …
프로젝트 회고 [지도 검색 서비스 제작기]
7분
프로젝트 개요프로젝트 기간: 2024.05.22 ~ 2024.07.09 프로젝트 목표: 외부 라이브러리 사용해보기 개발부터 배포까지의 풀 스택 개발 경험해보기 사용자 경험 개선을 위한 성능 향상 고민 프로젝트 배경 및 목적내가 가장 많이 사용하는 서비스가 뭔지를 고민해봤습니다. 이번 프로젝트의 목표가 단순한 기능 구현이 아닌 사용자 경험 개선까지 고려하여 프로젝트의 완성도를 높이는 것에 있기 …
[6월 회고] 이번엔 진짜 좀 다른데..?
2분
목차 멘토링 지난 6월 남은 6월 다가올 7월 주절주절 멘토링지난 5월 중순 경에 프론트엔드 쪽으로 다시 방향을 잡고 멘토링을 받았었다. 그때는 진로에 대해 갈팡질팡 하고 있었을 때라 전체적으로 우울한 분위기로 멘토링이 진행됐었다. 당시 실시간 녹화 했던 영상을 보면 정말 왜 저렇게 주눅이 들어있나 싶을 정도로 무거웠었다. 그래서 진짜 마지막이라는 생각으로 …
EC2, docker를 이용한 배포 후기 [지도 검색 서비스 제작기]
5분
프로젝트 링크 지금 경로탐색 기능과 ssr로 구현한 로그인 화면이 나오지 않고 있습니다. 참고해주시길 바랍니다. 프로젝트 아키텍쳐 React는 Cloudfront에, express는 docker를 이용해 aws ec2에 배포했다. 정말 이 한 줄로 표현하는게 너무 아쉬울정도로 역대급 삽질을 경험했다. 그 삽질들 중 기억에 남는 삽질에 대해서 작성해보려한다. UBUNTU학부생때 우분투 라는게 뭔지도 모르면서 컴공 감성이라며 노트북에 …
일단 완성은 했는데.. [지도 검색 서비스 제작기]
3분
react, express 기반 풀스택 프로젝트 my-map의 경로탐색 기능을 사용한 모습 지난 글에서의 계획지난 글에서 앞으로의 계획을 마지막 문단에 기재했었는데 내 말을 얼마나 지켰는지 한 번 자체적으로 평가해봤다. 일단 이번 주 안으로 기능 구현을 마무리 지을 수 있을 것 같다.일단 기능 구현을 저번주 일요일까지 하기로 했었는데 그 잘 안됐어요 미안해요 그래도 …
![やあ久しぶり[기술 면접 풀어보기]](/resources/media/images/title/2024/5/21/kimyoungjo/12_JF7dJ8gk.webp)
やあ久しぶり[기술 면접 풀어보기]
5분
4년전에 React.js로 취업 준비를 할 때 인상 깊게 봤던 모의 인터뷰 영상이 있다. https://www.youtube.com/watch?v=gnkrDse9QKc&t=2s 이 영상인데 당시에 면접준비를 하겠답시고 여러 영상, 글들을 닥치는 대로 봤었는데 제일 인상적인 인터뷰의 형태였어서 아직도 기억을 하고 있다. 당시에는 저 면접 문제들에 대해 단 한 가지도 명쾌한 답을 내지 못했는데 다시 취업을 준비하는 지금의 나는 …
[주간 회고] 올 해 안에 취업하기
3분
토이 프로젝트에 대한 고민원래는 react.js 를 가볍게 복습하기 위해서 간단한 프로젝트로 진행하려 했는데 프로젝트를 진행하면 할 수록 재미있기도 하고 발전시킬 수 있는 요소들이 많아보여 백엔드까지 추가해 프로젝트 볼륨을 좀 늘려보려고 한다. 백엔드 스택을 결정하는데에 좀 고민이 됐는데 현재 내가 java spring 과정을 듣고있기에 spring을 선행학습 해서 적용할까 하다가 그러기엔 시간이 …
[주간 회고] 올 해 안에 취업하기
2분
토이 프로젝트React.js, Kakao map api를 이용한 토이프로젝트를 시작했다. 이번 토이프로젝트의 표면적인 목표는 React.js, 웹 퍼블리싱, api 활용 이었지만 더 큰 목표는 개발에 대한 흥미를 다시 살리는 것이었다. 결국 내 목표가 단순히 취업이 아닌 롱런하는 개발자가 되기 위해선 이 개발이라는 활동을 즐겨야 한다고 생각했다. 그래서 나는 이 프로젝트를 내가 정말 개발에 …
[React.js] 상속에 대한 고민
3분
백엔드 개발자가 목표지만 React에 대한 경험을 포기 하기엔 아쉽다는 조언을 들어서 React를 이용한 작은 토이 프로젝트를 진행하고 있다. state, 컴포넌트간 props 관리를 상기하기 위해 검색 시스템을 구축중인데 검색과 같은 동적으로 props를 전달해야하는 시스템에서 기존에 내가 사용했던 props 전달 방식으로는 검색을 할때마다 재랜더링을 해야하는 문제점이 생겨버려서 Java에서의 상속처럼 부모 자식 관계의 …
함께 자라기
16분
함께 자라기의 핵심은 현재 자라고 있는지에 대한 중요성입니다. 자기계발은 복리로 돌아온다는 점을 강조하며, 이율을 높이고 지속적인 투자를 고민해야 한다고 말합니다. 또한, 복리를 만들기 위해 자신이 이미 갖고 있는 것들을 잘 활용하고 외부 자극을 받아 자기화하는 것이 중요하다고 언급합니다. 달인이 되려면 의도적 수련과 적절한 피드백이 필요하며, 전문성 형성을 위해 타당성과 피드백의 중요성을 강조합니다. 실력을 높이기 위해서는 의도적 수련이 필수적이며, 적절한 난이도와 피드백을 유지해야 한다고 말합니다. 또한, 실패를 통해 학습하고 자신의 실력을 높여주는 도구와 환경을 조성해야 한다고 강조합니다. 마지막으로, 실수는 예방하는 것이 아니라 관리해야 한다고 말하며, 실수 문화에 대해 설명합니다.
구름IDE 후기 및 앞으로 할 일
1분
도저히 회사 사무실에서는 불가능 할껏 같음. 인트라넷을 쓰다보니 너무 불편함 동기 일일히 수많은 데이터 값을 입력해야하는 불편한 점이 있음 (DB에서) 고도화 사업 대비 불편한 점을 좀더 수정 해놓기로함 회사 내 코드를 좀 더 개발해보기로 결정 (불편한 점) 목표 엑셀 파일에 데이터 입력 후 업로드 시 DB자동 저장 순서대로 입력된 값을 …
혼자서 프로젝트 및 기술 블로그 만들기.
1분
다들 길게 쓰고 여러가지 캡쳐를하더라. 점점더 작아지는느낌? 현재 글쓴이는 개발회사에 취직을 한 상태 SI와 SM을 병합하여 한다. 신입이라 그런지 이것저것 의욕이 많아서. 회사 내 참조할 코드가 너무많아서. 개발을 3개정도 했다. (기능개선은 3개) 근데 서버가터졌다. 필자때문은 아닌거같은데 결과적으로는 총 6개중에 5개만 업로드하고 사유서를 써야했다. 의욕이 넘쳤던걸까. 인트라넷을 쓰는 회사다 보니 개발에 …
한 달 안에 취업하기 #17
1분
오늘 할 일 알고리즘 1문제 면접 문제 복기하기 알고리즘 1문제 Github 면접 문제 복기하기 자바스크립트의 자료형 Number String Boolean Undefined Null Function Object Array 자료형을 두 종류로 나누기 원시타입 : Number, String, Boolean, Undefined, Null 참조타입 : Object, Function, Array 자바스크립트 this의 4가지 활용법 일반 함수 실행 방식 (this 값 …
한 달 안에 취업하기 #16
1분
오늘 할 일 알고리즘 1문제 웹 관련 개념 잡기 알고리즘 1문제 Github 웹 관련 개념 잡기 자바스크립트의 이벤트 위임 요소들 각각에 이벤트를 부여하는 것이 아닌 하나의 이벤트 리스너로 전체영역에 등록하는 것. document.addEventListener('DOMContentLoaded', function() { let app=document.getElementById('todo-app'); // 리스트 아이템의 전체 영역에 이벤트 리스너를 등록합니다. app.addEventListener('click', function(e) { if …
한 달 안에 취업하기 #15
2분
오늘 할 일 알고리즘 1문제 vingle 문제 풀기 프론트엔드 면접질문 달아보기 글 복습 javascript 개념공부 알고리즘 1문제 Github Vingle 문제 풀기 Vingle 사전 평가 문제 그림1에서 test.txt 가 있을 때 log 를 작성해주세요. 132 그림1에서 test.txt 가 없을 때 log 를 작성해주세요. 13 다음과 같이 Callback이 중첩된 코드를 어떻게 하면 …
한 달 안에 취업하기 #14
1분
오늘 할 일 알고리즘 1문제 알고리즘 1문제 Github 중요 공지 오늘 지원했던 회사 중 한 곳에서 면접제의가 왔다. 그쪽에서 말씀하시길 1-2시간이 걸리는 기술면접이 될것이라고 엄포를 놓은지라 발등에 불이 떨어졌다. 면접일은 목요일이고 그 날까지 하루 1알고리즘을 제외하고는 모두 이론만을 다뤄야 할 것 같다. 그 이론은 과거에 했던 면접질문 답변 달아보기가 될 …
한 달 안에 취업하기 #13
2분
오늘 할 일 알고리즘 1문제 토이 프로젝트 시작 프로그래밍 관련 유튜브 영상 리뷰해보기 알고리즘 1문제 오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/42586 Github 토이 프로젝트 시작 기한을 좀 2.14까지로 잡았는데 아무래도 새로운 개념인 React Hooks와 Redux를 배워가면서 동시에 프로젝트에 접목시켜야 하기 때문에, 기한을 넉넉하게 잡았다.(부족할지도 모른다.) 이번에는 우리 스터디의 특성에 맞춰서 모바일 환경을 …