티스토리

MyTutorials

검색하기

블로그 홈

MyTutorials

mytutorials.tistory.com/m

현재는 JavaScript 에 제일 집중하고 있는 개발자입니다.

구독자: 6

방명록 방문하기

주요 글 목록

rustup, cargo, wasm-pack 차이 - cargo는 rust 패키지 관리를 한다. ls ~/.cargo/bin/ 이렇게 하면 cargo가 지금 global하게 뭔 패키지를 관리하고 있는지 확인 가능하다. - rustup은 rust 언어의 버전을 관리한다. 아래 방식으로 현재 rust 툴체인 확인을 한다. - wasm-pack 은 rust 로 wasm 프로젝트 생성하고 진행하는걸 돕는 패키지이다. 공감수 0 댓글수 0 2021. 9. 21.
zsh 알아보기 + Terminal, console, shell, kernal 정리하기 Terminal, console, shell, kernal 정리하기 우선 zsh을 알아보기 전에 Terminal, console, shell, kernal의 차이를 한번 잠깐 리프레시하고 가는 글을 읽었다. 요약하자면, linux든, mac os든 terminal이 있다. 그걸 키고 우리가 명령어를 뚝딱뚝딱 치는건데, terminal 자체가 우리가 치는 명령을 process 하는 것은 아니고 얘는 그냥 commands를 받고 결과물을 스크린에 보여주는 역할을 하고 있다(윈도우에서는 console이라고 부름). 그리고 실제로 처리는 shell에 맡긴다. shell은 commands를 해석하고, syntax확인이나 제대로 써진건지 그런걸 확인한다. 다 괜찮으면 kernel이 이해할 수 있는 형태로 변경해서 .. 공감수 0 댓글수 0 2021. 9. 18.
버블링과 캡처링 https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info 이 문서가 가장 잘되어있다. 이벤트가 동작하면 일단 window객체에서 타깃으로 이벤트가 내려갔다가(캡처링), 다시 상위로 전파되는 동작(버블링)이 일어난다. 이때 대부분은 이벤트 핸들러가 상위로 전파되는 버블링단계에서 동작하는데, elem.addEventListener(..., {capture: true}) 이렇게하면 캡처링단계에서 동작하게 할 수도있다. 이때 버블링되는것을 막고 싶으면 e.stopPropagation을 사용할 수 있다. * 추가: e.preventDefault https://developer.mozilla.org/ko/docs/Web/API/Eve.. 공감수 0 댓글수 0 2021. 6. 17.
간단 메모 - 렌더 트리, 크리티컬 렌더링 패쓰 https://velog.io/@mu1616/Critical-Rendering-Path#:~:text=Critical%20Rendering%20Path%EB%8A%94%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80,%EA%B3%BC%EC%A0%95%20%EB%98%90%EB%8A%94%20%EC%88%9C%EC%84%9C%EB%A5%BC%20%EB%A7%90%ED%95%9C%EB%8B%A4.&text=%EC%9D%B4%20%EA%B3%BC%EC%A0%95%EC%9D%84%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0,%EB%A5%BC%20%EA%B0%9C%EC%84%A0%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4. Critic.. 공감수 0 댓글수 0 2021. 6. 14.
간단메모 - 리페인트와 리플로우 https://webclub.tistory.com/346 Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 리플로우와 리페인팅에 대해 알아봅니다. Reflow 발생 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, webclub.tistory.com 매번 조금씩 가물가물 하는 내용. Reflow 돔의 크기 같은게 변경되서, 자기자신부터, 자식 부모, 부모의 부보까지 수치를 다시 계산해서 그리고, 렌더트리를 생성하는 과정이다. Repaint 이러고 나서 렌더트리를 다시그리게 되는데 이를 Repaint라고 한다 어떤 div의 크기가 변경된다면 아래의 동작이.. 공감수 0 댓글수 0 2021. 6. 14.
GraphQL아주 조금만 살펴보기 - React 오늘도 좀 쉬는김에 GraphQL쪽을 더 보기로 했다. GraphQL이 페이스북 팀에서 처음 고안됬을때는 UI에서 바로 사용할 수 있는 형태로 데이터를 서버에서 뽑아올려고 했던건데, 지금은 GraphQL은 그보다 훨씬 많은 것들을 하고있다고한다. 오랜 짬이 있는 분은 React에서 GraphQL을 어떻게 쓰고 있는지, 캐슁 전략 등에 대해서 좀 개괄적으로라도 알게되면 좋겠다는 목표를 가지고 세미나를 들었다. 공부 자료 https://frontendmasters.com/courses/client-graphql-react/ ⚛️ Learn to connect GraphQL to React using Apollo Client and React hooks! Use queries and mutations to i.. 공감수 0 댓글수 0 2021. 6. 5.
GraphQL아주 조금만 살펴보기 - Node.js 오늘은 갑자기 컨디션도 좀 안좋아서 평소에 제대로 좀 보고 싶었던 GraphQL관련 세미나를 들었다. Gatsby같은 경우에는 내부에서 데이터 끌어오는게 다 GraphQL이고, AWS에서 AppSync를 써도 GraphQL엔드포인트를 제공해주는거라 경험은 계속했는데 제대로 스키마가 무었인지 resolve는 어떻게하는지 서버에서 뭘처리해주길래 나는 그냥 프론트에서 db쿼리 날리듯 날리면 되는건지 보기로 했다. 공부 자료 https://frontendmasters.com/courses/server-graphql-nodejs/ 📡 Learn to create GraphQL APIs on the server in Node.js with Apollo Server with Scott Moss. Create a Gr.. 공감수 0 댓글수 0 2021. 6. 3.
Json에서 Type 바로뽑아주는 사이트 환장하게 길고 중첩된 Response를 보고 타입을 다 뽑으려니까 골이 아파가지고 찾아보니 아래의 사이트가 있었다. https://jvilk.com/MakeTypes/ MakeTypes from JSON samples Statically type check code that interacts with JSON objects Proxy objects generated with MakeTypes are expressed as TypeScript classes, so you can statically type check that your code is appropriately accessing fields on the JSON object. Code against web s jvilk.com 좌측 상단에 객체.. 공감수 0 댓글수 0 2021. 6. 2.
Tailwind css로 초간단 Dropdown 메뉴 구성하기 const DropDown: FC = ({ children, title }) => { const [open, setOpen] = useState(false); return ( setOpen(!open)} > {title} // children으로 받은 것들에 적용할때 {cloneElement(children, { className: `transform ${ open ? `scale-y-100` : `scale-y-0` } transition duration-500 ease-in-out origin-top w-full bg-white absolute text-black text-center border-2`, onClick: () => setOpen(!open), })} // 바로 style 적용 setO.. 공감수 0 댓글수 0 2021. 6. 2.
Editable dom element에 focus를 할때 cursor로 끝으로 옮기는 법 // ref: https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442 export const setEndOfContenteditable = (contentEditableElement) => { var range, selection; if (document.createRange) { //Firefox, Chrome, Opera, Safari, IE 9+ range = document.createRange(); //Create a range (a range is a like the selection but invisible) range.selectNodeConten.. 공감수 0 댓글수 0 2021. 5. 30.
HTMLElement에 contentEditable 속성을 줘서, 편집가능하도록 만들기 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable HTMLElement.contentEditable - Web APIs | MDN The contentEditable property of the HTMLElement interface specifies whether or not the element is editable. developer.mozilla.org contentEditable이라는게 있다는것에 충격을 받은 하루다. input을 써서 어떻게 해야하나 머리아팟는데 정말 대충격이다.... I am editable by the user 이렇게 하면 이렇게 내용을 고칠수가 있게 된다. 공감수 0 댓글수 0 2021. 5. 27.
Appending parameter to URL without refresh https://stackoverflow.com/questions/32828160/appending-parameter-to-url-without-refresh Appending parameter to URL without refresh I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on stackoverflow.com 앱에서 refresh없이 url만 바꿔야하는 일이 있어서 찾아봤더니 위의 글이 좋았다. - Hi.. 공감수 1 댓글수 0 2021. 5. 27.
JWT 란? 1. JWT는 Authorization을 위한 것이다. Authentication을 위한 것이 아니라. - Authenticate는 유저네임과 패스워드를 받아서 이게 맞는지 확인하는 것을 말하는 것이다. (로그인 하는 것을 생각) - Authorization은 지금 요청하는 사람이 어떤 리소스에 접근이 가능한지를 verify 하는 것이다. 2. 원래 Authorization을 위해서는 Session을 사용했다. 로그인할때(Authentication할때), response에 set-cookie헤더를 사용해서 Session id를 보내놓고, User가 요청할때, 무조건 session id쿠키를 같이 보내서, 이 쿠키값이 서버의 메모리든 뭐든에 저장되어있던 session 값과 일치하는지 확인하고, 이 user.. 공감수 0 댓글수 0 2021. 3. 5.
img Lazy loading: loading="lazy" 옵션을 사용하자 img lazy loading을 구현하기 위해서 별의별 기법을 다 써보곤 했는데, 브라우저 단에서 아주 잘 지원하고 있다. (크롬 기준) web.dev/browser-level-image-lazy-loading/ Browser-level image lazy-loading for the web This post covers the loading attribute and how it can be used to control the loading of images. web.dev 공감수 0 댓글수 0 2021. 2. 26.
정규표현식 www.youtube.com/watch?v=Gg0tlbrxJSc&ab_channel=MINIMILAB 정규표현식: 문자열에 특정한 규칙이 있는 경우, 이를 추출하기 위해 사용하는 것 - 직접 라우터를 만들어보는데 이때 parameter나, fragment를 추출할때 사용한다. - 이를 통하면 복잡한 처리가 줄어든다 - 쉽게 사용할 수 있는 곳: regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com - developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Reg.. 공감수 0 댓글수 0 2021. 2. 24.
Client-side storage: 브라우저를 통해 웹사이트가 유저의 컴퓨터에 데이터를 저장하는 여러 방법 developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage Client-side storage - Learn web development | MDN Modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary. This lets you persist data for long-term storage, save sites or documents for offline use, r deve.. 공감수 0 댓글수 0 2021. 2. 21.
Linux Command: echo, | 사용법 복습 echo -ne "GET / HTTP/1.1\r\nHost: example.com\r\n\r\n"| nc example.com 80 echo: 화면에 문자열을 출력한다(더보기) | : 앞의 출력을 입력으로 사용한다(더보기) 공감수 0 댓글수 0 2021. 2. 18.
Mac Finder에서 VS-Code 바로 열기(automator 기능 활용) Mac에서 vs code를 열때마다 terminal을 이용하는게 너무 귀찮아서 방법을 찾아보니, automator 기능을 활용하면 된다. 1. automator를 킨다 2. service를 선택한다. service가 현재 애플리케이션이나 finder에서 text나 files를 받아서 뭔가를 처리할 수 있게 해준다. 3. 내가 하고 싶은건 원래는 shell에서 code "파일명" 하던걸 자동화 하고 싶은거다. 그래서 아래처럼 해준다. 이 서비스는 finder에서 files이나 folder를 받는다고 선택해준다. 그리고 이 input을 arguments 형태로 넘겨준다고 체크한다. 그리고 아래에 처리할 행동은 아래와 같다 open -n -b "com.microsoft.VSCode" --args "$*" 4... 공감수 1 댓글수 0 2021. 2. 15.
DOM 이란? developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction Introduction to the DOM - Web APIs | MDN The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. In this guide, we'll briefly introduce the DOM. We'll look at how the DOM represents an HTML or XML document in memo developer.mozilla.org DO.. 공감수 0 댓글수 0 2021. 2. 8.
VS code TODO 리스트를 효율적으로 관리하자!(Todo Tree 익스텐션 사용기) 개발하다보면 솔직히 할게 넘 많아가지구 뭘하고있었는지, 뭘해야하는지, 뭘 나중에 해야할지를 관리하는게 어려운점이 있었다. VSCode를 IDE로 사용하는 사람들(나같은 JavaScript 개발자)에게는 VSCode가 이미 한트럭정도 필요한 Extension을 제공중이다. 그중에 Todo Tree 를 사용해보려고 한다. TODO Tree marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree Todo Tree - Visual Studio Marketplace Extension for Visual Studio Code - Show TODO, FIXME, etc. comment tags in a tree view marketplace.visuals.. 공감수 5 댓글수 0 2021. 1. 28.
Fira Code VsCode에서 font ligatures 사용하기(brew가 안먹힐때) github.com/tonsky/FiraCode tonsky/FiraCode Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub. github.com 여기서 폰트를 다운 받았다. 나는 installation 가이드를 따라서 했는데 안됬다. 이때는 그냥 zip파일을 다운로드 받아서 ttf파일을 직접 설치하니까 쉽게 해결됬다. 설치후에는 settings에 들어가서 font 설정을 바꾼다. 이때 Fira Code 라고 잘 바꾼다. Ligatures 설정의 경우에는 나는 json 파일내에서 수정해야 했는데, 이를 true 라고 설정하면 된다. .. 공감수 1 댓글수 0 2021. 1. 28.
어쩐지 docker로 mongodb 설치해보기 mongodb atlas를 써보려다가 그냥 깔아서 써도 되지않을까?(왜 잘안깔려고 하는건지는 잘모르겠다!!) 싶어서 설치방법을 알아봤다. 그런데 뭔....넘 복잡해보여서 docker로 설치할 수 있지않나 방법을 찾아봤다. 우선 내 컴터에는 docker, docker-compose 가 둘다 잘 설치되어있다! docker mongodob 아래는 mongodb의 docker official images관련된 링크이다! hub.docker.com/_/mongo mongo - Docker Hub We and third parties use cookies or similar technologies ("Cookies") as described below to collect and process personal dat.. 공감수 0 댓글수 0 2021. 1. 6.
Netlify next 프로젝트 설정방법(Netlify 플러그인과 UI를 통해서 간단하게 업로드) Next Js에 잠깐 눈독을 들이느라 좋은 예제를 클론을 해보는 연습을 했다. 사실상 잘 만들어놓은 예제를 그냥 보는정도였는데, 그래도 나름 Netlify에 올리고 마무리를 지으려고 했다. github.com/hayoung0Lee/Real-world-next-app hayoung0Lee/Real-world-next-app https://github.com/reck1ess/next-realworld-example-app - hayoung0Lee/Real-world-next-app github.com 아래는 나의 package.json 형태인데, Netlify UI를 통해서 간단하게 업로드를 하는 방법을 찾고자했다. 실패한 방법 처음에는 여기서 Build command 에서 "npm run build && .. 공감수 2 댓글수 0 2021. 1. 5.
Gatsby Netlify Page not found 계속 뜰때!!! 아니증말... Gatsby 샘플 사이트 다운로드받고, 계속 netlify에 안올라가서 보니까, stackoverflow.com/questions/57541316/gatsby-site-page-not-found-when-deploy-on-netlify-or-surge Gatsby site 'page not found' when deploy on Netlify or Surge I could run on localhost, however the site could not show up on Netlify and Surge as I tried to push it on Git. Feel free to check my code: https://github.com/treycwong/bean-tracker I'm no.. 공감수 0 댓글수 0 2020. 12. 21.
JAMstack이란? [NHN FORWARD 2020] Welcome to JAMstack 를 보고! 출처: TOAST 채널의 [NHN FORWARD 2020] Welcome to JAMstack 강의를 듣고 나름대로 정리를 해보려고 한다. 해당 유튜브 영상의 소개글은 "프런트엔드 개발자가 웹 애플리케이션 구성부터 개발, 배포까지 모두 하는 것이 가능할까요? JAMstack과 함께라면 가능합니다." 이다. 대체 JAMstack이란 무엇일까? 1. JAMstack - JAMstack이란 무엇일까? Serveless 개발구조에서 파생된 개념 JavaScript: 동적인 요소 처리 Front-End 라이브러리, 프레임워크 API 요청 API: 서버 또는 DB에서 담당하던 역할 추상화된 재사용 가능 API Cloud Function, Third party APIs Markup: JAMstack은 웹어플리케이션의.. 공감수 0 댓글수 0 2020. 12. 21.
HTML HEAD와 OG 태그, 그리고 테스트 방법(ngrok 이용해보자!) Next js를 공부하다가 next/head의 HEAD를 사용할때 얘가 뭔지 몰라서 html에서 head의 역할에 대해서 찾아보았다. developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN head 태그에는 무엇이 있을까? HTML의 메타데이터 Jump to sectionJump to section HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일 developer.mozilla.org 화면에는 표시되지 않는 head의.. 공감수 0 댓글수 0 2020. 12. 15.
VS code 에서 emscripten.h 헤더 부를때 intellisense 가 동작을 안하면!! 나는 맥을 쓰는데, vscode에서 c/c++ 쓰기 를 따라해서 c/c++을 vs code에서 사용하고 있다. 그런데 emscripten을 설치해서 사용하려는데, 계속해서 emscripten.h 밑에 빨간줄이 뜨면서 intellisense가 난리를 치지 뭔가. 난 그래서 emscripten헤더가 없는줄알고 이게 무슨일인가 망연자실 햇었는데, 그냥 정말 intellisense가 내 emscripten이 설치된데를 못찾아서 그랬다. gist.github.com/wayou/59f3a8e4fbab050fbb32e94dd9582660 setup emscripten for vscode intelli sense setup emscripten for vscode intelli sense. GitHub Gist: ins.. 공감수 0 댓글수 0 2020. 12. 11.
다른 레포지토리에 있는 커밋을 가져와야할때 회사에 여러 비슷한 리포지토리가 있는데 A리포에 있는 커밋을 B로 옮겨달라는 요청을 받았다. 생각보다 해결법은 정말 쉬웠다. git remote other '리포지토리 주소' git fetch other git cherry-pick 필요한 커밋 이렇게 간단하게 해결할 수 있다. 공감수 0 댓글수 0 2020. 12. 3.
Pyinstaller, Tkinter와 thread를 사용하는 프로젝트 이 프로젝트에서 사용하는 것 1. pyinstaller: 파이썬 스크립트를 exe로 추출해 준다. 2. Tkinter: 별도로 설치할 필요없는 파이썬 GUI 만들어 주는 도구 3. Thread: 쓰레드는 GUI가 멈추는 것 때문에 사용했음 깃헙 주소 https://github.com/luvehayoung/Pyinstaller-Project luvehayoung/Pyinstaller-Project Contribute to luvehayoung/Pyinstaller-Project development by creating an account on GitHub. github.com 사실 다 작업 안했다.ㅋㅋ 전체적인 구조만 잡았다. 어차피 tkinter 사용하면 그냥 간단한 스크립트 돌리는 목적이니 전체적인 .. 공감수 0 댓글수 0 2020. 7. 12.
윈도우에서 설치한 Pgadmin4에서 Ubuntu의 postgresql(10 버전)로 접속하기 이걸 왜했을까? 현재 원격으로 접속해서 우분투 환경에서 개발 중인데, vs code를 통해서 접속하다보니 gui적으로 뭔가 할 수는 없다. 그래도 우분투 서버의 postgresql의 내용물을 보고는 싶은데, pgadmin4가 편하니까 그냥 쓰고 싶었다. 그래서 윈도우 10(내 로컬 환경)에서 postgresql을 설치하고, pgadmin을 이용해 외부서버(우분투)로 접속하는 방법을 찾아보았다. 참고자료 1) 외국 자료: http://www.project-open.com/en/howto-postgresql-port-secure-remote-access HowTo Safely Open a PostgreSQL Port for Remote Access? HowTo Safely Open a PostgreSQL P.. 공감수 0 댓글수 0 2020. 6. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.