우주개발자 블로그

프로그래밍 언어/웹 프론트엔드 (28)

Canvas애니메이션을 구현할 때 갤럭시 혹은 아이폰 디바이스에서 애니메이션 속도가 다른 이슈 해결하는 법

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2023. 1. 24. 18:58

만약 이전 글을 보시지 않았다면, 보시고 오는것을 추천드립니다. Next.js(React.js)에서 Canvas 사용법 with Typescript 여는 글 최근 Next.js에서 Canvas를 사용할 일이 있었습니다. 기존에 바닐라 자바스크립트에서는 공부를 했었지만, Next.js로는 해본적이 없었고, 따로 정리된 블로그가 딱히 없었습니다. 그래서 최근 noogoonaa.tistory.com 여는 글 최근 Canvas로 개발을 진행하면서, 여러 문제들을 맞닥뜨렸습니다. 그중에서 가장 골치아팠던 문제중 하나가, 이번 주제입니다 문제의 발단 프로젝트를 진행하면 보통 개인 디바이스를 통해서 확인을 하는경우가 많습니다. 저의 디바이스는 갤럭시 S22 울트라이기에 주 테스트는 갤럭시에서 진행했습니다. 어느정도 ..

Next.js(React.js)에서 Canvas 사용법 with Typescript

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2023. 1. 23. 23:42

여는 글 최근 Next.js에서 Canvas를 사용할 일이 있었습니다. 기존에 바닐라 자바스크립트에서는 공부를 했었지만, Next.js로는 해본적이 없었고, 따로 정리된 블로그가 딱히 없었습니다. 그래서 최근에 사용하면서 가장 사용하기 좋았던 방식을 한번 공유해 보도록 하겠습니다. Canvas란? Canvas는 HTML태그중 하나로 브라우저에서 도형 혹은 이미지들을 렌더링할 수 있는 요소중 하나입니다. 주로 게임 혹은 그래픽적인 요소를 브라우저에서 표현할 때 사용합니다. 프로젝트 셋팅 터미널에서 프로젝트를 타입스크립트로 생성합니다. yarn create next-app canvas_example --typescript --- ✔ Would you like to use ESLint with this pro..

Javasciprt 실행 컨텍스트(execution context)

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2022. 9. 17. 19:32

여는 글 여러분들은 실행 컨텍스트를 잘 아시나요? 저는 아직까지도 실행 컨텍스트를 느낌적으로만 알고있지, 자세하게는 잘 모릅니다. 그렇기 때문에 저도 한번 다시 공부할 겸, 블로그 포스팅도 할 겸 해서 이 글을 작성하게 되었습니다. 다같이 실행 컨텍스트에 대해서 한번 알아보도록 하죠! 실행 컨텍스트(execution context) 실행 컨텍스트는 전역 혹은 함수 내의 작성해 놓은 코드가 실행 가능한 코드(Excutable Code)일 경우, 자바스크립트 엔진이 코드를 실행하기 위해 필요한 환경 정보를 모아놓은 객체입니다. 여기서 환경정보란 아래와 같습니다. 변수(Variable) 변수(Variable)에 대한 정보를 알고 있어야 합니다. 전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티 등이 변수(..

Javascript를 다중 스레드 처럼 사용하기 - 웹 워커(Web Worker), 공유메모리(SharedArrayBuffer), Atomics 객체 정리

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2022. 8. 29. 23:36

해당 내용은 만화로 소개하는 ArrayBuffer 와 SharedArrayBuffer와 T.J 크라우더의 웹 개발자를 위한 자바스크립트의 모든 것이라는 책을 읽고 작성한 글입니다. 웹 개발자를 위한 자바스크립트의 모든 것 : 네이버 도서 네이버 도서 상세정보를 제공합니다. search.shopping.naver.com 여는글 여러분들은 자바스크립트가 싱글 스레드로 동작하는것을 알고 있으신가요?아마 어느정도 자바스크립트의 이해도가 있는 프론트엔드 개발자라면 자바스크립트는 싱글 스레드 언어란 것을 알고 있을겁니다.하지만, 이 말이 맞는 말이기도 하고, 틀린 말이기도 합니다.왜냐하면 웹 워커로 메인스레드와 워커 스레드를 만들 어 사용할 수 있기 때문이죠. 웹 워커(Web Worker) 웹 워커란 웹 브라우저(..

2022 인프콘 후기

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2022. 8. 27. 23:22

여는글 오랜만에 개발자 오프라인 컨퍼런스가 열렸습니다!!(그동안 컨퍼런스는 모두 온라인이었는데... 감동) 인프런에서 개최한 인프콘이란 행사였는데 오랜만에 열린 오프라인 컨퍼런스라 그런지 많은 개발자 분들이 신청을 하셨다고 들었습니다. 인프런에서도 이러한 상황에 몰릴걸 예상했는지 인원을 추첨으로 뽑았고 일단 저도 지원을 했는데 감사하게도 당첨이 되었습니다(짝짝짝) 그렇게 해서 여차저차 컨퍼런스에 다녀온 후기까지 작성하게 되었습니다. 그럼 한번 후기에 대해서 적어보도록 하겠습니다. 인프콘 참석 당일 제가 코엑스에 도착한 시각은 대략 11시 40분 이었습니다. 본 행사가 시작되는 시간이 오후 1시이기에 너무 빨리 온게 아닐까 하는 걱정에 행사장에 가보니 이제 막 시작하고 있더라구요. 그래서 참가자 등록을 하..

Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2022. 5. 7. 16:59

React, Strapi v4, MySQL을 이용한 Todolist 만들기 시리즈 2022.05.05 - [프로그래밍 언어/웹 프론트엔드] - 프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기 2022.05.06 - [프로그래밍 언어/웹 프론트엔드] - React와 Strapi 연동 - React, Strapi v4, MySQL을 이용한 Todolist 만들기 2022.05.07 - [프로그래밍 언어/웹 프론트엔드] - Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기 여는글 자 우리는 Strapi와 MySQL, React를 이용해서 Strapi를 사용해 보았습니다. 어떤가요? Strapi가 사용하기 편..

Copyright © 우주개발자 블로그 All Rights Reserved

티스토리툴바