Web Dev
-
JAMstack이란? [NHN FORWARD 2020] Welcome to JAMstack 를 보고!Web Dev/8. 메모 2020. 12. 21. 20:23
출처: 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은 웹어플리케이션의..
-
React Hooks에 대해 제대로 알아보기 + Custom hooks 는 대체뭣인가?Web Dev/3. React 관련 2020. 12. 16. 23:21
지금 Real app이코드를 분석하면서 제대로된 앱의 구조가 어떤지를 보는데, 여기서 lib > hooks 구조를 사용하고 있다. Hooks 를 매번 사용하면서도 대강만 아는 느낌이라 이번 기회에 정리를 해보려고 reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org 얘를 읽는다. 1. Introducing Hooks 우선 Hooks는 React 16.8에서 도입됬다. 원래 그전에는 함수형 컴포넌트는 상태를 가지지 않는 그저 순수함수였다고 한다. (올해 처음 React를 배웠을땐, 이런 망측한 것이 있을까, 하고 놀랬었다.. 하지만 함수형으로 ..
-
HTML HEAD와 OG 태그, 그리고 테스트 방법(ngrok 이용해보자!)Web Dev/8. 메모 2020. 12. 15. 21:38
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의..
-
VS code 에서 emscripten.h 헤더 부를때 intellisense 가 동작을 안하면!!Web Dev/8. 메모 2020. 12. 11. 22:05
나는 맥을 쓰는데, 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..
-
CSR과 SSR 개념잡기Web Dev/3. React 관련 2020. 12. 2. 00:03
www.youtube.com/watch?v=Y2spCNZDt84&ab_channel=FullstackAcademy 위의 영상을 보고 다시한번 CSR(Client-side rendering)과 SSR(Server-side rendering)의 차이를 확실히 짚어보려고 한다. 위의 강의에서는 네가지를 다룬다. 1. What is happening during client-side rendering 2.What is happening during server-side rendering 3. A comparison of the two in terms of performance 4. case study Client-side rendering -> initial request가 있을때 page, layout, cs..
-
__proto__ dunderscore protoWeb Dev/1. JS 문법 관련 2020. 9. 26. 21:52
__proto__가 항상 뭔지 헷갈렸는데 드디어 정리한다. user라는 객체가 name, score 와 increment라는 score를 증가시키는 함수가 필요할때 increment함수는 user1, user2, user3... 가 모두 똑같이 쓸거고, name과 score만 각 객체마다 다를거다. 즉, const user1 = { name: "제시", score: 99, increment: function() { this.score++} } const user2 = { name: "효리", score: 80, increment: function() { this.score++} } 이런식으로 name과 score만 다르지 increment는 똑같은게 반복인데, 저런식으로 각 객체에 incremenet를 ..
-
Pyinstaller, Tkinter와 thread를 사용하는 프로젝트Web Dev/8. 메모 2020. 7. 12. 18:53
이 프로젝트에서 사용하는 것 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 사용하면 그냥 간단한 스크립트 돌리는 목적이니 전체적인 ..