Code (184) 썸네일형 리스트형 라우터 + 새로운 페이지 만들기 커피 많이 마셔서 상태 메롱 https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90 [nextjs] 13.4.0부터 안정화된 App Router. Pages Router와 비교 13.4.0버전부터 stable로 승격된 app router에 대해서 기존의 pages router와 비교하며 알아봅니다. velog.io 이거 보고 디렉토리 만들고 index.js 만드니깐 작동한다. https://velog.io/@sssm/Next.js-App-Router%EC%99%80-Pages-Router [N.. css.module 조건부 스타일 근본 classnames 안쓰면 그냥 이렇게 해야해야함. 근데 난 종속성 싫어서 그냥 이런식으로 씀. 유딩도 알아볼 수 있는 코드가 좋다 // MyComponent.js import React from 'react'; import styles from './MyComponent.module.css'; const MyComponent = ({ isSpecial }) => { // 조건에 따라 클래스를 동적으로 할당 const containerClassName = isSpecial ? styles.specialContainer : styles.normalContainer; return ( Hello, World! ); }; export default MyComponent; 링크 조건부 스타일은 이런식으로 http.. 위쪽으로 올라오는 border-bottom 가끔씩 border-bottom 라인이 밑으로 되어있어서 짜증날때가 있다. 그럴땐 shadow로 처리를 하면 된다. box-shadow: inset 0px -1px 0px 0px #ffe142; 이해 하고 싶으면 https://www.cssmatic.com/box-shadow Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com 쉐도우 자동생성기를 만지작 거리면 이해할 수 있다. next styles 방식에 대한 고찰 https://nextjs.org/docs/app/building-your-application/styling Building Your Application: Styling | Next.js Learn the different ways you can style your Next.js application. nextjs.org tailwind -> scss -> css module -> css 걍 글로벌로 css 쓰기로 결론 땅땅땅. 우리 조직 큐모 크지로 않는데 억지로 복잡도를 만들 필요는 없음 스타일 만지는 개발자 3명이상 이면 새로운 방식으로 변경해도 된다고 생각함. 아직은 아님. 그리고 module 로 한것도 진짜 많이 내려둔것데.. 라이브러리 써서 뚝딱뚝딱 만들려니깐 잘 안되네 서비스 랜딩페이지 만들어야해서 Next를 처음써본 과정 - 2 히어로배너에 효과를 줄려고 document 나 localStorag 안되서 UseEffect 적용해봣더니.. 에러메세지가..! It only works in a Client Component..? 잉? 그렇다 나는 Server Component를 작업하고 있는 것을 까먹고 있었다. 생각을 해보자. 클라이언트는 브라우져 렌더링을 컨트롤 하는 거고 , Next는 옛날 JSP 같이 서버에서 렌더링해서 그냥 데이터를 쏴주는 거다. 그니깐 상태관리를 못하징 .. 그리고 localStorage나 Document를 사용할 수 없다. [렌더링 정리] 그래픽 마스터로써로 잊고 있었던 Client & Server side rendering 을 정리해보겠다. 렌더링이란 컴퓨터그래픽스에서 공부했던 연산(Compute)과 어떤.. 서비스 랜딩페이지 만들어야해서 Next를 처음써본 과정 - 1 일단 그냥 css 쓰는거니깐 .. --> page.module.css 라고 되어있는데 뭐 따로 임포트할 것은 없다. 그러고보니 그동안 scss 를 쓰면서 nested 장점이 있다고 생각했는데.. 그냥 css 나 잘하자. 프로덕트의 종속성은 최소화해야겠다. globals css 있던거에 다 지우고 normalize.css 넣어놈 기존 css 소스를 보니 그냥 css 에서도 변수 잘만 사용한다 https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-CSS%EC%9A%A9-%EB%B3%80%EC%88%98-variable-%EC%A0%95%EB%A6%AC 🎨 CSS 변수(--variable) 사용법 & 응용 정리 CSS 변수 기능 복잡한 웹사이트 같은 경우 엄청난 양의 CSS를 .. 서비스 랜딩페이지 만들어야해서 Next를 처음써본 과정 - 0 리액트만 써서 만들다가 호기심+사람들이 SEO통해 검색해서 들어와야하니 넥스트 써봄 node version 18.17 or later 여서 확인 결과 v20.1.0 임 https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.js Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file. nextjs.org 공식문서 기반해서 이 글을 작성한다 최신 버전 CNA 하니깐 넥스트 14.0.3 버전이라고 함 (지난달 업데이트네.. 실전에는 안써야.. [Flutter] padding, sizebox, if-else https://www.tutorialkart.com/flutter/flutter-container-padding/#gsc.tab=0 How to set Padding for Container Widget in Flutter? - TutorialKart To set padding for Container widget in Flutter, set padding property wit the required EdgeInsets value. Via EdgeInsets class object, we can set padding for www.tutorialkart.com https://stackoverflow.com/questions/52774921/space-between-columns-children-in-f.. 이전 1 2 3 4 5 6 ··· 23 다음
