All

React 데이터 바인딩

React 는 단방향 데이터 바인딩을 합니다. 데이터 바인딩이란? 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치 시키는 것을 말합니다. MVC 에서 View(화면에 보이는 데이터, HTML) Model(브라우저 메모리에 있는 데이터, JS) 에 해당됩니다. 데이터 바인딩은 양방향과 단방향으로 나뉩니다. 단방향 데이터 바인딩 한쪽 방향으로만 제어가 가능한 것을 의미합니다. JS(Model) 에서는 화면에 보이는 데이터를 수정할 수 있습니다. 그러나 사용자는 화면에서 값을 변경할 수는 있지만 JS 에 있는 데이터를 수정할 수 없습니다. 때문에 화면에서 변경된 값을 감지해서 JS 를 수정해야 합니다. React 의 경우 state 가 변경이 되면 set 으로 값을 바꿔 주는 작업을 해야 합니다...

JS 유사배열과 배열의 차이점

유사 배열과 배열은 어떻게 다를까? 유사 배열 형태 아래 변수들을 출력해보면 모두 배열과 형태가 같습니다. 하지만 진짜 배열은 array 뿐입니다. 브라우저에서 데이터를 넘겨줄 때 배열처럼 보이는 객체를 넘겨줍니다. 이것을 유사 배열이라고 합니다. let array = [1, 2, 3]; // [1, 2, 3] let nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...] let els = document.body.children; // HTMLCollection [noscript, link, div, script, ...] Array.isArray() 메서드로 array 인지 확인할 수 있습니다. Array..

github pages 로 배포시 react-router 설정 feat. 배포했는데 흰 화면만 나올 때

로컬에서는 잘 실행되던 프로젝트가 github pages 로 배포 후 하얀 화면만 나온다면? 원인 아래 공식 문서를 보면 CRA 웹, 앱은 기본적으로 서버 루트에서 호스팅 된다고 가정하여 빌드됩니다. 때문에 빌드를 하게 되면 프로젝트는 https://leeseul-moon.github.io/todo_list/ 에 존재합니다. (todo_list 는 프로젝트 폴더) 하지만 라우터는 제가 에 작성한 것을 따라 https://leeseul-moon.github.io/ 로 이동시킵니다. 프로젝트 위치와 라우터가 가리키는 위치가 다르기 때문에 라우터가 제대로 작동하지 않습니다. 해결 라우터에 기본 URL 옵션을 주어 / 가 아닌 /todo_list/ 로 이동시킵니다. package.json 에 5번 줄 heme..

React 프로젝트 GitHub Pages 배포하기

https://github.com/ 먼저 위 사이트에서 새로운 Repository 를 만듭니다. 회원 가입을 해야 만들 수 있습니다. Repository 메뉴에 들어가면 녹색의 New 버튼이 있습니다. 클릭해서 이름을 작성하고 public 으로 만들어 줍니다. 생성을 하고 나면 방금 만든 Repo 를 클릭해서 들어갑니다. 그럼 아래와 같이 뜨는데 여기서 녹색의 Code 를 클릭하여 Https 탭의 경로를 복사합니다. 터미널을 켭니다. 위에서 만든 깃헙 Repo 와 연결할 프로젝트 폴더로 이동합니다. cd git remote add origin 이동한 후에 위와 같이 입력합니다. 부분에는 아까 복사한 github 의 repo 주소를 넣어 줍니다. 아무런 오류 메시지가 뜨지 않는다면 잘 연결된 겁니다. gi..

220814~220820 3주차

1. React 주요 컨셉 공부 드림코딩 리액트 강의를 들으며 YouTube clone 코딩 (유튜브 API 활용) 👉 복습 필수! 혼자서 다시 만들기 흐름 이해는 되지만, open API를 활용하는 것이 익숙하지 않아 어렵다. API Key 는 외부로 노출되지 않도록 .env 에 넣고 관리해야 한다. 서비스 관련 로직은 따로 관리해야 한다. Dom 개념 공부 참고자료 👍 https://wit.nts-corp.com/2019/02/14/5522 React 공식 문서로 class component 와 function component 공부 리액트 공식 문서 main concepts 2. React 관련 라이브러리 공부 캠프에서 제공된 학습 자료를 보고 redux 공부. todo list 를 redux du..

