작년에 입사하고 회사에서 팀원간 스터디용으로 정리했던건데, 숙녀분께서 필요하다고 하셔서 티스토리로 두두등장 :)Redux?상태 관리 라이브러리중 하나로 현재까지 가장 많이 쓰이고있다. 상태관리란 UI/UX에 맞게 데이터를 관리하거나 서버와 주고받는 데이터들을 관리하는 것을 말한다. 프로젝트가 복잡하고 크기가 커질수록 상태관리의 난이도는 크게 올라간다. (이를 해결하기위해 전역으로 상태를 관리할 수 있는 라이브러리를 쓰게되는데, redux, MobX, recoil등을 사용할 수 있으며 children을 사용하는 방법도 있다.) props drilling리액트 특성상 단방향으로 prop을 하위 컴포넌트로 전달하는 용도로만 쓰이게 되는데, 프로젝트가 커지다보면 위처럼 해당 데이터를 받기위해 필요없는 컴포넌트에..

변태숙녀와 드디어 딥다이브 스터디를 시작했다. 더이상 미루면 답이 없을것같아서 일단은 숙녀분이 스터디를 하지않는 목요일에 우리의 자스 스터디를 넣기로 했다. 목요일 오후 9시 딥다이브 1강씩 가늘고 길게 보기로 했다 :) 2월 15일 첫 스타트 04장 변수 스터디 내용 기록 시자쿠 변수가 왜 필요할까? - 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. - 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트(8비트)이며 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다. - 각 셀은 고유의 메모리 주소를 갖는다. 10 위 예제의 숫자값 10은 메모리상의 임의의 위치(메모리주소)에 기억(저장)되고 cpu는 이 값을 ..

주말에 뒹굴뒹굴 하면서 유튜브보다가 빵형의 개발도상국의 새 동영상이 올라온걸 확인했다. 유데미 때 너무 재밌게했어서 당장클릭했는데, p5js라는 걸 사용했다. p5js란 자바스크립트 라이브러리중 하나로 다양한 드로잉 기능을 제공하는 라이브러리다. 에디터도 제공하고있어서 강의는 p5*js에서 제공하는 에디터에서 진행했다. (CDN추가해서 사용할 수도 있다.) p5.js Web Editor editor.p5js.org 처음 화면은 이런식으로 되어있고, draw를 통해서 캔버스가 그려져있다. function setup() { createCanvas(400, 400); } function draw() { background(240); ellipse(50,50,80,80); } ellipse라는 함수를 사용해서 ..

하이브리드로 만든 앱에 뒤로가기 버튼 터치 시 팝업을 닫아줘야했다. 방법을 찾다보니 만난게 history.pushState() // html5에 새로 추가된 url 변경 메소드 history.pushState(상태, unused, url(optional)) 네이티브에서 뒤로가기 시 이벤트를 해야해서 사용자의 히스토리가 바뀔 때 실행되는 이벤트 popstate랑 사용했다. popstate 이벤트는 뒤로가기 등 history 이벤트가 발생할 때 동작하는 액션이다. 두 함수를 활용해서 history.pushState때는 제자리에 머무르도록 하고, popState이벤트에 뒤로가기 발생 시 실행할 액션을 넣어주었다. const preventGoBack = () => { closeConfirmDialog() nav..

// SSR export const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { store.dispatch({ type: LOAD_USER_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); //saga에서 END 액션불러오기 store.dispatch(END); //saga에서 success될때까지 기다려주는 액션 await store.sagaTask.toPromise(); } ); 강의에서 CSR에서 dispatch하던 부분을 SSR로 바꾸는 도중 store.dispatch와 store.sagaTask.toPromise()를 적는 이유가 궁금해서 조금 더 찾아..