본문 바로가기

JavaScript12

Conditional-rendering 리액트 작업 시 서버에서 값을 받아올 때 typeError, null 등으로 오류날 때가 있다. 보내는 값도, 코드도 백엔드도 정상이다. 이때 점검해봐야 할 게 하나 있다. 바로 Conditional-rendering이다. 우리는 서버에서 받아온 값을 변수에 넣어 사용한다. 변수는 선언되었지만, 서버에서 값이 넘어오지 않았다면 어떨까. 아무것도 없는 값이다. 아무것도 없는 데 화면에 띄운다면 당연히 에러날 수밖에 없다. 서버에서 응답(원하는 값)이 넘어왔을 때 화면에 다시 화면에 그리도록 하는 조건이 필요하다. 다시 그리도록 조건문을 세우는 게 Conditional-rendering이다. 사용 방법 Conditional-rendering에는 AND연산자(&&), 삼항연산자, 옵셔널체이닝(Optional .. 2022. 9. 12.
hoisting 호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 보통 변수를 선언하고, 할당한다. 또는 선언과 동시에 할당하거나 재할당하기도 한다. 이때 어떤 자료형을 쓰느냐에 따라 호이스팅이 일어나기도, 없기도 한다. var 선언, let 선언, const 선언, 그리고 함수 선언식, 함수 표현식를 통해 호이스팅을 알아보고자 한다. 자바스크립트 ES6에서는 var보다 let과 const 사용을 권장한다. let과 const는 ECMAScript® 2015(ES6)에서 처음 나온 것으로 이전엔 var만 존재했고, var가 자바스크립트의 일반적인 사용방식이었다. ES6에서 var를 두고 let과 const 선언을 따로 만든 이유 중 하나가 바로 호이스팅이다. 호이스팅이 무엇인지.. 2022. 9. 11.
loop method - filter, map, every, some 반복문은 프로그래밍 언어의 기초 중 기초다. 기계어나 초기 초급언어 빼고는, 반복문이 없는 고급 언어는 없지 않을까 싶다. for와 while로 모든 반복문을 끝낼 수 있지만, 가독성이 떨어진다. 속도면에서는 for와 if가 가장 빠르지만, 유지보수성에서는 메서드를 사용하는 게 훨씬 좋을 수 있다. 반복문 메서드는 필수다. filter() filter는 주어진 (콜백)함수의 조건을 통과하는 모든 요소, 즉 true인 모든 요소를 모아 새로운 배열로 반환한다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); con.. 2022. 9. 8.
async & await 자바스크립트에서 서버와의 통신은 비동기로 작동한다. 비동기로 시간을 절약할 수 있지만, 원하지 않게 데이터 없는 화면이띄워질 수 있다. 이때 데이터를 받아오고 화면을 띄울 수 있게 만드는 즉, 비동기를 동기로 만드는 async와 await가 필요하다. 비동기 실행 async function  async() { const data = axios.get('https://koreanjson.com/posts/1') console.log(data) // Promise } axois로 비동기 통신을 사용했다. 자바스크립트는 상단에서부터 내려오면서 위 코드를 실행한다. 실행 시 서버측에 데이터를 요청하고 응답을 보여주는데, 이때 async를 이용한 통신은 데이터 보다 promise 객체를 먼저 반환한다(asy.. 2022. 9. 5.
Template literals 프로그래밍 언어가 영어로 작성되어 있다보니 단어를 아느냐 모르느냐에 따라 이해 난이도가 달라진다. 템플릿 리터럴은 단어를 알면서도 순간 "뭔 말이야"하고 멈칫하게 한다. 영어권 사람도 아니고 영어를 잘하는 사람도 아니라서 그런 듯하다. 형판 문자열. 직역한 단어 자체로는 뭔가 싶지만, 사용법을 알면 "아하~ 그래서 템플릿이구나"한다. 자바스크립트를 처음부터 시작하다보면 변수와 상수가 손에 익고, 값을 할당하는 것은 익숙하다 못해 감각도 없어진다. function yourself (name, age, school){ console.log("너의 이름은 " + name + "이고, 나이는 " + age + "살, 학교는 " + school + "가 맞니?") } yourself("코난","8","테이탄초등학.. 2022. 8. 31.

티스토리툴바