🤍 은지log 🤍

개인적으로는 GitHub , 사이드프로젝트 에서는 Gitea, 회사에서는 GitLab을 사용중이다. ...🫠 🍊 GitLab 이란 개인 또는 조직이 Git 레포지토리의 내부 관리를 제공하는 데 사용할 수 있는 Github로, 비공개된 Github 이다. 🍊 GitLab 사용이유 깃랩은 중앙 서버에서 git 저장소를 관리하는 방법이다. 레포지토리 또는 프로젝트를 완벽하게 제어할수 있으며, 공개 또는 비공개 여부를 무료로 결정할 수 있다. 🍓 GitLab (Clone,Checkout, Commit, Push ) 🍓 1. 소스 코드 Clone 하기 with HTTPS 소스코드가 들어있는 레포지토리에서 Clone -> Clone with HTTPS -> 복사한다. $ git clone https://gitlab..

🍓 프로젝트 세팅 필요한 디펜던시를 설치합니다. npm i -D babel-plugin-styled-component 🍓 .babelrc 먼저 바벨 파일을 수정합니다. 아래 파일은 next.js의 ssr과 연관이 있는데, ssr에 의해 styled-components 스타일이 적용 전에 화면 렌더링이 되는 문제를 방지하기 위함입니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true } ] ] } NextJS에서 Styled-components 사용하기 npm i styled-components n..

🍓 프로젝트 세팅 next 프로젝트를 설치하고 이후 필요한 디펜던시를 설치합니다. npx create-next-app my-app cd my-app npm i @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles nextjs는 서버사이드랜더링을 하기 때문에 react에서 mui를 사용하는 것 처럼 손쉽게 반영 되지 않습니다. 그래서 몇가지 사전작업을 해야합니다. 🍓 _document.tsx _document는 서버사이드에 관여하는 로직 또는 static한 로직을 추가하는데 사용합니다. (_document가 하는 일을 잘 모르겠다면 nextjs 기본 (opens new window)이 포스팅을 참조해주세요.) ssr 지원을..

Next.js의 getStaticProps와 getStaticPaths api를 사용하면 static 페이지를 생성할 수 있다. getStaticProps: 빌드 시 데이터를 fetch하여 static 페이지를 생성 getStaticPaths: pages/**/[id].tsx 형태의 동적 라우팅 페이지 중, 빌드 시에 static하게 생성할 페이지를 정함 🔆 getStaticProps .tsx에서 export async function getStaticProps(context) 형태로 사용. context.params로 동적 라우팅의 경로 이름을 가져온다. pages/posts/[id].tsx 페이지를 /posts/123으로 접근했다면 context.params는 { id: "123" }이 된다. { p..

Warning: Expected server HTML to contain a matching in . 이 에러는 서버사이드 렌더링 시의 html과 클라이언트 사이드 렌더링 시의 html이 일치하지 않아서 발생하는 에러로 추측된다. 그래서 실제로 브라우저의 쿠키를 삭제하면 해당 에러가 발생하지 않는다는 것을 확인할 수 있었다. 해결방안 브라우저 쿠키 삭제 브라우저의 쿠키를 삭제해서 html을 아예 새롭게 렌더링하면 해당 에러가 발생하지 않습니다. 브라우저가 기억하고 있는 html이 없기 때문입니다. 다만 계속 테스트를 하면서 작업을 할 때는 브라우저의 쿠키를 계속 삭제한다는 게 번거롭기 때문에 다음과 같이 코드를 추가해 해당 문제를 해결했습니다. useEffect를 사용해서 렌더링 후 상태 업데이트 use..

라이브러리를 사용하지 않고 { useState, useCallback, useEffect, useRef } 를 사용해서 직접 구현해보기로 하였다 ! 🐥 사용하기만 해봤지 직접 구현하는데에는 너무 어렵고 이해도 잘 안되었지만 정보도 많았고, 도움도 받아가며 이것 저것 새로 시도해보는 재미도있었다 -💙 🔆 구현 코드 import { useState, useCallback, useEffect, useRef } from "react"; import styled from "styled-components"; import { getPostList, postType } from "datas/postList"; const List = (): JSX.Element => { const [page, setPage] = us..

반응형 웹이 웹 레이아웃을 만드는 기준이 되면서 반응형 레이아웃을 표시하기 위한 디바이스를 구분하는 여러가지 방법들이 사용되고 있습니다. 대표적으로 CSS 미디어쿼리를 사용하는 방법이 있고, 자바스크립트를 사용하기도 합니다. 어떤 것을 사용하더라도 반응형 레이아웃을 디바이스에 따라 구분하는 기준은 가로 너비입니다. 가로 너비 값에 따라 디바이스를 인식하고, 레이아웃을 거기에 맞춰 변경하는 것이 CSS 반응형 레이아웃의 기본 개념입니다. 가로 너비를 기준으로 하는 것은 반응형 레이아웃에서 공통이지만, 디바이스 종류별 너비 값 기준은 제각각입니다. 별도로 정해진 표준이라는 것이 없기 때문에 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값을 정하기도 합니다. 영어로는 나누..

라이브러리를 사용하지 않고 { useState 와 useEffect } 를 사용해서 직접 구현해보기로 하였다 ! 🐥 그전에는 react-bootstrap으로만 해봤던터라,, 조금 걱정했는데 역시나 어려웠지만 정보도 많았고, 이것 저것 새로 시도해보는 재미도있었다 -💙 🔆 구현 코드 import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { SLIDE_DATA } from "datas/slide"; const Banner = () => { const [currentSlide, setCurrentSlide] = useState(..

좌 우 로 카테고리 이동 및 터치슬라이드를 구현해야 하는 상황이였는데 라이브러리 사용없이 처음부터 구현하고 싶었지만 아직 내실력으론 무리,, 였ㄸㅏ;,, 여러 라이브러리가 많았지만 나는 Swiper 으로 구현해보기로 하였다 ! 🔆 Swiper 설치 npm install swiper 🔆 Swiper 예시 코드 import { Swiper, SwiperSlide } from 'swiper/react'; import { Pagination, Mousewheel, Keyboard } from 'swiper'; import 'swiper/css'; import 'swiper/css/pagination'; function () { return ( { console.log(swiper.activeIndex); }} ..

프로그래머스 Lv.0 - 아이스 아메리카노 💚 문제설명 머쓱이는 추운 날에도 아이스 아메리카노만 마십니다. 아이스 아메리카노는 한잔에 5,500원입니다. 머쓱이가 가지고 있는 돈 money가 매개변수로 주어질 때, 머쓱이가 최대로 마실 수 있는 아메리카노의 잔 수와 남는 돈을 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 💚 제한조건 0