김재욱의 이모저모

클론코딩을 진행하다가 갑자기 해보고 싶은 일이 생겨서 하게 된 일이 있었다. npm에 나의 라이브러리를 배포해 보고 싶었다. 물론 지금 배포해 본 라이브러리는 아무도 안 쓸 수도 있고, 별로 쓸모없는 라이브러리일 수 있지만, 나중에 내가 어떤 컴포넌트를 굉장히 확장성 있게 잘 만들었다고 생각이 들 때 손쉽게 배포할 수 있게 미리 연습해 보기 위해서 진행해 봤다. 개발환경 구축하기 내가 원하는 라이브러리명으로 새 폴더를 만들고, 그 폴더에서 작업한다. (이건 필수사항은 아니지만 나는 이때 내가 만든 repository를 클론 해서 받아왔다~) npm init을 터미널에 입력해 초기 세팅을 한다. 이때 package.json 파일이 만들어지는데 한 문장을 추가해야 한다. { ..., "type":"modul..

넷플릭스를 내가 만들어야 한다고 생각하면 떠오르는 건 수많은 미디어들의 섬네일, 제목 등이 담긴 컴포넌트들이 가장 먼저 떠올랐다. 영상에 관한 정보들은 서버에 저장이 되어있을 것이고 나는 그러면 이 정보들을 서버에서 꺼내와서 활용해야 한다. 이를 지원하는 React Hooks로 useSWR이라는 swr전략 내의 함수가 존재한다. 아래는 swr에 대한 공식 문서이다. https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWR SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate..

예를 들어 어떤 버튼을 클릭할 때마다 노란색, 파란색으로 배경이 변해야 하는 경우가 있다고 하자. 그러면 나는 이때까지는 JS의 도움을 통해서 혹은 react에서 관리하는 state를 css-in-js 코드로 넘겨주어 css에서 해당 state 따라 배경색이 지정되도록 코드를 작성했다 ( 사실 주로 후자의 경우를 선호했다. ) 이번에 처음으로 Tailwind CSS를 활용하면서 좋은 기능을 알 수 있었다. 배경색과 같은 CSS코드 즉 디자인 코드를 동적으로 조절하기 쉬운 방법이 있다는 것을 알 수 있었다! 아래와 같은 코드를 통해 위 상단바의 디자인 코드를 작성할 수 있었다. const TOP_OFFSET = 66; const Navbar = () => { const [backgroundvisible, ..

로그인 기능이 들어가는 auth 페이지와 profile 페이지의 완성도를 올리고 있다. 요 며칠 공부하면서 가장 많이 집중해서 보는 부분은 group/item 이였다. tailwind CSS에는 참 신기한 기능이 많은 거 같다. 그것과 별개로 오늘은 내가 코딩하면서 나에게 어려움을 줬었던 백틱과 작은따옴표에 대하여 다루려고 한다. JavaScript에서 작은 따옴표(')와 백틱(`)의 차이?! 작은따옴표(') : 작은 다옴표로 둘러싼 문자열은 일반적으로 문자열 내에 큰 따옴표를 포함할 수 있다. const singleQuotedString = 'This is a "single" quoted string'; 이렇게 하면 문자열 안에 큰 따옴표가 포함된 문자열을 만들 수 있다. 이 외의 다른 특수기호들도 물..

오늘은 NextAuth를 활용하여 google, github 인증 로그인을 구현해 보았다. 사실 한 번도 해보지 않아 굉장히 어려울 거라 생각했는데 NextAuth에서 쓰기 굉장히 쉽게 구현해 두었고, 공식문서 따라서 필요한 기능들을 사용하면 됐다. https://next-auth.js.org/providers/google Google | NextAuth.js Documentation next-auth.js.org https://next-auth.js.org/providers/github GitLab | NextAuth.js GitLab returns a field on Account called created_at which is a number. See their docs. Remember to ad..

넷플릭스 페이지를 비슷하게 만들어서 기능을 하게 하려면 당연히도 DB가 필요하다. 그래서 서버를 구축하기 위해서 Prisma와 mongoDB 를 사용하게 되었다. 물론 백엔드 부분은 지식이 전무했기에 그냥 유튜브에 설명 잘 되어있는 영상이 있어서 열심히 따라서 작성하였다 \(^~^)/. 내가 고른 건 아니지만 prisma와 mongoDB 를 사용하는 이유가 궁금해서 이유를 찾아봤다. Next.js에서 MongoDB와 Prisma를 사용하는 이유 mongoDB는 NoSQL 데이터베이스로 실시간 데이터를 다루기에 좋다. Next.js와 Prisma를 함께 사용하면 빠른 개발이 가능하다. Prisam를 통해 데이터베이스와의 상호작용을 추상화하고, 코드를 생성할 수 있다. Prisma와 mongoDB를 사용하면..

클론코딩을 진행하다 보니 useCallback() 함수를 사용해야 하는 경우가 많았다. 그래서 'useCallback() 함수는 무슨 역할을 하는지, 왜 써야 하는지'에 대하여 자세히 공부해 보아야겠다는 생각이 들었다. useCallback() 함수란? useCallback() 함수는 React에서 사용자 정의 함수를 기억하는데 사용된다. 이 함수의 주요 목적은 통상적으로 말하면 성능 최적화와 렌더링 최적화를 달성하는 것이라고 한다. 이게 무슨 말이냐고 하면 일반적으로는 React 컴포넌트 내에서 함수를 정의하면 해당 함수들은 매 렌더링 주기마다 새로운 함수 객체가 생성된다. 이로 인해 React는 다시 렌더링 될 때마다 함수를 새로운 것으로 간주하고 해당 함수를 참조하는 컴포넌트 및 하위 컴포넌트가 다..

넷플릭스 클론코딩의 첫 단계로 로그인 페이지를 구현하였다. 이번 클론코딩을 처음으로 진행하면서 알 수 있었던 사실은 HTML에도 많은 기능이 있고, 그걸 모르면서 코딩을 한 나는 정말 아무것도 모르고 코드를 쓰고 있었음을 알 수 있었다... ㅠ_ㅠ 내가 이번에 클론코딩을 진행하면서 새롭게 알고, 배운 사실들을 여기에 기록하면서 한 단계씩 진행해볼까 한다. useState 를 통한 상태관리 로그인 화면 회원가입 화면 위의 두 화면은 하단의 흰색 글씨를 누르면 서로의 화면으로 바뀌어야 했다. 물론 서로 다른 화면으로 분리해서 만든 후 링크를 걸어도 됐지만 디자인도 같은데 굳이 넘어다니는데 사용자가 더 긴 시간을 허비하게 할 필요가 없다고 생각하였다. (만약 보안상의 다른 문제나 따로 고려해야 할 것이 있다면..

이번 학기 혼자 공부를 하며 해볼 수 있는 프로젝트가 무엇이 있을까 고민하다가 클론코딩을 처음 해보기로 했다! 클론코딩 하기로 정한 사이트는 제목에 있듯 Netflix이다. 이유는 그냥 유명하고... 학교 선배가 예시로 든 사이트도 넷플이었고... 내가 진행하다가 막혔을 때 참고할 가이드도 찾아보기 쉬울 것 같기 때문이었다. 사용하기로 정한 기술은 Next.js + React + Tailwind css를 사용하기로 했다. 사실 난 이때까지 css-in-js 형식의 emtion/styled 방식만 사용해봤었다. 이번에 tailwind css 를 사용하기로 한 이유는 두 가지가 있다! 1. SSR이 부상하면서 css-in-js 방식은 css 직렬화로 인해 런타임 오버해드 부정적인 영향을 미치기 때문에 tai..

개인 프로젝트를 진행하다가 컴포넌트 겹침 문제로 링크 클릭이 되지 않아 애를 먹은 기억이 있다. 나는 해당 컴포넌트를 클릭하면 링크를 타고 다른 페이지가 열리도록 코드를 작성했는데 배경으로 만든 컴포넌트가 위에 있다고 인식되어 원하는 컴포넌트가 아닌 배경 컴포넌트가 클릭되는 현상이 생겼었다. 아래 사진이 문제 해결 전 마우스 커서가 배경 컴포넌트 위에 있다고 인식될 때의 화면이다. 아래 사진은 문제 해결 후 마우스 커서가 해당 이미지 컴포넌트 위에 있다고 인식될 때의 화면이다. 이러한 문제를 해결하기 위해서 z-index 라는 개념을 찾아서 활용하였다. 사실 이때까지는 배경에 컴포넌트를 둘 일이 없어서 고민해보지 않은 문제였는데, 많은 컴포넌트를 담고 있는 화면을 만들어야 할 일이 생긴다면 꼭 z-ind..