wazac

mongooseerror: model.findone() no longer accepts a callback

JOTOKKI — Wed, 25 Sep 2024 16:50:16 +0900

특정강의를 그냥 따라하게되면 mongooseerror: model.findone() no longer accepts a callback 이런 에러를 마주할때가 있다.

찾아보니 mongoose findOne 함수에서 더이상 콜백함수 방식을 지원하지 않는다는 메세지가 나온다.

이를 async/await 으로 꺼내주기만 하면 된다.

// 기존 에러가 나던 방식
User.findOne({
            userId: userId.toLocaleLowerCase(),
        }, (err, user) => {
            if(err) return done(err);
            if(!user) {
                return done(null, false, {message: `UserId ${userId} not found`})
            }
            user.comparePassword(password, (error, isMatch) => {
                if(err) return done(err);
                if(isMatch) {
                    // 비번 맞틈
                    return done(null, user);
                } else {
                    // 비번 틀림
                    return done(null, flase, {msg: "Invalid userId or password"})
                }
            })
        })
}

아래와 같이 수정해주면된다.

try {
    const user = await User.findOne({ userId: userId.toLowerCase() });
    if (!user) {
        return done(null, false, { message: `UserId ${userId} not found` });
    }
    user.comparePassword(password, (error, isMatch) => {
        if (error) return done(error);
        if (isMatch) {
            // 비번 맞음
            return done(null, user);
        } else {
            // 비번 틀림
            return done(null, false, { msg: "Invalid userId or password" });
        }
    });
} catch (err) {
   return done(err);
}

JavaScript 배포후 copy 안되는 문제

JOTOKKI — Thu, 22 Aug 2024 11:03:08 +0900

링크공유와 같은 기능을 구현하기 위해 버튼 클릭시 링크를 복사하는 기능을 은근히 많이 사용하게 되는데요.
이를 구현할때 예전에는 execCommand 함수를 많이 쓰다가 deprecated 되고나서 (리액트 환경) navigator.clipboard.writeText 함수를 많이 쓰게됩니다.
그런데 분명 local 에서 잘 동작되다가 개발 서버에 배포만 하면 복사가 되지 않습니다.

보통 개발서버는 https 가 아닌 http로 동작하기 때문에, 보안 정책에 걸리기 때문인 것 같더라구요.

참조: https://stackoverflow.com/questions/51805395/navigator-clipboard-is-undefined

그래서 이를 해결하기 위해 https 환경일때만 안정적인 navigator.clipboard.writeText 를 사용하고 그렇지 않을때는 deprecated 되었던 execCommand 함수를 사용했더니 잘 동작이 되었습니다.

const copyText = "your url";
if(navigator.clipboard && window.isSecureContext) {
    navigator.clipboard
        .writeText(copyText)
        .then(() => {alert("copied!")})
        .catch((err) => { console.log("err -> ", err) });
} else {
    try {
        console.log('copy exec command use');

        const textarea = document.createElement("textarea");
        textarea.value = copyText;
        textarea.style.top = 0;
        textarea.style.left = 0;
        textarea.style.position = "fixed";
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        const copyExec = document.execCommand('copy');
        document.body.removeChild(textarea);
        if(copyExec) alert("copied!");
        else { console.log("error") }
    } catch (err) {
        console.log("error", err)
    }
}

이젠 개발환경에서도 테스트를 할수 있게되었군요!

nextjs _app.js useEffect에서 두번 호출 하는 문제

JOTOKKI — Wed, 29 Nov 2023 16:39:42 +0900

참고: https://dev.to/jahid6597/why-useeffect-is-running-twice-in-react-18c6

React18 버전이후 StrictMode일때 useEffect 가 두번씩 호출된다고 한다.

한 번만 호출하고 싶다면, next.config.js 에서 strictMode를 끌 수 있다.

// next.config.js

const nextConfig = {
  reactStrictMode: false,
}

개인 사이드 프로젝트 배포까지 완료 후기

JOTOKKI — Fri, 3 Nov 2023 21:00:15 +0900

웹 개발자로써 회사에서 일하는 것도 즐겁지만(정말?!)

개인적으로 돈, 스펙, 서비스를 하나도 생각하지 않고 오로지 내가 만들고 싶은 것들을 재미로 만들고 싶은 욕심이 있었습니다. 그래서 시작한 "조토끼아케이드 프로젝트".

제목처럼 재미와 즐거움만 존재하는 아케이드 컨셉입니다.

우선 1차로 만든 서비스는 게임2개와 랜덤을 소재로한 서비스 1개 입니다.

React로 개발을 할지, 그냥 javascript로 할지 고민이 많았는데, 아무리 생각해도 내가 생각하는 서비스들은 너무 단순한 것들이여서 react는 오버스펙이라는 결론을 내렸습니다. 혹여라도 추후 서비스가 커진다면, 리액트로 변경하면 되니깐요.

인단, 가볍게 시작해 보는걸로 했습니다.

1. 강건너기 게임

JOTOKKI"S ARCADE - 강건너기 게임

어렸을적 풀어봤을 그 유명한 강건너기 게임입니다. 옛날에는 종이를 찢어서 풀어봤던 게임이였는데, 이렇게 온라인으로 구현하니까 감회가 새로웠습니다.

단 한번도 게임을 만들어본적이 없었기 때문에,비록 unity나 canvas 같은 거창한 기술을 사용한게 아니지만, 나름 게임처럼 보이기 위해 열심히 노력했습니다. ㅎㅎ

2. 랜덤숫자맞추기

JOTOKKI"S ARCADE - 랜덤 숫자 맞추기

이것도 어렸을적 많이 했던 게임입니다. 사실 이 로직은 예전에 심심해서 만들어 뒀기때문에, 이미지를 비롯해 추가 작업만 덧붙였습니다.

3. 마법소라에게 물어보세요

JOTOKKI"S ARCADE - 마법소라에게 물어보세요

마지막으로 마법소라에게 물어보기 서비스입니다.

스펀지밥을 너무 좋아하는데, 기억나는 에피소드중 마법소라 편을 오마쥬해서 만들었습니다.

평소 결정장애도 심해서, 결정못하는 상황있을때 바로 결과를 정할 수있게 마법소라가 있으면 좋겠다는 생각에서 만들었습니다. 사진을 저장해서 공유할 수 있게끔, 이미지 저장 기능도 넣었습니다.

이때 본의아니게 배운게 있다면, animation으로 display의 opacity를 조정할때, 이미지 저장시 opacity가 1이 되기전에 사진이 저장되더라구요... setTimeout도 추가해보고, flag 변수로 제어를 해보려고 했지만, 결국엔 그냥 opacity 를 제거했습니다. ㅠvㅠ

이렇게 새로 만들어본 사이드프로젝트에 대헤 써보았는데요, 이후에도 도메인구매 후 연결, 배포후 도메인 연동, 구글 애드센스 붙이기 등등 아무 좋은 경험이였다고 생각합니다.

이후 재밌는 아이디어가 생각나면 지속적으로 추가하려고 합니다~!

궁금하시다면 방문에서 한번 놀아주세요~! : )

참고로, 애드센스 스크립트 한줄 넣었는데, 광고가 마구마구 붙더라구요.

아직 제어할 방법을 찾아보고 있는데, 추후 개선할 예정이니 다소 짜증나더라고 양해해 주세요.

사이트 구경해보기 : https://jotokkiplayground.com/

시스템 scroll 커스텀 하기

JOTOKKI — Fri, 13 Oct 2023 20:08:17 +0900

웹사이트나 애플리케이션의 스크롤바는 중요한 사용자 인터페이스(UI) 요소 중 하나입니다.

대부분의 기본 스크롤은 많이 사용하지만, 요즘은 스크롤의 디자인도 많이 고려되서 나오고 있습니다.

브라우저에서 기본으로 제공되는 스크롤은 어떻게 커스터마이징하면될까요~?

::scroll 이라는 선택자를 사용하면됩니다. 의외로 간단 하답니다.

.scroll {
  &::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: #3c3c3c;
    border-radius: 45px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #3c3c3c;
  }
}

이 코드는 WebKit 기반 브라우저 (예: Chrome, Safari)를 커스터마이징 하였습니다.

하나씩 살펴볼까요?

1. scrollbar : 스크롤바 전체를 가리킵니다. 이를 통해 스크롤바의 너비, 높이, 색상 등을 조정할 수 있습니다.
2. scrollbar-track : 스크롤바의 "트랙" 또는 배경 부분을 가리킵니다. 스크롤바 썸네일이 움직이는 부분입니다.
3. scrollbar-thumb : 스크롤바의 "썸네일" 또는 "핸들"이라고 부르는 부분입니다. 사용자가 직접 클릭하거나 드래그하여 스크롤하는 부분입니다.

결과는 다음과 같습니다.

결과화면

왼쪽이 기본 시스템 스크롤이고, 오른쪽이 커스텀된 스크롤입니다.

이렇게 스크롤 하나도 신경써서 이쁘게 만들 수 있습니다.

[react-native Error] cli.init is not a function

JOTOKKI — Mon, 12 Jun 2023 21:34:32 +0900

0.69 버전 이후로 생기는 에러라고 하는데,

0.68.2 로 설치해주니 해당 에러는 없어졌다.

npx react-native@0.68.2 init LottoApp --version 0.68.2

mac 에서 rbenv install 에러 해결 : ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

JOTOKKI — Sat, 10 Jun 2023 16:21:51 +0900

mac 에서 react-native 환경 세팅 과정에서 rbenv 를 설치해야하는데,

rbenv 까지 설치 이후 bundler를 설치하는 과정에서 다음과 같은 에러를 만났다.

ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

검색 끝에 찾은 방법은 설치이후 .zshrc 에 환경변수를 추가해줘야 한다는 걸 깨달았다. ㅎ

vim ~/.zshrc // .zshrc 파일 열기 

// 해당 파일에서 아래 코드 추가 (추가: i, 저장+닫기는 : wq) 
[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"
  
  source ~/.zshrc // 변경된 코드 적용

이후 다시 번들러를 설치하면 잘 설치된다.

Axios 로 파일과 JSON 파일 동시에 넘기기

JOTOKKI — Thu, 8 Jun 2023 10:41:35 +0900

보통 파일 업로드를 구현할때 Event 로 파일을 받은 후 formData에 담아서 multipart 로 보낸다.

const files = e.target.files;
const formData = new FormData();

for (let file of files) formData.append('file', file);
// 혹은
formData.append('file', file[0]);

간혹 파일 이외에 추가 정보를 보낼때가 있는데, 그때에도 formData를 담아서 보내면 된다.

...
const fileInfo = "user_type";
formData.append('type', fileInfo);

그런데 만약 Object 타입을 보내야할 때는 어떨까?

기나긴 삽질+도움 끝에 찾은 방법은 다음과같다.

Object 타입은 보낼수 없으므로 우선 stringify를 사용하여 json 형태로 만들어야한다.

그리고 뒤에 옵션을 붙여 application/json 타입으로 해당 데이터는 보내겠다고 추가를 해줘야 하는데,

추가를 하려면 해당 데이터를 blob 타입으로 만들어야한다.

blob(Binary Large Object)로 원래는 바이너리 형태로 객체를 저장하는 내장함수로, 주로 파일을 읽을때 쓰는데, 여기서는 multipart로 json 데이터를 보내기 위해 썼다.

...
let dataInfo = {
    fileType: "user_type",
    categoryType: "faq_file"
}
formData.append('request', new Blob([JSON.stringify(dataInfo)], {type: 'application/json'}) );

그리고 axios에서는 그냥 Content-Type을 multipart로 보내면 된다.

node 버전을 여러개 쓰고싶다면 NVM을 써보자

JOTOKKI — Tue, 6 Jun 2023 00:19:52 +0900

Node.js는 다들 알다시파 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있는 JavaScript 런타임 환경이죠?

대부분의 프론트엔드 개발자들은 NPM을 설치하여 node의 명령어를 사용합니다.

그렇다면 NVM은 무엇일까요?

NVM은 Node Version Manager의 약자로, 컴퓨터에서 여러 버전의 Node.js를 관리할 수 있는 도구입니다.
NVM을 사용하면 컴퓨터의 다른 Node.js 버전 간에 쉽게 전환하고, 특정 버전을 설치 및 제거하며, 글로벌 및 프로젝트별 Node.js 버전을 관리할 수 있습니다.

서로 다른 버전의 Node.js를 서로 다른 디렉토리에 설치하고,

시스템의 PATH 환경 변수를 수정하여 서로 전환할 수 있도록 하는 방식으로 작동합니다.

이 기능은 다른 버전의 Node.js가 필요한 프로젝트에서 작업하거나 다른 버전의 Node.js에 대해 코드를 테스트하려는 경우에 유용합니다.

특히, 저는 블록체인 개발할때 많이 유용했습니다.

설치하기 (window)

1. https://github.com/coreybutler/nvm-windows/releases 접속 후 nvm-setup.zip 파일을 다운받습니다.

2. zip 파일을 풀고 install 한뒤, cmd 창을 열어 nvm version 명령어로 버전을 확인하세요.

만약, 설치가 제대로 안된 경우는 제 경우에는 window 에서 사용자 이름의 폴더가 한글도 되어있거나, 특수문자인 경우입니다. 이때는 매우 골치가 아픕니다. 저는 결국 다시 밀고 유저이름을 영문으로 바꾼뒤 재설치하니 잘 됬습니다.

또한 nvm 명령어를 막상 사용할때에는 관리자권한으로 실행해야 명령어가 먹었습니다.

자주사용하게되는 명령어

1. nvm install <version> : node의 특정 버전을 설치합니다.

2. nvm uninstall <version> : node의 특정 버전을 삭제합니다.

3. nvm use <version> : node의 특정 버전을 사용합니다.

4. nvm ls : 시스템에 설치된 모든 node버전의 목록을 보여줍니다.

5. nvm current : 현재 사용중인 node 버전을 확인합니다.

사용예시

C:\WINDOWS\system32>nvm ls  // 목록확인

    18.3.0
    16.15.1
    15.14.0
  * 14.17.3 (Currently using 64-bit executable)
    10.15.3
    10.5.0
    8.10.0

C:\WINDOWS\system32>nvm install 16.18.0  // node 16.18.0 버전 설치
Downloading node.js version 16.18.0 (64-bit)...
Extracting...
Complete


Installation complete. If you want to use this version, type

nvm use 16.18.0

C:\WINDOWS\system32>nvm ls // 다시 목록확인

    18.3.0
    16.18.0  // <- 설치됨
    16.15.1
    15.14.0
  * 14.17.3 (Currently using 64-bit executable)
    10.15.3
    10.5.0
    8.10.0

C:\WINDOWS\system32>nvm use 16.18.0 // node 16.18.0  버전을 사용
Now using node v16.18.0 (64-bit)

C:\WINDOWS\system32>nvm current // 현재 사용중인 node 버전 확인 
v16.18.0

yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\yarn.ps1 파일을 로드할 수 없습니다.

JOTOKKI — Fri, 27 Jan 2023 16:11:13 +0900

1. 문제 발생

yarn 으로 스크립트를 실행 하려고 하는데 다음과 같은 에러가 나타났다.

Window 내에서 정책 설정이 제한되어있다면, yarn같은 외부 스크립트가 믿을 만한 스크립트인지 알 수 없기 때문에 실행을 안하는 것이다. 특히, .ps1xml, .psm1을 비롯한 스크립트 파일의 실행을 제한한다.

일반적으로 기본값이 클라이언트용은 Restricted, 서버용은 RemoteSigned로 되어있다고 한다.

2. 해결 방안

windows 에서 스크립트 실행 정책을 변경해준다.

만약 현재 상태가 Restricted로 제한이 되어있다면, yarn 에서 제공 되는 일부 스크립트가 실행이 안되는 듯 하다.

즉, Restricted 를 RemotedSigned 로 변경 해준다면 yarn 도 실행할 수 있다.

// 정책 확인
PS C:\Windows\system32> ExecutionPolicy 
Restricted

// 정책 변경 y 입력 후 Enter 
PS C:\Windows\system32> Set-ExecutionPolicy RemoteSigned
실행 규칙 변경
실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말
항목(https://go.microsoft.com/fwlink/?LinkID=135170)에 설명된 보안 위험에 노출될 수 있습니다. 실행 정책을
변경하시겠습니까?
[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)  [?] 도움말 (기본값은 "N"): Y

// 정책 확인 하면 RemoteSigned로 바뀐것을 확인 할 수 있다.
PS C:\Windows\system32> ExecutionPolicy
RemoteSigned

참조 : https://learn.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.3&viewFallbackFrom=powershell-7.1

React에서 Router state 사용

JOTOKKI — Wed, 18 Jan 2023 19:52:25 +0900

기본 사용법

router에서 navigate로 이동시 state에 객체 형태로 값을 넘겨서 주고 받을 수 있다.

또한 parameter 방식과는 달리 따로 router url 뒤에 값을 설정해주지 않아도 되고,

url에 넘기는 값이 노출 되지 않아서 좋았다.

// 보낼때 
navigate(URL, {state: {id: "user1"}})

// 받을때 
import {useLocation} from "react-router";

const location = useLocation();
const id = location.state ? location.state.id : null; // <= "user1"

기존 목록에서 상세이동할때 요긴하게 쓰긴 했는데,

장점만 있는 것은 아니라서 요구되는 서비스 형태에 맞춰 적절히 잘 (세상에서 제일 어려운.. ) 쓰면 되겠다.

장점

1. url에 값을 노출 시키지 않고 값을 넘길 수 있다.

2. url 끝에 다수가 될 수도 있는 값이 붙지 않기 때문에, 혹시라도 pathname값을 계산해야하는 경우 일관되게 사용할 수 있다.

3. Routes에서 path 값에 별도의 설정없이 바로 쓸 수 있어서 간편하다.

4. 아마.. 그외에도 더 많은 장점이 있을 것이다...

단점

1. url로 바로 접근이 필요한 경우는 넘기는 state값이 없으므로 값을 알 수 없다.

예를들어 링크로만 상세페이지에 접근하는경우, 목록에서 게시글 아이디를 넘긴다고 가정했을때, 넘어가는 아이디 값 없이 바로 상세에 들어가게되면 받은 아이디가 없기 때문에 아무런 정보를 받을 수 없다.

2. 같은 url인 경우 해당값을 useEffect를 통해서 감지해줘야 한다.

리액트 특정 문제점 중에 다른페이지로 이동했을때 기존 스크롤의 위치가 그대로 남아있어서, 모든 페이지를 감싸는 부분에 pathname의 변화를 감지해서 window.scrollTo(0, 0)을 넣어줬었다.

이런 상태에서 게시글 상세의 경우 다음이나 이전 페이지로 넘어가려면 같은 url에 아이디 값만 바뀌는 케이스기 때문에,

전체 선언된 윈도우 스크롤을 상단으로 올리는 스크립트가 먹질 않아, 이럴때는 아이디 값이 결국 state이기 때문에 이를 useEffect로 감지해서 업데이트 해줘야 한다.

React amchart 를 하면서~!

JOTOKKI — Fri, 6 Jan 2023 16:42:37 +0900

버전은 amchart5 로 진행 했다.

많이 쓰는 라이브러리인 만큼 미리 정리를 해두어서 추후에는 같은걸 검색하면서 시간낭비를 하지 않도록 하나씩 나올때마다 정리를 해두어야 겠다.

1. axis의 x, y 컬럼사이즈 조정

데이터는 4개인데, 화면사이즈가 작다보니 amchart에서 자동으로 2개만 label 을 표시하는 현상이 있었다.

예시 화면

그래서 x의 사이즈를 줄이거나 해주는 옵션이 있을꺼 같아서 열심히 width나 min, max 를 열심히 찾아보았는데,

정답은 render를 할때 최소 grid distance 값을 조정해주면 되었다~

x뿐만아니라 y의 값을 조정하고 싶으면 마찬가지로 y의 데이터를 만들때 같은 옵션값을 넣어주면 된다~

let xAxis = chart.xAxes.push(
    am5xy.CategoryAxis.new(root, {
        renderer: am5xy.AxisRendererX.new(root, {
            minGridDistance: 25, // <- 25면 100/25 의 값만큼 보여준다.(즉, 25면 총 4개)
        }),
        categoryField: "name",
    })
);

2. label의 사이즈조정, 높이 조정

사이즈의 경우 theme을 따로 적용 시켰는데, theme을 따로 적용 하지 않고 바로 옵션을 적용 할 수 있는 방법이 있는지는 모르겠다. theme을 적용시키려면, 불러온 am5에서 Theme을 따로 불러와 변수에 선언하고 그안에서 조정하고자 하는 값을 set을 통해 적용 시켜주면 된다.

(참조: https://www.amcharts.com/docs/v5/concepts/themes/ )

let myTheme = am5.Theme.new(root); // theme 선언
myTheme.rule("Label").set("fontSize", "0.8em"); // label 폰트 크기 조정

axis X의 label 이 너무 붙어있어서 아래로 좀 띄고 싶었는데,

이때는 별도 theme적용 없이 바로 labels에 접근하여 setting을 해주었다.

xAxis.get("renderer").labels.template.setAll({
    paddingTop: 20
});

결과 이미지

이렇게 해서 원하는 모양의 차트를 만들 수 있었다.

리액트에서 차트를 적용하는 부분은 따로 정리해서 나중에 포스팅 해볼까 한다~

일부 내용을 더 추가 하려고 한다.

차트를 클릭했을때 동작하는 모션을 없애고자 찾아봤다.

ref: https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/pie-series/

Disabling pull-out 부분을 보면 되는데,

toggleKey값을 none으로 바꿔주면 된다. (기본은 true 설정 되어있다.)

series.slices.template.set("toggleKey", "none");

그리고 클릭시 pull-out되는 사이즈를 조정하고 싶다면

pieSeries.slices.template.states.create("active", {
	shiftRadius: 10, // <- 기본이 20정도인것같다. 
});

다음과 같이 조정하면 된다.

screenOptions로 헤더 꾸미기

JOTOKKI — Sat, 30 Jul 2022 23:51:23 +0900

react-router로 구조를 짜고 나면 자동으로 헤더에 name이 들어가 있고 기본적으로 흰색에 검은 글씨로 되어있다.

이를 커스텀하기 위해 screenOption값을 넣어줄 수 있다.

공통으로 처리하려면 Stack.Navigator에 일괄로 처리할 수 있고,

같은 navigator에 있는 screen들을 group으로 묶어서 따로 처리해 줄 수 도 있다.

1. 공통으로 옵션 주기

title을 옵션에 넣게 되면, HomeStack.Screen 안에 name 대신 HomeStack.Navigator 안의 title을 보여준다.

스타일은 headerStyle 안에 작성해 주면 된다.

<NavigationContainer>
    <HomeStack.Navigator
        screenOptions={{
            title: 'Fruits zone  ',
            headerStyle: {
                backgroundColor: 'lightgreen'
            }
        }}
    >
        <HomeStack.Screen name="Home" component={Home} />
        <HomeStack.Screen  name="ReviewDetails" component={ReviewDetails} />
    </HomeStack.Navigator>
</NavigationContainer>

적용된 Home 화면

적용된 ReviewDetails 화면

2. 페이지별로 각각 주기

페이지별로 각각 커스텀을 하고 싶다면 Stack.Group을 사용하여 각각 묶을 수 있다.

<NavigationContainer>
    <HomeStack.Navigator>
        <HomeStack.Group 
            screenOptions={{
                title: 'Fruits List  ',
                headerStyle: {
                    backgroundColor: 'lightgreen'
                }
            }}
        >
            <HomeStack.Screen name="Home" component={Home} />
        </HomeStack.Group>
        <HomeStack.Group
            screenOptions={{
                title: 'Fruits Details  ',
                headerStyle: {
                    backgroundColor: 'lightyellow'
                }
            }}
        >
            <HomeStack.Screen 
                name="ReviewDetails" 
                component={ReviewDetails} 

            />
        </HomeStack.Group>
    </HomeStack.Navigator>
</NavigationContainer>

적용된 Home 화면

적용된 ReviewDetails 화면

headerStyle에 높이도 적용할 수 있다.

글자색은 headerStyle에 들어가지 않고 따로 옵션으로 headerTintColor안에 넣는다.

{...}
<HomeStack.Group
    screenOptions={{
        title: 'Fruits Details  ', // 페이지 이름
        headerTintColor: 'brown', // 텍스트 컬러
        headerStyle: {
            backgroundColor: 'lightyellow', // 배경색 
            height: 120, // 높이
            
        }
    }}
>
{...}

React Router

JOTOKKI — Tue, 19 Jul 2022 23:41:57 +0900

- react navigation: https://reactnavigation.org/docs/getting-started/

- 다음 버전을 사용하였습니다.

"@react-navigation/native": "^6.0.11",
"@react-navigation/stack": "^6.2.2",

리액트 네이티브에서 사용하는 react-navigation은 stack 방식을 사용한다.

stack 방식은 클릭을 했을때 화면이 하나씩 stack에 쌓이는데 그중 최상위 것을 보여주는 방식이다.

그리고 back 버튼을 누르면 최상단의 화면을 제거하므로써 이전 화면을 보여준다.

나름이해가 쉽게 그려보았다.

* 설치

expo install @react-navigation/native
expo install @react-navigation/stack

1. 화면 이동하기

Home 과 Detail 페이지 이동하기

createStackNavigator() 로 Stack을 생성한다.

Stack.Navigator 안에 Stack.Screen을 사용하여 연결할 screen을 생성한다.

Stack.screen에 name 에 URL을 넣고 component를 연결한다.

화면에서 props으로 navigation을 받을 수 있다.

console로 어떤 값이 넘어오는지 확인해보면 다양한 기능들이 있다.

navigate(url) 을 통하여 url로 상세페이지로 이동 할 수 있고,

상세 화면에서는 goBack()을 사용하여 다시 Home 페이지로 돌아갈 수 있다.

참고로 navigate 대신 push를 사용해도 좋다.

navigate와 goBack도 같이 쓸수 있지만, 위의 그림처럼 navigate는 위로 페이지를 새로 쌓는방식일 것 같고, goBack은 최상단 페이지를 없애는 방식일 것 같다. (정확히 소스를 분석해보거나 테스트를 해보지 않아서 100% 확실하지는 않다! )

navigation >>  Object {
  "addListener": [Function addListener],
  "canGoBack": [Function canGoBack],
  "dispatch": [Function dispatch],
  "getId": [Function getId],
  "getParent": [Function getParent],
  "getState": [Function anonymous],
  "goBack": [Function anonymous],
  "isFocused": [Function isFocused],
  "navigate": [Function anonymous],
  "pop": [Function anonymous],
  "popToTop": [Function anonymous],
  "push": [Function anonymous],
  "removeListener": [Function removeListener],
  "replace": [Function anonymous],
  "reset": [Function anonymous],
  "setOptions": [Function setOptions],
  "setParams": [Function anonymous],
}

// HomeNavigator.js
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';

// components
import Home from "../screens/Home";
import ReviewDetails from '../screens/ReviewDetails'

const HomeStack = createStackNavigator()

export default function HomeNavigator() {
    return(
        <NavigationContainer>
            <HomeStack.Navigator>
                <HomeStack.Screen name="Home" component={Home} />
                <HomeStack.Screen name="ReviewDetails" component={ReviewDetails} />
            </HomeStack.Navigator>
        </NavigationContainer>
    )
}

// Home.js
import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useState } from 'react'
import { globalStyles } from '../styles/global'

export default function Home({ navigation }) {
  const pressHandler = () => {
    navigation.navigate('ReviewDetails')
    // navigation.push('ReviewDetails')
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
      <Button title='Go to review2' onPress={pressHandler} />
    </View>
  )
}

import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useEffect } from 'react'

export default function ReviewDetails({navigation}) {

  const pressHandler = () => {
    // navigation.navigate('Home')
    navigation.goBack()
  }
  
  return (
    <View style={styles.container}>
      <Button title="Go back to Home" onPress={pressHandler} />
    </View>
  )
}


const styles = StyleSheet.create({
    container: {
        padding: 24
    }
})

페이지 이동

2. 페이지에서 파라미터로 데이터 받기

화면에서 props으로 navigation를 받아서 페이지 이동하는 함수를 쓸 수 있었는데,

비슷하게 route를 props으로 받아서 data를 전달 할 수도 있다.

FlatList 에 item을 클릭시 상세 페이지로 이동하면서 데이터를 같이 넘겨 보았다.

// Home.js
import { StyleSheet, View, Text, Button, FlatList, TouchableOpacity } from 'react-native'
import React, { useState } from 'react'
import { globalStyles } from '../styles/global'

export default function Home({ navigation }) {

  const [reviews, setReviews] = useState([
    { title: 'Apple', rating: 5, body: 'Apple is yam', key: '1' },
    { title: 'Banana', rating: 3, body: 'Banana is sweet', key: '2' },
    { title: 'Orange', rating: 2, body: 'Orange is great', key: '3' },
  ])

  const pressHandler = () => {
    navigation.navigate('ReviewDetails')
    // navigation.push('ReviewDetails')
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
      <Button title='Go to review2' onPress={pressHandler} />
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          // navigate('link', obj) 2번째 파라미터로 오브젝트를 보낼수 있다. 
          <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
            <Text
               style={globalStyles.titleText}
            >{item.title}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  )
}

import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useEffect } from 'react'

