AI Platform / Web

JavaScript에서 if문과 비슷한 switch 문에 대해 적어보려 한다. 우리는 switch문을 언제 사용하고, 잘 사용하고 있는지에 대해 고민해 보면 좋을 것 같다. 기본적인 문법 설명은 생략한다. eslint관점에서 우선 설명을 풀어본다. 그리고 TypeScript에서 SRP(Single Responsibility Principle) 원칙으로 switch를 어떻게 사용해야 할지에 대한 고민을 함께 해본 후, 추가로 React에서 활용해 보도록 하자. 일반적으로 우리는 switch 문에서 default값을 꼭 넣어줘야 에러가 발생하지 않는다고 생각한다. 왜냐하면, 개발자도 사람이기 때문에 실수로 모든 조건을 넣지 않아 예외가 발생 할 수 도 있기 때문이다. 또한, eslint 관점에서 defau..

nodejs를 통해 백엔드를 만들거나 react로 프런트를 만들 때, null 이나 undefined를 피하기 위한 분기를 조금더 똑똑하게 해보자. 1. Nullish coalescing operator (??) 우선은 병합 연산자에 대해 알아보자. 병합 연산자는 왼쪽 피연산자기 null이거나 undefined의 경우는, 오른쪽 피연산자를 반환하고, 그렇지 않은 경우는 왼쪽을 반환한다. 아래의 예를 보자. const foo = null ?? 'default string'; console.log(foo); // "default string" const aoo = undefined ?? 'default string'; console.log(aoo); // "default string" const boo = ..

들어가기전에 react는 뷰js나 앵귤러가 프레임워크인 점과 다르게 react는 라이브러리다. 따라서 자유도가 높다는 점을 진지하고 진행하자. JSX를 사용이유는 여기를 눌러서 확인하고 오자. JSX란, 문자도 HTML도 아닌 JavaScript의 확장 문법이다. 변수선언방법은 아래와 같다. const element = Hello, world! 위의 생겨먹은것을 보면 전반적으로 const로 변수를 선언하니 javascropt같은 냄새가 난다. 그러나 뒤의 h1 태그들을 보면, HTML인것 같다. 즉, 위의 태그 문법은 문자열도 아니고 HTML도 아니다. 바로 JSX이다. JSX는 JavaScript의 모든 기능이 포함되어있다고 볼 수 있다. 이전 글에서 sandbox에서 react에대한 기초를 알아 봤다..

1. helpermethod 자바스크립트에서 helpermethod인 some과 all에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. some과 all의 차이점을 인지하면서 보자. 2. some 리스트의 각 요소 중에 단 하나라도 만족하는 것이 있다면 True 없다면 False가 출력된다. const arr = [10, 20, 30] const isBiggerThan20 = arr.some(num => num > 20) console.log(isBiggerThan20) // true 3. every 리스트의 모든 요소가 조건을 만족하면 true, 아니라면 false를 리턴한다. const arr = [10, 20, 30] const allBiggerThan5 = arr.every(n..

1. helpermethod 자바스크립트에서 helpermethod인 filter와 find에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 2. filter 리스트 안에서 홀수만 뽑고 싶거나, 만약 todoList를 만들었을 때, 할 일이 끝난 것만 뽑아내고 싶을 때 사용하면 된다. 즉, 특정 조건을 만족하는 것만 모아서 배열을 리턴한다. 일반 사용 const arr = [1, 2, 3, 4, 5] const newArr = arr.filter(num => num % 2) console.log(newArr) 전체를 순회하며 조건을 만족하는 요소를 찾아낸다. 3. find filter와 가장 비슷하지만 가장 큰 차이점은 filter는 배열을 리턴하지만, find는 특정 값(요소)을 리..

1. helpermethod 자바스크립트에서 helpermethod인 forEach에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 2. forEach forEach의 가장 큰 특징은 리턴 없이 하나씩 돌려주는 것이다. 일반 사용 const fruits = ['apple', 'banana', 'peach', 'blue berry'] fruits.forEach(function(fruit){ console.log(fruit); }) // 과일이 하나씩 출력된다. axios 사용 // return값이 없어서 axios에 유용하게 사용가능하다. const urls = ['https://han...', 'https://python...', 'https://javascript...'] urls...

1. helpermethod 자바스크립트에서 helpermethod인 map에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 2. map map은 주로 리스트 안의 숫자들을 각각 하나씩 더하거나 곱할 때 사용한다. const arr1 = [1, 2, 3] const newArr1 = arr1.map(num => num + 1) console.log(newArr1) // 위의 코드와 아래의 코드는 같다. const arr1 = [1, 2, 3] const newArr1 = arr1.map(function(num) { return num + 1 }) console.log(newArr1) // [2, 3, 4]