혜르미온느

JavsScript에서 물음표를 사용하는 사례가 몇 가지 있는데, 예를 들어 삼항연산자 / null 병합 연산자 등, 그 중에 하나가 바로 optional chainig 이다. 나는 사실 옵셔널 체이닝이라는 단어를 잘 몰라서 물음표 연산자라고만 생각했었는데, 이게 잘 사용하면 코드가 간결해지는 효과가 탁월한 것 같다. 예를들어 깊이 중첩된 오브젝트 내의 한 데이터에 접근한다고 하자. 그럼 다음과 같이 표현하는게 일반적인데, let nestedProp = obj.first && obj.first.second; 이 뜻은 obj.first.second에 접근하기 전에 obj.first가 존재하는지 먼저 확인하라는 의미이다. 만약 다음과 같이 코드를 작성하게 된다면 obj.first가 없을 때, 에러를 발생시키..

[!이시중] 2021년 10월 27일 20:44에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/42 에서 확인할 수 있음. React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이었습니다. 그러나 클래스형 컴포넌트의 치명적인 단점은 컴포넌트 사이에서 상태 로직을 재 사용하기 어려우며, 이에따라 코드가 길고 복잡해짐을 야기합니다. 이를 보완하기 위하여 나온 것이 바로 hook입니다. (스우파 HOOK 아님 주의. 아이키 언니 멋있어요>

[!이시중] 2021년 5월 21일 22:33에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/33 에서 확인할 수 있음. 글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을 시원하게 한 번 내려주시길..!) 인생을 흘러 흘러 살아오다가 문득 눈을 떠서 바라본 지금의 나는 VUE를 사용하는 프론트엔드 개발자가 되었다. 세상에 여러 직업이 많고, 하고 싶은 것도 참 많은 나였지만 그 중에 프론트엔드 개발자는 없었고, 생각도 해 본 적이 없었다... 아무튼 프론트엔드의 세계에 발을 들이게 되었는데, 기왕 할거면 전문가가 되어야 하지 않겠는가..! VUE에만 국한 될 수 없어 React를 하자고 마음먹은지 엄~청 오랜 시간이 지났지만 도무지 하..

만약 우리가 IT계열이 아닌 그 어떤 다른 직업을 가지고 있다고 가정할 때, storyBook이라는 말을 처음 듣는다면 어떤 생각이 떠올랐을까? 나는 단연 이야기, 혹은 동화책 등에 관한 내용일거라 생각한다. 이야기를 뜻하는 story라는 단어의 뜻이 가장 크게 와닿기 때문이다. 만약에 우리가 고려해야하는 사용자 시나리오 혹은 기획자 의도 혹은 비즈니스 로직 혹은 테스트 케이스 등등이 하나의 이야기라고 생각하면 본 포스팅에서 소개해 볼 storyBook이 조금 더 쉽게 이해될까? 마크업도 백엔드도 중요하지만 그 사이 다리를 이어주는 프론트는 적당히 백엔드를 커버하면서도 적당히 마크업을 커버하면서도 사용자에게 최고의 경험을 제공하기 위하여 그 이상의 코드를 구현하면서 날이 갈수록 방대해지고 복잡해지는 경험..

강의 선정 이유 예전에 진행하던 프로젝트에 typeScript를 도입하고자 하였는데, typeScript의 장점을 활용하지 못 하고, 모든 타입을 any로 설정하여 프로젝트를 진행한 적이 있다. 이런식의 활용은 typeScript를 사용하는 의미가 없다고 사료되어 한 달정도 만에 거두어내었지만 typeScript를 어떻게 하면 잘 활용할지에 대한 고민이 항상 숙제로 남아있게 되었다. 하여 typeSrcipt에 대한 기초를 배워보고자 강의를 수강하고자 한다. 김민태는 누구인가 요즘 '네카라쿠배'라는 말이 유행한다. 이는 회사를 지칭하는 말인데, 이중에 '배'는 배달의 민족을 담당하고 있다. 배달의 민족은 우아한 형제들에서 진행하는 사업 중 일부인데, 김민태님은 바로 이 우아한 형제들에서 기술 이사직을 맡고..

[!이시중] 2021년 11월 20일 11:25에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/60 에서 확인할 수 있음. 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다. 짜릿해. 나를 반성하는 마음으로 또 나와같이 할 때마다 검색을 해보시는 분들을 위하여 정리해보도록 한다. 심지어 이 글은 내가 예전에 만들었던 코드들을 기반으로 작성한다. 과거의 나는 오늘의 내가 다시 헤맬줄은 몰랐겠찌 ㅎ.ㅎ... (사실 진짜 별거 없어서 쓰기 부끄럽..) * 오픈 api를 사용하려면 회원가입을 통하여 각자에게 맞는 발급키를 받아야 한..

[!이시중] 2021년 11월 8일 12:00에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/49 에서 확인할 수 있음. 알고 있고, 배우고 있는 jest의 matcher들을 정리하는 포스팅으로 제가 더 많이 알아가면 알아갈수록 추가될 예정입니다~ ^0^ matcher란 jest에서 제공하는 테스트 결과값을 확인하는 함수. 하단에 존재하는 matcher list. ctrl + f로 찾는것을 권장합니다. toBe not.toBe toEqual toStrictEqual toBeNull toBeFalsy toBeTruthy 1. toBe test('toBe 사용법', () => { expect(결과값).toBe(기대값); }); // 테스트 통과 사례 test('1 = 1이다',..

[!이시중] 2021년 11월 6일 21:21에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/46 에서 확인할 수 있음. 제스트 공식 문서 https://jestjs.io/ Jest By ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take. jestjs.io 제스트 설치하기 https://jestjs.io/docs/getting-started Getting Star..