export default function ReviewDetails({route, navigation}) {

  const {title, body, rating} = route.params

  const pressHandler = () => {
    // navigation.navigate('Home')
    navigation.goBack()
  }

  return (
    <View style={styles.container}>
      <Text>{title}</Text>
      <Text>{body}</Text>
      <Text>{rating}</Text>
      <Button title="Go back to Home" onPress={pressHandler} />
    </View>
  )
}


const styles = StyleSheet.create({
    container: {
        padding: 24
    }
})

목록 클릭 상세이동

다음과 같이 구현할 수 있다!

* 번외

그리고 강의를 보다보면

그리고 react-navigation/stack 를 같이 설치해 주는데, 이는 공식문서에 따르면 stack의 최상위 있는 컴포넌트간의 스크린 전환을 위해 사용되는 듯하다. (Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.)

- react-navigation/stack : https://reactnavigation.org/docs/stack-navigator/

[expo] 웹폰트 webfont 적용하기

JOTOKKI — Mon, 18 Jul 2022 21:45:30 +0900

사실 expo 공식 문서에 다 나와있다. 근데 공식문서 뒤지기도 귀찮으니 정리해 두기로 했다.

공식 문서 url : https://docs.expo.dev/guides/using-custom-fonts/

1. 설치

@expo-google-fonts/inter 를 먼저 설치해 준다.

$ expo install expo-font @expo-google-fonts/inter

2. 적용할 폰트 찾기

https://fonts.google.com/ 사이트에 들어가서 원하는 폰트를 찾고 다운로드한다. 혹은 이름만 알아도 되는 모양이다.

나는 눈에 띄게 비교하기 위한 폰트를 찾았다. "Edu SA Beginner" 라는 글씨체를 찾았다.

폰트 예시

3. App에 component가 render되기전에 적용하기

import { useFonts } from 'expo-font 를 통해 useFont를 불러온 뒤 font load가 되기전엔 statusbar를 띄워주고,

다 불러와졌다면 컴포넌트를 render 한다.

import React from 'react';
import { Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useFonts } from 'expo-font';
import Home from './screens/Home'

export default props => {
  let [fontsLoaded] = useFonts({
    'Edu-SA-Beginner-regular': require('./assets/fonts/EduSABeginner-Regular.ttf'),
    'Edu-SA-Beginner-medium': require('./assets/fonts/EduSABeginner-Medium.ttf'),
    'Edu-SA-Beginner-bold': require('./assets/fonts/EduSABeginner-Bold.ttf'),
    'Edu-SA-Beginner-semibold': require('./assets/fonts/EduSABeginner-SemiBold.ttf')
  });

  if (!fontsLoaded) {
    return <StatusBar />;
  }

  return (
    <Home/>
  );
};

4. component에서 써보기

이렇게 불러오고나면 전역으로 사용할 수 있다.

사용법은 그냥 기존처럼 fontFamily에 사용하면된다.

// Home.js
import { StyleSheet, View, Text } from 'react-native'
import React, { useState } from 'react'


export default function Home() {
  return (
    <View>
      <Text style={{fontFamily: 'Edu-SA-Beginner-semibold'}}>Home</Text>
      <Text>Home</Text>
    </View>
  )
}

적용 완료된 화면

잘 적용된것을 알 수 있다.

TextInput 입력시 Keyboard 창 닫기

JOTOKKI — Sat, 16 Jul 2022 22:59:16 +0900

입력을 해야하는 화면에서 TextInput에 focus 가 되면

자동으로 Keyboard가 올라오는데, 아무곳이나 클릭했을때 이를 다시 내려가게 하고싶다.

TouchableWithoutFeedback, Keyboard 를 사용하여 간단하게 구현할 수 있다. \

해당 부분을 내리고 싶다!

TouchableWithoutFeedback 태그로 전체 영역을 감싼되 onPress 함수에 Keyboard.dismiss() 함수만 호출하면 간단하게 해제된다.

예제코드)

return (  
    <TouchableWithoutFeedback onPress={() => {
      console.log('dismissed keyboard')
      Keyboard.dismiss()
    }}>
      <View style={styles.container}>
        <Header/>
        <TextInput
            style={styles.input} 
            placeholder='Write something...'
            onChangeText={chageHandler}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}

생각보다 정말 간단하다.

습관적으로 javascript로만 해결하려고 했는데... 그냥 웬만하면 다 불러오면 된다. 허허 머쓱코쓱

expo로 시작할때 기본 설지 목록 정리

JOTOKKI — Sat, 9 Jul 2022 23:42:21 +0900

최근에 리액트 네이티브 공부도 시작했다.

아직 초반이라 해매는 중이지만 하나씩 정리하려고 한다.

기본

현재 디렉터리에 설치하는 경우 디렉터리명 대신 . 를 사용한다.

 expo init (디렉터리명)
 expo init .

네비게이션

## react navigation : https://reactnavigation.org/

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context ( for expo )

- stack

npm install @react-navigation/stack
npm install react-native-gesture-handler

## icons : https://www.npmjs.com/package/@expo/vector-icons

npm i @expo/vector-icons

[React-native] While trying to resolve module `idb` from file ...

JOTOKKI — Sat, 18 Jun 2022 23:18:45 +0900

firebase 연동 후 실행시 이런 에러가 발생하였다.

While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved

firebase 버전 문제인것 같다.

@9.6.11로 재설치 해주니 에러가 사라졌다.

npm uninstall firebase
npm install firebase@9.6.11

재설치 후 재실행 해주면 된다.

TODOLIST 만들기 step by step - Vanilla JavaScript

JOTOKKI — Fri, 11 Mar 2022 20:15:36 +0900

본 포스팅은 javascript에 입문하고자 하려고 할때 가볍게 학습 할 수 있도록 나름의 커리큘럼을 짜본 것입니다.

todo-list 프로젝트는 다른 게시글이나 유투브에도 많이 나와있기는 하지만, 초보자가 좀 더 접근하기 쉽도록 순차적으로 진행 과정을 쪼개 보았습니다.

순서

1. 글 추가하기

2. 글 삭제하기

3. 글 수정하기

4. localStorage에 저장하기

* html과 css는 대충 만들어 놓았습니다. (정말 대충 ㅎ..)

이 소스를 다운받아 시작하면 됩니다.

1-initial.zip

0.00MB

기능 목록을 참조하여 미리 소스를 만들어본 뒤, 완성된 소스와 비교해 보세요!

1. 글 추가하기

구현할 기능 목록

- input 입력 후 "ADD" 버튼 누르면 하단에 추가
- input 이 빈값인 경우 "ADD" 버튼 클릭시 "값을 입력하세요!" alert을 띄운 후 input으로 focus
- 목록에 아무것도 없을때는 "데이터가 없습니다" 출력

▶ 소스보기

우선 html 내에 todo_item은 더이상 필요가 없으니 주석 처리 하거나, 삭제해 주세요.

javascript 에서 알아서 render를 할 것입니다.

    // index.html
    <div class="wrapper">
        <div class="form">
            <input type="text" class="todo_input">
            <button class="btn_add">ADD</button>
            <button class="btn_clear">CLEAR</button>
        </div>
        <div class="todo_list_wrap">
            <ul class="todo_list">
                <!-- 편집기능 활성화 : todo_item + edit_wrap -->
                <!-- <li class="todo_item ">
                    <div class="edit_wrap">
                        <input type="text" class="edit_input" />
                        <button class="button btn_edit">EDIT</button>
                    </div>
                    <p class="text">
                        Hello world!
                    </p>
                    <button class="button btn_amend">Amend</button>
                    <button class="button btn_delete">Delete</button>
                </li> -->
            </ul>
        </div>
    </div>

우선 상태를 관리한 배열을 하나 생성합니다.

그리고 필요한 변수를 선언합니다.

let listArray = []; // 할일이 담길 배열
const todoList = document.querySelector('.todo_list'); // 배열의 목록을 뿌려줄 부모 
const todoInput = document.querySelector('.todo_input'); // 할일의 내용을 입력하는 input
const btnAdd = document.querySelector('.btn_add'); // 입력 완료후 추가를 하기위한 버튼

그리고 함수 두 개를 만들어줄 텐데 하나는 실제 추가 버튼을 눌렀을때 추가가 이루어지는 함수이고, 다른 하나는 배열에 무언가가 추가되었을때 html에 뿌려주는 함수입니다.

// add list
const addTodo = () => {
	// 할일을 listArray 배열에 추가합니다.
}


// show list
const showList = () => {
	// html에 뿌려줍니다.
}

btnAdd.addEventListener('click', addTodo);

addTodo 에서 만약 input의 value 값이 비어있다면 alert을 띄워준 후 input으로 다시 focus해줍니다.

그리고 다음동작이 하지 않기 위해서 return false를 해줍니다.

만약 비어있지 않다면, listArray에 해당 value값을 push하여 추가해 준 뒤,

input의 value값을 빈값으로 초기화 해줍니다.

우선을 화면을 그리는 함수는 아직 정의가 안되었으므로, console로 배열을 찍어서 확인해 봅시다.

const addTodo = () => {
    const inputValue = todoInput.value; // input의 value값을 가져옵니다
    if(inputValue === "") { // input 의 value 값이 비어있다면
        alert("값을 입력하세요!"); // alert을 띄우고
        todoInput.focus(); // input에 다시 focus를 시켜줍니다.
        return false; // 뒤의 동작을 멈춥니다. 
    }
    
    // 만약 value값이 있다면 
    listArray.push(inputValue);  // listArray에 value값을 추가해 줍니다. 
    // 그리고 input의 값을 비워줍니다. 만약 해주지 않으면 전에 입력한 값이 그대로 남아있게 됩니다.
    todoInput.value = ""; 
    console.log(listArray) // 잘 추가가 되었는지 확인해봅니다!
}

결과화면

아주 잘 되네요. 그러면 실제로 html에 그려줍니다. 전에 주석해놓았던 todo_item 을 그래도 그려줄 건데, 텍스트 대신 데이터를 연결해 줄 것입니다. listArray의 length값을 체크하여 0 인경우는 데이터가 아직 할일 목록이 아무것도 없다는 뜻이니 "데이터가 없습니다"를 출력해 주고, 1개 이상인 경우 데이터를 그려줍니다.

// show list
const showList = () => {
    if(listArray.length > 0) { // 데이터가 0개 이상인 경우 즉, 데이터가 있는 경우
        todoList.innerHTML = ""; // 우선 기존 데이터를 모두 삭제하여 초기화 시켜줍니다. 
        listArray.forEach(function(text, idx){ // 그리고 forEach를 통하여 배열의 개수만큼 그립니다.
            const itemTag = '<li class="todo_item ">' + 
                                '<div class="edit_wrap">' + 
                                    '<input type="text" class="edit_input" value="'+text+'" />' +
                                    '<button class="button btn_edit" onClick="amendTodo('+idx+')">EDIT</button>' +
                                '</div>' +
                                '<p class="text">'+ text +'</p>' +
                                '<button class="button btn_amend" onClick="activeEdit('+idx+')">Amend</button>' +
                                '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
                            '</li>'
            todoList.innerHTML += itemTag // innerHTML로 하나씩 추가하여 그립니다. 
        });
    } else { // 데이터가 없는 경우 
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}

이렇게 한 뒤 추가할때에도 console 대신 showList 함수를 불러오면 됩니다.

* 최종소스

let listArray = [];
const todoList = document.querySelector('.todo_list');
const todoInput = document.querySelector('.todo_input');
const btnAdd = document.querySelector('.btn_add');



// add list
const addTodo = () => {
    const inputValue = todoInput.value;
    if(inputValue === "") {
        alert("값을 입력하세요!");
        todoInput.focus();
        return false;
    }
    listArray.push(inputValue);
    todoInput.value = "";
    showList()
}


// show list
const showList = () => {
    if(listArray.length > 0) {
        todoList.innerHTML = "";
        listArray.forEach(function(text, idx){
            const itemTag = '<li class="todo_item ">' + 
                                '<div class="edit_wrap">' + 
                                    '<input type="text" class="edit_input" value="'+text+'" />' +
                                    '<button class="button btn_edit" onClick="amendTodo('+idx+')">EDIT</button>' +
                                '</div>' +
                                '<p class="text">'+ text +'</p>' +
                                '<button class="button btn_amend" onClick="activeEdit('+idx+')">Amend</button>' +
                                '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
                            '</li>'
            todoList.innerHTML += itemTag
        });
    } else {
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}


btnAdd.addEventListener('click', addTodo);
showList()

2. 글 삭제하기

기능목록

- "Delete" 버튼 클릭 시 해당 아이템 삭제
- "CLEAR" 버튼 클릭 시 모든 아이템 삭제

▶ 소스보기

글 삭제하기는 이미 뿌려주는 기능이 만들어져 있기때문에 좀 더 간단합니다.

클릭했을때 삭제하는 기능, 클릭 했을때 전부 삭제하는 기능 2가지만 추가해 주면됩니다.

이 말은, 하나만 삭제하는 경우 배열에서 해당 글만 배열에서 삭제하고, 모두 삭제하는 경우 배열을 초기화 시켜주면 됩니다.

해당 글을 찾기위해서 id가 필요한데, 여기서는 간단하게 index값을 사용하였습니다.

한 개의 글만 잘라내기 위해 splice 함수를 사용하였습니다.

splice(num1, num2) 은 num1 번째 (0번부터 시작해서 세어야 합니다) 부터 num2 만큼 잘라내겠다는 뜻입니다.

var list = [1, 2, 3, 4, 5]
console.log(list.splice(2, 2)) // 잘려나간 값 [3, 4]
console.log(list) // splice 이후 list 의 값 [1, 2, 5]

* 최종소스

{...}
const btnClear = document.querySelector('.btn_clear'); // 초기화 버튼을 가져옵니다.

{ ... }

// delete todo - 하나만 삭제
const deleteTodo = (idx) => {
    listArray.splice(idx, 1); // 배열중 idx 번째 1개를 잘라 내겠다는 뜻입니다. 
    showList() // 그리고 바뀐 값이 다시 그려질 수 있도록 showList를 호출 합니다.
}

// clear All - 모두 삭제
const clearAll = () => {
    listArray = [];  // 배열을 초기화 시킨 뒤
    showList(); // 바뀐 값이 다시 그려질 수 있도록 showList를 호출 합니다.
}


// show list
const showList = () => {
	// btn_delete 버튼 부분에 onClick 함수를 추가합니다. idx를 파라미터로 넘겨줍니다.
	{...}
         '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
	{...}
        });
    } else {
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}


