뇌 채우기 공간

CI/CD란? 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법이다. CI/CD의 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포 새로운 코드 통합으로 인해 개발 및 운영팀에 발생하는 문제(일명 "인테그레이션 헬(integration hell)")을 해결하기 위한 솔루션 애플리케이션의 통합 및 테스트 단계에서부터 제공 및 배포에 이르는 애플리케이션의 라이프사이클 전체에 걸쳐 지속적인 자동화와 지속적인 모니터링을 제공 CI (지속적인 통합(Continuous Integration)) "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할..

참고자료 https://react.vlpt.us/basic/21-custom-hook.html 오늘은 커스텀 훅을 만들어서 사용해보겠다. 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생하는데 그런 상황에 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 재상용하는 방법을 알아보겠다. //useInputs.js import { useState, useCallback } from 'react'; function useInputs(initialForm) { //파라미터로 initialForm을 받아온다. const [form, setForm] = useState(initialForm); // change const onChange = useCallback(e => { const { name, value } ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

오늘은 그동안 styled components를 사용하면서 사용해보지 않았던 기능들에 대해서 공부를 해보자 1. GlobalStyle createGrobalStyle을 import해와서 사용할 수 있다. 지금 이 스타일은 html body태그 전체에 회색으로 색지정을 해주고 있다. import React from 'react'; import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { background: #e9ecef; } `; function App() { return ( 안녕하세요 ); } export default App; 2. CSS Selector 컴포넌트를 하나하나 따로..

지금까지 리액트를 잘 사용하고 있었는데 리액트가 왜 등장하게 되었고 왜 사람들이 많이 사용하고 인기있는지가 궁금해졌다. 그래서 이 글에서는 React가 무엇인지, 어떻게 등장을 했는지, 특징이 무엇인지 살펴보자. 🏃‍♂️ React란? - 리액트는 UI 자바스크립트 라이브러리 - 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리 - 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있다 - 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-route와 같은 추가적인 라이브러리를 사용해야 한다. 🖼 프론트앤드 ..

오늘의 과제 페이지 로딩 속도를 빠르게 만들어보자! 이 페이지의 로딩 속도를 빠르게 만들고 싶다. 지금 FINISH부분을 보면 무려 거의 28초나 걸린다. 물론 3G 환경에서. 왜그렇나 보니. 지금 컬렉션들이 눈에는 6개밖에 이미지가 안보이지만, 전체 이미지가 다 불러와지기 때문에 속도가 느린것이다. 그러면 이미지에 LAZY LOADING을 적용해야한다. Lazy Loading 이란? 쉽게 말해서 눈에 보이는 이미지만 불러온다는 것이다. 그러니까 미리 이미지를 다 불러오지 말고, 스와이프를 넘겨서 옆의 이미지가 나왔을때, 이미지를 불러오는 것이다. 라이브러리의 lazy loading적용하기 먼저, 나는 react swiper라는 라이브러리를 사용해 저 스와이퍼를 구현하고 있었기 때문에 swiper을 적용..

■ Intersection Observer란? IntersectionObserver는 DOM 엘리먼트가 뷰포트상에 노출되었는지 여부를 비동기적으로 감시하는 API이다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다. 페이지 스크롤에 따른 이미지/콘텐츠의 레이지 로딩 구현 무한 스크롤 웹사이트 구현 광고 수익 측정을 위한 광고 문구 노출 여부 계산 사용자가 결과를 볼지 유무에 따라 애니메이션 또는 작업 실행 여부 결정 이미지 레이지 로딩? 2021.09.07 - [TIL] - [TIL] 20210907 intersection observer lazy loading ■ 기존의 이미지/콘텐츠 레..

https://lottiefiles.com/ Free Lottie Animation Files, Tools & Plugins - LottieFiles The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web. lottiefiles.com 귀여운 애니메이션 요소들을 넣어 우리의 웹사이트를 더욱 풍요롭게 만들어보자! 1. lottie-web라이브러리 설치 https://github.com/airbnb/lottie-web GitHub - air..

REACT MEMO PROFILER https://velog.io/@hoi/React-Functional-Component%EC%9D%98-React.memo-%EC%82%AC%EC%9A%A9%EA%B8%B0 React.memo 적용기와 Profiler를 사용한 성능 변화를 확인해 보자 Functional Component의 React.memo에 사용기에 대한 공유를 하고자 이 글을 작성합니다. React와 렌더링(rendering) 위의 사진은 React의 LifeCycle에 대한 다이어그램입니다. React LifeCycle 다이어그램은 Rea velog.io https://ui.toast.com/weekly-pick/ko_20190731#3-%EC%96%B8%EC%A0%9C-reactmemo%EB%..