Kkan_-

요즘 J-pop의 매력에 빠져 살고 있다.

밴드 음악이나 인디스러운 음악을 좋아해서 어쩌다 듣게 되었는데,

지금까지 푹 빠져있다..ㅎㅎ

J-pop을 매일 듣다보니 자연스럽게 일본어에 관심이 갔고,

최근에는 지인들과 도쿄에도 다녀왔다.

여행을 하면서 간간히 일본어가 들리고, 이해하게 되니까

공부에 대한 욕심이 확 생겨버렸다.

함께 간 형들이 일본어 공부 어플같은 거 있으면

잘 쓸 것같다고 해서 

행동파인 나는 바로 작업에 착수

이런 앱이 탄생하게 되었다.

1. 취지

실용적인 공부를 원했다.

목표는 진지하게 일본어에 대해 공부를 하고, 원어민 급 혹은 자격증 공부를 하기 위함이 아니다.

여행을 가면 무슨 말하는 지 알아는 들을 수 있고, 가벼운 대답 정도는 할 줄 알게 만들자!

가 목표였기 때문에 깊게 들어가고 싶지 않았다.

때문에 사용자가 이 서비스를 이용하고 '일본어란 이런거구나.', '첫 공부로 좋네' 정도의 생각을 가졌으면 하는 바람이다.

2. 학습 방법

단순하게 반복학습을 목표로 했다.

히라가나를 외우고 싶으면 히라가나를 무한 반복, 단어를 외우고 싶으면 단어를 무한 반복 ...

그리고 발음은 로마지라는 영어를 많이 사용하던데.. 

잊지말자! 한국어는 모든 발음이 가능하다는 든든함이 있다^_^

3. 앞으로의 계획

일단 해당 앱을 계속적으로 업데이트 할 예정이다. 처음에는 포트폴리오로 써야하니까 '가볍게 하고 말자' 했는데..?

생각보다 주변 지인들은 잘 사용해주고 있다. 피드백도 간간히 해주고 있고 ...

"실용적인 회화 패턴" 까지 끝내면 내 나름의 시즌 1 개발 은 끝!

그리고 앞으로의 계획은...

사실 누가 얼마나 이용할 지는 잘 모르겠다. 그래도 이용해주는 사람들을 위해 질릴때까지 할 생각이다.

p.s 혹시 이걸 보고 들어오시는 분들!

절대로 이상한거 아니니 많이 이용해주시고, 피드백 주시면 너무나 감사하겠습니다!~~

- 해당 서비스가 불법적으로 사용될 경우 바로 감옥갑니다!

https://study-japanese.vercel.app/

많관부~

여전히 사이드 프로젝트를 진행하고 있다.

이게 뭐냐고! 

코드를 확인해봤다.

난 분명히 잘 설정 했는데?!

1. 문제 해결

- Fragment 사용

{teamList
          .sort((a, b) => a.rate - b.rate)
          .map((item) => {
            return (
              <React.Fragment key={item.name}>
                <div
                  className=" flex flex-col w-full overflow-hidden relative"
                  style={item.rate === 1 ? { height: 230 } : null}
                >
                ...
                </div>
              </React.Fragment>
            );
          })}

- Fragment 삭제

{teamList
          .sort((a, b) => a.rate - b.rate)
          .map((item) => {
            return (
                <div
                  className=" flex flex-col w-full overflow-hidden relative"
                  style={item.rate === 1 ? { height: 230 } : null}
                  key={item.name}
                >
                ...
                </div>
            );
          })}

2. 원인

리스트 렌더링할 때, key를 설정해야한다는 사실을 알고 있었는데,

Fragment 를 사용했다고 없는 애 취급을 했ㄷr,... (미안해..)

Fragment는 실제 DOM에 렌더링되지 않는 단순한 래퍼 역할을 한다.
하지만, React 내부적으로는 Fragment도 컴포넌트 트리에서 노드로 취급된다.
따라서, 리스트 렌더링에서 Fragment도 Key를 가져야 한다!

앱을 사용하다보면 스크롤을 아래로 내릴 때, 하단의 Bar가 사라졌다가 올릴때 다시 나타나는 경우를 확인 할 수 있다.

나도 개인 프로젝트에 사용할 일이 있어서 정리해서 올려본다.

[완성코드 - Next.js]

'use client';

import DimmedWrapper from '@/components/DimmedWrapper';
import Navigation from '@/components/Navigation/Navigation';
import React, { useEffect, useState } from 'react';

type Props = {
  children: React.ReactNode;
};

type ScrollType = 'up' | 'down' | null;

const Layout = ({ children }: Props) => {
  const [scrollDirection, setScrollDirection] = useState<ScrollType>(null);

  useEffect(() => {
    let lastScrollY = window.scrollY;

    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      if (currentScrollY > lastScrollY) {
        setScrollDirection('down');
      } else if (currentScrollY < lastScrollY) {
        setScrollDirection('up');
      }
      lastScrollY = currentScrollY;
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      <DimmedWrapper />
      {children}
      <div className={scrollDirection === 'down' ? 'hidden' : ''}>
        <Navigation />
      </div>
    </>
  );
};

export default Layout;

[설명]

한참을 고민하다가 떠올렸는데,

그냥 단순하게 마지막 스크롤 위치와 이동한 위치를 비교해서 

스크롤이 위로 갔는지 아래로 갔는지 판단하면 된다.

이렇게 사라진다 개꿀~

오른쪽 그림을 보면

" 스타벅스 아이스 카페 아메리카노 " 이지만,

쿠폰을 클릭하면 

" 스타벅스 아이스 카페 아메리카 " 가 되어있다.

이 문제는 

.selected { border: 3px solid #7661FB; }

해당 코드에서 발생한 문제이다.

쿠폰이 클릭되면 ' selected ' 라는 클래스가 추가되도록 설정했는데, 

css가 border로 되어 있기 때문에 안쪽 공간을 border가 잡아먹기 때문에 발생한다.

그렇다면 어떻게 해야할까?

.selected { outline: 3px solid #7661FB; }

이렇게 하면 된다. ^ㅡ^

대게 디자인 자체를 바꿀때에는 border를 사용하지만,

디자인은 그대로인데, 기능적인 강조를 원하면 box를 해치지않는 outline이 더 좋다.