btnAdd.addEventListener('click', addTodo);
btnClear.addEventListener('click', clearAll); 

showList()

3. 글 수정하기

기능목록

- "Amend" 버튼 클릭 시 edit 화면 출력 및 edit input에 기존 값 출력
- edit input이 빈값인 경우 "edit"버튼 클릭시 "값을 입력하세요!" alert을 띄운후 input으로 focus

참고 이미지

▶ 소스보기

showList 안에 그려주는 태그 안에 btn_amend에 activeEidt함수를 추가하고 idx값을 파라미터로 넘깁니다. 그리고 activeEdit 함수에서는 단순하게 todo_item에 edit_active 클래스를 추가함으로써 편집 화면을 활성화 해줍니다.

실제 수정이 저장 되는 역활을 수행 하는 것은 btn_edit 입니다. 여기에 amendTodo함수를 추가하고 idx를 파라미터로 넘깁니다. 그리고 마찬가지로 splice를 통하여 값을 수정 합니다. 이번에는 3개의 인자를 받는데 마찬가지로 (num1, num2, num3) 이 있을때 num1번째의 값 num2만큼 삭제하고, num3을 추가하겠다는 뜻입니다.

var list = [1, 2, 3, 4, 5]
console.log(list.splice(1, 2, 3)) // 1번째 두개의 값을 삭제하고 3을 넣겠다는 뜻입니다.
console.log(list)

// 결과
[2, 3]
[1, 3, 4, 5]

그리고 마찬가지로 편집화면의 input인 edit_input에도 빈값 처리를 해주면 됩니다.

* 최종소스

{...}

// edit_wrap active : 편집 팝업 활성화 
const activeEdit = (idx) => {
    const items = document.querySelectorAll('.todo_item');
    const item = items[idx];
    item.classList.add('edit_active');
}

// 실제 수정 하는 함수 
const amendTodo = (idx) => {
    const items = document.querySelectorAll('.todo_item');
    const item = items[idx];
    const newInput = item.querySelector('.edit_input');
    const newValue = newInput.value;

    if(newValue === "") {  // 빈값인 경우 체크!
        alert("값을 입력하세요");
        newInput.focus();
    } else {
        listArray.splice(idx, 1, newValue); // idx번째 1개의 값을 newValue로 교체
        item.classList.remove('edit_active'); // 그리고 자동으로 edit 화면을 종료합니다.
        showList(); // 다시 그려주면 수정된 내역이 반영됩니다!
    }
}


// show list
const showList = () => {
    if(listArray.length > 0) {
        todoList.innerHTML = "";
        listArray.forEach(function(text, idx){
            const itemTag = '<li class="todo_item ">' + 
                                '<div class="edit_wrap">' + 
                                    '<input type="text" class="edit_input" value="'+text+'" />' +
                                    '<button class="button btn_edit" onClick="amendTodo('+idx+')">EDIT</button>' +
                                '</div>' +
                                '<p class="text">'+ text +'</p>' +
                                '<button class="button btn_amend" onClick="activeEdit('+idx+')">Amend</button>' +
                                '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
                            '</li>'
            todoList.innerHTML += itemTag
        });
    } else {
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}


btnAdd.addEventListener('click', addTodo);
btnClear.addEventListener('click', clearAll);

showList()

이렇게 하면 배열로 데이터를 관리할 수 있는 Vanila JavaScript 로 만든 소스가 완성 되었습니다.

메타마스크 테스트 네트워크 활성화 + 테스트 이더리움 받기 (Ropsten)

JOTOKKI — Sat, 12 Feb 2022 18:34:20 +0900

처음 메타마스크를 설치하면 "이더리움 메인넷" 이외에 다른 테스트넷이 나타나지 않습니다.

테스트넷을 활성화 해줘야지 나타납니다.

설정 > 고급 > Show test networks 를 활성해 해주면 됩니다.

Microsoft Azure 간단 세팅

JOTOKKI — Sat, 22 Jan 2022 12:19:17 +0900

리액트에서 강의를 듣던중 azure 는 처음 써봐서 간단하게 세팅하는법을 정리해 보았습니다.

(클라우드상에서 서버 세팅은 처음이라 혹시 잘못된 점 있으면 지적좀요.. )

생각보다 어렵지 않고 클릭 몇 번으로 세팅해주면 되네요.

무료 체험계정을 생성해서 하였습니다.

github 계정으로도 생성이 되서 계정가입하는것도 쉽지만, 역시나 신용카드 등록 절차를 진행해야하며

12개월 동안 별도 비용없이 제공되는 서비스와 200달러 크레딧을 사용할 수 있다고 하네요.

무료체험계정생성은 여기서하면 되고

계정생성 후 vm생성은 여기서 하면 되는 것 같아요.

우선 가상머신을 추가하기 위해 시작을 누르고 원하는 소프트웨어 검색 후 클릭합니다.

저는 강의를 보면서 진행했던거라서 Window 10으로 진행했습니다.

azure vm 생성하기01

azure vm 생성하기02

이렇게 만들기를 누르면 기본사항을 설정 하는 화면이 나타납니다.

여기에 리소스 그룹 이름에서 새로만들기를 클릭한 후 원하는 이름을 적어주고,

가상머신이름, 사용자이름, 암호, 인바운드포트 설정까지 해준뒤

하단에 라이선싱 이라고 되어있는 부분 체크를 클릭한뒤

"검토 + 만들기" 버튼을 클릭해 주면 됩니다.

azure vm 생성하기03

그러면 설정된 정보와 함께 완료 페이지가 나타납니다.

생성 되는 시간은 좀 걸릴수도 있으니 기다리시면 됩니당.

알림으로 남은 크레딧도 체크해 주네요.

azure vm 생성하기04

이제 우리가 만든 가상 컴퓨터에 접속을 해보자.

방금 만든 가상머신을 클릭하면 상단에 연결 버튼이 있다.

RDP로 연결을 해준다.

connect

그리고 RDP 파일을 다운받는다.

다운받은 후 실행 시켜주면

아까 설정한 사용자이름과 비밀번호를 입력해주고 진행 한다.

그러면 우리가 만든 가상머신이 실행된다! : )

옛날에 VMware 설치해서 OS 이미지 파일 구해서 설치 하고 난리(?) 쳤던거에 비하면 정말 간편한것같다.

[React, css] textarea 사용시 여러가지 처리

JOTOKKI — Sun, 26 Dec 2021 20:17:50 +0900

다양한 입력폼을 다룰때 input말고도 textarea도 상당히 많이 다루는 편인데,

textarea도 input과 별개로 은근히 많은 커스텀을 해줘야 합니다.

기본 textarea 같은 경우 resize 옵션이 기본으로 들어가 있고,

input과 달리 textarea 는 여러 줄의 글을 길게 입력하는데 사용되기 때문에,

출력시에도 따로 처리를 해줘야합니다.

1. textarea resize 사용하지 않기

2. textarea placeholder 에서 줄바꿈 처리하기

3. textarea 에서 tab 사용하기

1. 기본 소스

- JSX

import { useState } from 'react'
import './app.css'

function App() {

  const [textValue, setTextValue] = useState("");
  const handleSetValue = (e) => {
    setTextValue(e.target.value);
  };

  return (
    <div className="app">
      <textarea
        placeholder="여기에 입력하세요"
        value={textValue}
        onChange={(e) => handleSetValue(e)}
      ></textarea>
      <hr />
      <p className="paragraph">{textValue}</p>
    </div>
  );
}

export default App;

- CSS

.app {
    padding: 10px
}

textarea {
    width: 250px;
    height: 200px;
  }

placeholder, 입력 값, 출력 값

2. textarea resize 사용하지 않기

기본으로 마우스 드래그로 textarea의 사이즈를 자유롭게 조절 할 수 있는 옵션이 있습니다.

이는 css 로 간단하게 처리할 수 있습니다.

textarea { resize: none; }

3. textarea placeholder 에서 줄바꿈 처리하기

placehoder 에서 여러 줄로 표시를 하고 싶다면 특수문자를 표현하는 코드를 추가해주면됩니다.

정확한 차이는 모르겠으나,  혹은 
 또는 두개를 같이 입력해줘도 먹힙니다.

 <textarea placeholder="여기에&#13;&#10;입력하세요"></textarea>

4. textarea 에서 tab 사용하기

textarea에서 tab을 입력하게 되면 일반적으로 다음 Element로 focus 가 넘어가 버리기때문에 tab입력이 불가합니다.

이를 구현하기 위해 keyCode값을 받아 9(tab의 keyCode값)인 경우 기본 기능인 다음 Element에 포커스 이동을 방지처리를 해준 뒤, select가 된 시작점과 끝점을 구해 그 사이에 "\t" 값을 넣어주면 됩니다.

\t를 입력하는것이 tab을 입력하는 것과 같은 처리를 해준다고 보면 됩니다.

※ 참고로 keyCode값은 onChange로 받지 않고 onKeyDown으로 받습니다.

로직을 정리해 보면 다음과 같습니다.

1. 포커스 기능 방지

 e.preventDefault();

2. selection 기준으로 시작과 끝 구하기

let start = e.target.selectionStart;
let end = e.target.selectionEnd;

3. \t 삽입하기

value = val.substring(0, start) + "\t" + val.substring(end);

해당 코드는 React에서 구현되었지만, javascript나 jquery로 구현할때도 똑같은 원리입니다.

4. 출력시 \t, \n 처리하기

이렇게 입력시 따로 처리를 해도 출력시에는 모두 무시된 채로 출력되는 경우가 있습니다.

이는 일일이 split을 하여 코드를 삽입하는 경우도 있지만 css를 통해 쉽게 처리할 수 있습니다.

white-space: pre-wrap;

결과화면

결과코드

[React Error] Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.

JOTOKKI — Sun, 12 Dec 2021 16:16:53 +0900

가끔 아무것도 안하고 npx로 리액트 설치 후 npm start를 하면 이런 에러가 난다.

Would you like to run the app on another port instead? ... yes
Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! memory-game@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the memory-game@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\userName\AppData\Roaming\npm-cache\_logs\2021-12-09T06_17_48_232Z-debug.log
PS D:\personal\!_study\netninja_memoryGame\memory-game>

바보같고 어이없게도 경로에 !(exclamation) 가 들어가 있으면 에러가 나는데

사실 전에도 같은 에러에 당황했었는데..

포스팅 하기엔 너무 어이가 없는 내용이지만,

반복되는 실수에 그냥 기록에 남겨두기로 했다!

아무튼 그래서 해결책은 경로에 !를 삭제하면 된다!

나 자신이외에 클릭 하면 .. ! (feat. 셀렉트 박스 커스텀 연장선)

JOTOKKI — Fri, 22 Oct 2021 13:10:01 +0900

기존에 포스팅되었던 글 중 select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript)

자신을 제외한 다른 부분을 클릭할 때 닫히게 하려면 어떻게 해야 하는지 질문을 주셔서 따로 다루면 좋을 것 같아 새로 포스팅을 해봅니다.

꼭 SelectBox에만 사용되는게 아니니 알아두면 좋을 것 같습니다.

참고로 여기서 지칭하는 selectbox는 html 태그가 아니라 div로 커스터마이징 된 selectbox를 의미합니다.

기존 소스를 보시면 이해하기 더 편하실 꺼예요.

원리는 window 자체에 addeventListener를 등록하고 클릭된 event 값을 받아서 비교를 합니다.

그리고 클릭된 event.target이 Select 자신인지 아닌지 비교한 뒤 본인이 아니면 Select를 닫아주면 됩니다.

1. window 에 addeventListener 걸기

window.addEventListener('click', e => 비교해서닫을함수(e))

2. 비교해서 Select를 닫아주는 함수 만들기

e.target 에서 class값을 가져와 label이나 optionItem 을 클릭하는경우는 닫히면 안되니까 이 두가지가 아닌 경우에만 무조건 Select를 닫아주면 됩니다.

const handleClose = e => {
    // select 가 아닌경우 닫기 
    if(!e.target.classList.contains('label') && !e.target.classList.contains('optionItem')) {
        label.forEach(function(lb){
            lb.parentNode.classList.remove('active')
        })
    } 
}

PLUS. 멀티 selectbox에서 나 자신이 아닌 경우에 닫기

추가적으로 selectbox가 여러개인경우의 소스 코드도 추가됬었는데,

이때 selecbox를 열어놓은 상태로 다른 selectbox를 클릭했을때 다른 열려 있는 selectbox를 닫아주는 코드를 더 추가해보았습니다. label을 forEach로 돌려 클릭된 label이 아니면 부모를 찾아 active 클래스를 제거합니다.

const clickLabel = (lb, optionItems) => {

    // ****************** 추가된 부분 START
    // 내가 아닌 다른 select 닫기 
    label.forEach(function(itemLb){
        if(lb !== itemLb) {
            itemLb.parentNode.classList.remove('active')
        }
    })
    // ****************** 추가된 부분 END

    if(lb.parentNode.classList.contains('active')) {
        lb.parentNode.classList.remove('active');
        optionItems.forEach((opt) => {
            opt.removeEventListener('click', () => {
                handleSelect(lb, opt)
            })
        })
    } else {
        lb.parentNode.classList.add('active');
        optionItems.forEach((opt) => {
            opt.addEventListener('click', () => {
                handleSelect(lb, opt)
            })
        })
    }
}

최종코드

props로 전달되는 텍스트 라인 줄바꿈 처리는 2가지 방법 !

JOTOKKI — Thu, 26 Aug 2021 21:23:57 +0900

개발을 하다 보면 props로 전달받은 텍스트의 줄 바꿈을 해야 하는 경우가 종종 있습니다.

매번 까먹으니 정리해 놓으려고 합니다.

먼저 텍스트를 입력받아 뿌려주는 초 간단 컴포넌트를 만들어 보겠습니다.

const Item = ({ text }) => {
  return <p>{text}</p>;
};

export default function App() {
  return (
    <div className="App">
      <Item text={"안뇽하세요"} />
    </div>
  );
}

여기에서 text에 줄바꿈이 들어간 텍스트를 입력하려고 할 때

아마 br태그를 사용하거나 '\n'를 사용하여 줄바꿈을 시도하실 수 있을 것 같습니다.

하지만 예상과는 달리 그대로 출력해 보면 문자로 출력돼 버리는 것을 알 수 있습니다.

결과 화면

왜 이런 문제가 생기는 걸까요?

이리저리 테스트 해본 결과 value의 값이 String과 섞이게 되면 String 타입으로 반환되는 것처럼 보입니다.

마치 javascript에서 123(숫자) + 'hello'(문자열) = 123hello(문자열) 이 되어버리는 것처럼 말이에요. 결국에는 React도 javascript니까요! (개인적인 의견입니다)

참고로 prop에 태그만 보낼 경우에는 잘 동작됩니다.

결과 화면

그럼 이런 문제를 해결하기 위해 어떤 방법들이 있는지 살펴보겠습니다.

1. replace로 문자 치환 하기

\n이나 <br/>과 같은 문자를 태그로 치환해 주는 방식입니다.

받는 자식 요소에서 props를 받아 return 할 때 처리해 줍니다.

const Item = ({ text }) => {
  return <p>
    {text.split("\n").map((txt) => (
        <>
          {txt}
          <br />
        </>
      ))}
  </p>;
};

export default function App() {
  return (
    <div className="App">
      <Item text={"내 이름은 \n 고길동"} />
    </div>
  );
}

결과 화면

잘 적용되는 것을 확인할 수 있습니다.

2. 배열 사용하기

아니면 값을 넘길 때 문자열을 타입별로 배열에 담아 보내줍니다.

const Item = ({ text }) => {
  return text;
};

export default function App() {
  return (
    <div className="App">
      <Item text={["안녕", <br />, "친구들"]} />
    </div>
  );
}

결과 화면

역시 잘 동작합니다!

자주 사용되고 유연한 컴포넌트를 만들기 위해서는 첫 번째 방법이 좀 더 적합해 보입니다.

간혹 특정 한 군데에만 국한되어 사용되는 경우 두 번째 방법은 직접 컴포넌트를 건드리지 않고 해결할 수 있어 한 번 쓰이는 경우에 사용하면 좋겠네요.

폰트를 한글과 영어,숫자 따로 적용하기 (feat. unicode-range)

JOTOKKI — Mon, 19 Jul 2021 16:27:30 +0900

참조1: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
참조2: https://www.fileformat.info/info/unicode/char/26/index.htm

유니코드문자표: https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_2000~2FFF

프로젝트를 하다 보면 이런 경우가 있습니다.

한글을 나눔고딕으로 해주시고, 영문,숫자는 OpensSans로 해주세요!

아무것도 모르던 시절에는 숫자마다 클래스를 주어 font를 다르게 적용시켰습니다.

하지만 정말 쉬운 방법이 있었더리구요!

바로 unicode-range를 지정하는 방법입니다.

unicode-range 는 CSS 디스크립터(discriptor)로써,
@font-face로 정의된 폰트를 특정 character의 범위를 지정해줄 수 있습니다.

딱 한 단어에 속하는 유니코드도 지정해 줄 수 있습니다.
예를 들어 U+26(U+0026) 같은 경우는 특수 문자 '&'를 나타내는데,
이를 unicode-range에 지정해 준다면, &만 @font-face로 정의된 폰트가 적용됩니다.

범위를 지정하고싶다면, U+0025-00FF이런식으로 - 를 통해 start-end를 지정해 줄 수 있습니다.
여기서는 U+0025 부터 U+00FF 까지를 의미하는걸로 보아 - 이후에 오는 유니코드에는 U+를 생략 하는걸로 보입니다.

예를들어보겠습니다.

확연한 차이를 위해 한글폰트를 조선체로 해보겠습니다.

<p>안녕하세요 나&&&&너</p>

