디자이너에서 개발자 디자이너에서 개발자

리액트

• [패스트캠퍼스] 프론트엔드 강의 학습일지(Redux)

  패스트캠퍼스/React&Redux 2023. 4. 25. 14:42

  국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Redux 리덕스는 상태 관리 라이브러리이다. State를 Store에 넣어놓고 사용할 수 있다. REDUCER 상태 변경사항을 결정하고 업데이트된 상태를 반환하는 함수이다. 인수로 조치를 취하고, store 내부의 상태를 업데이트 합니다. Store 클래스가 아니고 Methods가 있는 객체 저장소이다. 애플리케이션의 전체 상태 트리를 보유한다, 내부 상태를 변경하는 방법은 상태에 대한 Action을 전달하는 것이다. Props와 State의 구별 Props Properties의 줄임말 컴포넌트상 서로 통신하는 방법 상위 구성 요소에서 아래쪽으로 흐른다(부모 -> 자식) 자식이 가지고 있는 props를 변경하려면 부모 ..

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(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 기능을 확인해 보기 위해 앱을 만들어 본다. 데이터가 많아야 확인이 가능하기 ..

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(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..

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(React 함수형 컴포넌트)

  패스트캠퍼스/React&Redux 2023. 4. 21. 11:46

  국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. React Hooks 리액트 생명주기가 있다. 시작 할 때(Mounting) 시작하고 난 이후(Updating) 컴포넌트가 더 이상 사용하지 않을 때(Unmounting) 이러한 중요한 생명주기를 함수형 컴포넌트에선 사용하지 못해서, 클래스 컴포넌트로 사용해 왔다. 하지만 React Hooks가 업데이트되어서 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되었다. 함수형 컴포넌트의 장점 useEffect를 사용해서 Hooks(여러 가지의 생명주기를 간결하게 사용)를 사용할 수 있다. state 업데이트는 const [getter, setter(state를 정하는 함수)] = useState("") 이런 식으로 하고, g..

  Read More
• [React] props

  Development/React 2021. 7. 21. 00:13

  리액트의 Props에 대해서 정리해보겠습니다. 아래 리액트 홈페이지에서 해당 내용을 참고해보세요. https://ko.reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces ko.reactjs.org props 는 properties의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다. 먼저, 'name' 이라는 값을 Hello컴포넌트에 전달해보겠습니다. import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export def..

  Read More