# optional chaining

gojaeng

자바스크립트의 존재의 이유는 당연하게 html을 잘 조작하기 위해서이다. 타입스크립트를 통한 html 조작도 당연히 가능하지만, 자바스크립트를 쓸 때보다 귀찮다는 단점이 있다. 1. stricNullCheck tsconfig.json파일을 열어서 strickNullChecks옵션을 true로 바꾸자. 그래야 변수 조작하기 전에 이게 null인지 아닌지 확인 가능하다. 2. HTML 파일 준비 자바스크립트라면 이렇게하면 안녕하세요가 반갑다로 바뀐다. 하지만 ts에서는 오류를 내준다. 몇가지 해결책을 알아보자. 제목 바꾸는 방법들 1. narrowing 2. instanceof instanceof도 narrowing의 한 종류인데 뒤에 더 자세하게 알려주도록 하겠다. 3. assertion 4. optional chaining 링크 바꿔보기 어라? 왜 에러가 뜨지? html 태

hannabananah

옵셔널 체이닝 ?. 앞에 있는 것이 참(truthy)인 값이면 뒤 코드를 실행하고, 거짓(falsy)인 값이면 코드를 통째로 undefined를 만들어버린다. 옵셔널 체이닝 ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 객체나 배열뿐만 아니라 함수에도 옵셔널 체이닝을 적용할 수 있다. 속성에 접근하거나 호출하려는 것이 거짓인 값인지 아닌지 의심될 때 옵셔널 체이닝을 적용한다. ?.앞의 변수는 꼭 선언되어 있어야 한다. 예를 들어 user?.anything을 사용하려면 let이나 const, var를 사용해 변수 user를 정의해야 한다. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다. ?.은 연산자가 아니다. ?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체

akdcl1124

Optional chaining optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. 따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다. optional chaining은 선언되지 않은 루트 객체에 사용할 수 없지만, 정의되지 않은 루트 객체와는 함께 사용할 수 있다. >문법 obj?.

hichulog

🪩 Double NOT (!!) >!! 연산자는 논리 부정 연산자를 두 번 사용하여 값을 불리언으로 변환합니다. 즉, !! 연산자는 값이 어떤 형태이든 간에 항상 해당 값을 불리언으로 강제로 변환하여 반환합니다. > 주로 !! 연산자는 변수나 표현식의 값을 명시적으로 불리언으로 변환해야 하는 상황에서 사용됩니다. 예를 들어, if문에서 변수의 값이 undefined, null, 0, NaN, '' (빈 문자열) 등으로 평가될 수 있는 경우에 이 값을 false로 변환하고, 그 외의 값은 true로 변환하기 위해 !!를 사용할 수 있습니다. 🪩 Optional chaining(?.) >?.는 옵셔널 체이닝 연산자(optional chaining operator)로, 객체의 속성 접근이나 메서드 호출을 할 때, 중간에 있는 속성이나 객체가 null 또는 undefined인 경우에도 에러를 발생시키지 않고 안전하게 접근할 수 있도록 도와줍니다. > 옵셔널 체

koyk0408

Shorthand property 자바스크립트 객체 프로퍼티, 메서드를 축약해 사용 가능하다. 키-값의 형태가 같은 경우 firstname: firstname 으로 쓸 필요없이 firstname으로 충분하다. Computed property name 값 뿐 아니라 객체의 키 또한 동적으로 받을 수 있다. React에서 익숙하게 사용하는 useState 또한 이에 해당한다. Key-value data 강의에서는 lookup table이라는 제목이었지만, 결국 키-값 쌍 형태로 나열된 데이터에대한 이야기이기 때문에 key-value data로 바꿔서 기록한다. 키-값 형태의 데이터를 computed property name과 함께 사용하면 효율적으로 코드를 짤 수 있다. > ### 1. if-else if문 형태 -> 리팩토링 2. switch문 type에 따라 데이터를 리턴하고, 없는 case의 경우 '해당없음'을 리턴한다. if-else i

sh_0317

