odada

라이프 사이클 (생명주기) 이해하기React에서 컴포넌트의 생명주기를 관리하는 것은 앱의 성능과 유지보수성에 중요한 영향을 미칩니다. 특히, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 관리 작업을 수행합니다.- 뉴스 예제로 알아보는 라이프 사이클데이터를 불러와 화면에 표시하는 간단한 뉴스 목록 컴포넌트를 생각해볼 수 있습니다.생명주기 단계소셜 미디어 대시보드Mounting (마운팅)데이터 가져오기Updating (업데이팅)실시간 업데이트Unmounting (언마운팅)컴포넌트가 DOM에서 제거되는 단계마운트 (Mounting) - 태어나고이 컴포넌트는 useEffect 훅을 사용해 컴포넌트가 마운트될 때 뉴스 API에서 데이터를 한 번만 불러오고,이 데이터를 컴포넌트의 상태로 저장하여 화..

카운터 앱 만들기 리액트를 이용한 숫자를 증가시키거나 감소시키는 앱을 만들어보자. 1. 프로젝트 생성 npx create-react-app counter-app cd counter-app npm start 2. 컴포넌트(Components) 생성 src 디렉토리에 Viewer.js 파일을 생성한다. // src/Viewer.js import React from 'react' function Viewer() { return ( 0 ) } export default Viewer src 디렉토리에 Counter.js 파일을 생성한다. // src/Counter.js import React from 'react' function Counter() { return ( + - ) } e..

리액트 기본기능 첫 컴포넌트 만들기 App.js 파일에 Header, Body, Footer 컴포넌트를 만들어보자. import React from 'react' const Header = () => { return ( Header ) } const Body = () => { return ( Body ) } const Footer = () => { return ( Footer ) } function App() { return ( ) } export default App 컴포넌트 분리하기 Header, Body, Footer 컴포넌트를 따로 파일로 분리해보자. // Header.js import React from 'react' const Header = () => { retu..

React 비동기 처리1. 뉴스 API 데이터 가져오기- 뉴스 API 키 발급무료 뉴스 API 추천The Guardian APINew York Times API2. useEffect로 데이터 가져오기useEffect(() => { ... }, [deps])useEffect는 함수 컴포넌트에서 부수 효과를 수행할 수 있도록 하는 Hook이다. useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.// src/News.jsimport React, { useEffect, useState } from 'react';function News() { const [news, setNews] = useState([]); useEffect(() => { fetch(..

gitingnore 파일 만들기 gitignore 파일은 git으로 관리하지 않을 파일을 지정하는 파일이다. gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일 생성 gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일의 이름은 .gitignore이다. gitignore 파일 작성 # 폴더명/ : 폴더명의 모든 파일 무시 css/ # 파일명 : 파일명의 파일 무시 comm.css comm.css.map #폴더명/파일명 폴더명/파일명 # 확장자가 .txt인 파일 무시 *.txt # 윗 라인에서 확장자가 .txt인 파일은 무시하게 했지만 lib.a는 무시하지 않는다. !lib.txt gitignore 파일 적용이 안될 때 ign..

Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP)패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현1. CSS를 이용한 패럴랙스 스크롤링css perspective 속성을 이용한 패럴랙스 스크롤링해당 요소의 z = 0 평면과 사용자 사이의 거리transform 효과를 주고자 하는 부모 요소에 적용perspective에 따른 변형 효과perspective: 100px; => 100px만큼 멀어져 보임perspective가 클수록 (거리가 멀수록..

flexbox로 레이아웃 만들기 flexbox란? flexbox는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flexbox는 여러 요소들 사이의 공간 배분과 정렬 기능을 제공하여, 강력한 분산형 레이아웃을 제공합니다. flexbox의 구성 flex container: flexbox를 적용할 요소 flex item: flex container의 자식 요소 flexbox layout 만들기 1. layout1 - 스크롤 없는 100% 높이의 레이아웃 header main aside footer /* css */ :root { --hdH: 70px; --ftH: 70px; } #wrap { max-width: 1280px; margin: 0 auto; ..

box model - css 배우기 https://www.w3schools.com/css/css_boxmodel.asp 모든 HTML 요소는 박스 모델을 가지고 있다. width 요소의 너비를 지정한다. auto (기본값 100%) 브라우저가 너비를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { width: 1280px; } height 요소의 높이를 지정한다. auto (기본값 0) 브라우저가 높이를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { height: 500px; } max-width 요소의 최대 너비를 지정한다. none (기..

background 속성 - css 배우기 background 배경 이미지를 지정한다. background: url('https://www.w3schools.com/css/img_fjords.jpg'); https://www.w3schools.com/css/css_background.asp background-color 배경 색상을 지정한다. background-color: red; background-image 배경 이미지를 지정한다. background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-repeat 배경 이미지 반복을 지정한다. background-repeat: repeat-x; ..

font & text 관련 css font https://www.w3schools.com/css/css_font.asp font-family 글꼴을 지정한다. font-family: 'Times New Roman', Times, serif; font-family: Arial, Helvetica, sans-serif; web font 웹폰트란 로컬에 설치된 글꼴이 아닌 서버에서 제공되는 글꼴을 말한다. - google font https://fonts.google.com/ 구글 폰트 사이트에서 사용하고 싶은 폰트의 상세페이지로 이동한다. font-weight, font-style을 선택한다. 장바구니에 담긴 CDN 주소를 복사해 html 파일 내 head 태그에 추가한다. 또는 @import..