this 자바스크립트에서의 this는 실행 컨텍스트가 생성될 때 thisBinding에 저장됩니다. 즉, 함수를 호출할 때 결정된다고 할 수 있습니다. 따라서 상황에 따라 this는 바뀌게 됩니다. 다음 다섯 가지 상황에 따라 this가 어떻게 결정되는지 알아보도록 하겠습니다. 1. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window, Node.js 환경에서는 global입니다. 전역 변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당합니다. 다음과 같이 말입니다. var a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); // 1 자바스크립트 엔..
Redux thunk 하고자 했던 것 로그인 시 token을 받아오고 그 token을 session Storage에 저장해 둔다. 또 하나 해야 할 일은 userId(인공키) 값을 전역 state에 저장해서 유저 관련 정보가 필요한 컴포넌트마다 사용하게 해야 하고, isLoggedIn 또한 전역 state에 저장하여 true 값이 유지되게 해야 한다. 이 기능을 구현하기 위해 redux를 사용했다. 아직 api 컨벤션을 사용하지 않아서 login api (아이디, 비밀번호로 request를 보내면 userid와 token을 response로 받는다)를 action 생성 함수에서 axios로 실행하고, 액션을 return 해 주었는데... 문제 어쩐지 sessionStorage에 저장만 되고... isLo..
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. 리덕스는 프로젝트 내부의 상태를 하나의 단일 스토어에 저장하고, dispatch를 이용하여 action을 발생시킨 뒤 reducer를 통해 상태를 변경하는 것. Action → Dispatcher → Store → View → Action → Dispatcher (반복...) Action 상태에 어떠한 변화가 필요하면 액션이라는 것이 발생한다. 액션 객체는 반드시 type 필드를 가지고 있어야 함. 액션의 이름이라고 생각하면 됨 { type: 'ADD_TODO', ..
React 기초 React React는 자바스크립트 라이브러리로, “컴포넌트”라고 불리는 단위를 이용하여 복잡한 UI를 구성하도록 돕습니다. React 앱 만들기 1. Node.js 설치 공식 홈페이지에서 LTS 버전 설치 설치 후 cmd 창에서 node -v npm -v 명령어 실행해서 현재 버전 확인하기 (잘 설치되었는지 확인) 2. React 설치 npm i react 3. React App 생성 npx create-react-app my-app my-app은 생성할 App 이름입니다 typescript 버전: npx create-react-app my-app --template typescript 4. 실행 cd my-app npm run start 혹은 npm start state와 props ..
출처: https://1coding.tistory.com/167 [프로그래머스] K번째 수 (Javascript) 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까.. 1coding.tistory.com 문제점 숫자를 정렬하기 위해 sort() 함수를 사용했는데 제대로 작동하지 않음. 원인 sort()는 문자열을 정렬하는 함수기 때문에 숫자를 정렬할 때는 올바르게 정렬되지 않는다. MDN의 설명에서는 9가 80보다 앞에 오지만 문자열로 따지면 80이 앞에 오기 때문에 제대로 작동되지 않는 것이라고 설명..
실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 실행 컨텍스트에 담기는 정보들 VariableEnvironment 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영되지 않음. LexicalEnvironment 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨 ThisBinding 식별자가 바라봐야 할 대상 객체. +) VariableEn..
프로젝트라고는 학부 때 해 본 HTML5, CSS, jQuery, Java로 한 학기 내내 만들었던 미약한 프로젝트와 둘이서 진행했던 간단한 CRUD 프로젝트가 전부였던 제가 처음으로 웹 서비스 프로젝트를 완주했습니다. 짝짝짝. Github: (추후 등록) Notion 1. 서비스 소개 모두에게 필요한 맞춤형 학습 도우미, Drawing Dream에서 등교부터 하교까지 함께 하세요! 기본 개발 스택 공통: Gitlab, Jira, Mattermost, Notion Front: HTML5, CSS, JavaScript, React, Redux Back: Java Zulu, Spring, AWS S3, Gradle 서버: AWS EC2 배포: Ubuntu, Docker, Jenkins 주요 기능 온라인 수업..
이 장을 읽으면서 가장 헷갈렸던 부분인 불변값, 불변객체, 복사에 대한 부분만 정리하겠습니다. 데이터 할당 자바스크립트 엔진은 데이터를 변수 영역과 데이터 영역, 두 부분에 할당합니다. 각각의 영역은 주소값과 데이터값을 가지는데, 변수 영역의 데이터값은 이름(변수명)과 값(데이터영역의 주소값)을 가지게 되고 데이터 영역의 데이터값은 'abc' 같은 실 데이터가 들어가게 됩니다. 이러한 데이터 할당은 데이터 변환을 자유롭게 할 수 있게 하고, 메모리를 효율적으로 관리할 수 있게 해 줍니다. 만약 a라는 변수에 5004번의 데이터가 할당되어 있는데, 이 값을 변경하고 싶다고 합시다. 자바스크립트는 5004번에 해당하는 데이터 자체를 바꾸려면 데이터 영역의 메모리를 늘리거나 줄이는 일을 해야 합니다. 이는 다..