개발잘하고싶다

앞으로 next.js로 다국어 페이지를 만들때 필요한 요소들입니다. 1. next로 만든 패키지 (app router 로 구성할 예정) 2. 구글 스프레드 시트 3. 구글 스프레드 시트 next 패키지 연동 목차 1. next 프로젝트 만들기 2. next 다국어 기초 프로젝트 셋팅 3. 구글 스프레드 시트 연동하기 4. 구글 스프레드 시트 next 프로젝트 연결하기 1. 프로젝트 생성하기 2. 다국어 관련 라이브러리 설치 yarn add i18next react-i18next

개요 클론 코딩 하기 좋은 소재 중 하나로 애플 페이지가 있습니다. 애플 페이지를 보면 다양한 언어를 지원하는 걸 볼 수 있습니다. 다국어 페이지를 도메인으로 제공하는 방법은 크게 두가지가 있습니다. url은 아래와 같이 분리할 수 있습니다. ex) www.appple.com/kr [서브도메인].[도메인]/[path] Loading... q1.quotes.com 1. 서브 도메인으로 페이지를 분리 ex) kr.apple.com 2. path 로 페이지를 분리 apple.com/kr 1번의 예시는 아래의 사이트로 확인할 수 있습니다. https://ko.duolingo.com/ 무료로 외국어를 배우세요. 게임을 통해 영어를 비롯한 다양한 언어를 배워보세요. 100% 무료로 제공되는, 게임처럼 재미있고 과학..

`target="_blank"` 및 기타 옵션 _blank: 이 옵션은 링크를 클릭했을 때, 새 탭이나 창에서 해당 URL을 엽니다. 링크된 리소스가 현재 탭이나 창과는 독립적인 경우에 주로 사용됩니다. _self (기본값): 링크된 문서를 현재 창이나 탭에서 엽니다. _parent: 링크된 문서를 부모 프레임에서 엽니다. 현재 페이지가 프레임 내에 있지 않은 경우, 이 옵션은 `_self`와 동일하게 작동합니다. _top: 링크된 문서를 현재 창의 최상위 프레임에서 엽니다. 여러 계층의 프레임이 있는 경우, 모든 프레임을 무시하고 최상위에서 문서를 엽니다.

import { useState } from "react" const Button = () => { const [isOpen, setOpen] = useState(false) const handleOpen = () => { setOpen(!isOpen) } return ( {isOpen ? "열렸다" : "닫혔다"} ) } export default Button 외부에서 클릭하는 걸 감지 하고 싶다면? useRef 사용하기! import { useEffect, useRef, useState } from "react" const Button = () => { const [isOpen, setOpen] = useState(false) const ref = useRef(null) const handleOpen..

파일 구조 📦redux ┣ 📂slice ┃ ┗ 📜authSlice.ts ┣ 📜provider.tsx ┗ 📜store.ts 문제가 된 부분 // authSlice.ts import { RootState } from '../store'; ``` //store.ts import authReducer from './slice/authSlice'; 오류 문구 Dependency cycle detected. eslint(import/no-cycle) 오류 원인 서로가 서로를 import하고 있어서 순환 의존성 문제가 생겼습니다 (의존성이 순환적으로 참조) 모듈 로더가 해당 모듈의 로딩 순서를 결정할 수 없게 되어 예측 불가능한 결과 / 런타임 오류 유발하게 됩니다 (성능에 악영향을 끼침) 그래서 해당 규칙을 설정 ..

결론 부터 보기! 오류 원인 및 해결 방법: 오류 원인: @types라는 경로는 node_modules에 있는 @types 를 가져오려고 하기 때문에 발생합니다. 해결방법: @types 라는 경로 대신 다른 경로로 임포트를 해주면 됩니다. ex) src/types , ../../ 상대 경로 등등 참조 링크: https://stackoverflow.com/questions/61308006/how-to-correctly-import-custom-types-in-typescript How to correctly import custom types in typescript I have custom type in src/@types/app.d.ts ( export type AuthKeyT = string ) I ..

목차 - pretendard 다운로드 링크 - otf ? woff 차이? - weight 별 매칭 [pretendard] https://cactus.tistory.com/306 Pretendard Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는 cactus.tistory.com weight 별 매칭 900 - black 800 -extrabold 700 -bold 600 -semibold 500 -medium 400 -regular 300 -light 200 -extralight 100 -..

scss 함수 사용법 @function [함수이름]() { … @return … }

background-size 100% vs contain vs cover 100%: 요소와 동일한 크기로 배경 이미지를 보여줍니다. (이미지 왜곡될수 있음) cover: 요소에 이미지를 최대한 크게 보여줍니다. ( 이미지가 잘리수 있음) -> 배경화면에 여백을 만들지 않음 contain: 요소에 이미지를 최대한 크게 보여주되 (이미지가) 잘리는 부분이 없고 동일한 비율을 유지합니다.

scss (sassy css) -> 개쩌는 css 라는 뜻… 기존 css 의 문제점 1. 불필요한 선택자(Selector) 2. 연산 기능 한계 3.구문(Statement)의 부재 scss의 추가 기능 1. 변수 할당 2. 중첩 구문 3. 모듈화 4. 믹스인 확장&상속 5. 연산자