본문 바로가기

분류 전체보기346

Strapi(1) 스트라피 설치하기 Strapi 는 프론트에게 매우 유용한 CMS이다 특히 혼자서 프로젝트를 개발할때 말이다. 서버가 필요없이 바로 api 를 만들어 사용할 수 있는 것이 큰 장점이다 현업에서는 Strapi 를 부분적으로 사용하고 있다. 하지만 나도 사! 용! 하고 싶었다 그말인 즉슨 누군가가 차려놓은 밥상말고 나도 요리를 해보고 싶었다는 말과 동일하다 그래서 소원대로 Strapi 로 요리를 좀 해봤다 하지만 잘 꾸며진 정제된 과정 말고, 날것의 실행 과정을 그대로 올려보려고 한다 (누군가에겐 도움이 되길 바라며) Strapi (1) 스트라피 설치하기 터미널에서 설치 명령어를 실행해보자 # --quickstart 옵션은 default로 db를 sqllite을 사용한다 npx create-strapi-app@latest my.. 2024. 2. 23.
VScode - Python 설치하기 파이썬 설치를 위한 간단한 포스팅이다 :) vscode 에서는 파이썬을 사용할 수 있도록 extension 을 지원해준다 1. 아래처럼 인스톨해주자 (나는 이미 설치했기 때문에 버튼이 uninstall 로 뜬다) 2. 터미널에서 버전을 확인해보니 잘 설치되었다 2024. 2. 23.
JavaScript - 마우스 커서에 달린 툴팁 최적화하기 (mousemove) 마우스 오버시 커서를 따라다니는 툴팁을 구현하며 리팩토링하는 과정을 간결하게 기록해보았다 이제는 어떻게 라는 질문이 머리속에 제일 먼저 맴돌기 시작한다 오늘 아침에 출근하면서 본 토스 컨퍼런스의 인트로 영상 문구가 생각났다 내가 좀 더 고생해야 사용하는 유저의 시간을 아낄 수 있다 최적화라는 단어에 대해 고심하게 되는 시기가 온 것이다 내가 좀 더 고생해야 사용하는 유저의 시간을 아낄 수 있다 JavaScript - 마우스 커서에 달린 툴팁 최적화하기 (mousemove) 첫번째 이슈 - useState mousemove 이벤트를 통해 실시간으로 좌표값을 받아와 useState 에 저장하여 → 툴팁에 style 값으로 넣어주는 방식을 사용하였다. 그렇게 되니 이슈가 생겼다. mousemove 시에 계속 .. 2024. 2. 1.
JavaScript - 애니메이션 최적화하기 (requestAnimationFrame) 자연스러운 애니메이션을 구현하기 위해 사투를 벌인 스토리를 포스팅해보려고 한다 애니메이션은 여러 사진을 연속적으로 연결한 것이다. 그리고 그 사진을 프레임(Frame) 이라고 한다 1초 동안 보여줄 수 있는 최소한의 자연스러운 프레임의 갯수는 60 프레임 정도가 된다 그래서 Frame Per Seconds 라고 해서 60fps 라고도 한다 시계침 애니메이션을 구현하는 중이었다. 초침의 경우 초단위로 360도씩 돈다 처음에는 타이머 함수인 setInterval()를 사용하였더니 이슈가 생겼다 다른 이벤트와 겹치니 1초마다 움직여야할 애니메이션이 누락되어 뚝뚝 끊겨버렸다 JavaScript 로 애니메이션을 실행하면 Reflow 가 일어난다. (애니메이션으로 인해 Dom이 변경되기 때문에) "Reflow" .. 2024. 2. 1.
Browser - Web Storage란 (브라우저 저장소) Web Storage 의 존재와 사용은 해봤다. 그런데 어떻게 사용해야 하는지의 개념은 솔직하게 잘 몰랐다. 어떻게를 알려면 왜 등장했는지부터 알아야 한다. 정체성부터 이해해야 전력배치를 잘 할 수 있기 때문이다. 웹에서 클라이언트에만 저장하는 데이터들이 있다 (자급자족, 클라이언트에서 저장해서 클라이언트에서 사용하는) 이를 도와주는 친구들이 Cookie 와 Web Storage 이다. (쿠키랑 스토리지에 데이터를 저장해놓고 꺼내다 쓰는) 그전에 쿠키🍪 이야기가 빠질 수 없다 쿠키 는 client(브라우저)에 저장할 수 있는 데이터이다 만료일자를 지정해주면 지속적쿠키🍪라고 불렸으며, 지정안해주면 세션쿠키🍪(브라우저종료시 삭제)라는 별명도 얻었다 하지만 이녀석은... 🥲 문자열만 저장이 되었고, 용량이 제.. 2024. 1. 29.
Network - RESTful API 란 오늘은 Restful api 에 대해서 공부해보았다. 업무적으로 하던 것들이 개념적으로 좀더 가깝게 다가온 것 같다 Network - RESTful API 란 REST API 란 REST 아키텍쳐 기반으로 API를 구현한 것으로 클라이언트 - 서버 사이에서 데이터를 보내주는 인터페이스이다 (데이터 통로 느낌) ** REST(Representational State Transfer)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처 이 아키텍처로 만들어진 api들은 무상태와 캐싱을 지원한다 • 무상태 - 이전 요청과 상관없이 서버 - 클라이언트가 통신 (모든 요청은 독립적) • 캐시 - 통신 속도 (응답시간)을 줄이기 위해 데이터 캐싱을 지원 REST API 특징 1. URI 를 사용한다 (고.. 2024. 1. 20.
Network - HTTP 살펴보기(2) (Method / Status Code) 지난 시간에는 HTTP 요청과 응답 구조, 그리고 헤더를 살펴보았다 오늘은 HTTP 두번째 포스팅으로 메소드와 상태코드에 대해 공부해 보려고 한다! 1. HTTP 프로토콜의 구성요소인 요청 / 응답 / 헤더 의 이모저모 살펴보기 2024. 1. 18.
Next.js - 서버 컴포넌트에서 useContext() 사용하기 넥스트js는 서버컴포넌트와 클라이언트 컴포넌트로 나뉘어진다 그렇기 때문에 React 기반의 훅들을 사용할 때는 한번더 생각해보아야 한다 오늘은 useContext() 를 어떻게 사용하는 지 알아볼 것이다 Next.js - 서버 컴포넌트에서 useContext() 사용하기 리액트에서 전역 변수를 전달하기 위해 redux / useContext 를 사용하였다 Next.js에서 useContext 를 사용하려고 하니 한가지 제약이 있었다 You are using createContext in a Server Component but it only works in Client Components → 바로 클라이언트 컴포넌트에서만 사용이 가능하다는 것이다 createContext in a Server Compo.. 2023. 12. 31.
Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) updated 01/13/24 Next.js 로 포트폴리오 사이트를 만들면서 Route 로 관리되는 모달 (Route as Modal) 을 구현하고자 하였다 리액트로 같은 기능을 구현할 때 useHistory 로 구현하였던 기억이 있어 비슷하게 헤매일 줄(?) 알았는데 생각보다 훨씬 간단하였다 (머 - 쓱 😅) Next js 는 그만큼 라우터에 진심이라는 것을 다시한번 느끼며 그때의 감동을 정리해보았다 Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) 일단 처음 살펴봐야할 개념이 있다. Intercepting Routes 라는 개념이다. 이 친구에 대해 간단히 정리를 하면 원래의 주소의 화면과 다른 라우트를 가진 컴포넌트를 동시에 보여줄 수 있는 기능이다 This allows yo.. 2023. 12. 29.
반응형

티스토리툴바