본문 바로가기

Code/web-frontend

 (58)
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 버전이라고 함 (지난달 업데이트네.. 실전에는 안써야..
FLEX 서비스 css 칼라값 root 파일 참고용 vscode에서 보면 색상도 나옴 root, .t-giEBBL { --sizes-xsmall: 24px; --sizes-small: 32px; --sizes-default: 40px; --sizes-large: 48px; --sizes-xlarge: 56px; --radii-default: 8px; --radii-tag: 50px; --shadows-active: 0 0 0 4px rgba(58,151,212,.3),0 0 0 1px rgba(33,36,41,.2),0 1px 1px 0 rgba(33,36,41,0),0 6px 12px 0 rgba(33,36,41,0); --shadows-pageRoot: 0px 0px 12px 0px rgba(0, 0, 0, 0.04), -1px ..
gulp 로 코드 minify & uglify + map 파일 만들기 https://blackblackblackblack.tistory.com/entry/%EC%BD%94%EB%93%9C-minify-%EB%82%9C%EB%8F%85%ED%99%94 코드 minify + 난독화 업체에 알려지면 안된다고 해서 https://skalman.github.io/UglifyJS-online/ UglifyJS 3: Online JavaScript minifier // Documentation of the options is available at https://github.com/mishoo/UglifyJS2 { parse: { bare_returns : false, ecma : 8, expr jinwoochoi.com 이걸로 전달했더니 어렵다고 이번에는 minify 만 해달라고 한..
[vue] 처음 시작해보기 메모 https://ryu-e.tistory.com/44 2. Vue CLI로 Vue 프로젝트 생성하기 Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. 우선 CLI 설치를 해보고 프로젝트를 설치하는 3가지 방법에 대해서 알아봅시다. 처음에는 Default 옵션 ryu-e.tistory.com https://github.com/vuejs/vue-cli/issues/3424 Vue CLI fails on Windows Powershell · Issue #3424 · vuejs/vue-cli Version 3.4.0 Environment info Environment Info: System: OS: Windows 10 CPU: (16) x64 AMD Ryzen ..
이미지 width: 100% 일때 비율 유지하면서 height 설정 이거다! 그리드 안쓰고 https://velog.io/@juno7803/%EB%B0%98%EC%9D%91%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%A2%85%ED%9A%A1%EB%B9%84-%EC%9C%A0%EC%A7%80%ED%95%98%EC%97%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0 반응형으로 종횡비 유지하여 이미지 표시하기 반응형 웹을 공부하면서 ` 태그가 아닌, 특정 card와 같은 컴포넌트에 가로 세로 비율을 유지하면서 background-image`를 주는 방법에 대해서 소개드리려고 합니다! velog.io

티스토리툴바