본문 바로가기

Web Study124

코딩 애플 - Dark mode 만들기 리액트에서 동적인 UI 로직 state 만들고 현재 UI 상태 저장 state 에 따라 UI가 어떻게 보일지 코드 작성 원할 때 state 를 변경 CSS 의 속성 prefers-color-sheme 자동으로 OS 테마에 맞춰서 CSS를 적용시켜주는 속성 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme prefers-color-scheme - CSS: Cascading Style Sheets | MDN The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user i.. 2023. 7. 7.
코딩애플 - AWS Elastic Beanstalk, S3 배포하기에 앞서 1. AWS 라면 EC2 가 제일 유명하지만... EC2는 가상 서버(인스턴스)를 빌리는 상품으로, 숙련자라면 커스터마이징이 가능하고 빠르기 때문에 EC2를 사용하는 것이 맞지만 편하고 쉽게 배포하려면 AWS의 Elastic Beanstalk 을 사용하는 것을 추천 2. AWS 의 Elastic Beanstalk 이란 코드만 올리면 알아서 EC2 인스턴스 빌리고 npm install 한 뒤 npm run start 까지 실행해주며, 무료로 도메인 연결과 24시간 서버 구동이 가능한 상품이다. 유저가 훗날 많아지면 확장도 쉬워지고 버전관리도 가능하다고 한다. 그러므로 사용자는 코드에 집중하면 되는 것 구글 클라우드에 App Engine 이라는 상품도 비슷한 역할을 해준다고 한다. 3. Ve.. 2023. 7. 5.
코딩애플 - 예외적인 페이지들 loading.js 로딩 중 UI를 만들 때 해당 라우터 폴더 안, page.js 옆에 loading.js 파일을 만들어주면 자동으로 페이지 이동 시 로딩이 필요할 때 화면에 노출된다. 서버 컴포넌트 뿐만 아니라 클라이언트 컴포넌트로도 가능하며 리액트의 Suspense 컴포넌트로 감싸주면 가능한 것을 Next.js 에선 정해진 파일명을 만들어줌으로써 Suspense 없이도 가능하게끔 해준다. // 보여줄 페이지 내용 Suspense 컴포넌트 Suspense 컴포넌트로 감싸주면, 컴포넌트의 렌더링을 특정 작업 이후로 미루고 그 작업이 끝날 때까지 fallback 속성으로 넘겨준 컴포넌트를 대신 보여준다! useEffect 와 setTimeout, useState-loading 으로 처리해주던 작업을 간편화.. 2023. 7. 4.
코딩 애플 - 댓글 CSR 으로 댓글 기능 구현하기 먼저, 댓글은 상세 페이지 안쪽에 존재하여야 한다. 여기서 선택을 해줄 수 있는데 서버 컴포넌트 형식으로 댓글 기능을 만들어주면 서버에 연동해줄 때마다 페이지의 새로고침이 필요해질 수 있다. ---> 이때 form 태그를 사용해서 input 을 받아준다. 사용자 경험을 향상시키기 위해 새로고침 없이 바로 적용이 되게하려면 (Ajax 등을 사용) CSR, 즉 use client 로 댓글 부분을 따로 빼주자. 'use client' import React from 'react' export default function Comment(props) { return ( 댓글목록 댓글전송 ) } useState 로 입력해준 값 다루기 export default function Co.. 2023. 7. 3.

티스토리툴바