til

지난 주말에 사 온 책인데, 오늘 1/4 정도 읽은 것 같다. 확실히 초판 발행일이 2012년인 책이라 지금과 조금 다른 점이 있어 감안해야 하지만, 자바스크립트의 구조나 성능에 대한 비교 실험이 있어 흥미롭게 쭉쭉 읽어나갈 수 있었다. 특히 실행문맥과 스코프체인, 활성화 객체와 전역 객체가 어떤 순서로 사용되는 흐름을 알 수 있었는데, 두루뭉술하게 '전역변수보다 지역변수를 사용해라'라고만 알고 있던 걸 좀 더 확실하게 공부한 느낌이다.실행 문맥: 함수가 동작하는 환경을 나타내며, 브라우저 내부에서 사용되는 객체 => 함수가 실행될 때 새로 생성되고, 함수가 종료될 때 소멸되며 함수의 스코프 체인에 대한 참조를 가지고 있게 된다.스코프 체인: 함수를 실행하면서 어떤 속성(변수, 객체 등)에 접근해야 할 ..

몇 시간 동안 피카츄랑 노니깐, 내적 친밀감이 부쩍 올라갔다...피카츄 놀이터 만들기평소에 많이 하던 홈페이지를 구성하는 것과 다르게 이벤트 핸들러를 다루는 과제라 처음 봤을 때는 '어떻게 구현할까?' 고민을 많이 했었다. 여러 폴더 구조도 고민해 보고, 어떻게 컴포넌트를 나눌까도 열심히 고민해 보는 시간을 가져 의미 넘쳤던 과제! 과제를 구현하면서 질문거리도 많이 생겼는데, 주말이라 물어볼 튜터님이 안계신다 ㅠㅠ 구글링이나 gpt를 통해서도 명확하게 나오지 않아 튜터님께 질문드리고 정리해 봐야겠다. 아래는 github README.md에 적었던 후기🔎 후기- 과제 목표였던 useState와 props 기능에 충실해서 완성하려 노력했습니다.- 만약 실제 게임이었다면 어떻게 컴포넌트를 나눌지 고민해 보았..

1. React 소개※ 프레임워크?  - 개발자가 기능 구현에만 '딱' 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'  - spring, vue.js, angular.js, Django, Flask, Ruby, Express.js, NextJS 등 ※ 라이브러리?  - 공통 기능의 모듈화가 이루어진 프로그램의 집합  - React? UI를 만들기 위한 라이브러리  => - React.js + react-router-dom + redux 등 모아서 하나의 리액트 프로젝트를 함 #제어의 역전(IoC : Inversion Of Control) : 원래는 개발자가 프로그램의 흐름을 '제어'하는데, 프레임워크를 사용하는 경우에는 시키는 대로 코드를 짜면 프레임워크가 알아서 제어의 흐름..

오늘은 드디어 모던 JS 딥다이브 스터디 모집과 일정 세팅이 끝난 날~!! 스터디를 모집하는건 언제나 신경쓸게 많지만, 그래도 앞으로의 몇 개월의 분위기는 초기 일주일안에 결정되는게 보편적이기에 좀 더 힘을 내려 한다!! 스터디 일정 조율하고 팀 프로젝트 코드 리뷰하고, 스터디 설문 만들고, 팀 프로젝트 맡은 부분 UI 개발하고, 알고리즘 문제 하나까지 푸니 벌써 퇴실하라고 알람이 와서 놀랐다.. 주말을 이용해서 팀 프로젝트를 완성 후딱하고, 개인 공부시간도 챙길 수 있게 시간 조절, 그리고 체력 조절 잘 해야겠다~~  오늘의 일기 끗

오늘은 계속 공부 중..이전에 바닐라 자바스크립트에서 웹 컴포넌트를 작성하기 위해서는 반드시 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을 복사한다...