본문 바로가기

전체 글331

JavaScript - Debugger 사용기 (Feat. 크롬 개발자 도구) 디버거 (잘) 사용하고 싶다 디버거 사용이 손에 익지 않아 우리들의 콘솔로그로 디버깅을 주로 하였는데 손이 아파서 이제 타이핑을 못치겠다.. ("console": ..🤨?) 라는 핑계를 대면서 크롬에서 제공하는 디버깅 툴을 사용해 보려고 한다 이번에 포스팅을 정리해보며 한번이라도 더 손에 익기를 바라며 🙃 JavaScript - Debugger 사용기 (Feat. 크롬 개발자 도구) 그렇다면 우리의 디버거는 어디 숨어있을까 개발자 도구를 키면 [Sources] 라는 탭이 있다 [Sources] 탭을 클릭해보면 조금 복잡해보이지만 섹션이 크게 3개로 나뉘어 있다 소스파일들 디렉터리 소스파일들의 코드들 디버거 툴 우리가 사용할 디버거 툴은 빨간 박스로 표기해놓았다 좀더 자세히 살펴보면 Watch, Break.. 2024. 3. 27.
DatabaseSystem(1) 데이터베이스의 이해 1. 데이터베이스의 태동 기업 등의 대규모 조직의 운영의 변화로 데이터베이스가 생겼다 - 일부 의사결정권자의 과거 경험과 직관 → 전문 분석가 / 경영자에 의해 가공된 정보를 기반한 운영시스템으로 변화 - 이 변화는 데이터의 형태적 다양화 뿐 아닌 데이터의 양적 증가에 기인했다 - 그래서 데이터 관리에 요구되는 시간과 비용이 증가↑ & 별도의 관리장치가 필요 → 이는 데이터베이스로 발전 2. 데이터베이스 시스템의 개요 데이터베이스(Database)는 많은 수의 데이터를 저장해두고 필요시 원하는 데이터를 빠른시간에 검색하여 사용할 수 있도록 지원하는 장치이다. 이러한 데이터를 관리하고 업무를 자동화할 수 있는 프로그램이 있다면 효과으로 업무를 처리할 수 있을 것이다 → DBMS 로 발전 데이터베이스 관리 .. 2024. 3. 2.
Strapi(2) ContentType 설정하기 Strapi 는 프론트에게 매우 유용한 CMS 이다 현재 진행중인 Next.js 프로젝트에 적용해보기 위해 스트라피를 이용해서 직접 API 를 만들어 보는 과정을 포스팅에 담았다 지난 시간에는 Strapi 를 설치하여 어드민 페이지까지 띄웠고, Strapi - 스트라피 설치하기 현업에서는 Strapi 를 사용하고 있다. 하지만 나도 사! 용! 하고 싶었다 그말인 즉슨 누군가가 차려놓은 밥상말고 나도 요리를 해보고 싶었다는 말과 동일하다 그래서 소원대로 Strapi 로 요리를 좀 devbirdfeet.tistory.com 이번 시간에는 어드민에서 Content-Type, 즉 인터페이스를 모델링하는 과정을 정리해보았다 다음시간에는 Content-Type 을 가지고 mock-up 데이터를 추가한 뒤 api 로.. 2024. 2. 29.
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.
반응형