@font-face {
    font-family: 'ChosunCentennial';
    src: url(../fonts/ChosunCentennial/ChosunCentennial.eot);
    src: url(../fonts/ChosunCentennial/ChosunCentennial.eot?#iefix) format('embedded-opentype'),
         url(../fonts/ChosunCentennial/ChosunCentennial.woff) format('woff'),
         url(../fonts/ChosunCentennial/ChosunCentennial.ttf) format('truetype');
         unicode-range: U+AC00-D7A3;
        }

@font-face {
    font-family: 'OpenSans';
    src: url(../fonts/OpenSans/OpenSans-Regular.eot);
    src: url(../fonts/OpenSans/OpenSans-Regular.eot?#iefix) format('embedded-opentype'),
         url(../fonts/OpenSans/OpenSans-Regular.woff) format('woff'),
         url(../fonts/OpenSans/OpenSans-Regular.ttf) format('truetype');
         unicode-range: U+26;
}


body {
    font-size: 35px;
    font-family: 'ChosunCentennial', 'OpenSans';
}

* {
    font-family: inherit;
}

이렇게 해주면 한글(U+AC00-D7A3)은 ChosunCentennial체가 적용되고,

특수기호 &(U+26)만 OpenSans로 적용됩니다.

결과화면

* 자주 사용할 만한 유니코드 범위

한글 범위:  U+AC00-D7A3
영어 대문자 범위 :  U+0041-005A
영어 소문자 범위 :   U+0061-007A
숫자 범위 : U+0030-0039
특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

위의 코드를 활용하여 다양하게 범위를 지정하여 폰트를 줄 수 있다!

하나씩 나타나는 퀵 메뉴 만들기 (SCSS & CSS)

JOTOKKI — Mon, 12 Jul 2021 14:50:50 +0900

클릭했을 때 하위 메뉴가 하나씩 나타나는 사이드 메뉴를 만들어 보겠습니다.

결과 화면

구조 잡기

첫 번째는 메뉴들이 TOP에서 50픽셀 정도 위로 가있고 opacity가 0이라 영역은 있지만 보이지 않는 상태입니다.

만약 display none을 하고 싶다면 활성화할 때에는 display block 후 top과 opacity의 값을 바꾸도록 해야 모션이 적용됩니다.

두 번째는 첫 번째 메뉴에 서브 메뉴들이 겹쳐있는데 하위 메뉴를 감싸고 있는 메뉴의 zIndex가 낮아야 합니다. 그래야 뒤로 가려져 보입니다. 그리고 활성화가 되면 각 메뉴별로 left값을 주면 됩니다.

먼저 마크업을 해보겠습니다.

<div class="wrap">
	<div class="menu">
		<button class="menuItem">Menu</button>
		<ul class="submenu">
			<li class="subItem"><a href="#">sub1</a></li>
			<li class="subItem"><a href="#">sub2</a></li>
			<li class="subItem"><a href="#">sub3</a></li>
			<li class="subItem"><a href="#">sub4</a></li>
		</ul>
	</div>
	
	<hr style="margin:20px 0; "/>

	<div class="menu2">
		<button class="menuItem">Menu2</button>
		<ul class="submenu2">
			<li class="submenu2Item"><a href="#">sub1</a></li>
			<li class="submenu2Item"><a href="#">sub2</a></li>
			<li class="submenu2Item"><a href="#">sub3</a></li>
			<li class="submenu2Item"><a href="#">sub4</a></li>
		</ul>
	</div>
</div>

사실 저렇게 굳이 submenu를 한 번도 감싸주지 않아도 되지만, 수정과 변화가 많은 프로젝트들을 하다 보니 자연스럽게 그룹으로 되어있는 것은 꼭 한 번씩 감싸주게 되더라고요.

스크립트는 간단하게 부모에게 active 클래스를 toggle 시켜주는 거라 어렵진 않습니다.

let items = document.querySelectorAll('.menuItem');
items.forEach(function(item){
	item.addEventListener('click', function(){
		let parent = item.parentNode;
		if(parent.classList.contains('active')) {
			parent.classList.remove('active');
		} else {
			parent.classList.add('active');
		}
	})
})

그리고 스타일을 작성해보겠습니다.

SCSS를 사용해서 작성하였고, SASS환경이 아닐 수 도 있어서 CSS도 같이 올립니다.

$size: 50px;
@function submenuWidth(){
    @return $size + 10px;
};
@function getLeft($index){
    @return ($index - 1) * ($size + 10);
};
@function getDelay($index) {
    @return ($index / 10) + s;
};
/* 여기는 중요하지 않아요 start */
*,
body { margin: 0; padding: 0; font-size: 13px; color: #333; font-family: "나눔고딕", NanumGothic;}
a { display: block; text-decoration: none; color: #333; width: inherit; height: inherit;}
ul { list-style-type: none;}
button { border: 0 none; cursor: pointer;  }
.wrap { width: calc(100% - 100px); margin: 50px;}
/* 여기는 중요하지 않아요 end */
.menuCommon {
    position: relative; 
    width: 100%; 
}
.menuItemCommon {
    width: $size; 
    height: $size;
    background: pink; 
    display: inline-block; 
    text-align: center;
}
.submenuCommon {
    position: absolute; 
    z-index: 1; 
}
.subItemCommon {
    position: absolute; 
    z-index: 1; 
    width: $size; 
    height: $size; 
    background: rgb(163, 163, 163);
    text-align: center; 
}
.menu { 
    @extend .menuCommon;
    .menuItem {
        @extend .menuItemCommon;
    }
    .submenu  {
        @extend .submenuCommon;
        top: 0; 
        left: submenuWidth(); 
        .subItem {
            @extend .subItemCommon;
            top: -50px; 
            opacity: 0; 
            transition: 0.4s ease-in;
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    left: getLeft($i);
                }
            }
        }
    }
    &.active {
        .subItem {
           top: 0;
           opacity: 1; 
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    transition-delay: getDelay($i);
                }
            }
        }
    }
}

.menu2 { 
    @extend .menuCommon;
    .menuItem {
        @extend .menuItemCommon;
    }
    .submenu2  {
        @extend .submenuCommon;
        top: 0; 
        left: 0; 
        z-index: -1;
        .submenu2Item {
            @extend .subItemCommon;
            top: 0; 
            left: 0;
            transition: 0.1s;
        }
    }
    &.active {
        .submenu2 {
            left: submenuWidth(); 
            z-index: 1;
            .submenu2Item {
                @for $i from 1 through 4 {
                     &:nth-child(#{$i}) {
                         left: getLeft($i);
                         z-index: $i;
                     }
                 }
             }
        }
    }
}

부모에 active가 붙었을 때에 나머지 스타일을 정의하면 됩니다.

첫 번째 subItem에는 top의 값이 모두 0이 되지만 transition-delay를 통해 순차적으로 딜레이를 줍니다.

transition값을 0.1~0.4로 줘야 하기 때문에 10/index로 계산하면 됩니다. 뒤에 꼭 s(Second)를 붙여주세요!

두 번째 subITem에는 활성화 시 각각의 메뉴에 left 값을 적용하는데, 1~4번째 index를 파라미터로 넘겨

($width + 간격) * (index -1) 만큼 리턴해 주면 됩니다.

참고로 SCSS와 Javascript의 다른 점 중 하나는 index가 0번이 아니라 1번부터 시작하는 겁니다.

간혹 헷갈리네요..

@charset "UTF-8";
/* 여기는 중요하지 않아요 start */
*,
body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #333;
  font-family: "나눔고딕", NanumGothic;
}

a {
  display: block;
  text-decoration: none;
  color: #333;
  width: inherit;
  height: inherit;
}

ul {
  list-style-type: none;
}

button {
  border: 0 none;
  cursor: pointer;
}

.wrap {
  width: calc(100% - 100px);
  margin: 50px;
}

/* 여기는 중요하지 않아요 end */
.menuCommon, .menu, .menu2 {
  position: relative;
  width: 100%;
}

.menuItemCommon, .menu .menuItem, .menu2 .menuItem {
  width: 50px;
  height: 50px;
  background: pink;
  display: inline-block;
  text-align: center;
}

.submenuCommon, .menu .submenu, .menu2 .submenu2 {
  position: absolute;
  z-index: 1;
}

.subItemCommon, .menu .submenu .subItem, .menu2 .submenu2 .submenu2Item {
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  background: #a3a3a3;
  text-align: center;
}

.menu .submenu {
  top: 0;
  left: 60px;
}

.menu .submenu .subItem {
  top: -50px;
  opacity: 0;
  transition: 0.4s ease-in;
}

.menu .submenu .subItem:nth-child(1) {
  left: 0px;
}

.menu .submenu .subItem:nth-child(2) {
  left: 60px;
}

.menu .submenu .subItem:nth-child(3) {
  left: 120px;
}

.menu .submenu .subItem:nth-child(4) {
  left: 180px;
}

.menu.active .subItem {
  top: 0;
  opacity: 1;
}

.menu.active .subItem:nth-child(1) {
  transition-delay: 0.1s;
}

.menu.active .subItem:nth-child(2) {
  transition-delay: 0.2s;
}

.menu.active .subItem:nth-child(3) {
  transition-delay: 0.3s;
}

.menu.active .subItem:nth-child(4) {
  transition-delay: 0.4s;
}

.menu2 .submenu2 {
  top: 0;
  left: 0;
  z-index: -1;
}

.menu2 .submenu2 .submenu2Item {
  top: 0;
  left: 0;
  transition: 0.1s;
}

.menu2.active .submenu2 {
  left: 60px;
  z-index: 1;
}

.menu2.active .submenu2 .submenu2Item:nth-child(1) {
  left: 0px;
  z-index: 1;
}

.menu2.active .submenu2 .submenu2Item:nth-child(2) {
  left: 60px;
  z-index: 2;
}

.menu2.active .submenu2 .submenu2Item:nth-child(3) {
  left: 120px;
  z-index: 3;
}

.menu2.active .submenu2 .submenu2Item:nth-child(4) {
  left: 180px;
  z-index: 4;
}

아직은 저도 SASS를 공부하고 이리저리 적용해보고 있는 단계라서, 효율적이게 사용한 것 인지 모르겠습니다.

그래도 분명한 것은 확실히 스타일도 모듈화 하면서 점점 프로젝트가 커지고 수정과 추가가 늘어날수록 장점이 명확해지는 것 같습니다.

키패드로 비밀번호 입력하기 (HTML+SASS+JavaScript)

JOTOKKI — Thu, 8 Jul 2021 15:17:17 +0900

키보드에서 입력을 받지 않고 직접 키패드를 클릭하여 비밀번호를 체크하는 기능을 만들어보았습니다.

참고로 단순히 웹단에서 정해진 값을 입력값과 비교하는 로직만 있습니다.

자바스크립트는 OOP기반으로 작성하였습니다.

결과화면

1. 마크업 스타일

<div class="pwWrap">
    <div class="pwSection">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <p class="message">&nbsp;</p>
    </div>
    <div class="numberSection">
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="number">0</button>
    </div>
</div>

1-1. SCSS사용시

$errorColor: red;
$confirmColor: green; 

.pwWrap {
  width: 80%; 
  max-width: 450px;
  background: lightGrey; 
  margin: 20px auto;
  
  .pwSection {
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 150px; 
    .dot {
      display: block; 
      width: 10px; 
      height: 10px; 
      background: darkgrey;
      border-radius: 100%; 
      margin: 0 5px;
      &.active {
        background: rgba(0,0,0,0.7);
      }
    }
    .message {
      position: absolute; 
      bottom: 5px; 
      left: 0; 
      z-index: 1; 
      min-width: 100%;
      text-align: center; 
      font-size: 14px;
      font-weight: bold;
      letter-spacing: -0.03em;
      opacity: 0; 
      transition: .2s ease-out;
    }
  }
  .numberSection {
    overflow: hidden;
    .number {
      float: left; 
      width: 33.33%;
      border: 1px solid rgba(0,0,0,0.1); 
      padding: 12px 0;
      cursor: pointer; 
      background: #F8F2F2;
      &:last-child {
        margin-left: 33.33%;
      }
    }
  }
  
  &.error {
     .message {
        opacity: 1; 
        color: $errorColor; 
      }
  }
  &.confirm {
     .message {
        opacity: 1; 
        color: $confirmColor; 
      }
  }
}

1-2. CSS 사용 시

.pwWrap {
  width: 80%;
  max-width: 450px;
  background: lightGrey;
  margin: 20px auto;
}

.pwWrap .pwSection {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.pwWrap .pwSection .dot {
  display: block;
  width: 10px;
  height: 10px;
  background: darkgrey;
  border-radius: 100%;
  margin: 0 5px;
}

.pwWrap .pwSection .dot.active {
  background: rgba(0, 0, 0, 0.7);
}

.pwWrap .pwSection .message {
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 1;
  min-width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.03em;
  opacity: 0;
  transition: .2s ease-out;
}

.pwWrap .numberSection {
  overflow: hidden;
}

.pwWrap .numberSection .number {
  float: left;
  width: 33.33%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  cursor: pointer;
  background: #F8F2F2;
}

.pwWrap .numberSection .number:last-child {
  margin-left: 33.33%;
}

.pwWrap.error .message {
  opacity: 1;
  color: red;
}

.pwWrap.confirm .message {
  opacity: 1;
  color: green;
}

2. 스크립트 작성하기

저는 이렇게 만들어보았습니다.

1. 숫자 버튼 클릭, 클릭된 숫자를 배열에 담기

2. 버튼 클릭 횟수 체크

3. 버튼 클릭 횟수가 4일 때 넘어온 비밀번호와 입력한 값 비교

4. 3번 비교가 틀리면 리셋 및 에러 메시지 출력

5. 3번 비교가 맞으면 성공 메세지 출력

pwCheck라는 함수를 생성한 뒤, 내부에 필요한 변수를 지정합니다.

필요한 객체들도 불러옵니다.

function PwCheck(pw) { 
    const _this = this; 
    _this.pwStr = pw.toString(); // 문자, 숫자열을 모두 허용하기 위해 무조건 한가지 타입으로 맞춤
    _this.password = []; // 지정된 패스워드
    _this.passwordNumber = []; // 입력할 패스워드
    _this.cnt = 0; // 입력횟수 체크
    _this.compChk = false; // 입력완료 체크 
    _this.msg = [
        'Wrong Password! Try Again!  ',
        'Success!  '
    ]; 
    _this.parent = document.querySelector('.pwWrap');
    _this.dots = document.querySelectorAll('.dot');
    _this.numbers = document.querySelectorAll('.number');
    _this.message = document.querySelector('.message');
    
}

여기서 this는 pwCheck함수를 가리키며, this를 _this안에 담았기 때문에,

안에서 선언한 변수와 함수들은 외부에서 바로 접근이 되지 않습니다.

PwCheck에서 넘겨받는 pw를 실제 비밀번호라고 가정합니다.

pw를 굳이 string으로 받는 이유는 넘어오는 pw가 숫자인 경우 배열에 넣지 못하기 때문입니다.

반드시 배 열대 배열로 비교할 필요는 없지만 저는 입력받은 값을 하나씩 배열에 담기 때문에 배열끼리 비교를 하고자 합니다.

먼저 받은 pw값을 받자마자 배열화 합니다.

    // 비밀번호를 배열에 넣음 
    _this.getPw = function(){
        for(let i=0; i<_this.pwStr.length; i++) {
            _this.password[i] = _this.pwStr[i];
        }
    }

이렇게 선언한 뒤 즉시 실행시켜주기 위해 init함수를 하나 더 만들 겁니다.

init내부 함수들은 모두 즉시 호출됩니다.

    _this.init = function(){
        _this.getPw();
    }();

그리고 즉시 실행되어야 할 함수가 하나 더 있습니다.

버튼 클릭 이벤트입니다.

{...}    
    
    // 숫자버튼 click이벤트 연동
    _this.handleListener = function(){
        if(!_this.compChk) {
            _this.numbers.forEach(function(number){
                number.addEventListener('click', function(){console.log("number")});
            })
        }
    }
    
    _this.init = function(){
        _this.handleListener();
        _this.getPw();
    }();

이렇게 하면 각각 클릭한 버튼을 제대로 가지고 옵니다.

이때 원래는 id를 두거나 따로 attribute를 따로 설정하여 value값을 지정하지만, 저는 그냥 textContent로 가져왔습니다.

handleNumber라는 함수를 따로 두고 여기에 클릭한 숫자를 넘길 겁니다.

클릭할 때마다 passwordNumber 배열에 하나씩 넣어주고 카운트를 증가시켜줍니다.

만약 카운트가 4가 된다면, handleResult함수로 넘겨 결과를 처리합니다.

그리고 UI를 담당하는 handleDotActive라는 함수를 두고 입력한 숫자는 동그라미 색을 바꿔줍니다.

    // 숫자키를 눌렀을때 이벤트 
    _this.handleNumber = function(number){
        _this.passwordNumber[_this.cnt] = number.textContent;
        _this.handleDotActive(true);
        _this.cnt++; //  _this.passwordNumber[_this.cnt] 넣어준 후에 증가시켜주세요!
        if(_this.cnt === 4) {
            _this.handleResult();
        }
    }
    // dot 활성화 
    _this.handleDotActive = function(type){
        if(type) {
            _this.dots.forEach(function(dot, i){
                if(i === _this.cnt) dot.classList.add('active'); 
            })
        } else {
            _this.dots.forEach(function(dot){
               dot.classList.remove('active'); 
            })
        }
    }
    // 결과처리 
    _this.handleResult = function(){
        // 결과처리하는 구간!
    }

handleDotActive에서 type을 받는 이유는 비밀번호가 틀렸을 경우 리셋을 처리하는 부분을 같이 사용하기 위해서입니다. 이제 handleResult까지 마무리해봅시다.

저는 비교만 하는 함수를 따로 두어 boolean값을 리턴하도록 하였습니다.

    // 비밀번호 비교
    _this.handleCheckPw = function(){
        let compare = JSON.stringify(_this.password) === JSON.stringify(_this.passwordNumber);
        return compare; 
    }
    // 결과처리 
    _this.handleResult = function(){
        if(_this.handleCheckPw()) { 
        	// 비밀번호 맞으면
            _this.parent.classList.add('confirm');
            _this.message.textContent = _this.msg[1];
            _this.compChk = true;
        } else {
        	// 비밀번호 틀리면
            _this.parent.classList.add('error');
            _this.message.textContent = _this.msg[0];
            // 입력상태 초기화 
            _this.passwordNumber = [];
            _this.cnt = 0; 
            setTimeout(function(){
                _this.parent.classList.remove('error');
                _this.handleDotActive(); // 동그라미 UI 초기화
            }, 800);
        }
    }

JSON.stringify로 전체 문자를 비교해야 순서까지 통째로 비교가 됩니다.

( for문으로도 비교할 수 있지만 이게 훨씬 간단하고 편해요! )

비밀번호가 틀렸을 때 setTimeout을 통해 에러 문구를 잠시 보여준 뒤 다시 입력할 수 있도록 상태 초기화를 시켜줍니다.

이렇게 하면 완성인 것 같지만!

에러 문구가 떠있는 동안 다른 키를 눌러버린다면, 그 눌린 값이 쌓여 버리게 돼요!

그래서 에러 문구가 떠있는 동안에는 키 입력을 해도 동작이 되지 않도록 막아야 합니다.

그래서 _this.comp라는 변수를 정의해 놓았습니다.

{...}

    // 숫자버튼 click이벤트 연동
    _this.handleListener = function(){
        if(!_this.compChk) { // 추가!
            _this.numbers.forEach(function(number){
                {...}
            })
        }
    }
    
    // 숫자키를 눌렀을때 이벤트 
    _this.handleNumber = function(number){
        if(!_this.compChk) { // 추가
            _this.passwordNumber[_this.cnt] = number.textContent;
            {...}
        }
    }
    
        // 결과처리 
    _this.handleResult = function(){
        if(_this.handleCheckPw()) {
           {...}
            _this.compChk = true;
        } else {
            {...}
            // 일시적인 클릭 방지 
            _this.compChk = true;
            setTimeout(function(){
                _this.compChk = false; // 다시 false로 바꿔줘야 클릭이벤트가 작동되겠지요?
                {...}
            }, 800);
        }
    }

{...}

이렇게 하면 비로소 끝났습니다!

함수를 호출하기 위해 새로운 변수에 할당하고 비밀번호를 넘겨줍니다.

let pwCheck = new PwCheck(1234);

플러스로 심심해서(?) 키 입력값도 받아보았습니다.

사실 키보드 입력으로 할 거라면 굳이 키패드가 필요 없는데, 그냥 이유 없이 만들어 보았습니다.

기본 로직은 모두 같고 버튼 클릭을 키보드 클릭으로 바꿔주기만 하면 됩니다.

또한 키 입력을 표시하기 위해 키패드 UI도 추가해줍니다.

handleListener함수를 수정하고, handleButtonActive를 만들어 키보드 클릭 시 키패드가 활성화되도록 해보겠습니다.

    // 키보드 click이벤트 연동 (변경)
    _this.handleListener = function(){
        window.addEventListener('keydown', function(e){
            _this.handleButtonActive(e.key);      
            _this.handleNumber(e.key);  
        })
    }

    // 버튼활성화 (추가)
    _this.handleButtonActive = function(key){
        _this.numbers.forEach(function(number){
            if(number.textContent === key) number.style.background = "lightblue";
            setTimeout(function(){ number.style.background = "#F8F2F2" }, 140);
        })
    }

그리고 handleListener에서 e.key를 넘겼기 때문에 기존에 handleNumber에서는 number.textContent로 값을 가져왔지만, 여기서는 그냥 number로 수정해 줘야 합니다.

    // 숫자키를 눌렀을때 이벤트 
    _this.handleNumber = function(number){
        if(!_this.compChk) { // 999
            // _this.passwordNumber[_this.cnt] = number.textContent;
            _this.passwordNumber[_this.cnt] = number;  // <- 이렇게 수정
            {...}
        }
    }

그럼 완료되었습니다.

Live sass compiler 사용하기

JOTOKKI — Tue, 6 Jul 2021 14:13:08 +0900

저번 포스팅에서는 node에서 package.json으로 수작업(?)으로 자동 컴파일되는 환경을 세팅했었는데, (보러가기)

이번에는 vscode에서 제공되는 Live Sass Compiler라는 플러그인을 사용해 보도록 하겠습니다.

설치하기

VSCode를 열고 확장프로그램 다운로드하는 곳에서 sass를 검색하면 나타납니다.

Live Sass Compiler Plugin

install을 클릭하여 설치합니다.

그리고 우측 하단에 Watch Sass를 클릭하면 실시간으로 컴파일이 됩니다.

이렇게 하면 자동으로 컴파일이 됩니다.

자동 컴파일 실행

CSS경로 설정하기

vscode setting 란에서 scss에서 css로 컴파일 시 css가 저장될 경로를 지정해 줄 수 있습니다.

왼쪽 하단 Manage 버튼에서 Setting을 들어갑니다.

sass를 검색하고 방금 설치한 Live Sass Complier를 선택하면 여러 가지 세팅할 수 있는 화면이 나타납니다.

그중Set your exported CSS styles, formats & save location. ( export 된 CSS 스타일들, 포맷, 저장 경로 설정 )

란의 Edit in settings.json을 클릭하면 설정 파일이 나타납니다.

{
    ...
    "liveSassCompile.settings.formats": [
        
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css" // 컴파일된 css 파일이 저장될 경로
        }
    ],
    ...
}

MappingURL

