유데미 취업부트캠프 - 프론트엔드&백엔드 : 33일차 TIL

SASS

Sass(또는 Syntactically Awesome Stylesheets)는 CSS의 확장된 문법을 제공하는 스타일 시트 언어입니다. Sass는 더 간결하고 유지보수가 쉬운 CSS 코드를 작성할 수 있도록 도와주는 기능을 제공합니다. 주로 CSS의 기능을 확장하고 중복을 줄이며 가독성을 향상시키는 데 사용됩니다.

 

❗️SASS로 작성하면 CSS로 바꿔주는 작업을 라이브러리, CRA가 해준다고 한다.

 

npm install -D sass

 

#layout-header {
  background-color: yellowgreen;
  height: 80px;
  padding: 0 3rem;
  display: flex;
  align-items: center;

  .layout-header-logo {
    > a {
      font-size: 24px;
      font-weight: 700;
      color: black;
      text-decoration: none;
    }
  }
  nav {
    a {
      font-size: 15px;
      font-weight: 500;
    }
  }
}

 

sass를 사용하면 하위요소를 css코드블록 내에서 작성할 수 있다. 

👉🏻 선택자를 편하게 작성할 수 있게된다.

 

a {
     font-size: 15px;
     font-weight: 500;

     &:hover {
         color: blue;
          }
        }

✨ &를 사용해 자기 자신을 지칭할 수 있다.

 

 

Movie.module.scss 

 

tailwind-css

npm install -D tailwindcss
npx tailwindcss init

 

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

 

  <div>
      <label for="email">email</label>
      <input
        required
        id="email"
        type="email"
        placeholder="example@gmail.com"
        class={inputClassName}
      />
      <label for="password">password</label>

      <input
        placeholder="password"
        required
        id="password"
        type="password"
        class={inputClassName}
      />
      <label for="intro">한줄 소개</label>
      <textarea
        id="intro"
        placeholder="자신을 소개해보세요"
        class="mb-4 px-3 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
      ></textarea>
      <button class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        회원가입
      </button>
    </div>

 

tailwind를 사용해 만든 회원가입 폼이다.

 

✓ key props

배열을 사용해 여러개의 요소를 만들어 낼때 key props을 사용해야한다고 경고를 발생시키는데, key를 사용해야하는 이유는 virtual DOM과 real DOM을 비교해 렌더링할때 좀 더 효율적이기 때문이라고 한다.

 

{fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}

이렇게 index를 사용해, key에 넣을수도 있지만 이 방법은 권장되지 않는다고 한다. 만약 text가 다르다면 text를 오히려 key로 사용하는것을 권장한다고 한다.

 

❗️nanoId

수업중 nanoId로 key값을 주는건 어떤지에 대한 질문이 있었는데, state를 통해 리렌더링이 된다면 계속 nanoId값이 바뀌면서 key가 바뀌는 문제가 발생하기 때문에 key가 바뀌면, DOM입장에선 또 렌더링이 발생하므로 적합하지 않는다고 한다.

 

저번 시간에 자바스크립트로 작성한 netflex페이지 리액트로 만들기를 해보았다

 

const nowPlaying =
  'https://api.themoviedb.org/3/movie/now_playing?language=ko-KR&page=1&region=KR';

const topRated =
  'https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1&region=KR';

// -- 방법1에 필요 --
// const options = {
//   method: 'GET',
//   headers: {
//     accept: 'application/json',
//     Authorization:
//       'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJkYjdiMTJjM2M2NjhiMjNjZThhNmNhMjFiYTE5M2JjYiIsInN1YiI6IjY1YTlkNjZjNTM0NjYxMDEzOGNkMTFhYiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.SYgTW92CkzlWhUcTXHe5m8wIx6jYWHxLcrTLcMwFbQ4',
//   },
// };

// -- 방법2, 3에 필요 --
async function getMovies(endpoint) {
  const response = await fetch(endpoint);
  const data = await response.json();
  const movies = data.results;

  return movies;
}

function App() {
  // -- 방법3 --
  const [movies, setMovies] = useState({ nowPlaying: [], topRated: [] });

  useEffect(() => {
    Promise.all([getMovies(nowPlaying), getMovies(topRated)]).then(
      ([nowPlaying, topRated]) => setMovies({ nowPlaying, topRated })
    );

    // -- 방법2에 필요 --
    // const [nowPlayingMovies, setNowPlayingMovies] = useState([]);
    // const [topRatedMovies, setTopRatedMovies] = useState([]);

    // -- 방법2 --
    // getMovies(nowPlaying).then((movies) => setMovies({ nowPlaying }));
    // getMovies(topRated).then((movies) => setMovies({ topRated }));

    // -- 방법1 --
    // fetch(nowPlaying, options)
    //   .then((response) => response.json())
    //   .then((response) => setNowPlayingMovies(response.results))
    //   .catch((err) => console.error(err));

  }, []);

 

강사님이 코드리뷰를 해주시면서, 다양한 fetch방법들을 보여주셨는데, state를 따로 관리하지 않고 객체형태로 한번에 두가지 movie정보를 관리하고, Promise.all을 사용해 병렬적으로 fetch하는 방법을 사용하셨다. 이때 매개변수의 객체는 프로미스의 배열이라는것에 유의하자.