프론트엔드 기록

컴포넌트, 함수 리액트 컴포넌트는 클래스, 함수형 두 가지 방법이 있다. 리액트 hooks를 사용하는 함수형이 더 간단하다. 컴포넌트 = 부품 -> 다른 곳에서 가져다 쓸 수 있음 JSX는 HTML과 유사하지만 다른 점이 있다. 가져오기 할 때는 import 내보내기 할 때는 export Fragment root 다음에 오는 div를 삭제하고 싶다면? or 로 묶어주면 된다. import { Fragment } from "react"; function App() { const number = 1; const double = () => { return number * 2; }; return ( {double(number)} Submit ); } export default App; onClick import..

리액트 스터디 2023. 10. 12. 13:57

리액트는 spa이다. data가 변경되면 화면이 변경되는 거! 함수 컴포넌트는 this 쓸 일이 없고, 코드가 짧아서 클래스 컴포넌트보다 많이 사용된다. 하나의 사이트에 여러 state가 존재한다. 객체를 함부로 바꾸지 말아라. (불변성) 배열도 객체인데, 복사한 배열을 바꿔라. 바뀌는 것은 state 안 바뀌는 것은 그냥 태그로 놔두기. 구구단 컴포넌트 만들기 import "./App.css"; import GuGuDan from "./like-button"; function App() { return ( ); } export default App; import React, { useState } from "react"; function GuGuDan() { //랜덤한 숫자 const [first, s..

리액트 스터디 2023. 10. 5. 13:49

store의 state 변경하는 법 큰 그림부터 그려드리면 state 수정해주는 함수부터 store.js에 만들어두고 그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 짭니다. 버튼누르면 예전에 'kim' 이라고 저장해놓은걸 'john kim' 으로 수정하고 싶으면 어떻게 해야할지 알아봅시다. 정확한 step으로 딱딱 알려드려야 혼자 코드짤 때 편하니까 step을 알려드리면 1. store.js 안에 state 수정해주는 함수부터 만듭니다. let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john ' + state } } }) slice 안에 reducers : { } 열..

리액트 2023. 9. 23. 01:21

뭐 배우기 전에 항상 이걸 왜 쓰는지 생각해보는게 중요합니다. 그래야 나중에 "여기서 Redux 쓰는게 맞나요?" 이런 질문 안하고 알아서 코드 잘짬 Redux 라이브러리 왜 쓴다고 했냐면 state를 Redux store에 보관해둘 수 있는데 모든 컴포넌트가 거기 있던 state를 직접 꺼내쓸 수 있어서 props 없어도 편리하게 state 공유가 가능하다고 했습니다. 오늘은 Redux store에 state 보관하는 법을 알아봅시다. Redux store에 state 보관하는 법 저번시간에 만들어둔 store.js 파일 열어서 이렇게 코드짜면 state 하나 만들 수 있습니다. step 1. createSlice( ) 로 state 만들고 step 2. configureStore( ) 안에 등록하면 ..

리액트 2023. 9. 22. 06:49

cart로 접속하면 장바구니 페이지를 보여줍시다. 근데 장바구니 기능은 Redux 배울 겸 그걸 이용해서 만들어봅시다. 장바구니 페이지만들기 페이지하나 필요하면 어떻게 해야합니까. 라우터 쓰면 되는 것 아니겠습니까 그래서 App.js의 쓰던 곳을 찾아가봅시다. 그리고 를 하나 추가했습니다. 누가 /cart 로 접속하면 컴포넌트를 보여주기로 했습니다. 컴포넌트는 알아서 만들어서 저기 넣으면 됩니다. 전 Cart.js 라는 다른 파일에 컴포넌트 만들었음 장바구니 페이지에서 사용할 Table 레이아웃은 # 상품명 수량 변경하기 1 안녕 안녕 안녕 이거 넣으면 표가 생성됩니다. Cart 컴포넌트에 넣어봤습니다. 물론 React-bootstrap에서 가져온거라 상단에서 import { Table } from 'r..

리액트 2023. 9. 22. 06:22

1장. 리액트 시작 1.1 왜 리액트인가? 페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 바로 리액트(React)입니다. 리액트 이해 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리입니다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 합니다. 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 합니다. 리액트 컴포넌트가 최초로 실행한 ‘초기 렌더링’과 컴포넌트의 데이터 변경으로 다시 실행되는 ‘리렌더링’ 개념을 이해해야 합니다..

리액트 스터디 2023. 9. 20. 23:02

구글 코랩 웹 브라우저에서 무료로 파이썬 프로그램을 테스트하고 저장할 수 있는 서비스 머신러닝 프로그램 만들기 가능 클라우드 기반의 주피터 노트북 개발 환경 텍스트 셀 셀은 코랩에서 실행할 수 있는 최소 단위 코드처럼 실행되지 않아서 자유롭게 사용 가능 코드 셀 값을 계산하여 변수로 저장하고 결과를 출력하는 간단한 Python 스크립트가 포함됨 노트북 코랩의 프로그램 작성 단위이며 일반 프로그램 파일과 달리 대화식으로 프로그램 만들 수 있음 코드, 코드의 실행 결과, 문서 모두 저장하여 보관할 수 있음

혼자 공부하는 머신러닝+딥러닝 2023. 9. 12. 02:16

인공지능? 사람처럼 학습하고 추론할 수 있는 지능을 가진 컴퓨터 시스템을 만드는 기술 인공지능 태동기 = 인공지능에 대한 장밋빛 전망이 최고조에 도달한 시기 인공지능 황금기 = 로지스틱 회귀의 초기 버전으로 볼 수 있는 퍼셉트론 발표 인공일반지능(강인공지능) = 사람과 구분하기 어려운 지능을 가진 텀퓨터 시스템 약인공지능 = 현실에서 우리가 마주하고 있는 인공지능, 보조 역할만 가능 (EX) 음성 비서, 자율 주행 자동차, 알파고 .. 머신러닝? 규칙을 일일이 프로그래밍하지 않아도 자동으로 데이터에서 규칙을 학습하는 알고리즘을 연구하는 분야 인공지능의 하위 분야 중 지능을 구현하기 위한 SW 담당하는 핵심 분야 컴퓨터 과학 분야의 대표적인 머신러닝 라이브러리는 사이킷런 딥러닝?( = 인공신경망) 많은 머..

혼자 공부하는 머신러닝+딥러닝 2023. 9. 12. 01:59