til

프로젝트를 하던 중 아래와 같은 경고 문구를 만났다. 코드가 작동은 원활하게 잘 되는데, 경고 문구가 떠있는 건 뭔가 찜찜해서 해결해보고자 하였다.※ 에러 발생명확한 오류 지점이 있으면 디버깅을 해보겠는데, 딸랑 경고문구 하나라 문제를 찾기 어려워 튜터님께 도움을 구했다.※ 해결 방법 문제는 background가 알수 없는 props라고 하는 점이었는데, React 내부적으로 background라는 임의의 키워드를 사용하고 있어 중복되는 문제였다. 때문에 DOM에 접근하는 게 아닌 스타일 시트에만 사용하는 키워드이기 때문에 background 앞에 $을 명시적으로 붙여 사용하니 경고 문구가 사라졌다!(해결해 주신 튜터님께 무한 감사를...) => Transient Props?이 방법을 Transient ..

매일 알고리즘 문제 풀던 알고리즘 코드 카타가 수준반 분별 수업으로 바뀌었다. 때문에 실시간 수업이 하나 더 늘어서, 월요일에는 실시간 수업만 2개라 뭔가 더 바빠진 느낌이다. ※ Array 내부 동작 구현(자료구조)심화반에서는 자료구조 위주로 실시간 수업을 진행하는데 첫 번째 과제로 클래스 문법으로 배열의 내부 동작을 구현하는 걸 내주셨다.class FixedArray { #arrayLength; #array; // 필요한 변수 추가 가능 #arrayIndex; // #arrayLength와 #array를 알맞게 초기화 // 생성자 파라미터에는 FixedArray의 고정된 길이를 받아야됨. // #array초기화 시 각요소의 값은 undefined // 배열 생성시 올바른 0이상의 숫자 ..

지난 주말에 사 온 책인데, 오늘 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값을 다룰 수 있을지 알아보았습..