React
1.[React] 리액트 라우터로 SPA 개발하기
본 글은 [리액트를 다루는 기술] 13장을 참고하여 포스팅하였습니다. SPA, Route 컴포넌트, Link 컴포넌트, Link 컴포넌트, URL 파라미터, URL쿼리, 서브 라우트, 라우터 부가기능에 대해 정리하였습니다.
2.[React] Element 와 DOM Element, Component Element
실제로 화면에 렌더링 할 DOM 노드들의 정보를 React에게 알려주기 위한 수단입니다.DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당합니다.type(문자열 혹은 컴포넌트 함수 / 클래스) 필
3.[React] 컴포넌트
본 글은 [리액트를 다루는 기술] 3장을 참고하여 포스팅하였습니다. 클래스형 컴포넌트, 컴포넌트 생성 방법, props, state, state를 사용할 때 주의 사항에 대하여 정리하였습니다.
4.[React] React 의 기본 구조
본 글은 React의 기본 구조에 대해 포스팅하였습니다. React의 디렉토리 구조, public 폴더, src 폴더 안에 포함되어 있는 파일에 대해 정리하였습니다.
5.[React] 리덕스 라이브러리 이해하기
리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을
6.TodoList 만들기
기본 세팅하기 1. UI 구성하기 TodoTemplate : 화면을 가운데에 정렬시켜 주며, 투두 리스트를 보여 줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다. TodoInsert : 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 input의 상태를 관리합니다. TodoListItem : ...
7.[React] Hooks
Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.use
8.[React] useState, useEffect, useRef을 이용하여 캐러셀 슬라이더 구현하기
React의 useState, useEffect, useRef을 이용하여 캐러셀 슬라이더를 만들어 보겠습니다. create-react-app을 통해 리액트 프로젝트를 만들어 줍니다. 스타일링은 styled-components를 사용하겠습니다.
9.[React] 슬라이드 비율 에러 해결
// slideRef.current.style.transform = translateX(-51.5%); 이 되어야 함 (슬라이드 사진 6개 경우)여기서 나는 transform의 값안에서만 변경하려고 했었는데 그 전에 변경해주는 방법이 있었다!! 이걸 밑 코드로 변경아
10.[React] 외부 API를 연동하여 뉴스 뷰어 만들기
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7bbc2512-c2b7-47bd-8b07-fca549b22e5a/Untitled.png만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동
11.[React] react-scroll 이용해서 텍스트 클릭 시 원하는 영역으로 스크롤 이동하기
react-scroll 을 사용하여 스크롤 이동하는 프로젝트를 구현해 보았습니다.Middle.js는 오른쪽에 목차처럼 Day1, Day2 를 가리킬 컴포넌트입니다.Middle을 클릭해주면 그에 맞게 스크롤이 이동되는 해당 영역을 Side 컴포넌트로 나눠줍니다.
12.백엔드 프로그래밍 : Node.js의 Koa 프레임워크
이 작업을 하고 나면 디렉터리에 package.json 파일이 생성됩니다.다음 명령어를 통해 파일이 잘 만들어졌는지 확인해 볼 수 있습니다.Koa 웹 프레임워크를 설치합니다.기존 index.js 파일에 다음 코드를 입력한 뒤, 서버를 포트 4000번으로 열고, 웹 브라
13.[React] 라우터 이해하기(Route, Link, Switch)
라우터는 path 속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정할 수 있습니다. 또한, 브라우저 이동 없이 컴포넌트만 전환하여 마치 모바일 앱처럼 이루어지게끔 해줍니다.URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이
14.[React] 스크롤에 따라 헤더 값 변경해주기
useEffect를 사용하여 yOffset 의 값에 따라 \_nav를 숨겨주고 \_gotoCourse를 보여주는 방법입니다.yOffset의 값이 35 이하일 땐 \_nav의 스타일 opacity(불투명도)를 1로 설정해줌으로써 사용자에게 보여지도록 하고 \_gotoCo
15.리액트(React.js) vs 뷰(Vue.js)
라이브러리와 프레임워크의 차이라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다. 프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며