GIDO GIDO

도커를 사용하는 이유 : 프로그램을 다운 받는 과정을 간단하게 만들기 위해서. 도커 없이 다운받기 -> 프로그램을 설치하는 과정에서 에러 발생 가능성이 있다. => 갖고 있는 서버, 패키지 버전, 운영체제 등등에 따라 프로그램을 설치하는 과정 중에 많은 에러들이 발생하게 된다. #게다가 설치 과정이 다소 복잡할 수 있다. 도커 없이 Redis 다운 받는 과정 -> wget 이 없어 에러 발생. -> wget 을 다운받은 후, 다시 다운받아야 한다. => 어떠한 특정 프로그램을 받을때 거기에 맞는 부수적인 것들도 계속 받아야하고, 그에 따라 설치하는 과정이 복잡해지고 에러도 많이 생기게 된다. 도커로 Redis 다운 docker run -it redis -> 도커를 이용하여 프로그램을..

리덕스란? 리덕스 (Redux) 란? : 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 -> 리덕스는 State 을 관리한다. -> 리덕스의 데이터 관리 과정은 위와 같다. => 좀 더 효율적으로 애플리케이션을 관리할 수 있다. Action 이란? : 간단한 JavaScript 객체이다. -> 우리가 수행하는 작업의 유형을 지정하는 'type' 속성이 있으며, 선택적으로 리덕스 저장소에 (Redux Store) 일부 데이터를 보내는데 사용되는 'payload' 속성을 가질 수 있다. Reducer 란? : 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. -> 인수로 조치를 취하고 Store 내부의 상태를 업데이트한다. => State 과 action object 를 받은..

Automatic batching -> batching (배칭) 은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서 한번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것을 의미한다. => 한번에 리렌더링을 하는 것. -> 한 함수 안에서 setState 를 여러번 호출하더라도, 리렌더링은 한번만 발생한다. => 함수의 끝에서 업데이트되며, 마지막 한번만 리렌더링 한다. 즉, 여러번 리렌더링 하는 것을 막기 때문에 성능상 좋은 영향을 준다. -> 리액트 이전 버전에서도 batch update 가 지원되었으나, 클릭과 같은 브라우저 이벤트에서만 적용이 가능하고 API 호출에 콜백으로 넣은 함수나 timeouts 함수에서는 작동하지 않았다. batch 처리하지 않으려면? -> 일반적으로 일괄 처..

Next.js 란 : React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크 -> React로 개발할 때 SPA를 이용하며 CSR을 하는데, 이로 인해 검색엔진 최적화 부분에 문제가 생긴다. # CSR : Client Side Rendering -> CSR을 하면 첫 페이지에서 빈 html 위에 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출되지 않는다. => Next.js 에서는 Pre-Rendering 을 통해서 페이지를 미리 렌더링한 뒤 완성된 HTML을 가져오기 때문에 바로 렌더링 된 페이지를 전달할 수 있게 된다. # 리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡하기 때문에 Next.js 을 활용하겠다. # SSR ..

TDD를 이용해서 만들 앱 소개 -> '+', '-' 그리고 on/off 버튼이 있다. -> '+' 를 누르면 숫자가 올라가고 '-' 를 누르면 숫자가 내려간다. -> on/off 버튼을 누르면 '+', '-' 버튼이 작동을 안하고 색깔이 변한다. 앱 만들기 시작 1. Counter 생성 -> Counter 는 0부터 시작. -> App.test.js import { render, screen } from '@testing-library/react'; import App from './App'; test('the counter starts at 0', () => { render(); const counterElement =screen.getByTestId("counter"); expect(counterE..

테스트 주도 개발(TDD)란 무엇인가? 1. Test Driven Development 란 ? -> 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성. -> 그 후에, 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성. 2. TDD 를 하면 좋은 점 TDD 를 함으로써, 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분. 즉, TDD 를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높다. React Testing Library 란? : 에어비앤비에서 만든 Enzyme 을 대처하는 솔루션 => 리액트 컴포넌트를 테스트하는 가벼운 솔루션 ..

영화 나열을 위한 Row 컴포넌트 생성하기 1. Row 컴포넌트 생성 2. 소스코드 작성 2.1 영화 정보 가져오기 const[ movies, setMovies] = useState([]); useEffect(()=> { fetchMovieData(); }, [fetchURL]) const fetchMovieData = async() => { const request = await axios.get(fetchURL); setMovies(request.data.results); } 2.2 UI 생성하기 return ( {title} { document.getElementById(id).scrollLeft -= window.innerWidth - 80; }} >{""} ) } 3. CSS 작성 슬라이드 기능..

만들게 될 Netflix 애플리케이션 소개 메인 화면 구성 -> 왼쪽 상단에 NETFLIX 로고를 표시한다. -> 오른쪽 상단에는 사용자 프로필 사진을 표시한다. -> 상단에는 메인 영화를, 그 아래로 다른 영화 목록을 표시한다. NETFLIX 애플리케이션 기능 소개 -> 영화 포스터가 나열되어 있다. (양 옆 화살표를 통해 좌우로 슬라이드 할 수 있다) -> 스크롤을 아래로 내리면, 네비게이션 바의 배경색이 검게 변한다. -> 포스터를 클릭하면 해당 영화의 정보를 보여준다. -> 영화 제목, 평점, 소개, 예고편 등등 Create-React-App으로 리액트 설치하기 1. 리액트를 설치할 폴더 생성 -> 폴더명은 자유롭게 설정 (react-netflix-clone) 2. 새 터미널에서 npx creat..