CSS로 변환된 파일을 보면 css파일 외에 map파일이 생성된 것을 볼 수 있습니다.

또한 css파일 내에 map 주소가 주석 처리되어 하단에 나와있습니다.

css.map과 sourceMappingURL

이것들의 용도는 바로 변환 이후에도 Chrome브라우저에서 디버깅 시 scss를 참조할 수 있게 각각의 정보를 mapping 해주는 용도입니다.

만약 map 정보를 모두 지우고 개발자 모드에서 확인한다면, css파일을 체크합니다.

mapping 정보 없음

mapping 정보가 존재한다면 css와 scss의 각 라인을 매핑시켜 scss를 체크합니다.

mapping 정보 있음

만약 프로젝트 전체가 SCSS기반이라면, mapping정보가 필요하겠지만,

간혹 단독으로 쓰이고 납품하거나 배포 시에는 순수 CSS만 남겨야 한다면 mapping 정보가 필요 없을 수 있습니다.

그런 경우 setting에서 mapping 정보가 생기지 않도록 설정할 수 있습니다.

setting화면

Set it as 'false' if you don't want `.map`file for compolied CSS. 라고 적힌 부분에 Edit in setting.json을 클릭합니다.

{
    ...
    "liveSassCompile.settings.generateMap": false, // true면 사용, false면 사용하지 않음 
    "liveSassCompile.settings.formats": [
        ...
    ],
    ...
}

기존에 있다면 true를 false로 변경해주면 됩니다. ( 만약 없는 경우 저 한 줄을 추가해 주면 됩니다. )

이후 만들어진 scss에 대하여 더 이상 mapping 정보를 생성하지 않습니다.

Toast 팝업 만들기

JOTOKKI — Tue, 6 Jul 2021 10:35:04 +0900

Toast 팝업은 무언가 액션을 시작했을 때, 종료되었을 때, 상태가 바뀌었을 때 등등의 경우 알려주는 팝업입니다.

따로 닫기 버튼을 두지 않고 일정 시간이 지나면 자동으로 사라집니다.

JavasScript환경에서 setTimeout을 통해 간단하게 구현이 가능합니다.

토스트 팝업

// App.js
import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <div className="btnWrap">
        <button onClick={handleToast}>CLICK</button>
      </div>
    </div>
  );
}

// Toast.js
export default function Toast({ msg = "메세지 없음" }) {
  return <div className="toast">{msg}</div>;
}

// styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}

.btnWrap {
  padding-top: 50px;
}

button {
  background: lightseagreen;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  border: 0 none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: darkcyan;
}

.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 11px;
  min-width: 200px;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  border: 1px solid #000;
}

Toast에 msg를 props값으로 받아 사용하기로 합니다.

만약 넘겨받는 msg값이 없다면 "메세지 없음"을 기본으로 출력하도록 합니다.

Toast를 구현하는 방법은 다음과 같습니다.

1. Toast state를 false를 기본값으로 둔다.

2. 버튼 클릭시 Toast state를 true로 변경한다.

3. useEffect에서 Toast 값을 리스닝하고, Toast가 true인 경우 1000ms후 다시 false로 변경한다.

// App.js
export default function App() {
  const [ToastStatus, setToastStatus] = useState(false);
  const handleToast = () => {
    setToastStatus(true);
  };
  useEffect(() => {
    if (ToastStatus) {
      setTimeout(() => setToastStatus(false), 1000);
    }
  }, [ToastStatus]);
  return (
    <div className="App">
      <div className="btnWrap">
        <button onClick={handleToast}>CLICK</button>
      </div>
      {ToastStatus && <Toast msg="I am Toast  " />}
    </div>
  );
}

아주 간단합니다.

여러개를 써야 하는 경우에는 상태 메시지를 객체로 따로 관리하면서 state로 같이 관리해 줄 수도 있습니다.

import { useState, useEffect } from "react";
import "./styles.css";
import Toast from "./Toast";

// 메세지목록
const msgList = {
  complete: "확인되었습니다.",
  amend: "수정되었습니다.",
  cancel: "취소되었습니다."
};

export default function App() {
  const [ToastStatus, setToastStatus] = useState(false);
  const [ToastMsg, setToastMsg] = useState(""); // 토스트에 표시할 메세지

  const handleToast = (type) => {
    setToastStatus(true);
    setToastMsg(msgList[type]);
  };

  useEffect(() => {
    if (ToastStatus) {
      setTimeout(() => {
        setToastStatus(false);
        setToastMsg(""); 
      }, 1000);
    }
  }, [ToastStatus]);

  return (
    <div className="App">
      <div className="btnWrap">
        <button onClick={() => handleToast("complete")}>확인</button>
        <button onClick={() => handleToast("amend")}>수정</button>
        <button onClick={() => handleToast("cancel")}>취소</button>
      </div>
      {ToastStatus && (
        <>
          <Toast msg={ToastMsg} />
        </>
      )}
    </div>
  );
}

이렇게 처리해 주면 하나의 토스트팝업으로 다양하게 사용할 수 있습니다.

이렇게 하면 끝난것 같지만 한 가지 문제점이 있습니다.

버튼을 1000ms 이내에 클릭할 때 문구만 실시간으로 바뀌게 됩니다.

문제점

이를 방지하기 위해서는 토스트 팝업의 액션이 끝나면 동작이 가능하게 해 주면 됩니다.

export default function App() {
 {...}
  const handleToast = (type) => {
    if (!ToastStatus) { //  ToastStatus가 false일때만!
      setToastStatus(true);
      setToastMsg(msgList[type]);
    }
  };
  {...}
  return (
    ...
  );
}

이렇게 간단하게 조건만 추가해주면 됩니다.

그럼 ToastStatus가 true에서 false로 바뀌기 전까지는 새로운 상태가 업데이트되지 않습니다.

초간단 useContext + useReducer

JOTOKKI — Fri, 2 Jul 2021 17:38:16 +0900

useContext에서 useReducer를 통해 redux처럼 사용해 보도록 하겠습니다.

기능은 간단하게 admin이라는 state를 가지고 true일 때 false일 때 문구만 다르게 출력하도록 하였습니다.

예전에 useContext가 redux를 대체할 수 있을 만큼 편리하다고 하여 작은 프로젝트 하나를 redux를 사용하지 않고 useContex만 사용해서 만들어본 적이 있다.

먼저 context를 작성합니다.

import { createContext, useReducer } from "react";

// reducer
const initialState = {
    admin: false
}

const reducer = (state, action) => {
    switch(action.type) {
        case 'SET_ADMIN': 
        return {
            ...state,
            admin: !state.admin
        }
        default: 
            throw new Error("Doesn't have action type");
    }
}

// context
export const UserContext = createContext(null);

// provider
export const UserProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const { admin } = state;
    return (
        <UserContext.Provider value={{ dispatch, admin }}>
            { children }
        </UserContext.Provider>
    )
}

SET_ADMIN을 호출하는 경우 admin의 상태 값을 반대로 set 하도록 설정하였습니다.

provider를 통해 자식 컴포넌트에게 value 값으로 state와 dispatch를 전달해 줍니다.

components디렉터리를 생성하고 UserButton파일과 UserInfo파일을 생성합니다.

App에서 두 파일을 모두 좀 전에 생성했던 Provider로 감싸줘야 합니다.

// component
import UserInfo from './components/UserInfo'
import UserButton from './components/UserButton'

// provider
import { UserProvider } from './_context/UserContext'

function App() {
  return (
    <div className="App">
      <UserProvider>
        <UserButton/>
        <UserInfo/>
      </UserProvider>
    </div>
  );
}

export default App;

이렇게 하면 UserProvider 자식 요소들은 전달받은 value 값을 사용할 수 있습니다.

사용할 때에는 useContext를 사용합니다.

// components/UserInfo.js
import { useContext } from 'react';
import { UserContext } from '../_context/UserContext';
function UserInfo() {
    const { admin } = useContext(UserContext);
    return (
        <div>
            <p>{ admin ? "관리자입니다." : "사용자입니다."}</p>
        </div>
    )
}
export default UserInfo

// components/UserButton.js
import { useContext } from 'react';
import { UserContext } from '../_context/UserContext';

function UserButton() {
    const { admin, dispatch } = useContext(UserContext);
    const handleToggleUser = () => {
        dispatch({ type: 'SET_ADMIN' })
    }
    return <button onClick={handleToggleUser}>{admin ? "사용자" : "관리자"}로 전환하기</button>
}
export default UserButton

이렇게 하면 다음과 같이 잘 동작되는 것을 확인 할 수 있습니다.

개인적인 생각

확실히 redux처럼 복잡한 setting을 거치지 않고 바로 사용할 수 있는 점이 좋긴 했습니다.

옛날 순수한 redux만 계속해서 사용해야 한다면, 매력적인 대안이 될 수 있었겠지만

redux-actions, redux-toolkit, redux-saga 등의 더 편하게 사용할 수 있는 라이브러리들이 추가로 생겨나면서

context만으로 모든걸 처리하는 것이 되려 더 불편하게 느껴졌습니다.

단순한 sample은 상관없지만 기존 플젝은 이거보단 규모가 있었기에, 결국엔 redux로 다시 바꾸는 작업을 했습니다.

물론 아직 실력이 미천한 소인의 생각일 뿐입니다.

Node 기반 SASS 입문하기

JOTOKKI — Thu, 1 Jul 2021 16:18:56 +0900

오랜만에 html, css, javascript로 코딩을 해야 하다 보니, 영 기존처럼 하기에는 귀차니즘이 생겨버렸습니다.

그동안은 딱히 관심 갖을 만한 일은 없었으나 귀찮은 건 너무 싫으니 없던 관심이 생기게 되면서 이번 기회에 입문해보려고 합니다.

공식문서를 보고 하나씩 따라하거나 강의를 보고 공부해도 좋지만,

전반적으로 한 번 짧게 겉핥기 식으로 작성해보고 강의를 들으면 이해하는데 좀 더 도움이 되지 않을까 싶습니다.

참조: https://sass-lang.com/

1. 환경세팅

그럴 리 없겠지만 node가 없다면 설치

기존 버전(node-sass, libsass)는 폐지되었다고 하니 Dart Sass를 사용하라고 하네요.

npm install -g sass


// 만약 써보고 다시 삭제하고 싶다면 
npm remove -g sass

sass-practice라는 디렉터리를 만들고 vscode를 열어줍니다.

mkdir sass-practice
cd sass-practice 
code .

그리고 src 디렉터리를 src 디렉터리에서 생성한 뒤 scss 파일을 만들어봅니다.

// src/style.scss
$color: red;

이제 이 파일을 브라우저가 읽을 수 있도록 css 파일로 변환시켜줘야 합니다.

변환하는 방법은 다음과 같은 명령어를 사용합니다.

sass scss디렉터리명/css파일명:디렉터리명/파일명 // 일괄변환
sass --watch scss디렉터리명:css디렉터리명 // 실시간변환

이렇게 sass 뒤에 scss가 저장되어있는 디렉터리명 : css로 변환된 파일이 저장될 디렉터리명을 적어주면 됩니다.

--watch 명령어를 사용하게 되면 저장할 때마다 실시간으로 변환돼서 편리하게 사용할 수 있습니다.

만약 node를 통해 설정해서 쓰고 싶다면 package.json에서 실행 명령어를 추가하면 실행할 때마다 경로를 작성하지 않아도 됩니다.

npm init -y를 통해 package.json 파일을 생성해 주세요.

그리고 package.json 파일을 열어 실행 스크립트를 추가해 줍니다.

