프레임워크160 [CSS] display: none vs visibility: hidden display: none 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지한다. width, height를 지정하여 가로, 세로 폭을 조절 할 수 있다. div 태그는 display 속성의 기본값으로 block을 가진다. display: none와 visibility: hidden 차이점 둘 다 요소를 보이지 않게 하는 속성이라는 점에서는 동일하지만, UI 측면에서 볼 때 둘은 완전히 다르다. display: none은 화면 상에 어떤 영역을 차지 하지 않고 완전히 삭제된 것처럼 보이게 한다. 그에 반해 visibility: hidden은 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보여준다. 기본 모양은 아래와 같다. display: none 과 visibili.. 2022. 3. 8. [Next.js] passport 알아보다가 알게된 Next.js... Next.js는 서버 역할을 해준다. 그래서 node.js의 app.js처럼 따로 서버를 만들어 줄 필요가 없다pages/api/#.js를 만들어서 api를 만들 수 있다. → https://localhost:3000/api/# api 요청 시에는 여러가지 방법이 있는 데 일단 파악한 방법들을 정리했다. 1) 컴포넌트에 getStaticProps나 getServerSideProps를 사용하여 api를 fetch하여 받아온 데이터를 return하여 해당 .js의 컴포넌트 props로 받는다. 이때 api url은 절대적 url이여야 한다. 즉, local로 서버를 구동 중이라면 http://localhost:3000/api/hello 이런 식으로 요청을 보낸다. 2) fetch 때도 async/await을.. 2022. 3. 3. [React] useReducer 컴포넌트의 state를 생성하고 관리하기 위해서 지금까지 useState Hook을 사용 해왔었는 데요. React Hook에서는 상태 관리를 위한 Hook으로 useReducer도 제공하고 있습니다! useReducer는 useState처럼 state를 생성하고 관리 할 수 있게 도와주는 도구입니다. 여러 개의 하위 값을 포함하는 복잡한 state를 다룰 경우 useReducer를 사용하면 훨씬 더 깔끔하게 코드를 작성 할 수 있습니다. 물론 유지보수에도 좋습니다! useReducer는 Reducer, Dispatch, Action 이 세가지로 이루어져 있습니다. 1️⃣ Reducer 2️⃣ Dispatch 3️⃣ Action 한가지 상황을 예로 들어 설명 하겠습니다. 철수라는 아이가 계좌에서 만원을 .. 2022. 3. 1. [Next.js] 기타 호스팅 옵션 Next.js는 Node.js를 지원하는 모든 호스팅 제공업체에서 배포 할 수 있습니다. package.json의 scripts를 보면 build와 start가 있는 데 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } } 자체 호스팅 제공업체에서 build 스크립트를 한번 실행하면 .next 폴더에 프로덕션 애플리케이션이 빌드 됩니다. npm run build 빌드 후 start 스크립트를 사용하면 하이브리드 페이지를 지원하는 Node.js 서버를 시작하여 정적으로 생성된 페이지와 서버 측 렌더링 페이지와 API 경로를 모두 제공합니다. npm run start 팁 : 아래와 같이 업데이트 하면 start를 허용하도.. 2022. 2. 26. [Next.js] Vercel에 배포 Next.js를 프로덕션에 배포하는 가장 쉬운 방법은 Next.js 제작자가 개발한 Vercel 플랫폼을 사용하는 것입니다. Vercel은 헤드리스 콘텐츠, 상거래 또는 데이터베이스와 통합하도록 구축된 정적 및 하이브리드 애플리케이션을 위한 서버리스 플랫폼입니다. 1. Vercel 계정 생성 Sign Up – Vercel Vercel is the easiest way to deploy websites. Host your web projects for free with zero configuration, automatic SSL, and global CDN. vercel.com 2. nextjs-blog 저장소(repo) 가져오기 가입 후 Vercel에서 repo를 가져 옵니다. 이때 Github용 Ver.. 2022. 2. 26. [Next.js] Github에 Push 배포하기 전에 Next.js 앱을 아직 Push 하지 않은 경우 Github에 Push 해보겠습니다. 이렇게 하면 배포가 더욱 쉬워 집니다. - 개인 Github계정에서 nextjs-blog라는 repo을 생성합니다. - repo는 public(공개) 또는 private(비공개) 할 수 있습니다. README나 다른 파일로 초기화 할 필요가 없습니다. - Next.js 앱에 대해 로컬로 git repo를 초기화 하지 않았다면 초기화 하세요. git init - Next.js 앱을 Github repo에 Push 합니다. (다음 명령어로 Push 할 수 있습니다.) git remote add origin https://github.com//nextjs-blog.git git push -u origin ma.. 2022. 2. 26. [Next.js] API 경로 세부정보 API 경로에 대해서 알아야 할 몇가지 필수 정보를 정리 해보겠습니다. 1. getStaticProps 또는 getStaticPaths에서 API 경로를 가져오지 마십시오. getStaticProps 또는 getStaticPaths에서 API 경로(pages/api/~~)를 가져오면 안됩니다. 대신 getStaticProps 또는 getStaticPaths에 직접 서버 측 코드를 작성하세요. (또는 도우미 함수를 호출 하세요.) 왜냐하면 getStaticProps와 getStaticPaths는 서버 측에서만 실행되고, 클라이언트 측에서는 실행되지 않습니다. 브라우저용 JS 번들에도 포함되지 않습니다. 즉, 직접 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 작성 할 수 있습니다. 2. 좋은 사.. 2022. 2. 26. [Next.js] API 경로 생성 API 경로 생성 API 경로를 사용하면 Next.js 앱 내에서 API 엔드포인트를 생성 할 수 있습니다. pages/api 디렉토리 내부에 함수를 생성하여 이를 수행 할 수 있습니다. // req = HTTP incoming message, res = HTTP server response export default function handler(req, res) { // ... } 서버 리스 함수(람다)로 배포 할 수 있습니다. 간단한 API 엔드포인트 생성 pages/api 디렉토리에 hello.js 파일을 생성하고 아래 코드를 삽입합니다. export default function handler(req, res) { res.status(200).json({ text: 'Hello' }) } 그런 .. 2022. 2. 26. [CSS] Next.js에서 svg 사용하는 방법 svg를 적용하는 방법에는 크게 두가지가 있다. 1. svg 코드를 HTML 부분에 삽입한다. 2. svg 파일을 생성하고 svg 코드를 삽입한 후 해당 .svg를 import 받아 삽입한다. 이 과정에서 발생한 오류은 아래에서 정리했다. 1, 2번 공통 오류 선과 배경색이 black으로 설정 되어 있어서 구분이 안갔는 데 strock(선 속성) 사용해서 해결했다. [HTML기초문법] 15강 SVG태그 Stroke속성 - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 ossam5.tistory.. 2022. 2. 24. 이전 1 2 3 4 5 6 7 8 ··· 18 다음 728x90
