package-lock.json 파일을 오랫동안 봐왔지만 정확히 왜 만들어지고 어떻게 사용되는지에 대해서 잘 모르고 있기에 이번 기회에 제대로 공부하려한다.

SWR의 컨셉과 Next JS와 같이 사용했을 때 어떤 이점이 있는지에 대해 다루도록 하겠습니다.

프로젝트를하며 처음으로 롱프레스 이벤트 기능을 구현하게 되었습니다. 기능 구현하며 느겼던 생각과 구현 방법을 정리한 글입니다.

최근 진행된 프로젝트에서 WYSIWYG 에디터를 사용하면서 커스텀해본 경험을 정리한 글입니다. 혹시 TinyMCE를 사용하고 있거나 어떤 WYSIWYG 에디터를 사용할지 고민 중인 분들에게 도움이 됬으면 합니다.

이번 프로젝트에서는 이미지 미리보기 기능을 필수로 구현하게 되었다. 해당 기능을 구현하기 위해 여러가지 이미지 미리보기 기능을 구현할 수 있는 방법을 찾아보게 되었고 찾아보며 생각한 것들을 정리하게 되었다.

GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼입니다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하는 워크플로를 생성하거나 병합된 풀 요청을 프로덕션에 배포할 수 있습니다.GitHub Actions는 단순한 D

1. GraphQL이란? > GraphQL은 API용 쿼리 언어이자 기존 데이터로 이러한 쿼리를 수행하기 위한 런타임입니다. GraphQL은 API의 데이터에 대한 완전하고 이해하기 쉬운 설명을 제공하고, 클라이언트가 필요한 것을 정확하게 요청할 수 있는 기능을 제공하

Next.js + Typescript + Emotion에 다크 모드 구현하기

새로운 프로젝트기 시작되었습니다~

이번에 실습 위주의 스터디를 열심히 참여를 해봤다. 주요 기술 스택은 Next.js와 Typescript, useSWR, styled-component였다. 이전에 Next js를 사용해 본적이 있지만 왜 사용해야

배경 프론트엔드스쿨 동료와 네이버 채용 사이트를 클론 코딩을 하던 도중 처음 보는 상황을 맞닦드렸고 국내에 이에대한 글이 없는 듯하여 정리하고 넘어가려고 한다. 네이버 채용 사이트처럼 상단 내비게이션 바와 슬라이드를 겹치게 놓고싶었...

변수 선언 우리는 변수를 선할 때 var, let, const 키워드를 사용한다. ES6에서 let, const가 도입되기 전에는 var가 오랬동안 유일하게 변수 선을 위해 사용되어 왔다. 하지만 ES6이후에 대부분의 코드에서 var를 사용하지 않고 있다. 오늘은 왜

https://www.acmicpc.net/problem/9095정수 4를 1, 2, 3의 합으로 나타내는 방법은 총 7가지가 있다. 합을 나타낼 때는 수를 1개 이상 사용해야 한다.1+1+1+11+1+21+2+12+1+12+21+33+1정수 n이 주어졌을 때

미디어 쿼리 우선 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일을 적용되도록 만들어주는 기능이다. 가장 자주 사용하는 이유는 사용자의 스크린의 크기에 맞춰서 그에 최적화된 화면을 보여주기위해서 사용한다.

이전에 프로젝트할 때는 애니메이션을 크게 쓸일이 없었다. 단순히 카드이미지 위에 호버하면 크기가 약간 커지는 정도가 다였기 때문에 애니메이션에 대해서 이렇게 자세히 알아본건 이번이 처음이였다.단순히 transition, transform과 hover만 이용해도 css를

오늘은 우테코의 임동준 코치님의 워크샵을 진행했다. 주제는 워킹백워즈 방법으로 역량 순서대로 작성하는 포트폴리오였다. 워킹백워즈란 말을 처음 들어봐서 검색해 보았더니 작업을 역순으로 진행하느 것이라고 한다. 이 방법을 통해 오늘 포트폴리오를 만드는 것이 아니라 앞으로

오늘 프론트엔드 스쿨 첫 수업이 있었다. 이두희님의 특강에서 좋은 코딩 공부팁들을 공유해주셨다. 그중에 가장 와닿았고 꼭 실천하고싶은 팁이 하나있었다.스택오버플로우에서 살아라 \- 영어로 코드를 공부하는데에 익숙해져라. 현재 IT강국은 미국인만큼 영어로된 양질의 자료

Modal(이하 모달)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법 중에 하나다. 이번 프로젝트에서는 사용자가 어떤 행동을 하였을 때 이 행동을 정말로 진행할 것인지 확인 하는 용도로 사용을 하기도 하였고, 로그인이 필요한 기능을 수행하려 할 때...

1. 갑자기 책을 읽는 이유 난 책을 좋아하지 않는다. 소설보다는 영화를, 설명서보다는 언박싱 브이로그를 보는 걸 더 좋아한다. 그래서 프로그래밍 공부를 할 때도 책보다는 인터넷 강의를 보면서 공부했다.

 이전에 우리는 Webpack을 사용해서 CRA를 사용하지 않고 리액트 프로젝트를 만들었다. 이번에는 해당 프로젝트에 Typescript를 사용할 수 있게 설정을 진행할 것이다. 이번에도 마찬가지로 원본 블로그의 흐름을 그대로 따라간다.