React Component

Component 정의 컴포넌트는 UI를 재사용 가능한 개별적인 조각으로 나눈 것을 말합니다. 컴포넌트는 React 엘리먼트를 반환하는데, 엘리먼트는 화면에 표시할 내용을 기술하는 React 의 가장 작은 단위입니다. 리액트는 컴포넌트들의 집합이라고 할 수 있습니다. 컴포넌트 덕에 재활용성을 높이고 유지보수를 용이하게 할 수 있습니다. 왜냐하면 컴포넌트는 독립적이고 고립되어있고 재사용이 가능하기 때문입니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눠집니다. 함수형 컴포넌트는 아래와 같이 생겼습니다. function Welcome(props) { return Hello, {props.name}; } 클래스형 컴포넌트는 아래와 같이 생겼습니다. class Welcome extends React.C..

React.memo 써도 컴포넌트 계속 렌더링 됨... -> 해결!✌🏻 feat. useMemo, useCallback

불필요한 렌더링을 안 하고 싶다..! 서론이 깁니다. 바쁘신 분들은 아래로 쭉쭉 내려서 문제점, 원인은? 해결! 이 부분만 보세요! 리액트 공부 5일차에 이제까지 배운 것을 실습하기 위해 Habit Tracker 를 만들었다. 습관을 추가할 수 있고 옆에 +, - 버튼으로 카운트를 수정할 수 있다. 맨 위에 Habit Tracker 옆 숫자는 습관 리스트 중 체크가 된 것들의 갯수다. 세 항목 다 0이 아니니 숫자 3이 나온다. 초초초초 단순한 습관 추적기(?) 😉 클래스 컴포넌트로 해빗 트레커 만드는 인강 2배속으로 보고 혼자서 함수형 컴포넌트로 만들어 본 거라 좀 헷갈렸다. 생각보다 시간이 더 걸렸다. 근데 이거 만드는 것보다 React.memo 공부하는데 시간 더 걸림 ㅎ 리액트 컨셉은 단순하다. ..

React JSX 란?

