전체 글
-
progressive Server Side Renderingjavascript 2021. 1. 4. 11:45
서론 이 글은 UX와 최적화에 관심이 많지만, 개발한지 1년밖에 안됀 예비 개발자가 쓴 글이므로, 오류 및 오타가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. CSR Client Side Rendering(클라이언트 사이드 렌더링) html을 클라이언트에서 주고, javascript로 서버에 요청해서 내용을 채우는 방식이다. 출처(https://medium.com/the-thinkmill/progressive-rendering-the-key-to-faster-web-ebfbbece41a4) 다음과 같은 형식으로 이루어 지는데, html 프레임을 가지고 있고 그 안에 컨텐트들은 javascript로 인한 통신 후에 만들어 진다. 출처: (https://medium.com/the-thinkmill/..
-
서버 통신 헤더를 이용한 웹 보안개발 2021. 1. 3. 22:26
🙏서론🙏 이 글은 웹 개발 1년차 초짜 개발자가 쓴 글로써, 오류가 있을 수 있습니다. 오류가 수정해야 할 부분이 있다면 댓글로 알려주세요! 보안에 필요한 필수 헤더 웹을 개발하다 보면 보안에 신경써야 할 부분들이 많습니다. 이 헤더들을 잘 조절하면 보안 문제의 반정도는 해결할 수 있다고 생각해서 정리하게 되었습니다. Content-Security-Policy 브라우저에서 XSS와 관련된 공격을 막아주는 헤더입니다. 브라우저는 기본적으로 페이지에서 요청하는 모든 코드를 다운로드하여 실행합니다. 하지만 이 헤더를 설정함으로써, 브라우저에게 어떤 조건의 리소스만 실행하라고 줄 수 있습니다. 값은 여러가지를 줄 수 있는데, default-scr, script-src, child-src 등을 줄 수 있습니다. ..
-
npm install options개발 2021. 1. 2. 16:05
서론 이 글은 뭣도 모르는 프론트 엔드 개발자 지망생이 쓴 글로 이상하거나 건의할 내용이 있다면 댓글로 달아주시면 정말 감사하겠습니다. npm install option? 우리가 npm을 사용할 때 -g, -D, --save-dev같은 것들을 사용했는데, 이것 말고도 어떤 것들이 있는지 알아보자. 자료 출처는 npm 공식문서다. npm install 일단 가장 기본적인 npm install만 사용할 때의 옵션이다. npm install 폴더 로 하게 될 경우에는 폴더명에 모듈이 다운로드 된다 npm install tarball url or tarall file 솔직히 뭔지 모르겠다. tarball이라는 파일이 압축된 파일이라고 하고 .tar나 .tar.gz로 끝나는 파일인 것 같다. tarball 파일명..
-
React Windowingreact 2021. 1. 2. 15:18
서론 이 글은 프론트엔드 개발을 한 지, 1년쯤 된 예비 개발자가 쓴 글입니다. 오류가 많을 수 있고, 오타가 있을 수 있습니다. 발견하시면 댓글로 알려주시면 감사하겠습니다. 서버에서 pagenation을 안해줘요 😢 windowing에 대해서 알게 된 것은, React 최적화를 찾아보던 도중에 처음보는 단어가 있어서 들어간 것이였다. 구글에 검색해 보았다. 많은 데이터를 list로 만들게 되면 초기 렌더링이 너무 오래 걸린다. 사용자 입장에서 매우 불편하다. 이것을 해결하기 위해서 list중에 사용자에게 보이는 부분만 rendering 시키는 기법 이 글을 읽자마자, 생각난건 내가 옛날에 진행했던 프로젝트에서 겪었던 문제다. 예전에 streamer-storage라는 프로젝트를 진행하면서 서버에서 100..
-
pwa 생명주기javascript 2021. 1. 2. 14:40
읽기 전에... 이 글은 pwa를 막 접한 세미 개발자가 쓴 글로 오류가 있다면 댓글로 혼내주시면 감사하겠습니다. PWA의 serviceWorker.js pwa의 시작이자 꽃이라고 할 수 있는 serviceWorker가 어떤 경로로 등록되고, 삭제되는지 알아보자. 다운로드 navigator.serviceWorker.register를 사용하고 나면 새로운 서비스 워커를 등록할 때 마다, 자바스크립트가 다운로드되고 파싱되고 나면, 서비스 워커는 설치중 상태에 들어서게 됩니다. 설치가 성공적으로 이루어지면 다운로드 완료 상태가 되고, 에러가 발생하면 페이지를 새로고침하여 다시 등록하거나, 중복 상태에 빠져들게 됩니다. 중복상태 시에는 아에 스크립트를 사용할 수 없게 됩니다. 만약 다운로드중 상태를 오래 유지해..
-
Event Capturing, Event Bubblingjavascript 2021. 1. 1. 17:52
서론 js에서는 html에서 발생하는 event를 인식할 수 있는 event handler가 있다. 이 때, event handler가 event를 인식할 때, 특별한 형태로 event가 발생하게 되는데, 이에 대해 알아보자. Event Bubbling, Capturing 다음과 같은 html이 있을 경우에, 밑과 같이 event가 일어난다. 출처 우선 Event Capturing이라는 것이 일어나는데, 최상단 요소에서 클릭한 요소로 찾아가는 과정을 의미합니다. 이 과정에서, 이벤트가 따로 발생된다거나 그런 것은 없습니다. 그 이후에, 클릭한 요소에서 이벤트가 발생합니다. 여기서 등록한 event handler가 실행됩니다. 그 이후에는 Event Bubbling 이 일어납니다. Event Bubblin..
-
babel과 webpack으로 react 세팅하기react 2021. 1. 1. 15:01
🤐서론🤐 이 글은 react를 접한지 1년 겨우 넘어가는 개발자 지망생의 글로, 틀린점이나 건의할 것이 있으시면 언제든지 댓글로 알려주시면 감사하겠습니다. ✋hi custom webpack!✋ 우리가 처음 react를 접할 때, CRA(Create-React-App)으로 react 를 setting 하게 된다. 하지만, 언젠가는, custom webpack과 babel로 react를 설정해야 하는 일이 오게된다. 예를 들면 CRA가 쓰는 react 버전이나 webpack 버전이 나의 컴퓨터와 안맞는다거나..등등 그럴 때, 언젠가는 필요한 custom webpack을 알아보자 💪 webpack setting 💪 우선 프론트 엔드 개발자들이 싫어하는 것 중 하나인 webpack을 setting 해보자 그다음..
-
Vanilla Js로 react랑 비슷하게 코딩하기javascript 2021. 1. 1. 14:57
서론 글을 시작하기 전에, 제목을 보고 이곳에 들어온 사람들이 많을 것이다. 솔직하게 말하자면, 과장된 것 같다. 개발자가 아직 아닌 개발자를 희망하는 사람이니, 그 점 참고하고 읽어주길 바란다. 피드백과 훈수는 언제나 환영이다.❤ 그럼, 이제 왜 제목을 저렇게 지었는가? (스토리 읽기 싫으면 밑에 것은 건너뛸 것을 추천) 어떻게 알았는가? 이제 react 같은 library를 보면, component를 나눠서 개발 하는 것을 볼 수 있다. 그리고 그걸 어디서든지 끌고 와서 사용 할 수 있게 한다는 것, 난 이게 너무 편리했다. 하지만, 인생을 살다가 보니 언제든지 react만 사용할 수 있는 것은 아니였다. CRA가 아닌 custom webpack으로 bundling을 해야하는 날도 있듯이 기본 htm..