발생한 문제 로그인 하고 리뷰를 등록했을때 첫 동작은 이벤트가 실행되지 않고, 새로고침 후 로그인 정보가 로컬스토리지에 데이터값이 저장이 되면 두번째부터 이벤트가 발생되는 문제가 발생했다. form태그를 사용해서 submit이 되는 문제인가싶었는데 preventDefault를 작성해둬서 그 문제는 아닌 것 같았고 튜터님께 질문도 해보면서 해당 문제를 찾아보니, 처음에 로컬스토리지에 로그인 정보가 아예 없을 때 존재하지 않는 데이터에 접근해 정보를 가져오려 할 때 문제가 발생한 것 같았다. 해결방법 optional-chaining을 통해 해결할 수 있었다. 옵셔널 체이닝이란 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있도록 해주는 것. 프로퍼티 뒤에 ?.를 붙여서 사용하며 ?.은 '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. ?.는 존재하지 않아도 괜찮은 대상에만 사용해야

fastfox

개요 이 DressCode 작업은 개발자 공부를 시작하면서 동시에 시작한 작업이기 때문에 코드 곧곧에 문제점도 많고 개선해야할 부분도 많이 있다. 그 중 하나의 큰 문제가 컴포넌트의 재사용성이 떨어진다는 문제가 있었다. 이번의 문제도 데이터를 서버에 저장을 하는 것과 기존의 데이터를 업데이트하는 과정이 같은 형태의 모달에서 사용이 되는데 이전에는 재사용성의 중요성도 몰랐을 뿐더러 경우에 따라 유연하게 데이터와 함수를 사용하는 방법을 몰랐었다. 하지만 업데이트를 다시 수정하다 보니 같은 형식의 컴포넌트를 똑같이 복사해서 생성과 업데이트로 사용하는게 눈에 띄었고 이제는 수정의 필요성과 방법을 알기 떄문에 한번 고쳐보기로 했다. 문제 코드 문제 1. 형태는 같지만 동작이 달라 따로 만든 컴포넌트 AddDressPopup>과 ``은 형태가 같지만 데이터 생성과 업데이트라는 차이 때문에 컴포넌트를 따로 만들어서 사용했었다. ![](htt

yoonezi

JS는 작성된 코드가 위에서부터 순서대로 실행되기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 먼저 그려지면서 화면에 그려질 데이터의 내용이 undefined가 됩니다. 따라서 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생합니다. 에러가 발생하지 않고 효율적으로 실행되기 위해서 우선 정적인 부분을 화면을 미리 그려놓고 그 다음, 데이터를 그려주기 위해서 조건부렌더링 을 사용합니다. 조건부 렌더링에는 &&연산자, 삼항연산자, 옵셔널체이닝 이 있습니다. 삼항 연산자 처음엔 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 경우를 모두 적어줘야 했습니다. 데이터가 있다면 ? data.fetchBoard , 없다면 ? undefined && 연산자 &&연산자는 데이터가 있다면 보여주고, 데이터가 없을 경우엔 undefined를 반환해줍니다. Nullish coalesci

doh_0112

0. axios로 get 요청 이렇게 작성한 코드를 실행해보면 아래와 같은 에러를 만날 수 있다. map 메서드를 사용할 때 todos의 값이 null이기 때문에 이런 에러가 나는건데 그렇다면 왜 null 값일까요? 정답은 async 키워드로 인해 비동기적으로 실행하기 때문에, fetchTodos를 실행하기 전에 return 문이 렌더링 됐기 때문. 따라서 todos가 초기값인 null 값이라서 에러 발생! 해결은 optional chaining! 이 코드에서는 ?. 이라는 optional chaining 연산자를 사용했다. todos?.map 에서 todos 배열이 존재하지 않으면 이 전체가 undefined를 반환하게 된다. 따라서 런타임 에러가 발생하지 않고, 값이 있다면 정상적으

baedormann

옵셔널 체이닝 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 user.address.street를 사용해 주소 정보에 접근하는 코드를 실행할 때 user, address, street 셋 중 하나라도 데이터가 없다면 에러가 발생할 수 있다. 또 다른 사례론 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생한다. 이런 문제들은 && 연산자를 사용하여 해결할 수 있다. 예시: 그런데 AND로 연결하는 방식은 코드가 길어져 가독성이 떨어진다. 옵셔널 체이닝의 등장 ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. user?.address로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않

jjdc0809

문제상황 아무래도 프론트엔드적인 공부를 하다보면 계속해서 마주칠 수 밖에 없는 문제인데, 새로고침하면서 모든 내역들이 다 사라진다는 점이 계속해서 화이트 아웃 현상을 발생시켰다. 사실 이 부분에 대한 현상을 어쩔 수 없다는 식의 생각만 하고 있었는데, 오늘 기술매니저님께서 프론트엔드적인 사고법을 알려주셨다. 무조건 오류가 난다고 가만히 있는게 아니라, 오류가 났을 때 가장 사용자-친화적으로 돌아갈 수 있는 예외케이스 값을 주어주면 가장 좋다고 하셨다. 여러가지 값을 저장한 다음에 하위페이지에서 새로고침을 하게되면, useSelector 부분에서 애초에 그 값을 가져오지 못하게 되는 것이었다. param의 경우에는 주소값을 가져오기 때문에 지정된 주소값을 가져오지만, 해당 객체에 할당된 ID 값은 어디 서버에 저장해 둔 것이 아니기 때문에 새로고침하면 사라진다. 그래서 undefined가 될 수 밖에 없고, 그래서 이에 따라 밑에 화면이 그려질 때 해당 객체에 맞는 ID

badassong

Optional-Chaining(조건부 렌더링) optional-chaning은 다른 조건부 렌더링 연산자를 더욱 간결하게 만들어서 사용하기 위해 탄생하게 된다. 1. 삼항 연산자 제일 처음에는 삼항 연산자를 사용했다. data는 동기적으로 받아와야 하는 데이터라 받아오는데는 시간이 걸린다.하지만, 받아올때까지 기다려주지 않고 다음 코드로 넘어가게 된다. 따라서 data가 없을때 발생하는 오류를 방지하기 위해 data가 없을때는 undefined를 렌더하고, data가 들어오면 data.fetchprofile을 다시 렌더링해준다. 2. && 연산자 그 이후에는 && 연산자를 사용했다. &&연산자는 연산자 앞의 값이 참일 경우엔 뒤의 값을 거짓일 경우엔 앞에 것을 그려준다. data가 없을 때 렌더할 부분을 따로 적어줄 필요가 없어 삼항 연산자에 비해 상당히 간결해졌다. 하지만 게으른 개발자들은 이 코드조차 길다고 느껴

buddle6091

1. Axios Axios에 익숙해지려면 먼저 비동기와 Promise에 대한 이해가 필요하다고 생각하여 아래에 정리해보려고 한다. 비동기 함수 대조되는 성격의 함수는 동기 함수 라고 하는데, 이것은 우리가 일반적으로 쓰는 함수 유형이다. 그리고 이 함수는 대개 함수의 선언 순서대로 호출이 된다. 만약에 우리가 서버에 정보를 요청하여, 받아오는 작업을 하려고 한다고 생각해 보자. 만약 데이터의 양이 생각보다 많아, 해당 페이지에서 호출되야하는 하단의 함수들이 데이터 요청 작업이 끝나기까지만을 기다려야한다. 이 문제를 타파할 4번 타자가 바로 비동기 함수 이다. 비동기 함수 즉 비동기로 작업을 해줄 수 있는 비동기 처리 방식 은 해당 함수에 다른 일반함수들의 호출과 상관없이 background 에서 계속 진행되고 있는 느낌이라, 다른 함수들의 진행에 영향을 끼치지 않게 된다. Axios 가 바로 비동기 처리방식의 함수인 것이다.

tootb

프로젝트 진행사항 공통 백엔드 프론트엔드 글 작성/조회/삭제/수정 기능 구현 해야할 일 글 작성 화면 클론 [X] 글 작성 기능 구현 [X] 글 조회 기능 구현 [X] TIL GET 요청 및 mapping 1. 데이터가 제대로 안불러와지는 오류 작성한 question(게시글)을 GET요청을 통해 불러와서 map을 이용해 HOME 화면에 뿌려주는데 자꾸 오류가 발생한다... 첫 번째 콘솔에는 등록된 데이터들이 잘 들어오는데 두번째 콘솔에서 이상한 데이터가 들어온다 검색 결과 key는 실제 데이터 내부에 없어도 된다는 것을 개발자 친구의 값진 설명을 통해 알게된 후 for문을 지우고 data 그 자체로 받아 QuestionList.js에 넘겨줬다.

plumpsqrl9744

* 옵셔널 체이닝이란(Optional Chaining) ? 옵셔널 체이닝(Optional Chaining)은 ES2020에서 등장한 새로운 연산자로서 '?.' 의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자입니다. 체이닝 연산자와 비슷하게 동작하지만, 만약 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴합니다. 함수 호술시에도 마찬가지로 값이 없다면 undefined를 리턴합니다. 옵셔널 체이닝을 사용함으로써 문법의 가독성이 올라가고 한결 간결한 표현식으로 작성할 수 있게됩니다. 속성값이 존재한다는 확실한 보증이 없을 경우 그 객체를 탐색하는데 도움을 줍니다. 또한 값이 누락될 가능성이 있는 경우에 옵셔널 체이닝을 사용하면 프로그램의 안정성을 높일 수 있고 보다 간단하게 표현할 수 있습니다. 코드를 통해 알아보겠

91savage

optional chaining 연산자 (?.) > 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 만약 참조가 nullish (en-US) (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. 문서 링크

lionjy06

오늘은 js 최신 문법중에 하나인 optional chaining과 nullish coalescing에 대해서 알아 보고자 한다. 트렌드에 뒤쳐진다고 생각하진 않았는데 생각보다 많은 코드에서 볼수 있는 문법인데 나혼자만 안쓰고 있다는 느낌이 들고 대충은 뭔지 아는데 그것만큼 위험한게 없어서 이번기회에 확실하게 알고 가고자 하여 따로 공부를 해보자... 분명 나와 비슷한 개발자 혹은 개발 준비자들이 있을거니 아마도? 도움이 되지않을까 싶다. optional chaining mdn에서 정의한 optional chaining의 정의를 살펴 보자면 "_선택적인 연결 연산자( )를 사용하면 체인 의 ?.각 참조가 유효한지 확인할 필요 없이 연결된 개체 체인 깊숙이 위치한 속성 값을 읽을 수 있습니다. _?.연산자는 참조 .가 null인 경우 ( null또는 undefined) 오류를 발생시키는 대신 식이 반환 값으로 단락 된다는 점을 제외하면 연결 연산자와 같습니다 undefine

tnstjd120

ES11(ECMAScript2020) 에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined 인 경우 undefined를 반환하고 그렇지 않을 경우에는 우항의 프로퍼티 참조를 이어간다. 옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조하려고 할 때 유용하다. 옵셔널 체이닝 연산자가 도입되기 전에는 논리곱 연산자(&&)를 사용한 단축평가를 통해 변수가 null 인지 undefined인지 확인했다. 논리곱 연산자(&&)는 좌항의 피연산자가 false로 평가되는 Falsy값(false, null, undefined, 0, -0, NaN, '')이면 좌항 피연산자를 그대로 반환한다. 하지만 0이나 ''은 객체로 평가될 때도 있다. 하지만 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 false로 평가되는 Falsy값(false, null, undefined, 0, -

lhj26

참고사이트: English: The swift programming language Korean: The swift programming language Optional Chaining (옵셔널 체이닝) Optional chaining은 nil 일 수도 있는 프로퍼티, 메소드 그리고 서브스크립트를 호출하고 query(질의) 하는 과정이다. 만약 optional이 값을 가지고 있으면 프로퍼티, 메소드, 서브스크립트의 호출은 성공한다. 그러나 값을 가지고 있지 않다면 nil을 반환한다. 여러 개의 질의를 연결하여 사용할 수 있는데, 연결된 질의에서 optional 중 1개라도 nil이라