글을 자주 적는 편은 아니지만 그래도 간간하게 글을 적고있긴 했다.그러다가 문득 나만의 블로그를 만들어보면 어떨까 싶긴했다.이런 나만의 블로그를 만드는 일들은 보통 처음 프론트엔드 개발자들이 일을 구하려고 할때에 많이 하는 방법인데 솔직히 블로그를 만드는 일보다 내용이

최근에 이직을 준비하면서 내가 했던 일들에 대하여 정리해보고 예상 질문도 스스로 해보고 하는 시간을 가졌었다. 결론부터 말하자면 이직에 성공 하였고 요즘 뜨고 있는 B2B 서비스를 하는 회사로 결정 하게 되었다.먼저 프로덕트가 마음에 들었고, 테크 면접, 동료 면접,

요즘 여러군데에서 react-query 를 많이 사용하고 있는듯 하다.나 또한 react-query 를 계속 사용해 왔고 react-native, NextJS 에서 많이 사용했었다.그러다가 문득 Next JS 에서 SSR 시에 react-query 가 어떻게 동작하는지

3편까지 쓸 생각은 없었지만 조금 보안해야겠다는 생각에 보안을 하고 3편을 작성하게 되었다.단순히 font-face 만 만들어주니 뭔가 기능이 부족하다 생각하였고 각 폰트의 font-weight, font-display 같은 font style 을 주려고 하다보니 고민

저번에 폰트 파일을 바탕으로 font-face CSS 파일을 만들어주는 간단한 node cli 를 개발하는 과정을 포스팅 했었는데 이제는 이를 npm 에 올리고, github actions 을 통해 자동 배포를 하는 방법을 포스팅 해보려고 한다.node cli 로 @f

오랜만에 글을 쓰게 되었는데 요즘 일이 너무 바빠서 개인 프로젝트 할 시간이 없었다 (핑계...)무튼 사실 개인프로젝트 뭐할지 생각도 안나고, 마땅히 끌리는게 없어서 안하게 되고 그러다보니 자연스럽게 글도 안쓰게 되는것 같았다.그러던 중 폰트 작업을 할 일이 생겼다.

개발을 하다 보면 지식을 얻는 창구가 아주 다양하다. 먼저 어떤 문제에 부딪혀서 검색을 해본다던가, 또는 특별한 어떤 도메인에 대하여 공부 하고 싶어 찾아보던가, 아니면 뉴스레터를 구독하던가...뭐 일단 나는 저 3가지를 다하고 있다. 그러고 그렇게 구글링해서 찾아내서

Next 에서는 routing 을 자체적으로 지원해주는데요.그렇기 때문에 react-router, react navigation을 굳이 사용하지 않아도 되고, pages/ 안에 파일을 만들면 그 파일 이름으로 path 를 생성해주기 때문에 쉽게 routing servi

snowflake 효과란 카카오톡에서 쉽게 만날 수 있는데요. 눈이 오는 날에 채팅방에 눈이 오는 효과 입니다.저의 포켓몬 도감에서는 메인페이지에서 포켓몬이 눈처럼 내려오는 효과가 되어있는데요.생각보다 구현이 어렵지 않습니다.components/Thumbnailes위에

서론에서 썻던것과 같이 페이지는 총 3개로 구성하였습니다.index.tsxdocs.tsxitem/id.tsx일단 Next js 에 나온것 과 같이 시작을 하였습니다.기본적으로 typescript, eslint, prettier 를 추가하였습니다.1.nextJS 에서 t

개인프로젝트를 진행하는것을 좋아하는데, 이유는 일단 내가 만들고 싶은것을 만들기 때문에 흥미가 생기고, 새로운것들을 많이 시도해 볼 수 있어서 좋아합니다.이번에는 Poke API 를 사용하여 간단한 포켓몬 도감을 만들어 보려고 합니다.일단 사용하려는 stack 은 AP

저번 포스팅에서 대략적인 github Actions 사용법을 적었었는데요. 이번에는 실제로 프로젝트를 github actions에서 빌드해보겠습니다.생각보다 간단해서 s3 에 업로드 하는법까지 적어보려고 합니다.이전 포스트 에서 작성하였던 .github/workflow

이번 포스팅에서는 간단하게 github Actions 를 사용해 보겠습니다.저번 포스팅에서 만든 코드 레포를 일단 github 에 올립니다.github에 올리는 방식은 아주 간단하고 설명도 잘 나와있기 때문에 생략하겠습니다.프로젝트생각보다 github Actions는

지난 포스팅에서 대략적인 프로젝트의 구조에 대하여 설명했었는데 그 첫번째로 Gihub Actions를 사용하여 s3 에 자동으로 업로드 되게끔 진행해보겠습니다.일단 react project를 구성합니다.저는 최소한의 dependencies 로 react 프로젝트를 구성

오랜만에 블로그를 써보려고 합니다.오랫동안 끌고 있는 개인프로젝트가 있는데, 여러가지 개인 사정으로 끝을 못내고 있습니다. (개인적인 이직, 결혼 등등의 사유...)관련 프로젝트에 대하여 포스팅한적이 있는데 AWS Lamgda 로 가벼운 API 만들기GraphQL 로

git commit 시 대소문자 구분이 안된다.예를 들어 a.png 가 있다고 가정하자. 이를 A.png 라고 바꾸어도 원격저장소에서는 a.png 로 그대로 저장된다. 대소문자 구분을 못하는 것이다. ㅠㅠ따라서 다음과 같은 절차가 필요하다.$ git mv --force

3/16 일에 새로운 회사인 RIDI에 입사하게 되었다.새로운 환경에 적응하는 일은 늘 어려운 일이다. 특히 나 같은 경우는 먼저 다가가서 친해지는 성격도 아니고 은근히 내성적이기 때문에 약간 새로운 환경을 두려워하기도 한다.무튼 그러나 회사는 회사기 때문에 최대한 빠

지난 포스팅에서 React 프로젝트에 Redux 를 적용해보았습니다.이번 포스팅에서는 Redux 에서 비동기 처리를 위해 많이 쓰이는 미들웨어 중 Thunk, Saga를 둘 다 적용해 보고 이를 비교해보도록 하겠습니다.이에 대하여 비교해놓은 글은 정말 많습니다.대쵸적으

React에서 가장 많이 사용 되는 Redux 에 대하여 조금은 바닥 부터 정리를 해봤습니다.물론 저의 글이 읽기가 진 않아서 개념 정리 보다는 코드로 풀어보도록 하겠습니다.먼저 개념 정리는 Velopert 님 께서 아주 잘 정리해주셔서 이를 참고 하도록 하겠습니다.요

지난 번에 AWS Lambda를 이용하여 간단한 API 만들기 포스팅을 했었는데 이를 바탕으로 GraphQL를 이용하여 각 API 불러서 서비스를 완성해 보겠습니다. > - AWS Lambda를 이용한 API 개발 원래는 GraphQL 프로젝트 자체를 AWS Lam