성코 개발일지

1. JSX란? 2. 문법 3. 스타일링 JSX란? JSX란 JavaScript + XML로 자바스크립트 내부에 HTML을 작성하는 확장된 자바스크립트 문법이다. JSX를 사용하지 않고 를 만드는 경우 fucntion App() { return React.createElement('div', null, 'Hello World') } JSX로 작성하면 아래와 같이 태그만 작성하면 된다. function App() { return ( Hello World ) } 이후 바벨을 이용하여 우리가 아는 자바스크립트 코드로 변환된다. 바벨은 ES6 이상 혹은 JSX 같은 코드를 브라우저가 이해할 수 있는 자바스크립트 코드로 변환해주는 자바스크립트 트랜스 컴파일러이다. JSX를 사용하면 JS 코드 안에서 UI 관련 작..

1. 개요 2. Redux-Saga 개념 3. Redux-Saga 이펙트 Redux-Saga의 필요성 Redux는 순수함수여서 부수적인 효과 처리를 할 수 없다. 즉, HTTP 요청을 보내거나, 무언가를 로깅하거나, store에 접근하는 등의 사이드 이펙트(Side effects)를 수행하지 않는다. 아래 코드 실행시 바로 state를 로그인으로 바꿔버린다. {type: :LOG_IN, data: {id: 'zeroch0', password: '1234'}} 하지만 실제로 프로세스는 서버쪽에 data가 전달되고, 서버는 아이디/패스워드 data 확인 후, 로그인 성공이라는 응답을 보내고, 그걸 다시 받아서 로그인 처리해야된다. => Redux는 바로바로 실행되기 때문에(동기적처리) 특정 시간 또는 특정 ..

리덕스 적용 1. store 생성. 어디에서나 실행시킬 수 있도록 전역변수로 저장 2. 자동으로 store 안에 state 생성 3. reducer라는 함수를 만들어서 store에 state 값 주입 4. state 값을 확인하기 위해 getState 사용 5. 상태값 변경을 위해 dispatch 사용 6. reducer는 현재 state 값과 변경해야하는 action을 받아서 다음의 state 값을 return

1. 리덕스란? 2. 리덕스의 특징 3. 용어 정리 Redux 상태를 중앙에서 관리하는 상태관리 라이브러리 데이터가 예측하지 않은 데이터로 변형되지 않도록 관리해준다 Redux의 특징 1. 하나의 상태(state)를 갖는다 하나의 객체 안에 애플리케이션에서 필요한 데이터를 우겨넣는다 => 데이터를 하나의 객체로 중앙집중적으로 관리한다 복잡성을 한단계 낮춘다 2. state를 외부와 차단시켜 외부에서 데이터를 읽고 수정하는 것을 막는다 dispatch를 사용해서 인가된 함수만 작업이 가능하도록 한다 데이터를 가져갈 때도 getState를 사용해서만 가져갈 수 있다 (데이터를 외부에서 직접적으로 관리할 수 없음) state 값이 바뀔 때마다 컴포넌트에게 데이터가 수정되었다고 알려준다 용어 정리 store :..

개발 환경 세팅 1. node.js 설치 LTS 버전으로 다운로드 2. VSCode 에디터 설치 프로젝트 생성 1. 작업용 폴더 생성 2. shift + 우클릭 -> [PowerShell/터미널 열기] 클릭 3. 열린 터미널에 npx create-react-app 프로젝트명 입력 엔터 후 y 입력하라고 뜨면 입력하면 됨 success 뜨면 완료. 창닫기 4. VSCode에서 파일 - 폴더열기... 선택하면 프로젝트 폴더가 열림 src 폴더 안에 App.js에 코드 작성하면 됨. 5. 미리보기 띄우기 위해서 터미널 열기 터미널 - 새 터미널 클릭 명령어 npm start 입력하고 웹브라우저가 뜨면 성공!