고니의 개발 일지📚

코딩애플님의 동영상 강의를 보다가 흥미로운 영상을 발견했다. https://youtu.be/CojyGfCMvuU Three.js 라이브러리를 사용하면 3D 모델을 띄울 수 있다고 한다! 재밌어보여서 간단한 페이지를 만들며 실습해보았다. Three.js란? 웹페이지에 3D 객체를 쉽게 렌더링할 수 있도록 도와주는 JS 3D 라이브러리이다. WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단히 사용 가능하다. WebGL(Web Graphics Library) 웹 상에서 2D 및 3D 그래픽을 사용할 수 있도록 한다. HTML5의 태그를 사용한다. 이것만으로 구현하기에는 복잡… ⇒ Three.js는 3D 요소의 처리를 도와 직관적인 코드를 작성하도록 도와준다. Scene, Ca..

- 리액트에서 스크롤 시 FadeIn 효과로 서서히 대상이 나타나는 애니메이션을 만드는 방법을 알아보자. - 애니메이션을 만들때 Intersection Observer를 사용하면 과부하를 방지할 수 있다. Intersection Observer API Intersection Observer API는 대상 요소와 상위 요소 또는 최상위 문서 뷰포트의 교차점에서의 변화를 비동기적으로 관찰할 수 있는 방법을 제공합니다. 지금까지 요소의 가시성 또는 두 요소의 상대적 가시성을 감지하는 것은 어려운 작업이었으며, 솔루션이 안정적이지 않아 브라우저와 사용자가 액세스하는 사이트가 느려지기 쉬웠습니다. 웹이 발전함에 따라 이러한 종류의 정보에 대한 필요성이 커졌습니다. 교차점 정보는 다음과 같은 여러 가지 이유로 필요..

경주의 명소를 소개하는 토이프로젝트를 진행하는데 주제가 맛집 탐방, 야간 명소, 한옥 호텔로 총 3가지였다. 라우팅 하기에는 데이터가 적어서 한 화면에 컴포넌트를 모두 띄우는 대신, 메인 배너에서 버튼을 누르면 해당 컴포넌트로 이동하는 스크롤 기능을 만들고 싶어 찾아보다가 유용한 정보를 발견했다! useMoveScroll.ts import { useRef } from "react"; const useMoveScroll = () => { const element = useRef(null); const onMoveToElement = () => { element.current?.scrollIntoView({ behavior: "smooth", block: "start" }); }; return { eleme..

프로젝트 하면서 useState()를 정말 많이 썼는데... 문득 드는 생각 아 let 대신 왜 state를 쓰는거였지? 저번에 정리한 포스팅 보충 설명할 겸, 이번에 확실히 개념도 정리할 겸 포스팅 합니다. ㅎ ▶ useState란? React Hooks에서 제공하는 함수입니다. 리액트에서 state란, 컴포넌트에서 변경될 수 있는 값을 말합니다. 함수형 컴포넌트에서 state를 변경하기 위해 사용하는 것이 useState() 함수 입니다. useState는 2개의 인자를 받을 수 있습니다. ▶ 사용법 useState(a, b) a => 상태 값이 저장되는 자리 b => 상태 값을 변경하는 함수의 자리 ES6에 새로 추가된 비구조화 할당을 사용하여 더욱 쉽게 이를 활용할 수 있습니다. const [ti..

지난번에 진행했던 마켓컬리 클론코딩 프로젝트를 배포해보려고 한다. 더미데이터를 쓰고 있으니 github-pages를 활용하여 배포해도 충분하겠다는 생각이 들어 당장 실시! 배포 전에 잠깐! 웹브라우저는 리액트의 문법을 이해할 수 없다... 따라서 JSX 파일을 HTML, CSS, JS로 변환해주어야 하는데, 이는 빌드를 통해 이루어진다! Github-pages를 이용하면 빌드+배포까지 편리하게 할 수 있다는 장점이 있다!😄 Github Pages란, GitHub의 리포지토리에서 직접 HTML, CSS 및 JavaScript 파일을 가져오고 선택적으로 빌드 프로세스를 통해 파일을 실행하고 웹 사이트를 게시하는 정적 사이트 호스팅 서비스이다. About GitHub Pages - GitHub Docs Abo..

프로젝트 진행 중... 스크랩 기능을 만들어야 했다. 어제 성공한 스크랩 기능은 얼핏 봐서는 완벽해보이지만... 팝업 창을 껐다 켜면 상태 유지 안됨...ㅎㅎㅎㅎㅎㅎ 어쩌지? 하다가 생각해낸 방법. 부모 컴포넌트에서 자식 컴포넌트를 관리하자! 컴포넌트 구조는 다음과 같다. Mentoring.js (부모 컴포넌트) MentorApply.js (자식 컴포넌트) 부모 컴포넌트 1. 북마크 상태를 관리할 boolean 타입 변수를 하나 만든다. 2. 변수의 상태를 바꿔줄 set 함수를 같이 설정한다. => 자연스럽게 useState를 쓰게 되겠죠? 3. 클릭했을 때 bmk의 상태를 바꾸기 위해 클릭 이벤트 함수도 만들어주자. 이제 이 bmk 값과 클릭 이벤트 함수를 자식에게 props로 전달해주면 된다. tog..

7월에 웹 교육을 들었던 멘토님의 강의를 다시 보면서 Weather API - OpenWeatherMap을 통해 지역을 입력하면 날씨를 확인할 수 있는 페이지를 만들어보았다. Weather API - OpenWeatherMap Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. op..

소스코드 import {useState} from 'react'; import { useEffect } from 'react/cjs/react.development'; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []) return ( The Coins! {loading ? "" ..

소스코드 import {useState} from 'react'; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === ""){ return; } setToDo(""); // state 직접 수정 하지 않음. 함수 사용 setToDos(currentArray => [toDo, ...currentArray]); }; return ( My To Dos {toDos.length..

실습 코드 import { useState, useEffect } from "react"; function Hello() { useEffect(() => { console.log("hi"); return () => console.log("bye"); }, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing(prev => !prev) return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } export default App;