JSX 정의 JSX 는 JavaScript 를 확장한 문법입니다. JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전, 바벨 Babel 을 이용해 JSX를 React.createElement() 호출로 컴파일됩니다. 즉, JSX 는 편하게 React 'element' 를 생성하기 위해 사용합니다. const element = ( Hello, world! ); 위의 코드가 JSX 문법으로 작성한 것입니다. 이 코드는 컴파일 후 아래와 같이 변경됩니다. 아래의 코드는 React 엘리먼트입니다. React 는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는 데 사용합니다. const element = React.createElement( 'h1', {className: 'greeting'}, '..

220807~220813 2주차

시간이 미친 듯이 빨리 갔다. 이번 주차는 알고리즘 주차 + 리액트 입문 주차였다. 일-목은 알고리즘 문제 풀이. 금요일부터는 리액트 공부 시작! 👻 저번 주에 계획했던 이번 주의 목표 깃과 깃헙 공부 Git 인강을 보며 전체적으로 어떤 기능이 있고 어떻게 쓰는 것인지는 알았지만, 그걸 실제로 협업하며 쓰지는 못하겠다. 인강은 지식을 쉽고 빠르게 얻을 수 있지만 그만큼 기억의 휘발성도 강하다. 때문에 기록하지 않으면 모두 사라진다. 😥 그걸 알면서도 기록하며 공부하지 못한 것은, 조급함 때문이다. 아무래도 기록하며 공부하면 시간이 2배 이상 든다. 그리고 당장 쓸 지식이 아니다 보니 중요성은 알지만, 필요성은 떨어진다. 때문에 1주 차에 프로젝트를 하며 가장 필요했던 부분들을 먼저 정리하려 한다. 다음 ..

JS 구조분해 할당

구조 분해 할당 Destructuring Assignment 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우에 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당을 사용할 수 있습니다. 객체 구조분해 할당 // 일반적인 객체 속성 접근 const user = {name: "징징", age: 10}; console.log(user.name); // 징징 console.log(user.age); // 10 // 구조분해 할당 사용 ✅ const { name, age } = user; console.log(name); // 징징 console.log(age); // 10 구조 분해를 사용하면 데이터에 접근하기 편합니다. 그러나 키 값으로 불러온 것이기에 name 이 아..

JS 실행 컨텍스트와 콜 스택

https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79 Call Stack과 Execution Context 를 알아보자 이 글에서 Call Stack과 Execution Context에 대해 다룹니다. 각 용어는 한국어로 해석하지 않고 영어 그대로 표기합니다. medium.com 위 링크를 참고하여 제가 이해한 부분만 제 식대로 정리했습니다. 위 링크를 보시면 더 자세하게 그림과 함께 정보를 얻을 수 있습니다. 실행 컨텍스트 Execution context 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 말합니다. 크게 2가지로 나뉩..

JS 호이스팅과 TDZ

호이스팅 hoisting 자바스크립트 엔진은 코드를 실행하기 전 코드 전체를 스캔하면서 형상화 및 구분하는 과정을 거치는데 이 과정에서 변수, 함수, 클래스 등 모든 선언을 위로 끌어 올립니다. 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var 의 경우 호이스팅 시 undefined 로 변수를 초기화 하지만, let 과 const 변수는 초기화 되지 않습니다. 때문에 아래와 같은 코드(1) 가 가능합니다. 그러나 선언부만 끌어올려 놓은 것이기에, (2) 코드처럼 할당된 값을 가져 오는 것은 불가능 합니다. add(1, 3); // (1) 함수 선언보다 위에 있지만 오류 나지 않고 실행됩니다. console.log(a); // (2) 에러. 할당되지 않은 것을 출력..

2주차 실습 과제 - 에러나는 이유 설명

let b = 1; function hi() { const a = 1; let b = 100; b++; console.log(a, b); } // console.log(a); // ReferenceError: a is not defined // 전역 스코프에서 로컬 스코프의 변수를 참조할 수 없습니다. // h1() 안에서 출력하면 값이 잘 나옵니다. console.log(b); // 1 hi(); // 1, 101 console.log(b); // 1 스코프의 개념을 알고 있다면 쉽게 풀 수 있는 실습 과제 였습니다. 참고 https://lazygay.tistory.com/17 JS 스코프와 스코프 체인 스코프 Scope 스코프는 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위입니다. ..

JS 스코프와 스코프 체인

스코프 Scope 스코프는 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위입니다. 즉, 간단하게 변수를 참조할 수 있는 유효한 범위라고 생각하면 됩니다. 스코프는 블럭 { } 혹은 함수에 의해 나눠집니다. (블럭이라 하면, if(){}, for(){} ... 등도 포함합니다.) 아래 예시를 보면, 블럭 안에서는 블럭 밖에 있는 k 도 블럭 안에 있는 x 도 잘 출력됩니다. 그러나 블럭 밖에서 블럭 안에 있는 x 를 출력하려고 하면 에러가 발생합니다. 함수 밖에서 정의된 k 를 전역 변수, 전역 스코프 ( 전체에서 접근 유효) 함수 내에서 정의된 x 를 지역 변수, 지역 스코프 라고 합니다. (지역 내에서만 접근 유효) 밖(전역) 에서는 안(지역)의 변수를 참조할 수 없지만, 안(지역)에서..

JS Equality operators == === != !==

자바스크립트에서 값이 같은지 아닌지를 비교할 때 사용하는 동일 연산자를 알아보겠습니다. == : 값이 같음 === : 값과 타입 둘 다 같음 != : 값이 다름 !== : 값과 타입 둘 중에 하나만 달라도 다름 기본 자료형 예시입니다. console.log(1 == '1'); // true console.log(1 === '1'); // false console.log(1 != '1'); // 📍 false console.log(1 != 1); // 📍📍 false console.log(1 !== '1'); // true 값은 같지만 타입이 다름 console.log(1 !== 2); // true 값은 다르지만 타입이 같음 console.log(1 !== 1); // 📍📍📍 false 처음에는 != ..

JS undefined 과 null 비교

undefined 과 null 은 둘 다 텅텅 빈 상태를 말하는데, 미묘한 차이가 있습니다. let item; // 값이 아직 할당 되지 않은 상태 console.log(item); // 결과 : undegined item = null; // 빈 값이 라는 것을 할당 해준 상태 console.log(item); // 결과 : null 또한 타입에서도 차이가 납니다. console.log(typeof null); // object console.log(typeof nudefined); // undefined null 은 엄밀히 말하자면, 비어있는 객체입니다. 그러나 undefined 는 비어있는지 아닌지 모르는 상태를 나타 냅니다. 공부를 하다 보면 출력 값에서 null 혹은 undefined 를 마주치는..

JS 느슨한 타입의 동적 언어

자바스크립트는 느슨한 타입의 동적 언어입니다. 하나씩 풀어서 봅시다. 자바스크립트에는 타입이 있지만, 변수에 타입을 필수적으로 지정하지 않아도 됩니다. 때문에 ‘느슨한 타입 (loosely typed) 언어’ 라고 할 수 있습니다. 또한, 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있기 때문에 ‘동적 타입(dynamically typed) 언어' 라고도 부를 수 있습니다. 바로 이 특징이 자바스크립트의 약점이 됩니다. 자바스크립트는 컴파일 된 후 실행되는 것이 아니라 실행되는 순간 한 줄씩 읽으며 (인터프리터) 실행이 됩니다. 즉, 컴파일되는 과정이 따로 없기 때문에 타입 오류를 실행 전에 체크할 수가 없습니다. 이런 약점을 보완하기 위해서 개발자는 어떻게 해야 할까요? 1. 예상되는 타입 에러를 예..

JS 함수 선언문과 함수 표현식 차이

함수 선언문과 함수 표현식이 무엇인지 알아봅시다. 함수를 만든다는 목적은 동일 하나 만드는 방법이 다릅니다. // 함수 선언문 function add(a, b) { return a+b; } // 함수 표현식 const sum = function(a,b) { return a+b; } 함수 자체를 선언하면 함수 선언문, 선언한 함수를 변수에 담아서 사용하면 함수 표현식이라 합니다. 이 둘은 호이스팅 방식에서 차이가 납니다. add(1, 3); // 함수 선언보다 위에 있지만 오류가 나지 않습니다. function add(a, b) { // 함수 선언문 return a+b; } console.log(sum(1,2)); // 에러. // ReferenceError Cannot access 'sum' before..

JS 얕은 복사와 깊은 복사

객체(Object)를 복사하는 방법은 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy) 로 나뉩니다. 사용하는 메서드는 여럿 있지만, 컨셉은 2가지 입니다. 값의 주소 값을 복사해 줄 것인지, 값 자체를 복사해 줄 것인지요. 객체같은 참조형 데이터를 복사하게 되면, 값이 메모리 셀에 할당되는 것이 아니라 값이 들어 있는 주소값(참조값) 이 메모리 셀에 들어 갑니다. 때문에 복사를 하게 되면, 값 자체가 아니라 값이 들어가 있는 주소가 전달 됩니다. 이렇게 복사되는 것을 Shallow Copy 라고 합니다. Shallow Copy spread syntax, Array.prototype.concat(), Array.prototype.slice(),Array.from(), Object.as..

