프로젝트를 진행하던 중 고민거리가 하나 생겼다. 바로 모듈화된 자바스크립트 파일끼리의 데이터 공유방법이다. 예시 프로젝트 구조를 살펴보자. // api.jsexport const MAX_VALUE = 10// a.jsimport {MAX_VALUE} from 'api.js'const 갖고싶은변수 = 20;/* 각종 코드 ... */// b.jsimport {MAX_VALUE} from 'api.js'/* 각종 코드 ... */위와 같은 프로젝트가 있다고 가정 했을 때 둘 다 `constant`의 변수에 `import`를 해서 접근 한다. 하지만 어느 날 b에서 a의 변수 딱 하나, 더도 말고 딱 하나 `갖고싶은변수`에 접근이 필요할 경우가 생긴 것이다. 하지만 `type=module` 로 정의된 자바스..
단축평가자바스크립트에서 단축평가란 논리합(`||`) 또는 논리곱(`&&`)을 사용하여 조건식을 판별하는 과정에서 연산을 조기에 종료하는 것이다. 모든 조건을 판별하지 않고 최종 결과가 나오는 경우에 판별을 중단한다. 💡좌변, 우변논리연산자의 단축 평가를 알아 보기 전에 좌변, 우변의 개념부터 알아야 한다. 아주 간단하다. 논리연산자의 왼쪽에 있는 것을 좌변, 오른족에 있는 것을 우변이라고 칭한다. true || console.log('좌변이 false일 때 찍힘')위 예시에서 `true`는 좌변, `console.log()` 는 우변이다. 그럼 본격적으로 각 연산자의 단축평가 방식을 살펴보자.💡 논리합(OR) 단축평가`||` (OR) 연산자는 좌변이 참(truthy)일 경우 전체 표현식의 결과가 참..
혹시 자바스크립트에서 값이 있다, 없다를 구분하려면 `값 === undefind` 이런거 쓰고 있지는 않나 생각을 해보자. 근본적인 방법이지만 타이핑 하기 귀찮고, 괜히 없어보일수도 있다. 그럴 때 `truthy`와 `falsy` 값을 구분하면 훨씬 간결하고 효율적으로 쓸 수 있다. 💡 간결한 조건 처리function func(a) { if (a) { console.log('truthy') } if (!a) { console.log('falsy') }}// falsy 출력func(null);func(undefined);// truthy 출력func('null');func(123);값이 정의되지 않은 변수처리를 할 때 조건문을 `(값 === undefind || 값 === null || 값 ..
restrest문법은 spread문법과 생긴건 똑같다. 기능적으로는 완전히 반대의 역할을 수행한다. spread문법이 배열이나 객체의 요소를 펼쳐서 평탄화를 시켜준다면, rest는 반대로 펼쳐있는 값들을 배열로 묶어준다. 💡 우리가 알고있는 매개변수 받을 때 모습 function normal(a, b, c, d) { console.log(a, b, c, d);}normal(1, 2, 3, '사'); // 1 2 3 사 💡 rest를 사용해서 매개변수 받을 때function rest(...rest) { console.log(rest);}rest(1, 2, 3, '사'); // [ 1, 2, 3, '사' ]배열이 아닌 기본 리터럴을 전달해주었지만 받는 쪽에서 `...`을 붙여서 받게 되면 ..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 첫 번째 리팩토링으로 [불필료한 API_URL 관리]를 진행했었다. 이번에는 함수들에 공통적으로 들어가는 매개변수를 제거하고 전역 변수로 변경하는 작업을 진행했다. (첫 번째보다 비교적 매우 간단하게 작업) 기존 코드document.addEventListener("DOMContentLoaded", () => { const params = new URLSearchParams(window.location.search); const movieId = params.get("id"); if (movieI..
💡 페이지를 (재)렌더링 하게 되는 경우들1. 첫 리액트 앱이 실행될 때2. 현재 리액트 내부의 어떤 상태(state)가 변경되었을 때컴포넌트 내부 `state`가 변경될 때컴포넌트에 새로운 `props`가 들어올 때부모 컴포넌트가 위와 같은 이유로 렌더링이 될 때 자식 컴포넌트도 줄줄이 렌더링
💡 state의 변화 유무리액트에서는 화면을 리렌더링 할 때 state의 변화를 가지고 판단한다. 즉, 일반 변수값을 화면에 출력한 상태에서 변수 값을 바꾼다고 화면에 출력된 값이 변경되는 것이 아니라 `setState` 를 활용해서 변경해야 적용 된다. 이 때 state의 변화 전, 후 의 `메모리 주소` 를 비교한다. 따라서 `참조 데이터 타입`이 변하게 되면 값은 바뀌지만 메모리 주소는 변함이 없기 때문에 페이지가 리렌더링 되지 않는다. (깊은 복사, 얕은 복사 개념) 📍 참조 데이터 타입(객체, 배열) 업데이트 하는 방법
구조 분해 할당구조 분해 할당(Destructuring)은 객체나 배열의 속성을 분해하여 변수에 값을 쉽게 할당 및 추출할 수 있는 문법이다. 특히 함수의 매개변수가 많아질 때 사용하면 아주 기분이 좋아진다. 가독성과 유지보수가 좋아진다. 기본 문법const obj = { name: "길동", age: 30,}const { name, age } = obj;console.log(name, age); // 길동 30`name`과 `age` 속성이 있는 `obj`객체를 정의'`const {name, age} = obj`': `obj` 속성에 정의된 값들을 `name`과 `age`에 할당이 때 `obj` 의 속성명과 같은 변수에 값을 할당순서는 상관 없음변수가 더 많거나 적어도 상관 없고, 속성명..
yarn을 설치하고 버전 확인을 하려고 하니 보안 오류가 나왔다. 권한이 없어서 나오는 오류이고, 금방 해결 가능하니 겁먹지 않아도 괜찮다. 오류yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/ ?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + yarn -v + ~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException 관리자모드로 PowerShell 실행 윈도우키를 누른다.powersh..
💡 TMDB API - 영화에 대한 각종 정보를 가져올 수 있는 사이트 Getting StartedWelcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API.developer.themoviedb.org 간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 프로젝트에 대한 기능을 완성하고 몇 가지 수정하고 싶..
replace() 메서드문자열의 특정 부분을 다른 문자열로 변경해준다. 문법string.replace(old, new, count)'old': 기존 문자열'new': 새로운 문자열'count(선택)': 대체할 횟수. 기본 값은 `-1`이고 모든 문자열의 모든 `old`문자열을 대체한다. 값을 `1`로 설정하면 첫 번째 `old`만 대체한다. 예제text = "나는 너가 싫어 너무 싫어"new_text = text.replace("싫어", "좋아")print(new_text) # 나는 너가 좋아 너무 좋아"싫어"를 "좋아"로 전부 대체한다. 대체 횟수 지정text = "나는 너가 싫어 너무 싫어"new_text = text.replace("싫어", "좋아", 1)print(new_text) # 나는 ..
슬라이싱문자열의 특정 부분을 잘라서 추출하는 기능이다. 문자열의 인덱스로 추출한다. 사용 예시주민번호 = "991030-1234567"print("년: " + 주민번호[0:2]) # 년: 99print("월: " + 주민번호[2:4]) # 월: 10print("일: " + 주민번호[4:6]) # 일: 30문자열 뒤에 `[start:end]` 와 같은 형식으로 사용할 수 있다. `start` 에는 시작 인덱스, `end`에는 마지막 인덱스를 넣어준다. 단, 시작인덱스부터 마지막인덱스"전"까지 출력된다. (`[0:2]`일 경우 인덱스 `0`부터 `2` 직전까지 추출한다) 생년: `주민번호` 변수에 저장된 문자열 중 0 ~ 2전까지의 문자열을 출력한다. (`99`) 시작 인덱스 생략print("생년월일: "..