주말에 뒹굴뒹굴 하면서 유튜브보다가 빵형의 개발도상국의 새 동영상이 올라온걸 확인했다. 유데미 때 너무 재밌게했어서 당장클릭했는데, 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()를 적는 이유가 궁금해서 조금 더 찾아..

//프로젝트명 npx create-next-app next10-jsmeetup npx cra 하는것처럼 만들어주고 필요없는 스타일, pages 내용 제거 후에 cd 명령어를 사용해서 내 프로젝트의 루트 디렉터리로 이동해준다. cd next10-jsmeetup npm run dev package.json에 scripts를 보고 개발버전이니까 npm run dev로 파일을 실행시켜준다. next.js는 따로 라우터 설정없이 폴더를 기준으로 라우팅을 잡는다. _app.js는 각 페이지가 초기화될 때 로딩되는 파일이다. 때문에 공통 레이아웃, 글로벌 CSS를 적용할 수 있다. index.js는 / 경로가 된다. news.js는 /news 경로가 된다. / 밑에 하위폴더 설정하는 다른방법 news라는 폴더를 만들..

npm i -D webpack-dev-server일단 데브디펜던시로 webpack-dev-server를 받는다. devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, },기존 webpack.config.js에 devServer 설정부분을 추가해준다. 기존에 빌드했던 dist 폴더 제거 "scripts": { "dev": "webpack serve --env development" },package.json내 스크립트 부분 변경 npm run devnpm run dev를 이용해 다시 빌드를 해주고 컴파일이 완료됐다는걸 터미널에서 확인한 후 localhost:80..