gaki gaki

React-Redux 의 API, Hooks 1. Provider React Redux includes a component, which makes the Redux store available to the rest of your app Provider 는 stroe 에 접근해 state 를 사용 할 수 있게 해준다. / 앱 최상단을 감싸는 부모컴포넌트이다. import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import store from './store' import App from './App' const rootElement = document.getElementById('r..

-p5.js 사용법 p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.) p5.js 의 기본 화면 생성코드는 다음과 같다. function setup() { createCanvas(400, 400); } function draw() { background(220); } p5.js 는 setup 함수와 draw 함수가 필수 함수이다. setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다. -p5.js 의 도형 그리기 함수들 p5.js 의..

-p5.js 사용법 p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.) p5.js 의 기본 화면 생성코드는 다음과 같다. function setup() { createCanvas(400, 400); } function draw() { background(220); } p5.js 는 setup 함수와 draw 함수가 필수 함수이다. setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다. -p5.js 의 도형 그리기 함수들 p5.js 의..

리액트의 동작 원리 리액트는 state, view, action 으로 구성됩니다. 리액트는 현재 state 를 기준으로 UI 를 렌더링합니다. 특정 이벤트로 인해서 action 이 발생하여 state 가 변경되면 UI 는 리랜더링 되어서 변경된 state 를 기준으로 새로운 view 를 보여줍니다. React 는 어떻게 state 가 변경되었다는걸 알아낼까요? 이전 state 와 변경 후의 state 를 빠르게 비교하는게 성능상의 이점을 가져옵니다. 그래서 React 는 Obejct.is(prevState, newState) 를 활용하여 state 의 변경상태를 알아냅니다. 이것이 React 에서 불변성이 중요한 이유입니다. 예를들어 { number : 13, age : 24} 라는 state 가 있다고..

일주일에 4번 2시간씩 프로젝트를 하는데 요즘 너무 바빠서 블로그에 글을 올린건 오랜만인것같다. 지금 팀생성 페이지에서 꾸밈요소를 좀 만들고싶어서 p5.js 를 사용해서 광고판을 만들고있다. 이렇게 오렌지색 구슬 사이에 풋볼러브라고 글자가 자동으로 써지게끔 만들고있다. 이를 위해서 글자가 써지는 위치의 좌표를 얻어야하는데 처음에는, 노가다로 계산할까 했다가 생각해보니 좌표를 얻을 수 있는 방법이 있어서 그 방법을 사용했다. const mouseReleased = () => { console.log("mouseRelease"); console.log(JSON.stringify(xPos)); console.log(JSON.stringify(yPos)); }; const mouseDragged = (p) =>..

풋볼러브 프론트 (1.3) 오늘 꽤 많은 작업을 했다. 먼저 로그인 성공시, 네비게이션바의 컨텐츠가 바뀌도록 만들었다. 또한 새로고침시, 로그인이 유지되도록 LocalHost 에 로그인 정보를 저장해두었다. (이것보다 보안적으로 더 좋은 방법이 있을 것같은데 나중에 찾아봐야겠다.) 또한 프로필 페이지를 어도비 xd 로 대충 구상한다음 구현중이다. 내일 할 작업: 프로필 페이지 완성 및 유저정보 가져오는 api 테스트 및 로그인 유지여부 테스트

풋볼러브 Front (12.29) 오늘 수행 작업 : 회원가입 페이지 리펙토링 당근마켓 프론트 개발자 Nash 에게 코드리뷰를 받았는데, 내 코드의 문제점중 하나가 회원가입 페이지에서 onChange 이벤트로 input 값이 바뀔때마다 state 를 업데이트시켜서 joinData 를 최신화 시켰었는데, 문제는 이 방법이 비효율적이라는 것이다. 그래서 Nash 는 Form 태그를 이용해서 굳이 state 를 사용할 필요 없이 간단하게 joinData 를 서버로 전송할 수 있는 방법을 알려줬고 이를 적용했다. const [newUserInfo, setNewUserInfo] = useState({ id : null, pwd : null, nickname : null, address:{ city : '서울', ..

오늘 시행 작업 : 로그인 페이지 구현 완료. ( mui 를 사용했는데, 진짜 개편하다. 지금까지 일일이 이펙트를 구현했었는데 생고생했던것같음. ) 다음에 해야 할 작업 : 로그인 인증 기능 구현해야함. https://www.daleseo.com/react-router-authentication/ React Router로 사용자 인증하기 (로그인/로그아웃) Engineering Blog by Dale Seo www.daleseo.com 여기를 참고해서 구현하자. DevKor 해커톤 코드를 보니깐, 거기서는 리덕스를 이용해서 구현을 했던데 그건 나중에 해보자. 일단 내일 해야할것 1. 최상단 App 컴포넌트에 Auth 컴포넌트 구현하기. 2. 로그인 완료되면 메인페이지로 리다이렉션 및 헤더 내용 바꾸기 3..