원티드 프리온보딩 강의에서 오픈소스(react-query와 redux)를 뜯어보며 옵저버 패턴을 깨달았다는 얘기를 하길래 나도 직접 한번 뜯어보기로 했다.React-query는 오픈소스 라이브러리로 누구나 구현된 소스코드를 볼 수 있다.Tanstack에서는 여러 라이브

두 달만에 회고글을 작성하게 되었다.10월에는 작성할 시간이 그렇게 많지 않아서 11월에 한번에 쓰겠다는 다짐과 함께 돌아왔다.10월에는 추석연휴가 끝나자마자 일본으로 여행을 가서 빠르게 지나갔던 것 같다. 여행을 다녀와서는 9월에 진행해왔던 Battle Crush 이

모달은 프론트 개발에 뺴놓을 수 없는 UI 컴포넌트이다. 디자인이 나오면 모달로 다양한 요소들이 배치되어서 나오게 된다. 모달을 구현하는 것 보다는 모달을 어떻게 하면 효율적으로 관리할 수 있는지에 대한 방법을 적어보려고 한다.모달은 react-modal 라이브러리를

시작하면서 컨퍼런스를 여러개 들어왔었지만 직접 오프라인으로 들었던 컨퍼런스는 이번이 처음이였다. 회사를 다니면서 평일에 시간을 내서 다니는 것이 쉽지 않았고, 대부분 온라인으로 다시 제공해주기에 직접 참여하기보다 온라인을 더 선호했던 것 같다. 물론 인프콘은 직접 참여

바쁘디 바쁜 9월이 지나갔다. 지난번 회고에서 분명 9월에는 널널할거라고 예상했지만 나의 예상은 빗나갔다 ㅎㅎㅎ먼저 회사 업무를 얘기해보자면 신작 게임의 CBT가 진행되어 CBT를 위한 페이지 제작을 작업하는데 시간을 가장 많이 쓰게 되었다. 해당 페이지를 제작하면서

기존에 SPA 방식에서는 route설정을 별도로 라이브러리(react-router, vue-router) 설치를 통해 설정이 필요했다. Next.js에서 라우터 설정을 하는 방식을 정리해보려고 한다. Pages and Layouts , ,,로 부터 export된 리액

필터(filter)는 사용자가 쉽게 데이터를 고를수 있게 도와주낟. 필터를 react-query를 활용하여 구현한 예시를 소개해보려고 한다.내가 생각하는 필터 UI의 중요한 점은 새로고침 시에도 그 필터가 유지되어야 한다고 생각한다.예를 들어 '가격','카테고리','물

어제 next.js 가 13.5버전이 정식 릴리즈되었다.이번에는 커더란 업데이트는 없었고 성능 개선과 버그 픽스 위주로 향상된 것 같다.(여전히 page router가 많은 모습)22% 더 빠른 로컬 서버 시작29% 더 빠른 Hot Module Replacement(H

이번에는 Next.js에서 설명하는 Data Fetching을 주제로 작성해보려 한다. Data fetching에 따라 Next.js는 서로 다른 랜더링을 제공한다. getStaticProps 함수를 페이지에서 사용하면 이 페이지는 Static Site Gener

업로드중..Next.js로 프로젝트를 해보았지만 다시 한번 공식문서를 확인해보면서 정리해보려고 한다.이 글은 Next.js의 공식문서를 100% 참고하고 만들었습니다.Next.js는 모든 페이지들을 Pre-render하고 각각의 HTML에 좋은 성능을 가져오고 SEO최

참고자료: SSR의 기쁨과 슬픔: 렌더링의 변화의 흐름을 통해 알아보는 SSR과 Streaming SSR 1. Rendering의 변천사 Static Web Site 웹 서버에서 정적인 HTML 파일을 중심을 제공 URL 을 통해 해당 디렉토리에 있는 파일을 내려주

타입스크립트는 왜 그럴까?인프콘 신청했지만 탈락으로 인해.. 온라인으로 공유된 세션을 정리해보려고 한다.타입스크립트는 집합으로 모든걸 이해할 수 있다.슈퍼 타입과 서브타입으로 둘의 관계를 나타낼 수 있고, 타입스크립트의 전체적인 계층은 다음과 같다.상위로 갈수록 슈퍼타

vue로 구성된 프로젝트를 진행하던 도중에 router.push 로 라우터 이동 도중에 계속 에러가 났었다. 그 에러는 inserBefore 에러... 원인을 찾고 싶었는데 sourcemap 도 vue core 자체에서 나고 디버깅이 어려워 결국 시도해본 방법은

7월달 회고를 쓴지 일주일도 안된것 같은데 벌써 8월이 다 지나갔다.저번에 마지막에 원티드 8월 챌린지를 끝으로 얘기하고 마무리했는데 첫주차에 강의에 실망해서 뒤는 괜찮겠지 하고 들었지만, 뒤의 강의도 그닥... 유익하지는 않았다. (지난 회고)최적화에 대한 내용을 진

깃허브에 AWS 시크릿 키와 시크릿 ACCESS 키를 등록해줘야 한다.git에서 Settings에 들어가면 저장소 키를 등록할 수 있다.우리는 여기에 등록이 필요하다.ACCESS_KEY와 SECRET_ACCESS_KEY 는 IAM 사용자의 키이다.IAM > 사용자에 들

CodeDeploy Agent 를 설정해야 자동배포를 사용할 수 있다.AWS 문서에 자세히 나타나있는데 명령어 그대로 사용하면 설치가 끝난다.먼저 EC2 instance 에 접속한다.다음 명령어를 차례대로 실행한다.그 후 ubuntu 폴더에 접근한다.bucket-nam

가장 먼저 IAM에서 배포를 위해 사용자를 생성해야 한다.AWS에서 배포를 하기 위해 권한을 추가해야 하는데 이를 위해 사용자를 생성해야 한다.(나는 이미 배포를 했기 때문에 아래처럼 미리 사용자가 생성되어 있다.)'사용자 생성' 버튼을 통해 원하는 이름과 사용자를 만

썸네일 IE가 없어지더니 Safari가 문제다 🤬🤬🤬🤬 비동기로직을 통해 클립보드에 복사할 상황이 생겨 개발하던 도중 겪은 이슈이다. 비동기 객체를 복사하기 단순히 텍스트를 복사할 때는 Clipboard api를 사용하면 브라우저에 관계없이 쉽게 복사가 가

최근에 나의 메일로 구독한 FE Article에서 2023년 SVG-in-JS와 결별 라는 제목으로 메일이 와 한번 살펴보게 되었다. 살펴본 결과 유익한 내용이라 성능적으로 사내 프로젝트에 개선해보고자 적용해보았다. 나만의 아티클 정리 JS 번들에서 SVG를 제거하

7월달은 진짜 너무 바쁘게 지나갔다. 회사일도 회사일이지만 사이드 프로젝트 브릭로그 를 출시하는 일정도 끼어있어서 정신없는 한달이였다.일단 7월에 회사의 일정이 정말 많았다. 크게 2개의 프로젝트를 진행했다. 하나는 기존 서비스를 완전히 새롭게 개편하는 팀 프로젝트와