Isaac Kim Dev Blog

Next.js에서 img tag 안 쓰고 Image Component 쓰는 이유 Next.js는 정적인 자료들을 프로젝트 root의 public 디렉토리에 보관합니다. pages 디렉토리처럼 public 디렉토리 내부의 파일들은 Application에서 참조할 수 있습니다. 현재 public 폴더 아래 다음과 같이 구성이 되어 있습니다. profile.jpg 이미지는 아래와 같이 생긴 이미지 입니다. 이걸 페이지에서 보려면 HTML에서는 img tag를 사용하면 됩니다. 일반적인 HTML 처럼 img tag를 사용해서 이미지를 띄울 수 있습니다. 하지만 이 이미지 소스는 최적화되지 않은 상태로 이미지를 사용하게 됩니다. 요즘 웹에서는 화면 크기에 따라서 이미지 크기가 반응하도록 하고, 최적화되어야 하며,..

Next.js 페이지 연결, Routing 먼저 실습을 하기 위해 프로젝트 샘플을 생성합니다. Next.js 튜토리얼에서 샘플 프로젝트 생성 명령어를 입력하면, Next App 프로젝트 디렉터리가 생성됩니다. Next.js App 예제 생성하기 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" 생성된 프로젝트 디렉터리를 보면 pages라고 하는 폴더가 있습니다. Next.js에서는 pages 폴더의 하위 파일들에 대해서 file system routing을 할 수 있도록 구성되어 있습니다. 따라서 file 이름이 곧 pat..

요즘 추천 게임 테일즈위버, 버닝 이벤트로 레벨 업 쭉쭉! 만렙(310Lv) 이후엔? 혹시 요즘 할만한 게임, 추천 게임 찾고 계신가요? 개인적으로 제 추억이 많이 깃든 게임 중 하나인 테일즈위버를 추천해 봅니다. 그리고 마침 테일즈위버에서 버닝 이벤트로 레벨업을 빠르게 할 수 있고, 아이템도 지급을 해주고 있어서 키우기 딱 좋고, 곧 예프넨 진네만이라는 신 캐릭터도 플레이할 수 있게 되어서 테일즈위버하기 딱 좋은 시기일 것 같습니다. 빠르게 확인하고 싶은 분들은 테일즈위버 아래 공식 홈페이지로 바로 가보시는 것도 좋을 것 같습니다! 우선 이번 글은 단순히 테일즈위버를 소개하는 글이 아니기 때문에 자세하게 테일즈위버가 어떤 게임인지 소개하는 글을 작성하지는 않을 거예요. 테일즈위버에서 버닝 이벤트를 통해..

크라운 치료 및 30대 사랑니 발치 후기, 사랑니 발치 후 통증 지속 사랑니 발치 후 9일 차가 되는 날이다. 충치 때문에 치과에 가게 되었고 크라운 치료 및 크라운으로 씌우는 것으로 마무리하기로 했다. 원래 치과 간 목적은 충치 치료였는데 사랑니까지 뽑게 되었다. 한 두 달 전에 음식을 먹으면 왼쪽 상단 어금니 쪽으로 음식이 계속 끼었다. 혀로 어금니를 체크하면서 이에 구멍이 났다는 것을 확인했고, 치과 치료를 받기로 했다. 충치 치료를 위해 회사 근처의 치과에 방문했다. 치과에 가면 먼저 X-ray를 찍는다. 실사진도 찍는다. 전체적인 치아 검진을 해주시고 충치 치료를 진행한다. 전체적으로 검진하면서 치아 상태에 대해서 얘기를 해주셨는데 사랑니도 빼야 될 거 같다고 하셨다. 사랑니 빼야 한다는 얘기는..

주말에 줄어드는 블로그 방문자 수 어떻게 늘릴까? 이 블로그는 IT 테크 주제의 글을 주로 올리는 블로그입니다. 그러한 이유 때문인지 평일인 주중에 방문율이 주말에 비해서 2~3배는 많은 편입니다. IT 테크 관련 주제로 글을 올리면 관련 글을 찾는 사람들이 대부분은 개발자이거나 개발을 공부하는 학생들일 것 같은데요. 그렇다 보니 평일인 주중에 업무가 이루어지고, 학습이 집중적으로 이루어지는 시기에 맞추어서 주말보다는 평일, 주중에 블로그 방문율이 더 높습니다. 이러한 이유로 주말에는 항상 낮은 블로그 유입률, 방문자 수를 볼 수밖에 없었는데요. 블로그에 주말 방문자수를 어떻게 하면 늘릴 수 있을지 고민을 해보았습니다. 우선 제 블로그는 IT 테크 블로그이기 때문에 평일에 방문자 수가 많고, 주말과 휴일..

