Hello World!!

학원 수업 Day27 git Clone git clone 레포지토리주소 원하는 경로에서 터미널을 열어서 해당 명령어를 사용하면 해당 경로에 레포지토리 내용이 복제된다. Redux 리액트같은 싱글 페이지 어플리케이션에서 상태 관리를 쉽게 할 수 있도록 도와주는 라이브러리이다. 자바스크립트 라이브러리이기 때문에 리액트 뿐 아니라 뷰, 앵귤러 등 여러 라이브러리 또는 프레임워크에서 사용할 수 있다. 그동안 리액트를 사용하면서 특정 컴포넌트에서 axios 등을 이용해 데이터를 불러오면 그 데이터를 다른 컴포넌트로 넘겨주기 위해서는 받는 쪽이 하위 컴포넌트 일 경우 props로 넘기거나, 받는 쪽이 상위 ... Read More

학원 수업 Day26 Framer Motion 컴포넌트 마운트 시에는 애니메이션 효과를 주기 쉽지만, 언마운트시에는 컴포넌트 자체가 사라져버려 애니메이션 효과를 주기 어렵다. Framer Motion플러그인을 사용하면 애니메이션 효과 후 언마운트 되도록하여 언마운트 효과를 손쉽게 구현할 수 있다. npm i framer-motion@6 --force @6을 지워서 최신 버전을 설치할 수도 있지만 현재 제작 환경을 고려하여 6버전으로 인스톨했다. 사용방법은 간단하다. 먼저 컴포넌트 최상단에 아래와 같이 framer-motion을 import 해야 한다. import { motion, AnimatePr... Read More

학원 수업 Day25 Flickr API Flickr API 활용 두번째 시간. buddy icon 표시 <div className="profile"> <img src={`http://farm${item.farm}.staticflickr.com/${item.server}/buddyicons/${item.owner}.jpg`} alt={item.owner}/> <span>{item.owner}</span> </div> JSX내 데이터.map()으로 개별 데이터를 뿌려주는 부분에서 이미지 게시자의 프로필 아이콘과 ID를 받아올 수 있다. <... Read More

학원 수업 Day24 Flickr API HTML 버전으로 했었던 Flickr API를 리액트 페이지에서도 적용했다. const [ Items, setItems ] = useState([]); const frame = useRef(null); const searchInput = useRef(null); 먼저 데이터를 담고 받아올 초기 변수 지정을 해준다. const showSearch = (e)=>{ e.preventDefault(); const keyword = searchInput.current.value; frame.current.classList.remove('on'); get... Read More

학원 수업 Day23 동기, 비동기 동기 코드 실행이 순차적으로 진행되는 방식이다. 한번에 한가지의 작업만 할 수 있고 그동안 다른 작업은 기다리고 있다가 현재 작업이 완료되어야 차례대로 실행된다. 비동기 작업을 호출 한 후 작업의 진행 및 완료 여부와 관계없이 다음 작업을 시작하는 방식이다. Rest API를 호출해서 받은 정보로 코드를 실행하면 호출 결과가 나오기 전에 코드를 실행하면 문제가 생긴다. 자바스크립트는 코드가 동기식 언어이다. 자바스크립트가 함수를 호출할때, 실행되는 함수가 Callstack으로 차곡차곡 쌓였다가 해당 함수가 실행이 완료되면 Callstack에서... Read More

청약닷컴 페이지 만들면서 있었던 좌충우돌 제작로그 async / await axios 로 JSON 데이터를 불러올 때 promise.then 를 사용했었는데 새로운 방법을 배웠다. 바로 async 와 await. async 는 Promise 객체를 반환해주고, await는 Promise 완료 후 이어서 실행되도록 하는 짝궁같은 친구들이다. axios.get(`${baseUrl}/파일명.json`).then((json)=>{ setList(json.data); }) 기존에 이렇게 사용하던 걸 아래와 같이 바꿔주었다. async function fetchData() { const resu... Read More

학원 수업 Day22 scroll event 실습용으로 만든 기업형 레이아웃의 메인 페이지에 스크롤 이벤트를 입혔다. section 정보 저장 height: 100vh 로 지정되어 있는 각 section의 정보들을 받아온다. const main = useRef(null); const pos = useRef([]); let secs; const getPos = ()=>{ pos.current = []; secs = main.current.querySelectorAll('.myScroll'); for (const sec of secs) { pos.current.push(sec.of... Read More

학원 수업 Day21 Community 페이지 간단한 글을 올릴 수 있는 게시판을 만들고 Local Storage에 저장했다. 게시물 등록 <div className="inputBox"> <input type="text" placeholder="제목을 입력하세요" ref={input} /> <textarea placeholder="본문을 입력하세요" ref={textarea} rows='5' ></textarea> <div className="btnSet"> <button onClick=... Read More

청약닷컴 페이지 만들면서 있었던 좌충우돌 제작로그 BrowserRouter 청약닷컴은 단순히 포트폴리오 용이 아니라 실제로 서비스를 할 예정이기 때문에 SEO에서 불리한 HashRouter를 쓰는 것 보다는 BrowserRouter를 사용하는 것이 좋겠다고 판단했다. 새로고침하면 404에러가 뜨지만 실제 서버에서는 세팅하면 되겠지. npm i react-router-dom 우선 react router dom 패키지를 설치 해 준다. import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; imp... Read More

학원 수업 Day20 validation 리액트 버전의 validation 을 제작했다. 초기값 세팅 에러 체크를 위해 각 input 의 value 값을 저장해야한다. 폼 초기값 객체를 기본값으로 하는 state 로 생성한다. const initVal = { userId: '', email: '', pwd1: '', pwd2: '', gender: null, interests: null, edu: '', comments: '', }; const [ val, setVal ] = useState(initVal); 그리고 에러 메세지와 validation 통과 후 true ... Read More