React&Redux로 시작하는 웹 프로그래밍
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(Redux)패스트캠퍼스/React&Redux 2023. 4. 25. 14:42
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Redux 리덕스는 상태 관리 라이브러리이다. State를 Store에 넣어놓고 사용할 수 있다. REDUCER 상태 변경사항을 결정하고 업데이트된 상태를 반환하는 함수이다. 인수로 조치를 취하고, store 내부의 상태를 업데이트 합니다. Store 클래스가 아니고 Methods가 있는 객체 저장소이다. 애플리케이션의 전체 상태 트리를 보유한다, 내부 상태를 변경하는 방법은 상태에 대한 Action을 전달하는 것이다. Props와 State의 구별 Props Properties의 줄임말 컴포넌트상 서로 통신하는 방법 상위 구성 요소에서 아래쪽으로 흐른다(부모 -> 자식) 자식이 가지고 있는 props를 변경하려면 부모 ..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 앱 성능 개선)패스트캠퍼스/React&Redux 2023. 4. 25. 01:16
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. 리액트 확장 프로그램 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023. chrome.google.com Profiler 성능 측정을 위한 테스트 위에서 설치한 확장프로그램에서 Profiler 기능을 확인해 보기 위해 앱을 만들어 본다. 데이터가 많아야 확인이 가능하기 ..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 동작 기록과 배포)패스트캠퍼스/React&Redux 2023. 4. 21. 23:45
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Tic Tac Toe 앱 만들기 동작에 대한 기록 저장하기 이전에 만들던 Tic Tac Toe(https://rosylee.tistory.com/20) 앱을 이어서 진행한다. 이번에는 보드에 스퀘어를 누를 때마다 X나 O가 표시되는데, 이것을 저장하여 기록으로 남기는 기능을 추가한다. 핵심은 스퀘어를 누를 때 배열의 복사본(slice())을 만들어서 동작에 대한 기록 저장이 가능하다는 것이다. History Strate는 Board 컴포넌트와, Square 컴포넌트 둘 다 필요하기 때문에, 최상위 단계인 App에 만들어준다. 기존 Board.js에 만들었던 state를 App.js에 옮겼다. 과거의 이동 표시하기 move..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 함수형 컴포넌트)패스트캠퍼스/React&Redux 2023. 4. 21. 11:46
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. React Hooks 리액트 생명주기가 있다. 시작 할 때(Mounting) 시작하고 난 이후(Updating) 컴포넌트가 더 이상 사용하지 않을 때(Unmounting) 이러한 중요한 생명주기를 함수형 컴포넌트에선 사용하지 못해서, 클래스 컴포넌트로 사용해 왔다. 하지만 React Hooks가 업데이트되어서 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되었다. 함수형 컴포넌트의 장점 useEffect를 사용해서 Hooks(여러 가지의 생명주기를 간결하게 사용)를 사용할 수 있다. state 업데이트는 const [getter, setter(state를 정하는 함수)] = useState("") 이런 식으로 하고, g..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 시작하기)패스트캠퍼스/React&Redux 2023. 4. 19. 18:20
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. 리액트는 무엇일까? 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 사용한다. vue.js와 Angular는 프레임워크이고, 리액트는 라이브러리이다. 프레임워크: 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것(프레임워크 안에 여러 모듈이 있다) 라이브러리: 특정 기능을 모듈화 해놓은 것 리액트는 View를 담당하는데, 그외에 Model과 Controler를 조작하기 위해서는 여러 모듈을 사용하게 된다. 라우팅(페이지이동): react-router-dom 상태관리: redux, mobx, recoil 테스트: Jest, Mocha Node.js가 필요한 이유? 프로젝트를 개발할때 필요한 모듈인 바벨이나 웹팩 등이 ..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(JavaScript)패스트캠퍼스/React&Redux 2023. 4. 18. 16:27
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. MDN 문서를 참고합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 위 문서에서 String 생성자란, new라는 키워드로 문자 데이터를 만들어 내는 것인데, JS에서 '' 를 통해 생성해 준다. 이처럼 기호를 통해 손쉽게 생성하는 방법을 리터럴 방식이라고 한다. 이 외에도 객체: {}, 배열 [] ...등 이 있다. https://developer.mozilla...
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(Node.js와 Git)패스트캠퍼스/React&Redux 2023. 4. 17. 09:53
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Node.js Node.js는 Chrome V8 JavaScript 엔진(자바스크립트 문법을 해석하는 엔진)으로 빌드된 JavaScript 런타임(자바스크립트 언어가 프로그램이 동작하는 환경)이고, 자바스크립트는 프로그램 언어인데, 컴퓨터(로컬)에서도 동작할 수 있고, Chrome 웹브라우저에서도 동작할 수 있다. 웹페이지를 개발하기 위해 Node.js의 도움을 받는 용도로 사용한다. 여러 모듈을 사용하여 개발하고 node.js로 html,css,js 파일로 변환하여 웹브라우저에 넘긴다. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(HTML/CSS/JS 기본)패스트캠퍼스/React&Redux 2023. 4. 12. 22:48
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. https://fastcampus.co.kr/b2g_kdc_web [중급] 프론트엔드 종합반 : HTML&CSS, JS, React | 패스트캠퍼스 패스트캠퍼스 온라인 강의를 국비지원으로 0원에 수강하세요! fastcampus.co.kr 개요 프론트엔드란? HTML, CSS, JS로 GUI(사용자에게 보이는 화면) 구현하는 것입니다. 웹앱의 동작 원리 브라우저 통신 > 프로토콜 접속 > 최초 요청(Request) > 서버 > 최초 응답(Response HTML) > 브라우저 화면에 응답받은 HTML 랜더링> 추가 필요한 파일 요청 > 추가 응답(CSS, JS, JPG 등) 웹 표준과 브라우저 웹표준은 웹에서 사용되는 표준..