{
  "name": "sass-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:sass": "sass src:dist", // 일괄 변환 추가
    "watch:sass": "sass --watch src:dist " // 실시간 변환 추가
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

이렇게 하면 이제 우리는 저동 컴파일을 하기 위해 npm run watch:sass 라는 명령어만 치면 됩니다.

2. 사용하기

제가 간단하게 작성해본 샘플은 다음과 같은 기능을 포함하고 있습니다.

변수사용, mixin 사용, extend 사용, for / if 문 사용

샘플화면

우선 마크업과 스크립트를 작성해 줍니다.

<div class="wrap theme1">
  <div class="inner">
    <button class="changeTheme btn">Chagen theme</button>
    <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio quas, quos doloremque, temporibus eveniet sed explicabo, reiciendis ea assumenda quam amet vitae. Eveniet repellat ipsam adipisci, nostrum ipsum inventore totam?
    </p>
    <ul class="list">
      <li class="item">html</li>
      <li class="item">sass</li>
      <li class="item">javascript</li>
      <li class="item">react</li>
    </ul>
    <span class="message">I am message </span>
  </div>
</div>

<script>
    const btn = document.querySelector('.changeTheme');
    const wrap = document.querySelector('.wrap');
    btn.addEventListener('click', function(){
        if(wrap.classList.contains('theme1')) {
            wrap.classList.replace('theme1', 'theme2');
        } else {
            wrap.classList.replace('theme2', 'theme1');
        }
    })
</script>

스크립트는 간단하게 wrap에 theme1 클래스명과 theme2 클래스명을 토글 시켜주는 기능입니다.

scss에서 template를 만들고 각각 클래스 명일 때 parameter값을 주어 다르게 표현하려고 합니다.

이제 src/style.scss에서 template을 작성합니다.

1. MIXIN

$padding: 2rem;

@mixin template($theme_name, $theme_bg, $theme_color) {
    padding: $padding;
    background: $theme_bg;
    color: $theme_color;
}

.theme1 {
    @include template("theme1", darkred, lightpink);
}

.theme2 {
    @include template("theme2", darkblue, lightblue );
}

굳이 재사용성이 없는 변수 선언은 지양하는 게 좋겠지만 다음과 같이 mixin내부에서도 $padding에 접근할 수 있다는 것을 보여주기 위해 다음과 같이 써보았습니다.

mixin 선언은 @mixin, 사용 시에는 @include를 사용합니다.

$theme_bg, $theme_color를 보면 mixin에서 파라미터 사용이 가능하다는 것을 알 수 있습니다.

2. extends

$msg_color: lightgreen;

{ ... }

.message {
    color: $msg_color;
    font-size: 1.2rem;
    font-weight: bold; 
    text-decoration: underline;
}

.theme1 {
    @include template("theme1", darkred, lightpink);
    .message {
        $msg_color: rgb(241, 146, 241);  // 변수 재선언
        @extend .message;  // extend
        color: $msg_color; // 재선언된 변수 적용
    } 
}

$로 선언한 변수를 부모 클래스 내에서 재선 언 할 수도 있습니다.

또한 .message라는 스타일을 extend를 통해 가져다 사용할 수도 있네요.

3. if문

@mixin btn($theme_name) {
    border: 0 none; 
    padding: 4px 8px; 
    border-radius: 2px;
    cursor: pointer; 
    @if $theme_name == "theme1" {
        background: palevioletred;
        color: white;
    } @else {
        background: skyblue;
        color: darkblue;
    }
}

.theme1 {
    button {
        @include btn("theme1");
    }
    {...}
}

.theme2 {
    button {
        @include btn("theme2");
    }
    { ... }
}

각각 다른 파라미터 값을 주어 파라미터 값의 매칭 여부를 확인하여 다른 스타일을 줄 수 있습니다.

함수 선언 시에는 @가 붙습니다. 만약 return 할 일이 있다면 @return 이렇게 써줘야 합니다.

4. for문

.list {
    list-style-type: none;
    padding: 0;
    @for $i from 1 through 4 {
        .item:nth-child(#{$i}):before {
            content: $i + ': ';
            margin-right: 5px;
        }
    }
}

for문을 사용하여 nth-child를 통해 앞에 카운트를 붙였습니다.

실렉터 내부에서 변수를 사용할 때에는 #{ } 안에 써줘야 하네요.

해당 목록을 배열 변수에 담아 length값을 체크해서 사용해도 되지만, 이렇든 저렇든 이미 html에서 선언했던 부분을 한번 더 써줘야 하기 때문에 그냥 4로 박았습니다. 만약 더 여러 군데에서 사용해야 한다고 하면 배열을 선언해서 쓰는 것이 훨씬 편리할 것 같습니다.

5. 파일 분리하기

기존에 css내에서 외부 css를 불러올 때랑 동일합니다.

@include를 사용합니다.

// src/mixin.scss

@mixin template($theme_name, $theme_bg, $theme_color) {
    ...
}

@mixin btn($theme_name) {
    ...
}

@import './mixins.scss';

{...}

이렇게 변수나 mixin을 한파일에 관리하면 더 좋을 것 같습니다.

결과

javascript 스크롤 상태바 만들기 (window / div)

JOTOKKI — Thu, 1 Jul 2021 16:01:17 +0900

스크롤을 함에 따라 상태바가 스크롤 위치에 따라 변경되며 상태를 보여주는 스크롤 프로그레스 바를 만들어보았습니다.

완성된 모습

생각보다 간단해서 공유해보고자 합니다.

우선 마크업을 합니다. 보통은 window 스크롤을 많이 사용하지만 저는 div에 스크롤을 주고 적용해 보려고 합니다.

// index.html
<div class="wrap">
    <div class="barWrap"><div class="bar"></div></div>
    <div class="perWrap"><span class="per">0%</span></div>
    <div class="inner">
        <ul>
            <li>{ ...contents }</li>
        </ul>
    </div>
</div>

// style.css
html, body, .wrap {
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

.wrap {
    position: relative; 
    overflow-y: auto;
    padding-top: 13px;
}

.barWrap {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 13px; 
    background: lightslategrey;
}

.bar {
    position: fixed; 
    top: 0; 
    left: 0;
    height: inherit;
    background: black; 
    color: white;
}

.inner {
    padding: 20px;
    line-height: 3;
    
}

div에만 스크롤을 주기 위해 html, body 모두 overflow hidden 처리시킵니다.

이 상태에서는 스크롤을 가진 요소는 wrap이 되고 상태를 표시해줄 객체는 bar가 됩니다.

그리고 해당 div에서 스크롤을 할때마다 값을 가져와야 하므로 addEventListener에 타입을 scroll로 지정합니다.

구현을 위해 필요한 겂들을 확인하기 위해 다음과 같이 콘솔에 찍어봅시다.

// index.js
let wrap = document.querySelector(".wrap"); 

wrap.addEventListener('scroll', function(){
   console.log("scrollTop: ", wrap.scrollTop);
   console.log("scrollHeight: ", wrap.scrollHeight);
   console.log("clientHeight: ", wrap.clientHeight);
})

만약 스크롤의 대상이 div가 아닌 window라면 wrap을 document.querySlector('. wrap')이 아닌 document.documentElement으로 선언해주세요. 어차피 이외의 로직은 동일합니다.

이 값들은 전체 높이에서 스크롤위치에 따라 비율을 구하는 로직을 만드는 데 사용됩니다.

각각의 값은 아래의 이미지를 참고해주세요.

죄송해요 발로 그렸음..

먼저 전체 높이(scrollHeight)에서 화면에 표시되는 높이(clientHeight)를 제외하고 나머지에서 스크롤의 위치를 나눈다면 나머지 값이 나옵니다. 100을 곱하여 퍼센트로 표시할 수 있습니다.

// index.js
let wrap = document.querySelector(".wrap");
let bar = document.querySelector('.bar');

wrap.addEventListener('scroll', function(){
    let scrollTop = wrap.scrollTop;
    let scrollHeight = wrap.scrollHeight - wrap.clientHeight;
    let percentage = (scrollTop/scrollHeight) * 100;
    bar.style.width = percentage + '%';
})

이렇게 하면 스크롤에 따라 progress bar가 위치에 따라 변화하는 것을 알 수 있습니다.

좀 더 부드러운 움직임을 주고 싶다면 bar에 transition을 추가해주면됩니다.

// style.css

.bar {
    ...
    transition: .1s ease;
}

어차피 bar의 width값이 넘어오니 이를 이용해서 퍼센트를 나타내는 숫자도 추가해 보도록 하겠습니다.

값을 계산할때 소수점까지 나타나므로 Math.floor로 소수점을 제거해 줄 겁니다.

// index.html
<div class="wrap">
    <div class="barWrap"><div class="bar"></div></div>
    <div class="perWrap"><span class="per">0%</span></div> <!-- add -->
    <div class="inner">
        { ... }
    </div>
</div>

// style.css

{...}

.perWrap {
    position: fixed; 
    top: 20px; 
    left: 10px;
    width: 50px; 
    height: 50px; 
    text-align: center;
    background: black; 
    color: #fff; 
    border-radius: 100%;
    line-height:3.5;
    font-size: 13px;
}

// index.js
let wrap = document.querySelector(".wrap");
let bar = document.querySelector('.bar');
let per = document.querySelector('.per'); // add

wrap.addEventListener('scroll', function(){
    {...}
    per.innerText = Math.floor(percentage) + '%'; // add
})

이렇게 하면 숫자로 표시가 됩니다.

하지만 한 가지 문제점이 있습니다. 만약 스크롤 하던 중 viewport의 사이즈가 달라져 버린다면, 계산을 하지 못하고 NaN을 뱉어버립니다. (Not-A-Number:숫자가 아님)

NaN인 경우 0을 리턴하도록 스크립트 한 줄을 추가해 줍니다.

let wrap = document.querySelector(".wrap");
let bar = document.querySelector('.bar');
let per = document.querySelector('.per');

wrap.addEventListener('scroll', function(){
    {...}
    if(isNaN(percentage)) percentage = 0;  // add
    bar.style.width = percentage + '%';
    per.innerText = Math.floor(percentage) + '%';
})

이렇게 하면 비로소 완성입니다!

React 에서 useRef 사용하기

JOTOKKI — Wed, 30 Jun 2021 14:25:23 +0900

참조: https://ko.reactjs.org/docs/hooks-reference.html#useref

useRef는 생각보다 유용합니다. SPA에서는 변화에 따른 렌더링으로 객체에 직접 접근하는 것은 위험합니다.

그렇기 때문에 React에서는 useRef hook을 지원합니다. useRef가 직접 객체에 접근하는 것을 가능하게 해주는 이유는 매번 렌더링을 할 때마다 동일한 객체를 제공한다고 공식문서에 나와있습니다.

반면, state와는 달리 실시간 변화를 감지하여 변화된 값을 리턴하지는 않습니다.

이게 가능하게 하려면 ref를 따로 setState해줘야 합니다.

1. useRef를 통한 timer만들기

참조 : https://dmitripavlutin.com/react-useref-guide/

타이머를 만들기 위한 jsx를 작성합니다.

import { useState, useRef } from "react";

export default function UseRefSample1() {
  const countRef = useRef(null);
  const [Count, setCount] = useState(0);

  return (
    <div className="wrap">
        <h2>StopWatch 만들기</h2>
        <div>
            <div className="timer">Timer: {Count}ms</div>
            <button>Start</button>
            <button>Stop</button>
            <button>Reset</button>
        </div>
    </div>
  );
}

countRef는 setInterval을 담기 위함이고 Count state는 초 단위를 업데이트하는 데 사용됩니다.

그리고 타이머 시작, 중지, 리셋 기능을 구현합니다.

  const startHandler = () => {
    countRef.current = setInterval(() => setCount((c) => c + 1), 100);
  };

  const stopHandler = () => {
    clearInterval(countRef.current);
    countRef.current = null;
  };

  const resetHandler = () => {
    stopHandler();
    setCount(0);
  };

startHandler에서 setInterval로 초단위 Count에 setState 시켜주고 해당 setInterval은 ref.current에 담겨있습니다.

그렇기 때문에 stopHandler에서 쉽게 clearInterval을 해줄 수 있습니다.

다시 startHandler를 클릭하면 Count의 값은 남아있으므로 기존 카운트가 쌓인 값에서 다시 1초마다 플러스되고,

resetHandler에서 온전한 리셋을 위해 Count의 값도 0 처리해줍니다.

결과

2. useRef를 통해 input Focus 주기

프로젝트에 입력하는 form 양식에 빈 값 체크를 해야 하는 경우가 있다면 체크 후 해당 input으로 focus를 주는 기능에서 유용하게 사용할 수 있습니다.

우선 마크업을 해줍니다.

import { useEffect, useRef, useState } from "react";

export default function UseRefSample2() {
  const [Msg, setMsg] = useState(null);
  return (
    <div className="wrap">
      <h2>Input Focus</h2>
      <p>
        <input placeholder="Name" />
      </p>
      <p>
        <input placeholder="Age" />
      </p>
      <button>Submit</button>
      {
          Msg === null ? "" 
          : Msg ?  <div className="msg">모두 입력되었습니다!</div> 
          : <div className="msg warning">모두 입력하세요!</div>
      }
    </div>
  );
}

그리고 input value와 state를 연결합니다. 입력 양식이 여러 개라면 객체 타입으로 한 state에 묶고 name값을 키값으로 지정하여 onChange시 상태 변경해주는 것을 추천합니다.

{...}
  const [Inputs, setInputs] = useState({
    name: "",
    age: ""
  });

  const handleChange = (e) => {
    setInputs({
      ...Inputs,
      [e.target.name]: e.target.value
    });
  };
{...}
      <p>
        <input
          placeholder="Name"
          name="name"
          value={Inputs.name}
          onChange={handleChange}
        />
      </p>
      <p>
        <input
          placeholder="Age"
          name="age"
          value={Inputs.age}
          onChange={handleChange}
        />
      </p>

그리고 모두 입력한 뒤 처리되는 handleSubmit을 작성합니다.

여기서는 간단하게 Msg 값 하나를 두어 null일 때는 메시지가 보이지 않고, false일 때는 "모두 입력하세요!", true일 때는 "모두 입력되었습니다."라는 메시지를 띄웁니다.

이때 빈 값 체크를 하게 되는데 handleCheckForm 함수를 따로 두어 사용하도록 하겠습니다.

const handleSubmit = (e) => {
  if (handleCheckForm()) {
  	setMsg(true);
  } else {
  	setMsg(false);
  }
};
  
 const handleCheckForm = () => {
  if (Inputs.name === "") {
  	alert("이름을 입력하세요!");
  	return false;
  }
  if (Inputs.age === "") {
  	alert("나이를 입력하세요!");
 	 return false;
  }
  return true;
};

  return (
    <div className="wrap">
      <h2>Input Focus</h2>
      { ... }
      <button onClick={handleSubmit}>Submit</button>
      {Msg === null ? (
        ""
      ) : Msg ? (
        <div className="msg">모두 입력되었습니다.</div>
      ) : (
        <div className="msg warning">모두 입력하세요!</div>
      )}
    </div>
  );

name, age 둘 중 하나라도 빈 값이면 false를 반환하고 둘 다 빈값이 아니면 true를 반환하면서 setMsg가 true 혹은 false로 변경됩니다.

그러면 나머지 부가 기능들을 useRef를 통해 처리해보도록 하겠습니다.

1. submit클릭 시 값이 비어있는 input에 자동 focus를 한다.

2. name input에서 Enter시 다음 input으로 이동, age input에서 Enter시 handleSubmit 호출

먼저 useRef를 통해 nameRef, ageRef를 선언하고 input에 연결시켜줍니다.

객체 접근은 current를 통해 할 수 있습니다.

해당 ref를 console로 조회해보면 내부적으로 많은 정보를 담고 있음을 알 수 있습니다.

ref 조회 결과

import { useEffect, useRef, useState } from "react";

const nameRef = useRef(null);
const ageRef = useRef(null);

// Enter시 age input으로 focus
const handleNextInput = (e) => {
    if (e.key === "Enter") {
        ageRef.current.focus();
    }
};

// Enter시 handleSubmit 호출
const handleChangeSubmit = (e) => {
    if (e.key === "Enter") handleSubmit();
};

// 최초 페이지 진입시 name input에 focus
useEffect(() => {
    nameRef.current.focus();
}, []);

{...}

<p>
    <input
        placeholder="Name"
        name="name"
        value={Inputs.name}
        ref={nameRef}
        onChange={handleChange}
        onKeyPress={handleNextInput} 
    />
</p>
<p>
    <input
        placeholder="Age"
        name="age"
        value={Inputs.age}
        ref={ageRef}
        onChange={handleChange}
        onKeyPress={handleChangeSubmit}
    />
</p>

이 외에 useRef를 통해 다른 기능을 구현한 것들을 살펴보고 싶다면 해당 글도 확인해보세요.

React div 스크롤시 Fix 하기 (Element scroll)

react draggable 간단 샘플

React 에서 애니메이션, 인터렉션 구축하기 (emotion / tweenmax)

CSS에서 변수 사용하기

JOTOKKI — Wed, 30 Jun 2021 11:16:47 +0900

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

IE에서는 지원하지 않습니다.

Can I use 검색결과

지원이 가능하도록 도와주는css-var-ponyfill이라는 라이브러리가 있긴한데,

아무리 설정해도 해결책을 못 찾았습니다.

좀 더 파보고 해결책이 나오면 추후 포스팅하도록 하겠습니다.

element와 root에서 선언함으로써 스코프(scope)를 지정할 수 있습니다.

element에서 지정된 변수는 해당 element가 부모가 아니면 적용이 되지 않습니다.

:root {
    --box-size: 50px;
}

.box1 {
    --main-color: orange;
}

:root는 전역을 뜻하고. box1 은. box1을 포함한 하위 element 에게만 적용됩니다.

여기 테스트를 하기 위한 마크업이 있습니다.

<div class="wrap">
    <div class="box box1"><div class="inner">box1</div></div>
    <div class="box"><div class="inner">box2</div></div>
    <div class="box"><div class="inner">box3</div></div>
</div>

wrap안에 box들을 float 하고 wrap의 width값을 box 사이즈 * 3 만큼 주려고 합니다.

변수를 사용하지 않는 CSS라면 다음과 같이 줬을 겁니다.

.wrap {
    overflow :hidden;
    width: calc(50px * 3);
    background: red;
}

.box {
    float: left;
    background: green;
    width: 50px;
    height: 50px; 
    color: yellow; 
}

이렇게 작성하면 결과는 같아서 문제가 없어 보이지만,

만약 box의 사이즈가 45px로 줄어들기라도 한다면 50px이라고 선언된 부분을 모두 찾아 수정해야 합니다.

하지만 변수를 사용하면 변수를 준 부분만 수정하면 되겠죠?

다음은 변수가 적용된 소스입니다.

선언된 변수를 사용하려면 var(변수명) 이렇게 사용하면 됩니다.

:root {
    --box-size: 50px;
}

.wrap {
    overflow :hidden;
    width: calc(var(--box-size) * 3);
    background: red;
}

.box {
    float: left;
    background: green;
    width: var(--box-size);
    height: var(--box-size); 
    color: yellow; 
}

요즘은 Sass와 같은 전처리기를 사용한다거나, SPA개발로는 css도 스크립트로 작성하니 그다지 필요성은 없어 보이지만,

css에서도 변수를 활용할 수 있다는 것이 흥미로웠습니다.

옛날에 하던 프로젝트 중 slider를 css만으로 직접 구현할 때 사용했었던 기억이 나기도 합니다.

React 에서 애니메이션, 인터렉션 구축하기 (emotion / tweenmax)

JOTOKKI — Wed, 23 Jun 2021 14:35:04 +0900

1. emotion keyframes 사용하기

참조사이트

https://www.npmjs.com/package/@emotion/react

https://emotion.sh/docs/keyframes

emotion/react 에서는 keyframes를 통하여 기존 CSS에서 사용하였던 애니메이션 keyframe을 그대로 사용할 수 있습니다. 먼저 설치를 합니다.

yarn add @emotion/react

간단한 사용법 및 런타임에러가 난다면 여기를 참조하세요.

아주 심플한 floating 애니메이션을 만들어 보겠습니다.

먼저 keyframes를 불러옵니다.

floating 애니메이션을 만들고, 스타일에 넣어줍니다.

간단한 세팅만으로 기존에 쓰던 CSS대로 사용할 수 있으니 아주 편합니다.

또한 따로 분리해서 여기저기 import 해서 쓸 수 있으니 아주 유용하게 사용 될꺼라 생각됩니다.

import { css, keyframes } from '@emotion/react'

function Animation1() {
    return (
        <div>
            <h2>emotion Animation</h2>
            <div className="wrap">
                <div className="box" css={boxStyle}></div>
            </div>
        </div>
    )
}

const floating = keyframes`
    0 {
        transform: translateY(0);    
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
`

const boxStyle = css`
    width: 50px; 
    height: 50px; 
    border-radius: 100%;
    background: #a951bf;
    animation: ${floating} 2s ease infinite;
`


export default Animation1

결과

2. gsap 사용하기

참조사이트

https://www.npmjs.com/package/react-gsap

구현하다 보면 애니메이션 보다는 인터렉션이 필요할 때가 많습니다.

gsap 공식 문서를 보니 gsap 와 react-gsap 두 가지를 설치하도록 안내되어있습니다.

gsap는 기존 javascript에서 쓰던 방법과 크게 다른게 없었습니다.

yarn add gsap

gsap는 from, to 키워드로 시작점과 끝점을 연결 시킬 수 있습니다.

아니면 단독으로 to만 사용하여 기존 css에서 변형을 줄 수 있습니다.

기존 gsap 동작방식은 객체에 직접 접근하여 움직임을 주기 때문에 리액트에서는 useRef를 사용하여,

구현할 수 있습니다.

기본적으로 인터렉션은 한 번만 동작 하며, 반복을 주고 싶다면 repeat: -1 속성을 추가해 주면 됩니다.

import gsap from 'gsap'

function Animation2() {
    const boxRef = useRef(null);
    useEffect(() => {
        gsap.to(boxRef.current, 1, {transform: 'translateX(200px)', delay: .5, ease: 'ease'})
    }, [])

    return (
        <div>
            <h2>gsap Animation</h2>
            <div className="wrap">
                <div className="box" css={boxStyle} ref={boxRef}></div>
            </div>
        </div>
    )
}

const boxStyle = css`
    width: 50px; 
    height: 50px; 
    border-radius: 100%;
    background: #bf5160;
`
export default Animation2

결과 ( 한 번만 동작 )

3. react-gsap 사용하기

참조사이트

https://bitworking.github.io/react-gsap/src-components-timeline

gsap와 react-gsap의 사용법이 꽤 많이 달라고 별개로 구분을 해보았습니다.

이번에는 timeline을 주어 두 가지 동작을 순차적으로 불러오도록 하겠습니다.

1. opacity 0 -> 1

2. 오른쪽으로 움직임

react-gsap는 gsap와는 달리 class 컴포넌트 형태로 움직임을 주려는 객체를 target으로 보내서 구현을 합니다.

이후 구현하려는 모션들을 Tween에 담고 TimeLine으로 감싸주면 됩니다.

yarn add gsap react-gsap

import { Timeline, Tween } from 'react-gsap';

function Animation3() {
    return (
        <div>
            <h2>react-gsap Animation</h2>
            <div className="wrap">
                <Timeline
                    target={<div className="box" css={boxStyle}></div>}
                >
                    <Tween from={{ opacity: 0 }} to={{opacity: 1}} duration={1} />
                    <Tween to={{ x: '200px' }} />
                </Timeline>
            </div>
        </div>
    )
}

const boxStyle = css`
    width: 50px; 
    height: 50px; 
    border-radius: 100%;
    background: #bf5160;
    opacity: 0;
`

export default Animation3

이렇게 하면 정말 쉽게 구축 할 수 있습니다.

결과 ( 한 번만 동작 )

공식 사이트를 보시면 stop, pause 등등 다양한 옵션이 있습니다.

여러모로 인터렉션 구현하시는 분들에게 좋은 라이브러리인 것 같습니다.

react draggable 간단 샘플

JOTOKKI — Tue, 22 Jun 2021 16:05:35 +0900

react-draggable : https://www.npmjs.com/package/react-draggable

react-draggable

React draggable component

www.npmjs.com

객체를 자유롭게 드래그하는 모션을 찾다가 직접 구현도 해보았지만 렌더하는 과정에서 buffer가 생기는것 같아 라이브러리를 찾아보았습니다.

아주 쉽고 간단한게 사용할 수 있는 라이브러리 입니다.

1. 설치

npm install react-draggable

2. 불러오기 및 적용

import Draggable from "react-draggable"; 

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 }); // box의 포지션 값
  // 업데이트 되는 값을 set 해줌
  const trackPos = (data) => {
	setPosition({ x: data.x, y: data.y }); 
  };
  return (
  <div className="App">
    <Draggable onDrag={(e, data) => trackPos(data)} >
      <div className="box" >
        <div>BOX</div>
        <div>x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)}</div>
      </div>
    </Draggable>
  </div>
  );
}

// css
.box {
  position: absolute;
  cursor: move;
  color: black;
  width: 100px;
  border-radius: 5px;
  padding: 1em;
  margin: auto;
  user-select: none;
  background: lightgrey;
}

Draggable로 감싼뒤 필요한 옵션과 함수를 props에 전달합니다.

x, y 좌표를 toFixed(0) 으로 소수점을 제외한 값을 표시합니다.

참고로 반드시 css에서 absolute를 줘야 작동이 되는것은 아닙니다.

onDrag 이외에 다양한 옵션값이 있습니다. ( 상단 react-draggable 사이트에서 확인 가능 )

적용시 동작이 제대로 되더라도 콘솔에 에러가 날 수 있습니다.
useRef를 통해 해결할 수 있습니다. 자세한 사항은 여기를 참조하세요.

결과

3. 드래그 중 효과주기

드래그중 onStart와 onStop 옵션을 통해 함수를 호출 할 수 있습니다.

드래그 중 opacity를 주는 효과를 적용해 보겠습니다.

{ ... }
const [Opacity, setOpacity] = useState(false);

const handleStart = () => {
  setOpacity(true);
};
const handleEnd = () => {
  setOpacity(false);
};

{...}

<Draggable
  nodeRef={nodeRef}
  onDrag={(e, data) => trackPos(data)}
  onStart={handleStart}
  onStop={handleEnd}
>
  <div
    ref={nodeRef}
    className="box"
    style={{ opacity: Opacity ? "0.6" : "1" }}
  >
    <div>BOX</div>
    <div>
      x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)}
    </div>
  </div>
</Draggable>

이렇게 onStart을 통해 드래그를 하는 시점에서 setState를 하여 style 또한 변경 할 수 있습니다.

반면, onStop을 통해 드래그를 종료하는 시점에 다시 setState를 하여 stlye을 변경해 줍니다.

결과

Error] findDOMNode is deprecated in StrictMode

JOTOKKI — Tue, 22 Jun 2021 11:05:21 +0900

1. 에러 발생 원인

react-draggable을 쓸 일이 생겨서 사용하던 중,

동작은 제대로 작동했으나 콘솔에 에러가 떴다.

에러 이미지

보다시피 findDOMNode 는 StrictMode에서 제거되었다는 내용이다.

StricMode는 React16에서 추가된 모드로 생명주기에 예상치 못한 오류를 발생시키는 것을 방지하고자 한다고 한다.

참조 : https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React

A JavaScript library for building user interfaces

ko.reactjs.org

react-draggable 같은 경우 직접 개체를 컨트롤하다 보니 발생하는 문제인 것 같다.

2. 해결책

2-1. StrictMode 해제 하기

굳이 strictMode를 사용하지 않는 다면 해제시켜주면 된다.

// src/index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 이 부분은 다음과 같이 수정한다

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

2-2. nodeRef 주기

사실 어지간한 프로젝트는 StrictMode 사용을 권장할테니, 위의 방법이 최선이라고 할 수 없다.

제일 최적화된 방법은 useRef를 사용하는 것이다.

사실 이게 react-draggable 공식 사이트에서도 제시한 방안이다.

해결책 이미지

https://www.npmjs.com/package/react-draggable

react-draggable

React draggable component

www.npmjs.com

import { useRef } from 'react';

const nodeRef = useRef(null);

<Draggable nodeRef={nodeRef}>
  <div ref={nodeRef} className="box"></div>
</Draggable>

이렇게 useRef를 사용하면 깔끔하게 해결된다!

리액트에서 setInterval을 사용하여 타이핑 효과 주기

JOTOKKI — Fri, 18 Jun 2021 16:12:37 +0900

리액트에서 타이핑 효과를 주고 싶어 알아 보았더니 react-typing-effect과 같은 여러 라이브러리가 있었는데,

저는 좀 더 인공지능 스피커가 말하는 느낌을 주고 싶기도 했고,

구현하기 어렵지 않을 것 같아서 만들어 보았습니다.

기능

1. 뿌릴 텍스트 준비

2. 뿌릴 텍스트 (state)

3. 텍스트 길이 체크 (state)

import React, { useState, useEffect } from 'react'

const TypingText = () => {
  const txt = "오늘은 뭐 먹지?";
  const [Text, setText] = useState('');
  const [Count, setCount] = useState(0);
  
  return (
  	<p className="text" >{ Text }</p>
  )
}

export default TypingText

render 되자 마자 Text state 안에 text 의 문자열을 하나씩 setState 하였습니다.

문자열 길이는 Text.length로 비교해도 상관 없지만, 저는 Count state를 따로 두었습니다.

useEffect(() => {
    const interval = setInterval(() => {
        setText(Text + txt[Count]); // 이전 set한 문자 + 다음 문자
        setCount(Count + 1); // 개수 만큼 체크 
    }, 100);
    if(Count === txt.length)  {  // Count를 따로 두지 않고 Text.length 체크도 가능
        clearInterval(interval); // 문자열 체크를 통해 setInterval을 해제합니다
    }
    return () => clearInterval(interval); // 언마운트시 setInterval을 해제합니다
})

결과

적용된 화면

clear 하는 시점이 글자를 모두 출력한 시점이므로,

이후 액션 처리도 쉽게 할 수 있습니다.

{ ... }
const [Color, setColor] = useState('black');

const handleAfterAction = () => {
  setColor('orange');
}


useEffect(() => {
  { ... }
  if (Text.length === txt.length) {
  	clearInterval(interval);
  	handleAfterAction(); // 글자가 모두 출력된 후 handleAfterAction 함수를 호출합니다.
  }
  return () => clearInterval(interval);
});

return (
  <div className="App">
    <p className="text" style={{color: Color}}>{Text}</p>
  </div>
);

결과

적용된 화면

select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript)

JOTOKKI — Fri, 18 Jun 2021 14:27:12 +0900

1. Select CSS Customizing

Select 태그의 외형은 주로 각 브라우저에서 정의 합니다.

Chrome 과 IE

보다 시피 크롬(왼쪽), IE(오른쪽) 이 똑같이 보이면서도 미세 하게 다름니다.

