본문 바로가기

Frontend

 (278)
TIL 23.08.21 Tailwind CSS 세팅 1. Tailwind 홈페이지 -> Docs 에서 다운로드 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com yarn add -D tailwindcss 2. Next.js 와 적용할 것 이기 때문에, 사용할 컴포넌트나 폴더명을 다음과 같이 tailwind.config.ts 에 적용함 https://tailwindcss.com/docs/guide..
TIL 23.08.18 [App router] layout Layout layout 페이지는 앱 라우터에서 공통된 설정을 적용하는 페이지로 itle, description 은 제목과 내용을 설정해주면 제목에 들어간다. import "./globals.css"; import Link from "next/link"; export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( WEB {children} ); } 메인페이지 import Image from "next/image"; export default function Home() { retu..
[Next.js] [Page Router] Page와 Routes 설치하기 Next.js 12 에는 페이지라우터 방식을 사용한다. 다음과 같이 필요에 따라 패키지를 설치한다. npx create-next-app [프로젝트 이름] ➜ ~ npx create-next-app pages-test ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … [No] / Yes // NO [페이지라우터] 방식..
[Next.js] Rendering Rendering JavaScript 를 이용해서 HTML 을 만드는 행위로, 기존 SPA 를 만들 때 사용하던, CSR 의 rendering 표현에 가깝다. const element = ( Hello, world! ); // JSX의 동작 -> Javascript로 HTML 태그를 만든다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); Pre-rendering Client 에 HTML 이 이미 로드가 된 이후가 아닌, 이전에 JavaScript 를 이용해 HTML 을 만드는 것을 말한다. 언제 HTML 을 만드느냐에 따라서, SSR (Server Side Rendering), SSG (Stat..
[Next.js] MPA 부터 SSR 까지 MPA(Multi Page Application) 원시적인 서버사이드 렌더링 방식으로, 페이지 이동시나 렌더링시 깜빡 거리는 것으로 유저 사용성을 저하시킨다. 이를 보완하기 위해 CSR 방식의 React 를 사용해서 SPA 를 만들기 시작함. /about → about.html /profile → profile.html SPA (Single Page Application) - CSR (Client Side Rendering) React 의 SPA 를 이용하게 되면서 새로고침이나 깜빡임 없이 유저 사용성이 개선되었으나, 단점이 존재한다. 자바스크립트 번들 사이즈가 커짐에 따라서 초기 로딩 속도가 증가하는 것 (클라이언트 사이드 렌더링의 문제점) 빈 HTML 부터 시작해서 시간이 오래 걸림. // React..
TIL 23.08.14 [벼락샌드] 팀프로젝트 회고 1. 한 주의 흐름 1) 한 일 프로젝트 명: 벼락샌드 필수 작업: 로그인 , SUPABASE DB 사용 , user에 따른 권한, 통계, 로그인 인증 추가 작업: 소셜 로그인, 결제 기능 , 멤버십 변경 및 추가 기능 2) 느낀점 김윤수 - 프로젝트가 우당탕탕 완성이 다 되었지만 최종 전 마지막 프로젝트라서 긴장을 많이 했던거 같습니다. 프로젝트 사이즈가 많이 크다고 생각해서… 나름 챌린지를 해본건데 그래도 으쌰으쌰해서 완성단계까지 끌어올릴 수 있어서 좋았습니다~~ 이은한- 포기하지 않으면 따라갈 수 있다. 이우정 - 모바일, 웹 버전의 웹사이트를 제작해서 새로운 도전을 했다는 느낌이었다. 정승하 - 기능에대한 코드설계의 아이디어가 잘 생각나지않는점이 부족하다고느꼇습니다. 2. Keep 구체적으로 진행..
TIL 23.08.11 React 스와이퍼 구현 바닐라자바스크립트 할때 제일 힘들게 했던건 스와이프 기능 구현하기였다. 힘들게 만든 스와이프 기능도 CORS 에러로 잘 구현이 안됨 🙃리액트는 스와이퍼 라이브러리로 간단하게 스와이프 기능을 구현할 수 있다. 리액트 스와이퍼 공식문서 https://swiperjs.com/react Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 1. 기능구현에 필요한 스와이퍼 라이브러리 먼저 설치한다. yarn add swiper 2. 필요한 모듈을 impor..
TIL 23.08.09 React 아임포트/ 포트원 카드 결제창 구현하기 1. 포트원 (구 아임포트) 회원가입 https://portone.io/korea/ko 포트원, 온라인 비즈니스를 위한 통합 결제 솔루션 코드 한 줄로 세상 모든 방식의 결제를 경험해보세요 portone.io 2. index.html 에 다음과 같이 추가 3. 원하는 pg 등록하기 결제 연동 > 결제대행사 설정 및 추가 4. 컴포넌트에 다음 로직 추가하기 리액트 아임포트 공식문서 참조 https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT.md const onClickPayment = () => { if (!window.IMP) return; /* 1. 가맹점 식별하기 */ const { IMP } = window; IMP..

티스토리툴바