본문 바로가기

전체 글

(61)
[문제해결] E-Chart 새로고침시 크기 초기화 → onMount 훅을 사용해서 처음 렌더링 될 경우에는 문제가 없지만, 새로고침 시에는 (초기화가 이루어지지 않아) 배열이 비어있을때도(data) 차트가 렌더링 되기 때문에 차트의 초기화 에 문제가 발생했다.→ 비동기작업으로 데이터를 넘겨주고 있는 상위 컴포넌트 에서 if 문으로 데이터가 있을 경우에만 BarChart 가 렌더링 될 수 있도록(컴포넌트에 조건문을 추가해) 처리해주었다.→ 따라서, 비동기 작업을 처리할때 상위 컴포넌트에서 Loder UI 를 처리하는 습관을 가지는게 좋다. [ BarChart.svelte ]Code [ 상위 컴포넌트 ]Code ... // 데이터가 없을 경우 Loder UI 출력 {#if operationReport.length > 0} {:else} {/if} // 데이..
[Vscode] Vscode 설정 ctrl or comment + shift + p : 설정열기 [ 새파일 / 새폴더 생성 단축키 설정 ]ctrl + shift + p를 누르고 Open keyboard Shortcuts (JSON) 으로 들어가 설정한다.keybindings.json 에 아래와 같이 작성 해준다.[ {"key": "ctrl+n", "command": "explorer.newFile", "when": "!editorFocus"}, { "key": "ctrl+shift+n", "command": "explorer.newFolder", "when": "!editorFocus" } ]→ ctrl+n : newFile → ctrl+shift+n : newFolder [ .code 명령어로 VsCode 실행 ]ctrl + shift..
[유용한 App&Plugin]Site [ Img URl 추출 사이트 ]Essedrop - Make your image online instantlyMake your file online instantly - You can upload a image, then use it anywhare!https://essedrop.com/ [ Gradients 생성 ] ✨The Best Gradients CollectionFree Gradients Collection: Sketch/Photoshop/CSShttps://webgradients.com/ [ 워터마크 삭제 ] ✨→ WaterMarkremover Watermarkremover.ioRemove watermarks from your images using our AI technology. Use o..
[유용한 App&Plugin] VsCode Plugin [ Tokyo Night ] → 코드 테마 변경 [ Korean Language Pack for Visual Studio Code ] → 한국어 번역 팩 [ Auto Rename Tag ] → 태그명 수정시 짝이 되는 태그를 자동으로 같이 변경. → 태그명 변경, 태그 닫기를 도와준다. [ Auto Close Tag ] → 태그를 자동으로 닫아준다. [ TabOut ] → 코드 작성시, Tab 키로 ‘() {} [] ‘ 블럭안에서 빠져나가게 해준다. [ REST Client ] → RestApi 를 사용할때 send request 를 누르면 수신 데이터를 볼수 있다 Uploaded by N2T [ Figma 디자인본 VsCode로 가져오기 ] ✨ → Figma for Vscode
[유용한 App&Plugin] Chrome Plugin [ Chrom Color Picker ]→ 웹 사이트 내에서 색상추출Color Picker for Chrome™HEX, RGB Color picker, Advanched Eyedropper, Find color code on any pagehttps://chromewebstore.google.com/detail/chrome-의-컬러-피커/clldacgmdnnanihiibdgemajcfkmfhia?hl=ko [ Cookie-Editor ]→ 탭을 떠나지 않고 쿠키를 확인 및 생성,수정 또는 삭제 할 수 있는 편집기Cookie-EditorSimple yet powerful Cookie Editor that allow you to quickly create, edit and delete cookies with..
[유용한 App&Plugin] Mac App [ Responsively ] : 해상도별 Display 화면 테스트→ 해상도별 / 기기별 한 화면에서 핫 리로딩이 가능하다.Responsively App - A Web Developer's BrowserA dev-tool that aids faster and precise responsive web development.https://responsively.app/download [ Rectangle ] : Mac 창 분할앱RectangleMove and resize windows in macOS using keyboard shortcuts or snap areas. The official page for Rectangle.https://rectangleapp.com/ [ GIPHY ] : GIF 생성..
N2T 사용법 💡 Notion 에 작성한 글을 Tistory 블로그에 포스팅 해주는 기능 ﹡Git Repository 에 가면 사용법이 자세히 나와있다.https://github.com/jmjeon94/N2T [ REDIRECT_URI 에러 ]﹡ Tistory Open Api 관리https://www.tistory.com/guide/api/manage/register 1. 서비스 URL 과 CallBack URL 을 모두 등록해준다.2. config.py 파일에서 REDIRECT_URI 을 등록해준다. → 주의할 점 은, URL 뒤에 ‘ / ’ 가 들어가있다면 빼주면 오류가 발생하지 않는다. → 보안을 위해 https 로 등록. [ Notion Token V2 에러가 날 경우 ]1. 먼저 Notion 토큰 값 을 재확..
[Javascript] 자바스크립트 원리 & 이벤트 루프 동작(순회) 구조 이벤트 루프는 브라우저 동작을 제어하는 관리자 : 브라우저의 동작 타이밍을 제어하는 관리자마치 순회(loop) 하는듯하여 이벤트 루프라 부르는 것이다 [ 자바스크립트 엔진 구동 환경] 자바스크립트를 실행하는 소프트웨어로는 우리가 잘 알고 있는 웹브라우저와 런타임인 Node.js 가 있다.싱글 스레드인 자바스크립트 엔진이 어느 곳을 거쳐 비동기 작업을 수행하는지 우선 이 둘의 내부 구성도를 눈에 익혀보자. [ 브라우저 내부 구성도 ]구성 요소로는 Web APIs, Event Table, Callback Queue, Event Loop 등이 있다.﹡ Call Stack : 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조﹡ Heap : 동적으로 생성된 자바스크립트 객체가 저장되는 공간﹡ Web AP..