til

오늘은 계속 공부 중..이전에 바닐라 자바스크립트에서 웹 컴포넌트를 작성하기 위해서는 반드시 custom-element와 shadow DOM 구조를 이용해야만 하는 줄 알았다. 하지만 그렇게 되면 자바스크립트로 렌더링 되는 게 아닌 HTML 구조만을 이용한 결과가 되기 때문에 내가 생각한 구조와는 조금 달라지겠다는 생각이 들었다. 때문에 더 많은 자료를 구글링 해보면서 새로운 방법을 알게 되었다. 단순히 기능별로 JS파일을 나누는 게 아닌 상태(state)와 컴포넌트 기능별로 어떻게 바닐라 자바스크립트에서 동작하는지 순서대로 포스팅된 황준일 님의 블로그를 알게 되었다. 뭔가 눈에 익을 듯하면서도 살짝 헷갈려 여기에 있는 내용을 좀 더 공부하고 프로젝트에 적용해보려 한다. 요즘 자주 보고 있는..

코딩을 할 때 사용자의 민감한 개인 정보나 중요한 API KEY 값의 경우 코드에 직접 하드코딩하게 되면 개발자 도구 등의 툴을 통해 민감 정보가 쉽게 탈취당할 수 있습니다. 이를 방지하기 위해서 .env 파일을 만들어 환경 변수들을 여기에 작성해 관리 및 사용하게 되고, github에 올라가지 못하도록 .gitignore에 넣어 처리를 하게 됩니다.  하지만 바닐라 자바스크립트 환경에서는 웹 브라우저 환경에서만 동작하기에 .env 파일을 사용할 수 없습니다. 그렇기에 React 등의 라이브러리나 다른 프레임워크 환경에서는 당연하게 기본으로 사용할 수 있던 파일을 자바스크립트 환경에서는 사용할 수 없으니 답답했습니다. 이번 TIL에서는 JS에서 어떻게 민감한 정보나, Key값을 다룰 수 있을지 알아..

※ Github 협업 시 필요한 명령어 모음 올해 초까지만 해도 github termial에서 미아가 되어 길을 헤맸는데, 이런 글도 쓰고 새삼 신기하네요. 팀원들과의 github 협업에 있어 필요한 기능을 블로그 이곳저곳에서 보는 건 좋지만, 오히려 너무 많은 정보가 들어와 일관성 있게 습득하기가 어려웠던 경험이 있습니다. 때문에 처음 github를 사용해 보시는 팀원분들을 위해 가이드라인을 만들게 되었습니다. 본문은 팀장이 github 초기 세팅을 해놓은 상태에서, 본인 local로 clone 해오는 과정부터 push 하는 과정까지 담았습니다. 1. 프로젝트를 가져오자: clone clone 3줄 요약 1. 원하는 github project의 repository에 들어가서 프로젝트 url을 복사한다...