전체 글

[ 모던 자바스크립트 Deep Dive ] 프로퍼티와 식별자 네이밍 규칙

프로퍼티 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됩니다 let person = { name: 'Lee', age: 20 } 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 좋다고 합니다. 여기서 name, age는 프로퍼티 키로, 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 합니다. 식별자 네이밍 규칙은 뭘까요? 식별자 네이밍 규칙 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)을 포함할 수 있습니다. 식별자의 첫 문자는 숫자가 될 수 없습니다 예약어는 식별자로 사용될 수 없습니다. ( class, this while ... ) 만약에 식별자 네이밍 규칙을 따르지 않으면 어떻게 될까요? ""따옴표를 사용하면 됩니다. 간단하죠? con..

[ axios && jest ERROR] Cannot use import statement outside a module

0. 오류 상황 발생 따라하며 배우는 리액트 테스트 강의를 듣던 중, 관련 오류를 겪었다. 강사님은 성공하는데 왜 나는 오류가 생기지? axios도 분명히 설치되어있고, 코드도 같은데 발생한 문제인지라, 빠르게 구글링을 통해 문제를 해결할 수 있었다. 문제 상황 발생 시 내 코드 (볼 필요 없습니당!) Type.jsx import React, { useEffect, useState } from "react"; import axios from "axios"; import Products from "./Products"; const Type = ({ orderType }) => { const [items, setItmes] = useState([]); useEffect(() => { loadItems(ord..

[ 모던 자바스크립트 Deep Dive ] 옵셔널 체이닝 연산자 && null 병합 연산자

0. 용어 설명 falsy값 : false로 판단되는 값. false,undefined, null, NaN, -0, 0, '' 1. 옵셔널 체이닝 연산자 옵셔널 체이닝 연산자는 ES11(ECMAScript2020)에서 도입되었습니다. ?.

[ 모던 자바스크립트 Deep Dive ] 반복문

1. 반복문 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행합니다. 이는 조건식이 거짓일 때까지 반복됩니다. 자바스크립트는 세 가지 반복문인 for, while, do...while문을 제공합니다 반복문 + 레이블문 이 포스팅과 비슷하죠? 하지만 이번 반목문은 for, while, do...while에 대해 조금 더 알아보는 시간을 가질 예정입니다! 레이블문이 궁금하다면 위의 링크로 슝 날아가보세요 for문 for문은 조건식이 거짓으로 평가될 때 까지 코드 블록을 반복 실행합니다다. for(let i = 0; i < 2; i++){ console.log(i) } for문으로도 무한루프를 만들 수 있습니다. for문의 ..

원티드 프리온보딩 챌린지 : 성공하는 이력서

** 원래는 비공개 글로 작성하다가 공개로 바꿔놓은 거라 & 들으면서 바로 써내려간 내용이라 두서없게 느껴질 수도 있습니다! 한 눈에 나를 보여주는 영역 내가 어떤 실무를 했는지, 내 내공을 pr하는 부분 어떤 성과를 냈는지. 내가 다른 경쟁자들보다 얼마나 뛰어난지 보여주는 근거가 될 수 있다 정량적인 지표를 사용해서 빠른 이해를 돕고 설득할 수 있다 가장 중요해 보이죠? 가장 어필하고 싶은 핵심 경험에 선택과 집중 대하서사를 쓰지 말자 채용 공고의 핵심 역량을 모듈화해서 잘 뽑아내서 작성해야 한다 결론적으로 업무 보다는 성과 어떻게 기여했고 어떤 좋은 결과를 얻었는지 정량적 근거를 활용해야 한다 꼬리 하지만. .이 페이지는 2~3페이지는 필요하지 않다 선택과 집중을 해야 한다 산업군과 직무에 대해서 파..

[ D-DAY ] 쉽게 만나는 JavaScript 비동기 처리 | 김태곤

Session1 : JavaScript의 '비동기 처리'란 ? 비동기를 왜 쓸까요? 잘 알려진 비동기 동작 예시 setTimeout, setInterval load, click 등 이벤트 처리 파일 입출력, 네트워크 요청 특징 개발자가 정확한 실행 시점을 알 수 없다 처리에 시간이 많이 걸린다 처리하는 도중 아무것도 못한다 😖 자바스크립트는, 스레드가 하나이기 때문에(싱글 스레드), 동기식으로 처리하게 되면 모든 것을 다 멈춰버리고 이걸 받아와야해!! 에만 집중한다. 따라서 성능 문제 때문에 동기식이 아닌 비동기를 사용한다 비동기? 왜 ? 어려울까요? 사실 비동기식 처리는 실생활에서 익숙하가 컵라면 읽는 동안 폰보기 ㅎㅎ 등 하지만 왜 어려울까? => 절차식 프로그래밍에 익숙하기 때문 코드의 순서가 실행..

[ FireBase ERROR ] Argument of type 'DocumentData' is not assignable to parameter of type 'Topic'.

0. 오류 상황 발생 firestore.ts export const getAllDocsOnCollections = async (collecionName: string) => { const querySnapshot = await getDocs(collection(db, collecionName)); return querySnapshot; }; getDocs로 collection의 모든 문서들을 받아와 반환한다. CraftRoom.tsx const setTopics = async () => { const topicArray: Topic[] = []; (await getAllDocsOnCollections(FIRESTORE_COLLECTIONS.topics)).forEach( (doc) => { const t..

[ 모던 자바스크립트 Deep Dive ] 타입 변환 (자바스크립트 ! 두번)

1. 문자열 타입으로 변환 String 생성자 함수를 new 연산자 없이 호출하는 방법 Object.prototype.toString 메서드를 사용하는 방법 문자열 연결 연산자를 이용하는 방법 // 1 String(Infinity); // 2 (Infinity).toString(); // 3 Infinity + "" 2. 숫자 타입으로 변환 Number 생성자 함수를 new 연산자 없이 호출하는 방법 parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능) +단항 산술 연산자 이용 *산술 연산자 이용 // 1 Number(1.1) // 2 parseInt(1.1) // 3 +'1.1' // 4 '1' * 1 3. 불리언 타입으로 변환 Boolean 생성자 함수를 ne..