느릿느릿 프로그래밍

**사소한 주절주절.. 본문은 이 단락 바로 밑에 있다! 내가 맨 처음 시작한 웹은 jsp 였다. 그 후에 순수 html, css, javascript로 (서버 없이) 페이지 만들어보다가 React+nodejs로 제대로 된 웹 페이지들을 구현했었다. 그런데 jsp로 웹 공부를 할 때, 당시에는 학교 과제가 급급해 어떻게 만드는지만 공부했었지 이게 어떻게 돌아가고 브라우저에서 어떻게 렌더링 되는지 관심을 가지지 않았었다. 이후에 React를 공부하면서(이 때 쯤에 이것저것 하다가 웹이 제일 재밌네! 하고..) 이런 과정에 관심을 가지고 공부하기 시작했다. 그런데 이게 정리를 안하니까 자꾸 그때그때 찾아보게되어서 ㅠㅠ 시간 아까워서 정리하는 글!! 들어가기에 앞서.. 서버사이드 렌더링과 클라이언트 사이드 렌..

ESLint 및 그 외 도구들 eslint: javascript 문법 검사를 해준다. prettier: 코드를 자동으로 정리해줌. 코드 스타일 통일 할 때 많이 쓰인다. @typescript-eslint/eslint-plugin: typescript에 esline 적용하기 위함. 이걸 안하면 typescript interface 마다 no-used-vars 규칙이 걸린다. 설정은 공식 문서에서 안내하는대로 하면 된다. => 원래는 tslint가 따로 있었는데, 작년 중순쯤부터 업데이트가 중단되었다.(tslint의 성능이 eslint 보다 좋지도 않고 따로 설정하려니 번거롭다는? 이유로) 그래서 지금은 eslint에 이 플러그인을 적용하는 추세. ** eslint + prettier 설치 시, 요것들 설치..

얼마전에 Cache 문제로 골머리를 썩었었다. 일반 Javascript 코드에서 해결법은 나오는데 React.js에서는 잘 안나오더라..지금은 해결했지만! 일단 뭐가 문제인지 짚어보자. | 무엇이 문제인가 코드를 변경 후 배포하였는데 브라우저에서 적용되지 않는 문제. 개발 중 코드를 변경하고 페이지를 새로고침하였는데 바뀐 코드가 적용되지 않는 문제..등이다. 보통 이를 해결할때 F12로 개발자 모드 띄우고 강력 새로고침을 하는데..이걸 고객이나 개발자가 아닌 사용자에게 매번 안내할 수는 없는 노릇 아닌가ㅜㅜ 그래서 개발자답게 해결해보기로 했다. | Cache로 인한 문제와 Cache Busting Cache로 인해 발생할 수 있는 문제는 위에 기재한대로 새로운 변경사항이 브라우저에 반영 되지 않는 것이다..

Web 개발을 하다보면 JWT, 사용자 정보 등을 Local/Session Storage에 저장하여 사용할 때가 있다. 그러나 이 값은 사용자들이나 해커들에게 노출되기 쉬워 보안 이슈가 있을 수 있다. 그래서 Local/Session Storage의 값을 암복호화하여 사용하는 법을 알아보았다! | Secure-Web-Storage https://www.npmjs.com/package/secure-web-storage secure-web-storage A simple wrapper for localStorage/sessionStorage that allows one to encrypt/decrypt the data being stored. www.npmjs.com secure-web-storage를 이용하..