일단 블로그를 만들고 잇다... 지금은 ui거이 다 완성했다... 씨부레 작업하면서 특이점이 왔다.. 현제 메인페이지인데 검색 태그 카테고리를 누를때만 사용하는 레이아웃인데 여기서 왼쪽에 있는거는 고정데이터고 오른쪽에 있는거가 가변데이터인데 이거를 어떤식으로 최적화를 해야할까 하는 고민을 했다... layout컴포넌트를 사용하기에는 전체페이지에 쓰는것도 아니고 조건걸기도 애매해 보이고 페이지마다니까.. 그레서 생각한게 하나의 컴포넌트에 다담고 pages로 임포트 하는거 일단 이런식으로 만들긴 했는데 완벽하지는 않겠지...

styled-components를 next에서 사용하면 문제점이 발생한다. 바로 CSS-in-JS로 스타일링을 하면 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제가 발생하게 된다. NextJS는 이에 대한 해결책을 제시한다. html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소들을 주입시켜서 스타일이 뒤늦게 적용되는 문제를 해결할 수 있다. 👉 NextJS 공식문서 - Customizing 'renderPage' // pages/_document.tsx import Document, { DocumentContext, DocumentInitialProps } from "next/document"; import { ServerStyleSheet } from "styled-compone..

노드버드를 만들면서 생각이 나는게 블로그를 만들어 보자 그리고 거기에 포폴을 넣어보자 결론은 포폴사이트라는거지만 이라는 생각이 들었다, 작업을 시작할때 일단 테마를 바꾸는 작업부터 시작했다. 01. 테마 바꾸기 테마를 바꾸는건 간단하다. css를 어떤것으로 할지는 모르지만 내가 주로 쓰는 css in js는 styled-component이기 때문에 거기에 내장되있는 ThemeProvider를 이용하는 것이였다. export const lightTheme: DefaultTheme = { white: "#fff", black: "#222", yello: "#FFC821", gery: "#555", ddd: "#ddd", F1F1F2: "#F1F1F2", green: "#00BA7C", blue: "#1D9B..

01. 간단하게 즐기는 Mysql npm i sequelize sequelize-cli mysql2 mysql2 : mysql과 node를 연결해주는 드라이버 sequelize : sql언어를 몰라도 자바스크립트를 이용해서 sql로 변환해줌 그 후에는 npx sequelize init으로 sequelize세팅한다. 02. models 기본세팅 제로초님 왈 지금의 Sequelize의 세팅은 쓰래기다 다시 바꾸는데 맨처음 기본베이스는 이렇게 하는게 낫다라고 하셧다. 참고로 지금은 데이터베이스에 테이블을 짜지 않았으니 이대로는 작업이 안된다. models/index.js const Sequelize = require("sequelize") const env = process.env.NODE_ENV || "de..

01. Node의 기본구조 node는 기본적으로 commonJs로 기동된다 기존에 import * as 123 from "" 이였다고 하면 이제는 require문을 사용한다고 생각하면 된다. 예시로는 아래와 같다. const http = require("http") const server = http.createServer((req,res)=>{ console.log(req.url,res.method) res.write("aaaa") res.end("asd") }) server.listen(3065,()=>{ console.log("서버실행중") }) 여기서 createServer는 말그대로 서버를 만드는것 listen은 어느 포트에서 실행하는지를 알려주는 것이다. 기본적 코드 res.end("asdas..

create이딴거 말고... 처음부터 시작을 해보자면... npm init 후 다 엔터... anuthor- 누가 만들엇쩡 와 name정도만 쳐두면 좋지 않을까 생각이 된다. scripts안의 dev next로 변경 npm i shortid styled-components redux-devtools-extension react-redux react-dom react immer antd @faker-js/faker next-redux-wrapper