Web Dev/8. 메모
-
zsh 알아보기 + Terminal, console, shell, kernal 정리하기Web Dev/8. 메모 2021. 9. 18. 00:52
Terminal, console, shell, kernal 정리하기 우선 zsh을 알아보기 전에 Terminal, console, shell, kernal의 차이를 한번 잠깐 리프레시하고 가는 글을 읽었다. 요약하자면, linux든, mac os든 terminal이 있다. 그걸 키고 우리가 명령어를 뚝딱뚝딱 치는건데, terminal 자체가 우리가 치는 명령을 process 하는 것은 아니고 얘는 그냥 commands를 받고 결과물을 스크린에 보여주는 역할을 하고 있다(윈도우에서는 console이라고 부름). 그리고 실제로 처리는 shell에 맡긴다. shell은 commands를 해석하고, syntax확인이나 제대로 써진건지 그런걸 확인한다. 다 괜찮으면 kernel이 이해할 수 있는 형태로 변경해서 ..
-
버블링과 캡처링Web Dev/8. 메모 2021. 6. 17. 10:15
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..
-
간단 메모 - 렌더 트리, 크리티컬 렌더링 패쓰Web Dev/8. 메모 2021. 6. 14. 00:59
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..
-
간단메모 - 리페인트와 리플로우Web Dev/8. 메모 2021. 6. 14. 00:48
https://webclub.tistory.com/346 Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 리플로우와 리페인팅에 대해 알아봅니다. Reflow 발생 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, webclub.tistory.com 매번 조금씩 가물가물 하는 내용. Reflow 돔의 크기 같은게 변경되서, 자기자신부터, 자식 부모, 부모의 부보까지 수치를 다시 계산해서 그리고, 렌더트리를 생성하는 과정이다. Repaint 이러고 나서 렌더트리를 다시그리게 되는데 이를 Repaint라고 한다 어떤 div의 크기가 변경된다면 아래의 동작이..
-
GraphQL아주 조금만 살펴보기 - ReactWeb Dev/8. 메모 2021. 6. 5. 00:58
오늘도 좀 쉬는김에 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..
-
GraphQL아주 조금만 살펴보기 - Node.jsWeb Dev/8. 메모 2021. 6. 3. 21:18
오늘은 갑자기 컨디션도 좀 안좋아서 평소에 제대로 좀 보고 싶었던 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..
-
Json에서 Type 바로뽑아주는 사이트Web Dev/8. 메모 2021. 6. 2. 12:59
환장하게 길고 중첩된 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 좌측 상단에 객체..