프로그래밍 언어/웹 프론트엔드 우주개발자(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..
카테고리 없음 우주개발자(SpaceDev) 2022. 10. 28. 22:41
백그라운드가 패턴 방식이라 작은 이미지를 사용하여 이미지 사이즈를 낮추고 로드된 이미지를 여러번 반복하여 그리려고 했는데 찾아보니까 큰 이미지를 한번 로드해서 한번에 그리는게 더 웹 성능이 좋다고 한다 (나중에 정리해봐야겠다...) 참고 https://stackoverflow.com/questions/14410994/images-in-browsers-performance-for-background-repeat-css
TIL(Today I Learned) 우주개발자(SpaceDev) 2022. 10. 28. 22:39
좀 더 확인해봐야겠지만, elipse는 연산이 꽤 걸리나보다 일단 기본적으로 총 12번의 연산이 필요하니까... canvas에서 5개 쓰니까 프레임 드랍이 심하네... (요거 나중에 한번 정리해봐야겠다...)
TIL(Today I Learned) 우주개발자(SpaceDev) 2022. 10. 18. 23:48
파일경로 오류내용 아래 사진처럼 VSCode(Visual Studio Code)에서 스타일 경로를 찾지 못하는 이슈가 발생했다. 오류 해결 이러한 현상이 발생하는 이유는 VSCode에서 경로를 제안하기 때문이다. 따라서 Path Intellisense 확장 프로그램을 (설치가 안되어 있을 경우) 설치한 후 VSCode 설정으로 들어 간 후 검색창에 typescript.suggest.paths를 입력해 주고 VSCode 자체 경로 제안을 해제해 준다. 그럼 아래 사진처럼 정상적으로 나오게 된다.
라이프 로그 우주개발자(SpaceDev) 2022. 10. 9. 02:40
여는 글 2022년 10월 08일 토요일 FEConf 2022를 다녀왔습니다. 컨퍼런스를 다녀왔으면 후기를 써야하는것이 인지상정! 후기를 작성하도록 하겠습니다. Let's get it! FEConf 2022 그리고 그 치열한 티켓팅 2022년 코로나 시기에 참석하는 두번째 오프라인 컨퍼런스 FEConf2022! 처음 세션 리스트를 볼 때 아 이건 꼭 참석해야겠다는 생각이 들었습니다. 그리고 운이 좋게도 티켓팅에 성공했습니다. 하지만, 아쉽게도 같이 가기로 한 회사 동료들은 티켓팅에 실패해 이번엔 저 혼자 다녀오게 되었습니다. (외로운 컨퍼런스….) FEConf 2022 세션 및 참여한 세션 A Track B Track FEConf는 총 2트랙(A track, B track)으로 구성되어져 있었습니다. 이..
프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2022. 9. 17. 19:32
여는 글 여러분들은 실행 컨텍스트를 잘 아시나요? 저는 아직까지도 실행 컨텍스트를 느낌적으로만 알고있지, 자세하게는 잘 모릅니다. 그렇기 때문에 저도 한번 다시 공부할 겸, 블로그 포스팅도 할 겸 해서 이 글을 작성하게 되었습니다. 다같이 실행 컨텍스트에 대해서 한번 알아보도록 하죠! 실행 컨텍스트(execution context) 실행 컨텍스트는 전역 혹은 함수 내의 작성해 놓은 코드가 실행 가능한 코드(Excutable Code)일 경우, 자바스크립트 엔진이 코드를 실행하기 위해 필요한 환경 정보를 모아놓은 객체입니다. 여기서 환경정보란 아래와 같습니다. 변수(Variable) 변수(Variable)에 대한 정보를 알고 있어야 합니다. 전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티 등이 변수(..