y.developer
[TIL] Day 28 Optional chaining (옵셔널 체이닝) 본문
2023.11.13 월
JSON 파일을 다루면서 로직 순서에 대한 오류가 발생했다.
JavaScript에서 JSON 파일을 로드하는 방법과 함께 오류를 해결할 수 있는 방법을 알아보자.
- JSON
- require
- fetch
- optional chaining
JSON
JavaScript Object Notion
서버와 클라이언트 간에 데이터를 공유할 수 있다.
클라이언트가 사용하는 언어에 관계없이 통일된 데이터를 주고받을 수 있도록 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장 및 표시할 수 있다.
JSON
require
JavaScript에서 require() 메서드를 사용하여 로컬 JSON 파일을 구문분석할 수 있다.
로컬 JSON 파일이 있다면 require()를 사용해 다른 Node.js 모듈처럼 로딩하기만 하면 된다.
JSON 파일이 자동으로 구문분석되고 프로젝트에 이 파일을 바로 사용할 수 있다.
이 작업은 동기적으로(synchronous) 처리되므로 전체 파일의 구문분석이 완료할 때까지 프로그램이 일시 중지되기 때문에 JSON 파일이 크면 프로그램 속도가 느려질 수 있다.
또한 JSON을 이 방법으로 구문분석하면 파일 전체가 메모리에 로딩되므로 정적 JSON 파일에만 이 방법을 사용하는 것이 좋다.
프로그램이 실행되는 동안 JSON 파일이 변경된다면 해당 프로그램을 다시 시작하고 업데이트된 JSON 파일을 구문분석할 때까지 변경 사항에 접근할 수 없다.
const jsonData = require('./test.json');
console.log(jsonData);
fetch
API 주소를 입력 후 데이터를 가져올 때 .json() 메서드를 통해 JSON 응답을 JavaScript 객체 리터럴 또는 배열로 자동으로 구문분석 한다.
fetch API은 웹 기반 환경에서만 작동하기 때문에 해당 환경에서 작업하는 경우에만 적합하다.
따라서 브라우저에서 로컬 파일을 로딩하려고 하면 오류가 발생한다.
기본적으로 브라우저는 보안상의 이유로 로컬 파일에 대한 액세스를 허용하지 않는다.
fetch('주소')
.then(response => {response.json();})
.then(jsonData => console.log(jsonData));
Optional chaining (옵셔널 체이닝)
연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.
?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락 된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.
따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.
optional chaining은 선언되지 않은 루트 객체에 사용할 수 없지만, 정의되지 않은 루트 객체와는 함께 사용할 수 있다.
수정 필요
Cannot read properties of undefined (reading) 에러
해당 프로퍼티가 정의되지 않은 객체 또는 변수를 참조할 때,
객체나 변수의 값이 정의되지 않은 상태에서 프로퍼티를 참조하려 할 때 발생하는 에러이다.
해결 : 옵셔널 체이닝
옵셔널 체이닝(?.)은 프로퍼티가 존재하지 않는 경우에 에러를 발생시키지 않고, undefined를 반환하는 기능
?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.
<Component title={posts?.title} body={posts?.body}>
또 다른 해결 방법
if(artistData.length <= 0 || dummyData.length <= 0) {
return <div>데이터를 가져오는 중...</div>
}
하루를 마치며
로컬 JSON 파일을 로드하면서 발생한 문제를 옵셔널 체이닝을 통해서 일단 해결했지만,if문을 추가해서 로직의 효율성을 올릴 수 있도록 만들어야겠다. 이밖에도 react-router-dom, CSS / SASS / SCSS 차이점, styled-components, Mixin css props, css-module, reset.css, jsconfig.json 절대경로 설정 등 프로젝트 작업을 시작하기에 앞서 세팅하는 방법을 숙지하고 프로젝트에 들어가기 위한 준비를 마쳤다.
오늘의 한 줄
프로젝트 준비하기 위한 준비
그래도 시작이 반이다!