[Nextjs] _app.tsx 와 _document.tsx

_app.tsx, _document.tsx: 두 파일은 server only file 입니다. Next.js server logic에 사용되는 파일이기 때문에 client에서 사용하는 로직 사용 불가 ex) EventListener / Window / DOM 1. _app.tsx 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트를 의미합니다. pages/_app.tsx 경로에 생성 모든 페이지는 이곳을 통하게 되고 공통 레이아웃을 만들때 사용 글로벌 CSS 적용 레이아웃 설정을 통해 페이지 전환시 특정 레이아웃을 유지할 수 있습니다. 페이지 전환시 특정 레이아웃의 상태값도 유지 실습해보기 root 경로에 styles/globals.css 를 생성합니다. _app.tsx에 적용 pages/_app.t..

• format_list_bulleted Frontend/Nextjs
• · 2023. 11. 11.
• textsms

[Figma] Figma(피그마) Chrome WebGL오류 해결법

1. Figma 오류 발생 Uh oh... we can't open that file We can't open the editor because WebGL isn't supported, or is disabled, in your browser. If you browser supports WebGL, check out this help article to find out how to enalbe it. Could not initialize WebGL Make sure WebGL is enabled, or you might be using an unsupported configuration. 1. Check "Use Hardware Acceleration when available." under Chrome..

• format_list_bulleted UI UX/Figma
• · 2023. 10. 1.
• textsms

[NodeJS] nodejs 최신 버전으로 업데이트 하기

현재 사용하는 nodejs 버전이 구버전이라면 모듈을 사용하다 버전이 안맞는 경우가 생길 수 있습니다. 이럴경우에 nodejs을 최신 버전으로 업데이트 해야할 경우가 생기는데 하는 방법은 다음과 같습니다. node -v //node 버전 확인 npm cache clean -f //캐시 삭제 npm install -g n //nodejs 버전관리 플러그인 ※ 간혹 버전관리 플러그인을 설치하는 중 버전이 너무 낮아 설치가 안되는 경우가 있는데 이 때에는 홈페이지에서 직접 재설치 해야합니다. n latest //최신버전 n lts //lts 버전 n stable //안정버전 nodejs를 업데이트 한 후 npm도 업데이트 합니다. npm -v //npm 버전 확인 npm i -g npm //npm 업데이트(g..

• format_list_bulleted 카테고리 없음
• · 2023. 8. 29.
• textsms

console.log찍었는데 [object Object]라고 출력될때

가끔 로그찍을때 요로코롬 나올때 있음. 객체형태라서 그런데 방법은 2가지 1. JSON.stringify console.log(JSON.stringify(data)) 2. console.dir console.dir(data) Ref ) console.log찍었는데 [object Object]라고 출력될때

• format_list_bulleted 카테고리 없음
• · 2023. 8. 7.
• textsms

[Warning] Unknown at rule @tailwind css : React에서 TailwindCSS 사용 시 발생하는 경고

- 오류내용 리액트에서 tailwindcss를 설치하고 나서 기본적인 설정들을 하고 난 후에 Unknown at rule @tailwind css 라는 경고가 떴다. - 해결 ☝🏼 VSCODE vscode에서는 플러그인 - PostCSS Language Support 를 설치하면 더 이상 경고 문구가 보이지 않는다. ✌🏼 VIM 만약 vim을 사용한다면 그리고 coc를 사용한다면 :CocInstall coc-css 로 coc-css를 설치해준 뒤, vim설정 폴더로 들어가서 coc-settings.json 파일에서 설정을 해주면 된다. { "css.lint.unknownAtRules": "ignore", } vim에서도 경고문이 보이지 않게 된다!

• format_list_bulleted Frontend/css
• · 2023. 7. 27.
• textsms

[Tailwindcss] 키워드값 지정

tailwind.config.js 에서 특정 키워드를 지정해서 클래스 안에 작성이 가능하다. 아래는 해당 파일이다. /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", mode: "jit", purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], // darkMode: true, // or 'media' or 'class' theme: { extend: { colors: { brand: "#FF0000", }, }, }, variants: { extend: {}, }, plugins: [], };

• format_list_bulleted Frontend/css
• · 2023. 7. 25.
• textsms