JS 불변 객체 만들기

특정 객체를 수정이 불가능하게 만들 때, 불변 객체를 만들어 사용합니다. 불변 객체를 만드는 방법은 3가지 입니다. 각 방법마다 수정 가능 범위가 다르게 제한되기 때문에 필요에 따라 선택하면 됩니다. 1. Object.freeze() 속성 재정의 X, 추가 X, 수정 X, 삭제 X 그러나! 중첩된 company 는 freeze 되지 않습니다. 때문에 company.name 은 수정 가능합니다. 속성 재정의가 안된다는 것은 Object.defineProperty() 로 속성들을 재정의 할 수 없다는 뜻입니다. 아래 링크 참고. const company = { name: 'SS'}; const people = { name: 'lee', age: 20, work: company } Object.freeze(p..

JS Truthy 와 Falsy

숫자나 문자열도 어떤 값이냐에 따라 true, false 의 값을 가집니다. 이것을 정확하게 알고 있어야 나중에 헷갈리지 않으니 이번 기회에 외워 봅시다! Falsy 거짓 0 -0 '' null undefined NaN Truthy 참 1 -1 'hello!' {} Infinity 참고 자료 🌈 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean Boolean - JavaScript | MDN Boolean 객체는 불리언 값을 감싸고 있는 객체입니다. developer.mozilla.org

JS 형 변환 (문자를 숫자로, 숫자를 문자로), 변수의 타입 확인 typeof

형 변환에 앞서 변수의 타입을 알 수 있는 방법을 알아 보겠습니다. 간단합니다. 을 사용하면 변수의 타입을 알 수 있습니다. boolean 형, 숫자형을 문자형 으로 바꿔 봅니다. let value = true; alert(typeof value); // boolean value = String(value); // string 으로 형 변환 alert(value); // "true" alert(typeof value); // string String() 을 사용하지 않고 +"" 를 사용하기도 합니다. 혹은 toString() 을 사용합니다. let cnt = 1; console.log(typeof cnt); // number console.log(typeof (cnt+"")); // string cons..

JS 기본형 데이터와 참조형 데이터의 차이

자바스크립트의 타입은 크게 2가지로 나뉩니다. 기본형 데이터(Primitive) 와 참조형 데이터(Reference) 입니다. 기본형 데이터에는 string, number, bigint, boolean, undefined, symbol, null 이 있습니다. 참조형 데이터에는 object 가 있고, 거게에 포함이 되는 array, function, RegExp(정규표현식), map, set 등이 있습니다. 두 타입의 가장 큰 차이는 값을 저장하는 방식입니다. 기본형 데이터는 바로 값을 메모리에 할당하지만, 참조형 데이터는 값이 들어 있는 메모리의 주소를 할당합니다. 예를 들어보면, 먼저 a 에 1 을 넣습니다. let a = 1; let b = a; a의 값을 받은 b를 출력하면 1이 나옵니다. 이것을..

프로그래머스 level 1 폰켓몬

문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/1845?language=javascript function solution(nums) { const nums_set = new Set(nums); const nums_set_size = nums_set.size; // 센터의 포켓몬 종류 수 const nums_select = nums.length/2; // 고를 수 있는 포켓몬 수 return (nums_select < nums_set_size) ? nums_select : nums_set_size; } solution([3,1,2,3]); // solution([3,3,3,2,2,4]); // solution([3,3,3,2,2,2]);

nodemon 설치 오류 zsh : command not fount : nodemon

nodemon 은 저장과 동시에 스크립트를 콘솔에 실행시킬 수 있는 아주 유용한 패키지입니다! (참고로 저는 zsh 터미널을 사용합니다.) nodemon 하고 npm install nodemon -g 하고 nodemon 하면 되야 하는데, 아래와 같은 오류 발생. zsh : command not fount : nodemon 해결책 - 폴더를 생성해서 전역 설치 (global) 위치를 변경 아래를 순서대로 따라 친다. mkdir ~/.npm-global npm config set prefix '~/.npm-global' vi ~/.zprofile 이렇게 하면 vi 편집기로 들어간다. i 를 눌러 편집하기 모드로 전환 export PATH=~/.npm-global/bin:$PATH 편집모드에서 위와 같이 써..

220729~220806 1주차

🔥 엄청 바빴지만, 그만큼 많이 배웠던 한 주 ✨ 느낀점 1 : 협업의 중요성 ⛓ 캠프가 시작하자 마자 프로젝트 조가 짜여졌다. 인사만 하고 바로 프로젝트 주제 선정부터 api 설계, 화면 설계, ERD 설계, 기능 분배가 이루어졌다. 우리 조의 프로젝트는 [편의점 신상을 리뷰하는 웹사이트] 였다. 내가 맡은 부분은 메인페이지 화면 구현과 메인페이지의 기능 구현이었다. 각 페이지로 갈 수 있는 넷바를 만들고 게시글 검색과 게시글 상세 보기 기능을 구현해야 했다. 각자 맡은 부분만 잘 하면 프로젝트가 문제 없이 완성되는 줄 알았으나 그건 나의 착각이었다..! 게시글 상세 조회 기능을 구현 하려면 게시글의 정보가 db 에 어떻게 저장되는 지를 알아야 했는데, 게시글의 이미지 저장 방식을 정하지 못해 게시글 ..