프로그래밍 잡동사니

Redirect & Rewrite API가 유료거나 사용량에 제한이 있는 경우, API Key를 숨겨야 될 수 있다 next.config.js 파일에서는 유저가 특정 url로 들어갈 때, 원하는 곳으로 redirect 시킬 수 있다 [next.config.js] module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/contact", destination: "https://github.com/joseph-106", permanent: false, }, ]; }, }; 유저가 '/contact'로 접속할 때, 내 깃허브로 redirect시키도록 추가했다 { source: "/old/:path", destinatio..

Patterns Next.js 프로젝트에서 흔히 사용되는 개발 패턴들이 있는데, 먼저 _app.js 컴포넌트에 사용하는 Layout 패턴을 알아보자! [components/Layout.js] import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } Layout.js 파일을 생성해 기존 App.js 처럼 항상 활성화시킬 컴포넌트를 넣어준다 * children을 사용해 props로 컴포넌트를 전달할 수 있다 [pages/_app.js] import Layout from "../components/Layout"; import "../styles/globals.css"; export d..

Gatsby 템플릿을 활용해 빠르게 React 기반 정적 웹사이트를 만들고 배포해보자! * 템플릿에 따라 설치 및 실행 방식이 조금씩 다를 수 있다 마음에 드는 무료 Gatsby 템플릿의 GitHub 저장소를 찾아준다🔽 EASEOUT Coding tutorials about CSS, HTML, JavaScript, and articles about design creativity & modern web development technology. www.easeout.co 다음 명령어들을 차례대로 입력해 디렉토리를 생성하고, GitHub에 연동해준다 npm install -g gatsby-cli gatsby new (디렉토리 이름) (템플릿 GitHub 저장소 주소) # gatsby new my-app h..

CSS Modules Next.js에는 css를 적용하는 다양한 방식이 있는데, 먼저 module.css 파일을 통해 css 모듈을 사용하는 방식을 알아보자 [components/NavBar.module.css] .link { text-decoration: none; } .active { color: blue; } .inactive { color: grey; } module.css 파일을 생성해 클래스 선택자 형태로 넣어준다 * 파일은 원하는 곳에 원하는 이름으로 생성해도 된다 * 서로 다른 모듈 파일에서 같은 선택자 이름을 사용해도 문제가 없다! [components/NavBar.js] import styles from "./NavBar.module.css"; ... ... 원하는 className에 ..

Pages Next.js의 Route는 별도의 설정 없이 pages 폴더 내부의 js 파일에서 생성된다 [pages/about.js] export default function About() { return ( About ); } 이 경우 http://localhost:3000/about 에서 해당 컴포넌트를 확인할 수 있다 이 때, 컴포넌트 이름은 뭐든 상관 없지만 반드시 export default를 붙여줘야 한다 [pages/index.js] export default function Home() { return ( Hello ); } 예외적으로 index.js는 그냥 http://localhost:3000/ 에서 확인된다 Routing Next.js에서는 다음과 같이 링크를 이동한다 [compone..

웹에서 Progress Bar를 구현하는 방식은 아주 다양하다 순수 HTML / HTML5의 progress 태그 / SVG / 외부 라이브러리 등.. 이 중에 커스텀 제약이 없고 React에서 값 조절이 용이한 HTML5의 progress 태그를 사용해보자! 다양한 Progress Bar 예제🔽 progressbar by html, html5, svg ... codepen.io 위 예제에서 볼 수 있듯 태그에 JavaScript 함수로 애니메이션을 구현할 수 있다 [Compose.js] const [progress, setProgress] = useState(0); const Progress = () => { return ( ); }; 레이아웃을 만들고 진행률을 나타낼 progress를 선언해준다 [C..

Why Next.js? React.js는 원할 때 가져다 쓸 수 있는 라이브러리이며, Next.js는 정해진 틀 안에서 커스터마이징하는 React 기반 프레임워크이다 Create React App으로 생성되는 CSR(Client Side Rendering) 프로젝트는 UI를 가져올 때 React 및 JavaScript 코드를 실행하며 약간의 딜레이가 생긴다 반면 Next.js로 생성되는 SSR(Server Side Rendering) 프로젝트는 유저가 매우 느린 연결을 사용해도 미리 생성된 HTML 코드를 바로 보여준다 (= Static Pre Rendering) 이후 React가 실행되며 HTML이 React 컴포넌트가 된다 (= hydration) 이 경우 검색엔진에서 파악하기 용이해 SEO(Sear..

특정 조건에서 잠깐 나타났다가 사라지는 토스트 메시지를 React로 구현해보자 [ToastMessage.js] import './ToastMessage.css'; export const ToastMessage = (props) => { return ( {props.text} ); }; [ToastMessage.css] .toast_container { position: fixed; z-index: 99; top: 75%; left: 50%; transform: translate(-50%, -50%); width: 24rem; height: 2.625rem; border-radius: 10px; box-shadow: 0 0 15px 0 var(--black-40); background-color: #323..

Kakao Developers에서 '내 어플리케이션 > 추가 > 플랫폼' + 요약 정보에서 JavaScript 키를 확인해주자 [index.html] index.html의 head에서 Kakao SDK를 불러온다 [API/Share/initialize.js] const { Kakao } = window; export default function initialize() { Kakao.init('JavaScript 키'); } 초기화는 이렇게 하나의 모듈로 빼서 관리하면 좋다 * JavaScript 키는 보안을 위해 비공개 파일에서 import하도록 변경할 필요가 있다 [App.js] import initialize from './API/Share/initialize'; export default func..

보호되어 있는 글입니다.