React App 개발 Library 설치 cheatsheet 리액트 앱 프로젝트 파일 생성하기(Creating React App Project Files) * 리액트 앱을 설치하기 위해서는 node.js가 필요하다. (Node.js is required to install the React app.) npx create-react-app project-name 리액트 부트스트랩 라이브러리 설치하기 (Install the React Bootstrap library) npm install react-bootstrap bootstrap 리액트 라우터 라이브러리 설치하기 (Install React Router library) npm install react-router-dom@5 yarn add react-r..

React로 쇼핑몰 만들기 (2) 이전 글 2023.07.11 - [JS/react] - React로 쇼핑몰 만들기 (1) React로 쇼핑몰 만들기 두 번째 시간입니다. 이전 글에 이어서 작성한 글이므로 이전 글을 확인하시고 보시는 것을 권해드립니다. 지난 글에서 쇼핑몰의 메인 페이지를 구성해 보았습니다. Header는 부트스트랩을 이용한 Navbar로 구성을 했고, 그 아래에는 메인 이미지가 보이는 박스를 구성했습니다. 그리고 그 밑으로는 상품들이 진열되어 있는 카드 섹션으로 구성을 해보았는데요. 지난 글에서 상품-카드 섹션에 대해서 작성하지 못했는데, 이번 글에서 상세히 보려고 합니다. 현재까지의 구성을 보면 다음과 같습니다. 컴포넌트와 라는 컴포넌트를 사용해 상품-카드 섹션을 구성했습니다. 컴포넌..

React로 쇼핑몰 만들기 (1) 공부했던 React를 복습 삼아 React 웹앱을 만들어 보려고 합니다. 전에 제가 작성했던 내용 정도만 알아도 충분히 만들 수 있는 정도의 작업만 해볼 것입니다. React App을 시작하려면 필요한 것이 node.js입니다. 설치되지 않았다면 node.js를 먼저 설치해 주세요. node.js 공식사이트 node.js와 npm이 설치가 끝났다면 다음은 React App 프로젝트를 생성합니다. 다음 명령어를 통해서 React App 프로젝트를 구성할 수 있습니다. npx create-react-app project-name 위 명령어를 입력하면 react app project 폴더가 생성됩니다. 해당 폴더로 들어가서 npm start로 실행하면 react 로고가 돌아가..

어렵지만 사이드 프로젝트 주제 정하기 현재에 만족하나? 그렇지 않다. 저성장 시대에 화폐 가치는 계속 낮아지고, 월급이 올라도 물가 상승률은 못 따라가는 현실, 불안정함 속에서 살아가는 것 같은 요즘이다. 이젠 월급이 올라도 물가 상승률에 못 미치는 월급은 줄은 것으로 봐야 하는 판국이다. 그렇다고 부정적인 생각과 부정적인 말만 하면 더 답이 없다. 더 나은 삶을 위해 가치 있는 '무엇'인가를 해야 한다는 생각이 들었다. 현 상황에서 더 나아지기 위해 현실을 지각하고 '무엇'인가를 해야 한다는 동기부여를 하려고 이렇게 글을 쓰고 있다. 매번 하는 생각이지만 실제로 실천을 못했다. 그래서 실천하기 위해 글로 박제를 하여서 진행하는 과정을 작성해보려고 한다. 여기서 말하는 '무엇'은 바로 사이드 프로젝트이다..

React Router 설정하기, Route 사용하기 웹 사이트 내에서 페이지 이동은 어떻게 할까요? 기본 html에서의 페이지 이동은 a 태그를 사용하여 페이지를 이동합니다. React에서는 Router라는 개념을 사용해 페이지를 이동할 수 있습니다. 실제로는 이동하는 것은 아니고 내부 페이지를 바꿔치우는 것이라고 볼 수 있습니다. React App에서 a 태그도 사용할 수는 있지만 React App에서 내부 페이지 이동과 같은 동작을 구현할 땐 Route를 설정하고 관련 기능들을 활용해 페이징 처리를 구현합니다. 먼저 React App Project에 Router를 설치하여 Router를 적용해 줍니다. react-router-dom 라이브러리 설치하기 명령어 yarn add react-router-..