공통적으로 둘 다 그리 예쁘게 생기진 않았습니다.

각 프로젝트 별로 스타일에 맞게 css를 통해 외형을 바꿀 수 있습니다.

사이즈나 폰트 컬러 등은 변경이 가능하지만, 일부 제한적으로 통제되기 때문에 (화살표 이미지 등)

약간의 편법(?)을 통하여 외형을 변경 할 수 있습니다.

1-1. Select 기본 화살표 없애기

<select name="fruits" class="select">
  <option disabled selected>fruits  </option>
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="grape">grape</option>
  <option value="melon">melon</option>
</select>

/* IE */
select::-ms-expand { 
	display: none;
}
.select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

appearance none을 통해 화살표를 없앨 수 있습니다.

단, IE는 select::expand 를 없애야 사라집니다.

1-2. select에 background 이미지 넣기

이후 select 자체에 백그라운드 이미지를 넣어줍니다.

/* IE */
{ ... }
.select {
  { ... }
  width: 150px;
  height: 35px;
  background: url('https://freepikpsd.com/media/2019/10/down-arrow-icon-png-7-Transparent-Images.png') calc(100% - 5px) center no-repeat;
  background-size: 20px;
  padding: 5px 30px 5px 10px;
  border-radius: 4px;
  outline: 0 none;
}
.select option {
  background: black;
  color: #fff;
  padding: 3px 0;
}

위의 소스를 보면 option 에도 background와 color도 커스텀이 가능한 것을 알 수 있습니다.

결과

select background 커스텀

1-3. select 와 이미지를 분리하기

단순히 외형만 바꾸고 싶다면 위의 방법이 마크업이 제일 간단합니다.

하지만 좀 더 커스터마이징의 범위를 넓히고 싶다면 아이콘만 따로 분리하는 것도 하나의 방법입니다.

예를 들어, select에 focus시 아이콘을 회전 시킬 수 있습니다.

물론 select를 한번 감싸고 이미지를 추가해야 합니다.

<div class="selectBox">
  <select name="fruits" class="select">
    <option disabled selected>fruits  </option>
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="grape">grape</option>
    <option value="melon">melon</option>
  </select>
  <span class="icoArrow"><img src="https://freepikpsd.com/media/2019/10/down-arrow-icon-png-7-Transparent-Images.png" alt=""></span>
</div>

.selectBox {
  position: relative;
  width: 150px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid lightcoral;
}
.selectBox .select {
  width: inherit;
  height: inherit;
  background: transparent;
  border: 0 none;
  outline: 0 none;
  padding: 0 5px;
  position: relative;
  z-index: 3; // select가 위로 올라와야 함
}
.selectBox .select option {
  background: lightcoral;
  color: #fff;
  padding: 3px 0;
  font-size: 16px;
}
.selectBox .icoArrow {
  position: absolute; 
  top: 0; 
  right: 0; 
  z-index: 1; 
  width: 35px; 
  height: inherit;
  border-left: 2px solid lightcoral;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectBox .icoArrow img {
  width: 50%;
  transition: .3s; // 부드럽게 회전
}

.selectBox .select:focus + .icoArrow img {
  transform: rotate(180deg);
}

결과

화살표 아이콘 분리

이 외에도 다양한 방법이 있겠지만 더 많은 조작과 제한이 있는 option의 커스터마이징을 더 자유롭게 하고 싶다면,

select 태그를 사용하지 않고 직접 만드는 것도 방법입니다.

css부터 script 까지 직접 만들어야 하는 번거로움도 있습니다.

2. Select 직접 구축

<div class="selectBox2 ">
  <button class="label">fruits  </button>
  <ul class="optionList">
    <li class="optionItem">apple</li>
    <li class="optionItem">orange</li>
    <li class="optionItem">grape</li>
    <li class="optionItem">melon</li>
  </ul>
</div>

.selectBox2 * { box-sizing: border-box; }
.selectBox2 {
  position: relative;
  width: 150px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid lightcoral;
  background: url('https://freepikpsd.com/media/2019/10/down-arrow-icon-png-7-Transparent-Images.png') calc(100% - 7px) center no-repeat;
  background-size: 20px;
  cursor: pointer;
}

.selectBox2:after {
  content: '';
  display: block; 
  width: 2px;
  height: 100%; 
  position: absolute; 
  top: 0; 
  right: 35px;
  background: lightcoral;
}

.selectBox2 .label {
  display: flex;
  align-items: center;
  width: inherit;
  height: inherit;
  border: 0 none;
  outline: 0 none;
  padding-left: 15px;
  background: transparent;
  cursor: pointer;
}

.selectBox2 .optionList {
  position: absolute; 
  top: 28px;
  left: 0;
  width: 100%;
  background: lightcoral;
  color: #fff;
  list-style-type: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 0;
  transition: .3s ease-in;
}

.selectBox2.active .optionList {
  max-height: 500px;
}

.selectBox2 .optionItem {
  border-bottom: 1px dashed rgb(170, 72, 72);
  padding: 5px 15px 5px;
  transition: .1s;
}

.selectBox2 .optionItem:hover {
  background: rgb(175, 93, 93);
}

.selectBox2 .optionItem:last-child {
  border-bottom: 0 none;
}

// 스크롤 커스텀
.selectBox2 .optionList::-webkit-scrollbar {width: 6px;}
.selectBox2 .optionList::-webkit-scrollbar-track {background: transparent; }
.selectBox2 .optionList::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;}
.selectBox2 .optionList::-webkit-scrollbar-thumb:hover {background: #303030;}

이렇게 하면 앞서 커스텀한 select 태그와 외형이 거의 같아집니다.

그리고 select 처럼 사용하기 위해 기능을 추가하는 일만 남았습니다.

* 기능

1. 클릭시 옵션 목록이 열림

2. 한번 더 클릭시 옵션 목록이 닫힘

3. 옵션 클릭시 옵션의 텍스트가 select 안으로 들어가면서 옵션 목록이 닫힘

/* 화살표 함수 */
const label = document.querySelector('.label');
const options = document.querySelectorAll('.optionItem');

// 클릭한 옵션의 텍스트를 라벨 안에 넣음
const handleSelect = (item) => {
  label.parentNode.classList.remove('active');
  label.innerHTML = item.textContent;
}
// 옵션 클릭시 클릭한 옵션을 넘김
options.forEach(option => {
	option.addEventListener('click', () => handleSelect(option))
})

// 라벨을 클릭시 옵션 목록이 열림/닫힘
label.addEventListener('click', () => {
  if(label.parentNode.classList.contains('active')) {
  	label.parentNode.classList.remove('active');
  } else {
  	label.parentNode.classList.add('active');
  }
})

/* 일반함수 */
const label = document.querySelector('.label');
const options = document.querySelectorAll('.optionItem');
// 클릭한 옵션의 텍스트를 라벨 안에 넣음
const handleSelect = function(item) {
  label.innerHTML = item.textContent;
  label.parentNode.classList.remove('active');
}
// 옵션 클릭시 클릭한 옵션을 넘김
options.forEach(function(option){
  option.addEventListener('click', function(){handleSelect(option)})
})
// 라벨을 클릭시 옵션 목록이 열림/닫힘
label.addEventListener('click', function(){
  if(label.parentNode.classList.contains('active')) {
    label.parentNode.classList.remove('active');
  } else {
    label.parentNode.classList.add('active');
  }
});

결과

div로 만든 select

커스텀된 셀렉트 박스가 개수를 알 수 없는 여러개인 경우 for문으로 각각 하위의 값을 찾아서 따로 기능을

붙여줘야합니다! 아래에 참고소스를 추가하였습니다.

* 단일인 경우

* 멀티인 경우

input search x 버튼 삭제 및 클리어 버튼 직접 만들어 넣기

JOTOKKI — Tue, 15 Jun 2021 16:50:16 +0900

input의 타입을 search로 지정하면 브라우저 내에서 input 초기화 버튼을 넣어줍니다.

예시 이미지

디자인을 중요시 하는 일부 프로젝트에서는 이것마저 커스텀해주기를 원합니다.

하지만 사실상 브라우저 내에서 생성하기 때문에 저 자체를 커스텀 할 수는 없고, 이를 보이지 않게 한 뒤 추가로 디자인과 기능을 넣어주면 됩니다.

약간은 번거로운 작업일 수 있지만 생각보다 간단합니다.

우선 브라우저 내에서 생성한 초기화 버튼을 없애려면 단순히 input의 타입을 text로 지정하거나 css에서 해결해 줄 수 있습니다.

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal{
    display:none;
}
/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    display:none;
}

( 테스트 해보니 IE10까지만 먹습니다. )

그리고 div로 한번 감싸고 input옆에 버튼을 추가해 줍니다.

버튼을 absolute로 붙인 뒤 버튼의 크기만큼 input에 padding을 줘야 input에 글씨를 많이 넣어도 가려지지 않아요.

// html
<div class="inputWrap">
    <input type="search" placeholder="검색어를 입력하세요" />
    <button class="btnClear"></button>
</div>

// css
.inputWrap {
    position: relative;
    height: 30px;
    display: inline-block;
 }
  
.inputWrap input {
  padding-right: 30px;
  height: inherit;
}

.inputWrap .btnClear {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: inherit;
  background: url(https://img.icons8.com/pastel-glyph/2x/cancel.png) center center no-repeat;
  background-size: 50%;
  border: none;
  outline: none;
  cursor: pointer;
}

그리고 input의 value를 초기화시켜줄 스크립트를 짜줍니다.

여러 가지 방식이 있겠지만 저는 부모의 자식을 찾아서 없애주는 방식으로 하겠습니다.

이렇게 하면 형제를 찾는 것보다 이점은 구조의 순서(input과 button)가 바뀌어도 상관이 없고, 복수개를 넣어도 에러가 발생할 일이 없기 때문입니다.

스크립트는 아래의 소스 둘 중 하나를 선택해서 사용하면 됩니다.

1. addEventListener

// javascript
// 한개일때
<script>
    var btnClear = document.querySelector('.btnClear');
    btnClear.addEventListener('click', function(){
        btnClear.parentNode.querySelector('input').value = "";
    })
</script>

// javascript
// 여러개일때 
<script>
    var btnClear = document.querySelectorAll('.btnClear');
    btnClear.forEach(function(btn){
        btn.addEventListener('click', function(){
            btn.parentNode.querySelector('input').value = "";
        })
    })
</script>

2. onClick

<div class="inputWrap">
    <input type="search" placeholder="나이를 입력하세요" />
    <button class="btnClear" onClick="clearInput(this)"></button> <!-- onClick 추가 -->
</div>

<script>
    var clearInput = function(obj) {
        obj.parentNode.querySelector('input').value = ""
    }
</script>

React 에서 select 사용하기

JOTOKKI — Mon, 14 Jun 2021 10:30:29 +0900

셀렉트를 사용하기 위해 다음과 같이 jsx 구문을 만들었습니다.

<select className="w150" onChange={handleChangeSelect}>
  <option value="1" >0.1톤</option>
  <option value="2">0.2톤</option>
  <option value="3">0.3톤</option>
  <option value="4" selected={true}>0.4톤</option> {/* 선택하려던 부분! */}
  <option value="5">0.5톤</option>
</select>

기존 html 에서 디폴트 옵션을 선택하려면 option 태그안에 selected 속성을 주어 동작 하였습니다.

하지만 리액트에서 이와 같이 사용하려고 한다면, 다음과 같은 에러를 뱉어냅니다.

React에서는 selected 대신 value를 사용합니다.

또한 selected의 선택된 value 값을 가져오려면, onChange를 사용해야합니다.

위의 소스를 수정해 보면 이렇습니다.

<select className="w150" onChange={handleChangeSelect} value={'4'}>
  <option value="1" >0.1톤</option>
  <option value="2">0.2톤</option>
  <option value="3">0.3톤</option>
  <option value="4">0.4톤</option>
  <option value="5">0.5톤</option>
</select>

위의 내용으로도 소스를 적용하기 어렵다면 아래의 내용을 봐주세요!

export default function App() {
  const selectList = ["apple", "banana", "grape", "orange"];
  const [Selected, setSelected] = useState("");

  const handleSelect = (e) => {
    setSelected(e.target.value);
  };

  return (
    <div className="App">
      <h1>Select in React</h1>
      <div>
        <select onChange={handleSelect} value={Selected}>
          {selectList.map((item) => (
            <option value={item} key={item}>
              {item}
            </option>
          ))}
        </select>
        <hr />
        <p>
          Selected: <b>{Selected}</b>
        </p>
      </div>
    </div>
  );
}

Selected 는 선택된 option이 들어갑니다.

onChange는 선택된 option의 value 값을 e.target.value 로 받은 후, Selected 에 setState 시켜줍니다.

만약 처음부터 grape가 선택 된 채로 설정 하고 싶다면 Selected 부분에 default 값을 넣어주면 됩니다.

const [Selected, setSelected] = useState("grape");

가운데서 좌우로 펼쳐지게 하기

JOTOKKI — Sun, 13 Jun 2021 20:56:03 +0900

메뉴를 hover 했을 때 아래에서 underline이 가운데부터 열리는 모션을 구현해 보고 싶어서 만들어봤습니다.

다음과 같은 모션입니다.

해당 모션은 border 나 text-decoration 으로는 구현할 수없고, a 태그의 :after를 사용하여 만들었습니다.

<div class="wrap">
	<a href="#">HOME</a>
	<a href="#">ABOUT</a>
	<a href="#">Q&A</a>
</div>

먼저 마크업은 간단합니다. 어차피 :after 를 사용할 꺼라 별다른 태그가 추가로 필요하진 않습니다.

먼저 a:after 에 absolute 속성을 주어 a 보다 아래에 위치시켜줍니다.

그리고 transform의 scale을 사용 하는게 핵심입니다.

scale 속성은 현재의 element를 확대 시켜주는 기능을 합니다.

.wrap {
	padding: 15px;
}
.wrap > a {
	position: relative;
	display:inline-block; 
	color: #000;
	text-decoration: none; 
	font-weight: bold;
	margin-right: 15px;
}

.wrap > a:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 8px;
	bottom: -6px;
	left: 0;
	background-color: #dc6b6b;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.3s ease-in-out;
}

위의 코드를 보면 a:after 의 width가 100%지만, scaleX의 값이 0 이므로 보이지 않습니다.

가로로 쪼그라들었다고 생각하시면 됩니다.

그럼 a를 hover 했을때 좌우로 늘려주려면, 원래 사이즈인 100%로 돌려주면 되기 때문에 scale 값을 1로 해주면 됩니다.

그러면 원래 100%의 사이즈로 돌아옵니다.

.wrap > a:hover {
	color: #dc6b6b;
}

.wrap > a:hover:after {
	visibility: visible;
	transform: scaleX(1);
}

이렇게 하면 끝입니다.

해당 모션은 underline 처럼 사용하는 것 외에도 다양하게 사용이 가능해 보입니다.

참고로 scale 은 확인해 보니 IE9 이하는 동작이 안되더라고요. 참고하세요!

React div 스크롤시 Fix 하기 (Element scroll)

JOTOKKI — Fri, 11 Jun 2021 17:42:49 +0900

이전에 window에서 스크롤할 때 특정 엘레멘트가 고정이 되는 기능을 구현했습니다.

이번에는 window가 아닌 특정 div 에서 스크롤했을 때 div안의 다른 객체가 고정이 되도록 구현해 보겠습니다.

사실 구현 방식은 똑같습니다.

단지 window 와는 달리 객체의 scroll 값을 구하기 위해서는 useRef를 사용해야 합니다.

저도 이 부분을 구현하는데 있어 많은 공부가 되었습니다.

객체에서 고정을 시키려면 fixed 와는 달리 absolute를 사용해야 합니다.

그리고 위치의 기준이 viewport 가 되는 fixed와 다르게 absolute는 상위 객체들 중 relative가 되는 값을 참조하여 위치가 결정됩니다.

그래서 제가 생각한 방법은 2가지 입니다. 거의 같으면서도 활용성이 조금 다를 것 같아서 두 가지 방식을 모두 적용해 보도록 하겠습니다.

축약한다면 다음과 같습니다.

1. 기존 처럼 클래스 하나를 붙여 위치를 컨트롤한다.

2. scroll값을 가져와 인라인 스타일로 실시간 반영한다. (다른 css 부분을 컨트롤하기 위해 어차피 클래스를 붙이긴 할 것이다.)

1. 클래스 하나로만 컨트롤 하기

구조를 먼저 짜봅니다.

box는 위치의 기준이 될 부모이고, 실제 스크롤이 되는 녀석은 boxInner입니다.

이 boxInner의 스크롤 값을 불러와 30 이상이 된다면 ScrollActive의 상태 값이 바뀌고,

ScrollActive 상태값이 바뀌면 smallBox에게 추가 클래스가 붙습니다.

// App.js
<div className="box"  >
    <div className={ScrollActive ? "smallBox fixed" : "smallBox"}>
        {
        ScrollActive ? 
            'I am fixed! ✨' : 
            'I will be fixed!  '
        }
    </div>
    <div className="boxInner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        { ... }
    </div>
</div>

// App.css
.box {
  position: relative; 
  top: 30px; 
  right: 30px; 
  width: 400px; 
  height: 400px;
  background: black;
  color: white; 
  overflow: hidden;
  margin-left: 100px;
}

.box .boxInner {
  width: 100%; 
  height: 100%; 
  overflow: hidden;
  overflow-y: auto;
  padding: 10px; 
}

.smallBox {
  position: absolute; 
  top: 50px; 
  right: 40px;
  z-index: 1;
  padding: 10px; 
  background: rgb(236, 97, 218); 
  border-radius: 6px;
  color: #fff;
  border: 1px solid rgb(183, 81, 187);
  text-align: left;
}

.smallBox.fixed {
  width: 100%; 
  top: 0;
  right: 0; 
  border-radius: 0;
  text-align: center;
}

SPA형태인 리액트 안에서 하나의 특정 엘리먼트를 선택하려면 useRef을 사용하면 됩니다.

ref가 걸린 엘리먼트의 속성을 확인할 수도 있고, 내장 함수를 바로 사용할 수 있습니다.

예를 들어 boxRef를 div에 연결한 뒤 콘솔로 찍어보면 해당 엘리먼트의 속성 값들을 확인해 볼 수 있습니다.

ref 정보

import React, { useState, useEffect, useRef } from 'react'

const boxRef = useRef(null);

<div className="box">
    { ... }
    <div className="boxInner" ref={boxRef}> {/* boxRef 설정하기 */}
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
        { ... }
    </div>
</div>

스크롤이 생성되는 div에 boxRef값을 적용합니다.

그리고 boxRef의 스크롤 값을 실시간으로 감시( ) 하여 값에 따라 컨트롤을 할 수 있습니다.

저는 ScrollActive를 하나 생성하여 컨트롤을 하겠습니다.

- scroll 값을 가져오기 : boxRef.current.scrollTop

- scroll 행위 여부를 판단하기 : addEventListener

const [ScrollY, setScrollY] = useState(0)
    const [ScrollActive, setScrollActive] = useState(false);
    function logit() {
        setScrollY(boxRef.current.scrollTop)
        if(boxRef.current.scrollTop > 30) {  
            setScrollActive(true);
        } else {
            setScrollActive(false);
        }
    }
    useEffect(() => {
        function watchScroll() {  boxRef.current.addEventListener("scroll", logit); }
        watchScroll();
        return () => { boxRef.current.removeEventListener("scroll", logit); }; 
    })
    <div className="box">
                <div className={ScrollActive ? "smallBox fixed" : "smallBox"}>
                    {
                    ScrollActive ? 
                        'I am fixed! ✨' : 
                        'I will be fixed!  '
                    }
                </div>
                <div className="boxInner" ref={boxRef}> {/* boxRef 설정하기 */}
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit ducimus perferendis, fuga nobis nihil eius similique. Laboriosam fuga doloribus quibusdam cumque beatae! Quae omnis, explicabo possimus molestias nam tempore!
                    { ... }
                </div>
            </div>

전체 소스

React 스크롤시 Fix 하기 (Window scroll)

JOTOKKI — Tue, 8 Jun 2021 14:55:14 +0900

스크롤바를 어느 값만큼 내리면 특정 엘레먼트의 css 속성이 변경되어야 하는 경우가 종종 있습니다.

우선 해당 환경을 만들기 위해 마크업을 합니다.

Window가 아닌 div 스크롤인 경우

- App.js

<div className="App">
      <div className="fixedBox">'I will be fixed!  '</div>
      <div className="content" style={{fontSize: '22px'}}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        ... // 스크롤이 생길때까지 복붙
      </div>
</div>

- App.css

.fixedBox {
  position: fixed; 
  top: 50px; 
  right: 20px;
  z-index: 1;
  padding: 10px; 
  background: lightseagreen; 
  border-radius: 6px;
  color: #fff;
  border: 1px solid rgb(23, 122, 117);
  text-align: left;
}

마크업이 완료된 화면

이 상태에서 300정도 스크롤을 했을때 'I will be fixed!' 라는 문구를 'I am fixed!' 로 바꾸고,

최상단에 고정하기 위해 top: 0 를 주도록 하겠습니다.

직접 css를 컨트롤 하지 않고 fixed라는 클래스를 가지고 컨트롤을 하겠습니다.

