코딩연습장

import React, { useEffect, useRef, useState } from "react";import Title from "./container/Title.jsx";import MedalListBox from "./container/MedalListBox.jsx";import "./Container.css";import MedalInputForm from "./container/MedalInputForm.jsx";import Modal from "./container/Modal.jsx";import useDidMountedEffect from "../hooks/useDidMountedEffect.jsx";const Container = () => { const modalRef = u..

페이지에서 입력한 값이 로컬스토리지에 저장되고, 브라우저를 껐다 키더라도 해당 데이터가 남아있게 하기 위해 로컬 스토리지를 사용하였다. useEffect(() => { const countries = JSON.parse(localStorage.getItem("countries")); setTotal(countries);}, []);useEffect(() => { if (total.length > 0) localStorage.setItem("countries", JSON.stringify(total));}, [total]);useEffect를 사용하여 화면이 로드되고 난 뒤 localStorage에 있는 countries키의 값을 가져오고, 해당 값을 total State에 저장한다.그리고..

JSX 문법이란 무엇일까요?JSX문법이란 Javascript Syntax eXtension으로, javascript를 확장한 문법이다.브라우저에서 실행하기 전에 바벨(babel)을 이용하여 javascript 형태의 코드로 변환한다.아래 5가지 규칙을 따라야 한다.1. 반드시 부모요소 한개로 감싸야 한다.// 잘못된 케이스function App() { return ( 안녕! 하세요! )}// 올바른 케이스function App() { return ( 안녕! 하세요! )} 2. 자바스크립트 표현식function App() { let hello = '안녕!' return ( {hello} 하세요..

일단 기능구현을 목적으로 코드를 작성하다보니 조금 비효율적으로 작성한 코드가 몇가지 있었다.따라서 오늘은 함수를 리팩토링하였다. const checkCountryName = () => { if (!country) { alert("국가명을 입력해주세요!"); return true; }};const findCountryName = () => { const index = total.findIndex((el) => el.name === country); if (index === -1) { alert("등록되지 않은 국가입니다."); return true; }};const isCountryExist = () => { if (tota..

이전에 배웠던 자바스크립트 강의와 리액트 강의를 제공받아 모두 들었다.자바스크립트는 까먹었었지만 최근 몇주간 공부하고 프로젝트를 진행하느라 조금은 친숙해진 상태였고, 리액트는 과거에 오래 공부한 적이 있지만 완벽히 기억이 나지 않아 모두 듣기로 결정하였다. SPA, virtual DOM, props, state, route 등 친숙한 단어들이 눈에 들어왔다.부모자식간에 state를 props로 내려주어 상태를 변경하고 상태를 변경할때는 불변성이 어쩌구저쩌구강의도 어렵지 않게 들었지만, 개인과제를 시작하려다보니 조금 헷갈리는 부분도 있었다.먼저 요청받은 페이지를 보고 "어떤 기준으로 컴포넌트를 분리해야 할까?"가 제일 먼저 떠올랐다.컴포넌트 분리 기준에서 가장 중요하게 생각해야할 점은 "재사용성"이다.과연..

팀 프로젝트가 끝났다. 바닐라 자바스크립트로 DOM을 동작하고, API요청을 하고 여러가지 작업을 진행하였다.처음으로 html파일을 두개를 만들어 페이지 이동을 구현해보았고, 페이지 이동 시 특정 id를 parameter로 넣고 빼는 작업도 해보았다.iframe을 이용하여 유튜브 영상을 페이지에 넣어보기도 하였고, 가로 스크롤을 휠로 작동시키는 것도 해보았다.Youtube Data API v3를 사용하여 영상의 유효성검사도 진행해보았다.Position: absolute도 어느정도 감을 잡았고, z-index와 함께 사용하여 배경 그림도 넣어보았다.다음은 우리팀의 KPT회고이다.Keep - 현재 만족하고 있는 부분바닐라 자바스크립트로만 코딩한 점팀 피드백 및 소통이 원활한 점서로 예쁜말 쓰고 화내지 않고 ..

저번이나 이번 프로젝트 둘 다 나는 html에 작성하던 script를 모듈화 하였다. 그럼 우리가 모듈화 하는 이유는 뭘까? 가장 중요한 첫번째 이유는 "코드의 재사용성"이다. 가령 우리가 a와 b를 더해주는 함수를 사용할 때마다 만든다고 가정해보자.function a() { function add(a,b) { return a+b } console.log(add(1,2))}function b() { function add(a,b) { return a+b } console.log(add(1,2))}function c() { function add(a,b) { return a+b } console.log(add(1,2))}한눈에 봐도 더러운 코드가 되고,..

디테일페이지는 위와 같이 출연진과 비슷한 영화목록을 보여주는 박스들이 있다.이 박스들은 가로로 정렬되어있으며, 대부분이 기본 width값을 넘기 때문에 가로 스크롤이 생기도록 설정하였다.하지만 마우스를 갖다대고 휠을 아무리 내려도 우측의 기본 스크롤이 움직였다.물론 사용자가 직접 스크롤을 클릭하고 움직여도 되겠지만, 조금 더 편하게 만들기 위해 이벤트를 설정해주었다. export function addWheelEvents(id) { const $id = document.getElementById(`${id}`); function wheelEvent(e) { e.preventDefault(); $id.scrollTo({ left: $id.scrollLeft + e.del..

오늘은 디테일 페이지 반응형 작업을 진행하였다.@media를 사용하여 화면 너비에 따른 반응형 작업을 할 예정이었다.width값을 의도적으로 줄이며 작아져야 할 부분을 체크하여 진행하였다.하지만 역시나 문제가 발생했다. const backgroundImage = document.createElement("img");backgroundImage.className = "backgroundPoster";backgroundImage.src = `https://image.tmdb.org/t/p/w500${backdrop_path}`;$detailContainer.appendChild(backgroundImage);바로 배경에 깔아주는 포스터와 메인 박스에서 문제가 생긴 것이었다.문제는 메인박스에 적용되어있던 po..

웹 페이지에 영상플레이어를 넣으려면 video태그를 사용해야 하지만, 그렇게 하면 서버에 부담이 될 것이다.따라서 우리는 유튜브영상을 iframe을 이용하여 가져와 보자!원하는 영상의 공유버튼을 누르고, 모양을 누른다. 그러면 위처럼 iframe태그가 나오는데, 이를 복사해서 html에 넣으면 유튜브 비디오플레이어가 나오게 된다. 하지만 나는 원하는 영화의 예고편을 가져와야한다. 그리고 위의 src중 embed/뒷부분의 내용을 tmdb에서 지원해준다.따라서 저것만 넣어서 iframe을 만들고, 동적으로 붙여주는 작업만 하면 예고편 영상을 띄울 수 있는 것이다.디테일 페이지의 parameter에서 id값을 가져와 해당 id값을 tmdb 영상 관련 api에 요청을 한다.그러면 tmdb에서는 영화와 관련된 영..