'use client';

import { useState } from 'react';
 
export default function LikeButton() {
  // 새로운 state 변수를 선언하고, likes라 부르겠습니다.
  // 값이 없으면 0
  const [likes, setLikes] = useState(
    window.localStorage.getItem("item1") > 0 ? 
    window.localStorage.getItem("item1") : 0
  );

  function handleClick() {
    let likes2 = Number(likes) + 1;
    setLikes(likes2);
    window.localStorage.setItem("item1", likes2); //저장
  }
  
  return <button onClick={handleClick}>Like ({likes})</button>;

}

1. Nodejs에서 LTS 버전 설치

2. 작업용 폴더 만들기

3. vite를 사용하여 설치

폴더에 우클릭해서 터미널에서 열기를 누릅니다.

npm create vite@latest

또는 vscode에서 폴더를 열고 터미널에서 cmd 연다음에 입력

이러면 작업 폴더 안에 내가 지정한 project name으로 폴더가 만들어짐

4. vscode 에서 새로 만든 project name 폴더 오픈

npm install

5. 작업 후 실행

npm run dev

코딩애플 참고하였고 vscode에서 설치하는 법 추가

리액트 React 설치와 개발환경 셋팅 - 코딩애플 온라인 강좌

word-break : keep-all;
overflow-wrap : break-word;

CSS에서 단어단위로 줄바꿈을 하고 싶을 때 word-break:keep-all;을 사용한다.

문장에 띄어쓰기가 없는 긴 문장일 경우 안드로이드에서는 자동으로 줄바꿈을 해주지만 ios에서는 줄바꿈이 되지 않고 넘쳐버린다.

그럴 때 overflow-wrap:break-word;를 추가한다.

Prepare for viewport resize behavior changes coming to Chrome on Android https://developer.chrome.com/blog/viewport-resize-behavior/

11월 크롬 108이 출시되면서 크롬은 화면 내 키보드(OSK)가 보여지면 레이아웃 뷰포트가 어떻게 행동하는지에 약간의 변화를 줄 것이다. 이러한 변화로 안드로이드의 크롬은 더 이상 레이아웃 뷰포트를 크기화하지 않고 대신 비주얼 뷰포트만 크기화할 것이다. 이것은 안드로이드의 행동에 대한 크롬을 iOS의 크롬과 iOS의 사파리와 대등하게 만들 것이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

ios 웹뷰 스크롤 튕기는 모션
(관성 스크롤, bounce scroll)

네이티브앱 웹뷰에서 나타난 현상으로,
웹뷰 기본 body 스크롤에서는 바운스가 안생기는데
div에 overflow를 주어서 만든 내부 스크롤에는  ios 폰 특유의 바운스 현상이 생기는 경우가 발생하였다.
(기본 body 스크롤의 관성은 네이티브 자체에서 제거하였다.)

overflow-y:scroll;
-webkit-overflow-scrolling:auto;

기존에 제어했던 방식이다.
관성이 필요 없는 경우 auto, 필요한 경우 scroll을 사용하였다.

웹뷰를 바꿔서 그런지 ios가 업데이트를 해서 그런지 구버전은 여전히 위의 속성이 잘 되지만, 요즘 폰에서는 작동하지 않았다.

위 속성은 모질라에서도 작동되지 않을 수 있으니 사용하는 것을 추천하지 않는다고 한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

그래서 찾아본 방식이 아래의 방식이다.

overflow-y:scroll;
overscroll-behavior:none;

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
기본적으로 모바일 브라우저는 페이지(또는 다른 스크롤 영역)의 상단 또는 하단에 도달할 때 "바운스" 효과 또는 심지어 페이지 리프레시를 제공하는 경향이 있다. 또한 스크롤 콘텐츠가 있는 페이지 상단에 스크롤 콘텐츠가 있는 대화 상자가 있을 때 대화 상자의 스크롤 경계에 도달하면 기본 페이지가 스크롤되기 시작합니다. 이것은 스크롤이라고 불립니다. 스크롤체인.

경우에 따라서는 이러한 행동이 바람직하지 않다. 사용하실 수 있습니다. overscroll-behavior 원치 않는 스크롤 체인링과 브라우저의 페이스북/트위터 앱에서 영감을 받은 "리프레시 당김" 유형의 동작을 제거합니다.

반대로 위 방식은 구버전 폰에서 작동하지 않는 것을 확인하였다.(15.4이상) 두 방식 모두 적용되지 않는 경우가 있어 더 연구가 필요하다.

Start a New React Project – React

Setup - Create a Next.js App | Learn Next.js (nextjs.org)

Node.js

Node.js (nodejs.org)

Next.js

풀 스택 React 프레임워크입니다. 다재다능하며 대부분 정적인 블로그에서 복잡한 동적 애플리케이션에 이르기까지 모든 크기의 React 앱을 만들 수 있습니다. 새 Next.js 프로젝트를 만들려면 터미널에서 다음을 실행합니다.

npx create-next-app

Next.js를 처음 사용하는 경우 다음.js 자습서를 확인하세요.

다음으로.js Vercel에 의해 유지 관리됩니다. Next.js 앱을 모든 Node.js 또는 서버리스 호스팅 또는 자체 서버에 배포할 수 있습니다. 완전 정적 Next.js 앱은 모든 정적 호스팅에 배포할 수 있습니다.

npm start를 했는데 안되는 이유

Error: Could not find a production build in the '...' directory

npm run build

실행

npm run dev

Node.js (nodejs.org)

설치 | 털 실 (yarnpkg.com)

새로운 React 앱 만들기 – React (reactjs.org)

포토샵 웹용으로저장시 100% 저장이 불가능 하고 강제축소 되는 현상.

포토샵 웹용으로저장시 이미지 크기 퍼센트가 일정 퍼센트 이상으로 올라가지 않는 현상이 생긴다.

100%로 입력해도 alert 창이 뜨면서 다시 특정 % 값으로 돌아온다.

특정 파일에서만 나타나는 현상이기에 저장 버그 또는 오류인줄 알았다.

해당 현상이 나타나는 이유는 웹용으로저장시 최대 한도 크기가 8192px로 정해져 있기 때문이다.

이미지 사이즈가 너무 클 경우 웹용으로저장을 누르면 강제로 8192px까지 낮춰서 저장해버린다.

이것은 슬라이스 툴로 잘라서 그 이하로 저장하는 경우에도 마찬가지로 반영되기 때문에 불편하다.

8192px 이하로 이미지를 자르고 따로 따로 웹용으로저장을 하면 해결된다.