- App.css

{  ...  }

.fixedBox.fixed {
  width: 100%; 
  top: 0; 
  right: 0;
  font-size: 22px;
  border-radius: 0;
  text-align: center;
}

- App.js

    const [ScrollActive, setScrollActive] = useState(false);
    
    <div className="App">
      <div className={ScrollActive ? "fixedBox fixed" : "fixedBox"}>
        {
          ScrollActive ? 
            'I am fixed!  ' : 
            'I will be fixed!  '
        }
      </div>
      {/* <ElementScroll/> */}
      <div className="content" style={{fontSize: '22px'}}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        { ... }
      </div>
    </div>

ScrollActive 라는 state가 true 일때는 fixedBox 에 fixed 클래스를 추가하고 'I am fixed! ' 라는 문구를 출력 하도록 하고, flase 일때는 fixedBox 클래스에 'I will be fixed! ' 라는 문구를 출력 합니다.

top 에 붙고 width가 변경되는 부분은 모두 .fixedBox.fixed 클래스명을 참조한 css에서 변경할 수 있습니다.

그러면 핵심이자 남은 부분은 window 스크롤의 값을 확인하여 300 이상인 경우 ScrollActive 의 값을 true 로 이하인 경우는 다시 false로 변경해 주는 일만 남았습니다.

- scroll 값을 가져오기 : window.pageYOffset

- scroll 행위 여부를 판단하기 : addEventListener

  const [ScrollY, setScrollY] = useState(0); // window 의 pageYOffset값을 저장 
  const [ScrollActive, setScrollActive] = useState(false); 
  function handleScroll() { 
      if(ScrollY > 299) {
          setScrollY(window.pageYOffset);
          setScrollActive(true);
      } else {
          setScrollY(window.pageYOffset);
          setScrollActive(false);
      }
  }
  useEffect(() => {
      function scrollListener() {  window.addEventListener("scroll", handleScroll); } //  window 에서 스크롤을 감시 시작
      scrollListener(); // window 에서 스크롤을 감시
      return () => { window.removeEventListener("scroll", handleScroll); }; //  window 에서 스크롤을 감시를 종료
  });

useEffect 로 실시간 감시를 해줘야하는데, 주의할 점은 반드시 이벤트리스너를 삭제해 줘야 스크롤할때 2-3번씩 렌더 되지 않습니다.

전체 소스

체크박스 CSS 커스텀

JOTOKKI — Sun, 6 Jun 2021 00:13:43 +0900

체크박스는 대부분 그대로 사용하지 않고 디자인하는 경우가 많습니다.

input 타입을 checkbox로 사용시 브라우저에서 제공되는 체크박스의 형태는 변형하는 것에 한계가 있습니다.

CSS에서 셀렉터와 label태그를 이용하면 쉽게 커스텀이 가능합니다.

1. 마크업

input의 id와 label의 for 속성 갑을 동일하게 해야 input의 체크 여부가 작동합니다.

<div class="checkboxwrap">
    <input type="checkbox" name="opt" id="chk" class="checkbox" >
    <label for="chk">&nbsp;</label>
    <label for="chk">체크박스</label>
</div>

2. 스타일 커스텀

방식을 이렇습니다.

- 기존 checkbox를 숨김

- checkbox + label을 통해 체크박스 형태를 만듦

- checkbox:checked + label 을 사용하여 체크했을 때에 형태를 만듦

.checkboxwrap .checkbox{display: none!important;}
.checkboxwrap .checkbox + label {display: inline-block;background: url("체크 전 이미지") 0 0 no-repeat; background-size: cover; width: 22px; height: 22px; cursor:pointer; margin-right: 9px;}
.checkboxwrap .checkbox:checked + label {background: url("체크 후 이미지") 0 0 no-repeat; background-size: cover; }

radio도 똑같은 방식으로 적용할 수 있습니다.

1. 마크업

<div class="radiowrap" style="margin-bottom: 12px;">
    <input type="radio" name="options" id="opt1" class="radio" checked>
    <label for="opt1">&nbsp;</label>
    <label for="opt1">라디오1 checked</label>
</div>

2. 스타일 커스텀

체크시 라벨도 변경해 주고 싶다면 input + label + label 을 통해 선택할 수 있습니다.

.radiowrap .radio{display: none!important;}
.radiowrap .radio + label {display: inline-block;background: url("../images/ico/ico_chk2.png") 0 0 no-repeat; background-size: cover; width: 22px; height: 22px;width: 22px;cursor:pointer; margin-right: 9px;}
.radiowrap .radio:checked + label {background: url("../images/ico/ico_check2.png") 0 0 no-repeat; background-size: cover;}
.radiowrap .radio + label + label { color: #9fa1a2; }
.radiowrap .radio:checked + label + label { color: #fff; }

적용된 화면

React에서 가로 스크롤 구현하기 (react-horizontal-scrolling-menu)

JOTOKKI — Thu, 3 Jun 2021 18:40:04 +0900

리액트에서 마우스 휠로 가로 스크롤을 사용하기 위해 직접 만들어도 되지만,

width값 설정부터 wheel값도 가져와야 하고 많은 공수가 들어갑니다.

다행히 간단하게 활용할 수 있는 라이브러리가 있어서 공식 사이트의 예제를 가지고 hook버전으로 구현해 보았습니다.

URL : https://www.npmjs.com/package/react-horizontal-scrolling-menu

DEMO: https://codesandbox.io/s/lpjol1opmq

1. 설치

npm install --save react-horizontal-scrolling-menu

2. 적용하기

저는 필요한 부분만 적용하고 싶어 잡다한 기능은 배제하고 아주 심플하게 마우스 휠 스크롤만 사용하려고 합니다.

사용할 데이터는 코드 블록에 넣으니 자꾸 에러가 나네요.

예제에 나와있는 그대로

const list = [{name: 'item1'}, ..., {name: 'item25'}]

이렇게 사용하였습니다.

import ScrollMenu from 'react-horizontal-scrolling-menu' // ScrollMenu 가져오기

let list // 임시데이터 선언

// Item 단위의 컴포넌트
const MenuItem = ({ text }) => {
  return <div className="menu-item">{text}</div>;
};

// MenuItem들을 list만큼 생성한 List단위의 컴포넌트
export const Menu = list => (
  list.map(el => {
    const { name } = el;
    return <MenuItem text={name} key={name} />
  })
);

function App() {

  const [DataItem, setDataItem] = useState(null);
  useEffect(() => {
    setDataItem(Menu(list)); // Menu컴포넌트를 state에 저장
  }, [])
 

  return (
    <div className="App">
      <div className="wrap">
      // ScrollMenu 컴포넌트로 감싸주면 됩니다.
      {
        DataItem &&
        <ScrollMenu
          data={DataItem}
          wheel={true} // wheel 이 false 면 작동하지 않습니다
        />
      }
      </div>
    </div>
  );
}

export default App;

끝입니다. 아주 간단하네요.

3. 결과

마우스 스크롤을 내렸을 때 오른쪽으로 잘 스크롤됩니다.

이외에 다양한 옵션들이 있으니 사이트 가서 확인해 보세요~

[React][환경세팅] react-router-dom 사용하기

JOTOKKI — Tue, 25 May 2021 15:11:09 +0900

React 개발 시 귀찮은 환경 세팅을 기억이 나지 않을 때 일일이 찾아 사용하기 번거롭기 때문에 미리 정리해 놓기로 했습니다.

참조 1: https://reactrouter.com/web/guides/quick-start

참조 2: 리액트를 다루는 기술 서적 - 벨로 퍼트

개요

SPA의 단점중 하나는 너무 많은 자바스크립트를 한 번에 불러온다는 것인데,

이 문제는 코드스플릿을 통해 해소할 수 있는데 라우트 별로 파일들을 나누어 트래픽과 로딩 속도를 개선할 수 있다고 합니다. 페이 지지가 여러 개인 사이트는 거의 필수로 적용된다고 보면 됩니다.

설치

yarn add react-router-dom

설명

BrowserRouter: 주소에 대한 정보를 props에 담아 조회하거나 사용할 수 있다.
: HTML5의 History API를 사용하여 페이지를 새로고침 하지 않고 주소를 변경한다.
Link: history API를 사용하여 애플리케이션은 그대로 두고 경로만 변경한다.
: a 태그는 페이지는 전환하는 과정에서 새로운 페이지를 불러옴으로 Link를 사용한다.
URL Paramter || Query Parameter
- URL Parameter
- : /user/info
- Query Paramter
- : /user?detail=info

빠르게 세팅하기

1. 라우터가 필요한 영역 전체를 BrowserRouter로 감싸주기

: 꼭 index.js 안에 감싸줄 필요는 없지만 대부분의 사이트는 전역을 상대로 화면 전환을 하므로 index.js나 App.js, 혹은 메인이 되는 페이지에서 감싸도록 합니다. 그래야 전달되는 props값을 받을 수 있어 제대로 작동이 됩니다.

// index.js
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

2. 링크 만들어주기 (내비게이션)

리액트는 페이지 이동을 위해 a 태그 대신 Link라는 컴포넌트를 사용합니다.

a 태그를 사용하게 되면 페이지 새로고침이 일어나기 때문에 SPA 개발 특성상 전체 새로고침이 아닌 부분 렌더를 해야하기 때문에 a 태그 대신 Link 태그를 사용합니다.

렌더 이후에 개발자 모드에서는 a 태그로 확인이 가능하면 css 또한 a 태그로 생각하고 스타일을 입히면 됩니다.

// Nav.js
import React from 'react'
import { Link } from 'react-router-dom'

function Nav() {
    return (
        <ul className="navList">
            <li className="navItem"><Link to="/">Home</Link></li>
            <li className="navItem"><Link to="/info">Info</Link></li>
            <li className="navItem"><Link to="/user">User</Link></li>
        </ul>
    )
}

export default Nav

3. 링크 별 페이지 만들기

특정 url 이외에 다른 경로로 접속했을 경우 무조건 404 페이지를 띄우고 싶다면

마지막에 NotFound 페이지를 Route에 걸어주면 됩니다.

// App.js
import {
  Switch,
  Route
} from 'react-router-dom'

//components
import Nav from './components/Nav'
import { 
  Home,
  Info,
  User,
  NotFound
} from './pages'

function App() {
  return (
    <div className="App">
      <Nav/>
      <hr/>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/user" component={User}/>
        <Route exact path="/info" component={Info}/>
        <Route component={NotFound} />  // url이 /, /user, /info아 아닌 모든 경우 NotFound가 렌더됩니다
      </Switch> 
    </div>
  );
}
export default App;

4-1. URL Paramter 사용하기

user라는 페이지에 userid라는 이름으로 값을 전달합니다.

만약 url에 '/user/hong'이라고 접속을 하면, 컴포넌트 페이지에서는 userid='hong'으로 담겨옵니다.

// - App.js
- App.js
<Switch>
	{...}
	<Route exact path={["/user/:userid", "/user"]} component={User}/>
</Switch>

저 값(넘어오는 userid의 value값)에 접근을 하기 위해서

match.params. 키값 (여기서 키값은 userid가 됩니다.)으로 접근하여 값을 받아볼 수 있습니다.

- User.js

// 목업데이터
const data = {
    user1: {
        name: '홍길동',
        userId: 'hong'
    },
    user2: {
        name: '김둘리',
        userId: 'kim'
    }
}
const User = ({ match }) => {
    const userid = match.params.userid; // match.params로 파라미터값을 받을 수 있음
    const userId2 = data[userid];  // 위 data목업데이터 에서 키값을 찾아 존재여부 확인    
    return (
        <div>
            This is User Page! <br/>
            {
                userId2 ?
                <p>User id is {userid}</p> : 
                <p>No User</p>
            }
        </div>
    )
}
export default User

4-2. Query Paramter 사용하기

url parameter에서는 url/:key 이렇게 값을 전달했다면,

query parameter에서는 /url? key=value 이렇게 기존 get 방식을 사용합니다. (저는 지금도 명칭이 너무 했갈립니다 ^^;;)

- App.js

<Route exact path={["/info?userid='user1'", "/info"]} component={Info}/>

대신 값을 받아보기 위해 url뒤에 붙은? 값을 제거하기 위해 한 번 더 작업을 해주면 깔끔하게 값을 받아볼 수 있습니다.

저는 '리액트를 다루는 기술'이라는 책을 보고 학습을 하였기 때문에 해당 서적에서 제시해주는 방법에 따라 qs를 사용하였습니다.

* qs 설치

: qs는 querystring 타입의 데이터를 이리저리(?) 다룰 수 있게 해주는 라이브러리입니다.

yarn add qs

query parameter의 값은 location에서 받아볼 수 있습니다.

- Info.js

import qs from 'qs'
// 목업데이터
const data = {
    user1: {
        name: '홍길동',
        detail: 'hong gill dong detail'
    },
    user2: {
        name: '김둘리',
        detail: 'kim dool li detail'
    }
}
const Info = ({ location }) => {
	// location 에서 받음
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true // url 상에 앞에 ? 를 ignore함 
    })
    const queryCheck = data[query.userid];
    return (
        <div>
            This is info Page! <br/>
            {
                queryCheck &&
                <p>{queryCheck.userid}</p>
            }
        </div>
    )
}
export default Info

이렇게 정리해 두니 괜히 뿌듯합니다. ✨

[에러노트] defaultState for reducer handling [object Object] should be defined

JOTOKKI — Wed, 17 Mar 2021 11:29:33 +0900

리덕스 스터디중 handleAction을 사용하던 중 해당 소스에서 다음과 같은 에러가 발생함

// 리덕스 모듈
import { createAction, handleAction } from 'redux-actions'

const INCREASE = 'counter/INCREASE'
const DECREASE = 'counter/DECREASE'

export const increase = createAction(INCREASE)
export const decrease = createAction(DECREASE)

const initialState = 0

const counter = handleAction({
   [INCREASE]: state => state + 1,
   [DECREASE]: state => state - 1
}, initialState)

export default counter;

defaultState for reducer handling [object Object] should be defined

에러화면

이러한 에러가 나타나는 이유는 액션이 2개 이상이기 때문.

2개 이상의 액션을 처리하려면 handleAction => handleActions로 변경한다.

그러면 에러가 해결된다 .

굳이 굳이 handleAction을 사용해야한다면, 하나의 액션만 설정해 주면된다.

// 리덕스 모듈
import { createAction, handleAction } from 'redux-actions'

const INCREASE = 'counter/INCREASE'

export const increase = createAction(INCREASE)

const initialState = 0

const counter = handleAction(
    INCREASE,
    state => state + 1,
    initialState
) 

export default counter;

보통의 프로젝트를 보면 handleAction은 거의 사용할 일이 없을것 같다.

React Hook 에서 Scroll 컨트롤 하기! top버튼 구현

JOTOKKI — Tue, 9 Feb 2021 23:10:57 +0900

How can I make a Top Button, click to scroll to the top ?!

서비스용 홈페이지를 개발하다 보면 항상 구현해야 하는 부분은 스크롤 입니다.

처음에는 무조건 ref 를 사용해서 컨트럴 해야 한다고 생각했었는데, 어쨌든 리액트도 자바스크립트다 보니 꼭 그렇지만은 않더라구요. useEffect에서 addEventListener를 걸어주고 removeEventListener로 clean-up을 해주기만 하면 되더라구요. 생각보다 간단하게 구현 할 수 있었습니다.

다음과 같이 클릭하면 페이지 최상단으로 스크롤 되는 기능을 구현해 보고자 합니다.

우선 구조를 잡아보겠습니다.

<div className="wrap">
  <button className="topBtn">TOP</button>
  <div className="inner">
    <h1>Fixed Scroll Top</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, voluptas ratione libero earum alias, officia temporibus magni possimus atque rem distinctio autem unde eaque. Minus quaerat odio mollitia asperiores neque?
      ...
  </div>
</div>

CSS도 미리 올려두겠습니다. 디자인을 조금이라도 이쁘게 하고자 노오력 했지만..

CSS는 따로 설명 드리지 않겠습니다.

.wrap {
  position: relative;
  padding: 30px;
  font-size: 18px;
  line-height: 1.6;
  background: lightgray;
}

.topBtn {
  position: fixed; 
  opacity: 0; 
  bottom: 40px; 
  right: 40px;
  z-index: -10; 
  width: 50px; 
  height: 50px;
  border-radius: 100%;
  border: 0 none;
  background: lightpink;
  color: blueviolet;
  border: 2px solid blueviolet;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -0.06em;
  box-shadow: 1px 1px 6px 3px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: opacity 0.3s ease-in;
}

.topBtn.active {
  z-index: 10; 
  opacity: 1; 
}

.topBtn:hover,
.topBtn:focus,
.topBtn:active { 
  outline: 0 none; 
}

자, 그럼 구현하고 싶은 내용을 정리해보겠습니다!

1. 스크롤을 100px 이상 내리면 TOP 버튼이 나타난다.

2. TOP버튼을 클릭하면 스크롤리 최상단으로 올라간다.

우선 스크롤의 값을 알기 위해 ScrollY 라는 이름으로 state를 만듦니다.

그리고 함수를 하나 정의하여 window.pageYoffset 값을 ScrollY 에 저장 합니다.

이 부분을 스크롤 할때마다 반복하면 window의 스크롤 값이 ScrollY에 저장되고, ScrollY의 값이 저장되면서 useEffect를 통해 실시간으로 바뀌는 ScrollY의 값을 알 수 있겠지요?

  const [ScrollY, setScrollY] = useState(0);  // 스크롤값을 저장하기 위한 상태
  const handleFollow = () => {
    setScrollY(window.pageYOffset); // window 스크롤 값을 ScrollY에 저장
  }

  useEffect(() => {
    console.log("ScrollY is ", ScrollY); // ScrollY가 변화할때마다 값을 콘솔에 출력
  }, [ScrollY])

  useEffect(() => {
    const watch = () => {
      window.addEventListener('scroll', handleFollow);
    }
    watch(); // addEventListener 함수를 실행
    return () => {
      window.removeEventListener('scroll', handleFollow); // addEventListener 함수를 삭제
    }
  })

지금 같이 스크롤을 사용하는 경우 처럼 한 번 실행하는 것이 아닌 여러번 addEventListener를 사용할 때에는 removeEventListener를 꼭 해주세요!

그렇지 않으면 여러번 호출 되고, 메모리에 gabarge collect

결과 이미지

이렇게 스크롤의 위치값을 알 수 있습니다.

그러면 나머지는 더 쉽지요.

저는 임의로 스크롤이 100정도 내려가면 버튼이 나타나게 하였습니다.

상태에 따라 버튼을 보이고 안보이고를 결정하는 BtnStatus 값을 하나 두었습니다.

물론 아래의 예시처럼 버튼을 아예 렌더를 하느냐 안하느냐로 할 수 있습니다.

{ BtnStatus &&<button className="topBtn">TOP</button> }

하지만 저는 opcity와 transition을 통해 좀 더 부드러운 효과를 주고 싶어서 그냥 클래스로 제어하였습니다.

import { useState, useEffect } from 'react'
import './App.css';

function App() {

  const [ScrollY, setScrollY] = useState(0);
  const [BtnStatus, setBtnStatus] = useState(false); // 버튼 상태
  
  const handleFollow = () => {
    setScrollY(window.pageYOffset);
    if(ScrollY > 100) {
      // 100 이상이면 버튼이 보이게
      setBtnStatus(true);
    } else {
      // 100 이하면 버튼이 사라지게
      setBtnStatus(false);
    }
  }

  const handleTop = () => {  // 클릭하면 스크롤이 위로 올라가는 함수
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
    setScrollY(0);  // ScrollY 의 값을 초기화
    setBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
  }

  useEffect(() => {
    const watch = () => {
      window.addEventListener('scroll', handleFollow)
    }
    watch();
    return () => {
      window.removeEventListener('scroll', handleFollow)
    }
  })

  return (
    <div className="wrap">
      <button 
        className={BtnStatus ? "topBtn active" : "topBtn"} // 버튼 노출 여부
        onClick={handleTop}  // 버튼 클릭시 함수 호출
      >TOP</button>
      <div class="inner">
        <h1>Fixed Scroll Top</h1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, voluptas ratione libero earum alias, officia temporibus magni possimus atque rem distinctio autem unde eaque. Minus quaerat odio mollitia asperiores neque?
          ...
      </div>
    </div>
  );
}

export default App;

이렇게 구현하였습니다. 생각 보다 소스도 짧고 간편해서 마음에 듭니다.

물론 Scroll 부분만 따로 컴포넌트로 관리를 하면 더욱 좋겠네요!

저는 샘플 소스라 그냥 한 곳에 작성하였습니다.

scroll 관련하여 많은 라이브러리도 있고 ref를 사용하는 방법도 있습니다.

각 프로젝트 상황에 맞게 찾아서 적용하시면 되겠습니다.

저는 중요하게 컨트롤 하는 부분이 아니라서 최대한 손이 덜 가고 간단하게 구현할 수 있는 것을 찾다보니 이렇게 깔끔하게 구현할 수 있는 소스를 찾아서 공유 드립니다.

오늘도 이렇게 한 토막 배우네요!

해당 소스가 도움이 되셨다면, 저도 기쁩니다!

그럼 다들 즐거운 코딩 하세요!