전체 글353 디자인패턴 - Flyweigh 디자인 패턴을 항상 공부하고 싶었다.하지만 그 시절의 나에겐 뭔가 어려웠고, 개념 자체가 이해가 잘 되지 않아 여러번 포기 했었던 것 같다.올해 초부터 이제 공부할 타이밍이구나를 느끼고, 강의를 찾아보게 되었다. 그동안 업무하면서 겪었던 경험들이 하나둘씩 떠오르면서,머리 속에 각각 떠돌아다니던 지식들이 패턴화되어 깔끔하게 정리가 되는 느낌이었다. 타입스크립트로 보는 GoF의 디자인 패턴 강좌 라는 유튜브 강의를 듣게 되었는데타입스크립트를 사용하여 이해도 되고 전반적으로 깨닫는 것이 많아서 학습 내용을 정리해보려고 한다. 디자인패턴 - FlyweighFlyweight동일한 객체를 중복하여 생성하지 않고, 미리 생성된 객체를 공유해서 사용한다는 개념의 패턴이다.공유할 속성과 아닌 속성을 구분해서 생각해 주어.. 2025. 3. 9. React - eslint 세팅하기 eslint 를 세팅을 하였다. 하면서 정확한 개념을 이해하게 되었다.prettier 가 한 사람이 짠 것 같은 코드 규칙을 적용하는 거라면,eslint 는 여러 명이 협업할 때 잘못된 코드(중복, typo) 등을 고칠수 있도록 도와준다.이친구가 없다면 배포할때에서야 잘못된 점들을 알아챌 수 있기 때문에 모든 프로젝트의 동반자같은 녀석이다. 먼저, 최신버전을 다운받았다.하지만 리액트 플러그인과 호환성이 안맞는 부분이 있어 9버전에서 8버전으로 다운그레이드 하였다.(무조건 최신보다는 안정성이 확인되고 업그레이드 하는 것을 추천) eslint.config.js import eslint from "@eslint/js";import tseslint from "@typescript-eslint/eslint-plu.. 2025. 2. 18. Figma - 피그마에 폰트 추가하기 (Feat. 맥) 피그마 데스크탑 앱에 원하는 한글 폰트가 없어 추가를 하려고 한다 😁 1. 일단 폰트를 다운받아주자 (TTF 혹은 OTF 확장자의 폰트 파일만 가능)나는 귀여운 삼립호빵체를 받아주었다 (호호) 2. 맥북에 폰트 파일 설치하기spot light 를 키고 font book 을 검색해보자** font book 은 맥북의 폰트 모음 폴더라고 생각하면 된다 3. font book 안에 폰트 넣어주기맥북에 폰트 설치가 되었다 4. 피그마 데스크탑 앱에서 사용하기잘 나온다! 2025. 2. 9. React - 구글 스프레드 시트 API 연동하기(2) - 프로젝트 설정 구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까? 일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)지난 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 이번 포스팅에서는 프로젝트 설정을 해보려고 한다.자, 머리에 그려졌으면 따라와보시길 ! 1. 구글 콘솔에서 할일 1) 서비스 계정 만들고 키 발급 받기 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기 React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정구글 스프레드 시트에 저장한 데이터를.. 2025. 1. 30. React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정 구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까? 일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)이번 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 자, 머리에 그려졌으면 따라와보시길 ! 1. 구글 콘솔에서 할일 1) 서비스 계정 만들고 키 발급 받기 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기 2. 프로젝트에서 할일 1) 구글 스프레드 시트 라이브러리 설치 2) 라이브러리 사용해서 API 호출해보기 React - 구글 스프레드 시트 API 연동하기.. 2025. 1. 14. HTML - 공식문서 1.8 HTML vs XML syntax HTML 스펙 문서를 읽고 간추리고 번역하고 정리해 보았다(부족한 부분이 있다면 댓글로 남겨주세요~) 1.8 HTML vs XML syntax 문서와 프로그램을 설명하는 추상 언어와 해당 언어를 사용하는 자원들(DOM)의 인터랙션을 위한 API 를 정의해보자. 이 자원들(in-memory representations)은 DOM HTML 혹은 DOM 이라고 짧게 줄여 말할 수 있다. 이러한 자원들을 전송하기 위해 사용되는 다양한 콘크리트 syntax(구문)들 중 2가지를 소개해보겠다. 첫 번째로 소개할 형식은 HTML 이다. 이 구문는 대체로 널리 사용되고 있는 포맷이고, 레거시 브라우저들과도 호환이 가능하다. [text/html] 와 같은 mime type 을 네트워크 헤더에 포함시킨 문서.. 2025. 1. 7. 이전 1 2 3 4 ··· 59 다음 반응형
