이 글은 스터디에서 리액트 톺아보기 2. Intro를 읽고 정리하며 주관적으로 정리한 글입니다. 글을 읽고 핵심적이거나 더 깊게 보고 싶은 부분을 정리하였습니다. 원문보다 더 가독성이 좋지 못할(?) 수 있으니 원문도 읽어보시는 것을 추천드립니다. 또한, 글을 읽고 이해한 내용을 바탕으로 작성한 글이기 때문에 틀린 내용이 있을 수 있습니다. 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다. ⚛️ 리액트 톺아보기 왜 를 보는가 Next.js를 통해 한층 더 추상화된 React를 사용하다보니, 아이러니하게도 React에 대한 더 깊은 이해가 필요하겠다는 갈증이 들었다. 리액트 공식문서도 혼자서 1번, 스터디에서 1번 읽었지만 뭐랄까… 전반적인 React의 컨셉과 api 사용법은 알겠으나 그 내부 구현에 대한 건 생각보다 깊이 있게 들어가기가 힘들었다. 그러던 중 글을 발견하였고 한국말로 정리된 글 중 가장 깊이있는 글이라고 생각하여 해당 글을 읽기로 했다! 부디 지금 내가 느끼는 …

이 글은 스터디에서 리액트 톺아보기 1. Preview를 읽고 정리하며 주관적으로 정리한 글입니다. 글을 읽고 핵심적이거나 더 깊게 보고 싶은 부분을 정리하였습니다. 원문보다 더 가독성이 좋지 못할(?) 수 있으니 원문도 읽어보시는 것을 추천드립니다. 또한, 글을 읽고 이해한 내용을 바탕으로 작성한 글이기 때문에 틀린 내용이 있을 수 있습니다. 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다. ⚛️ 리액트 톺아보기 왜 를 보는가 Next.js를 통해 한층 더 추상화된 React를 사용하다보니, 아이러니하게도 React에 대한 더 깊은 이해가 필요하겠다는 갈증이 들었다. 리액트 공식문서도 혼자서 1번, 스터디에서 1번 읽었지만 뭐랄까… 전반적인 React의 컨셉과 api 사용법은 알겠으나 그 내부 구현에 대한 건 생각보다 깊이 있게 들어가기가 힘들었다. 그러던 중 글을 발견하였고 한국말로 정리된 글 중 가장 깊이있는 글이라고 생각하여 해당 글을 읽기로 했다! 부디 지금 내가 느끼…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 7. 신뢰할 수 없는 코드를 쓰면서 불변성 지키기 레거시 코드 혹은 신뢰할 수 없는 코드로부터 코드를 보호하기 위한 방어적 복사 얕은 복사와 깊은 복사의 차이 와 구분 우리가 신뢰할 수 없는 코드와 소통할 때, 방어적 복사를 사용한다. 앞에서 배운 는 안전한 코드 내에서 불변성을 지키면서 코드를 작성하는 방법이다. 직접 내부 코드를 로 변경하여 불변성을 지키는 방법도 있겠지만, 그렇지 못한 상황들이 있다. 예를 들면우리가 직접 코드를 수정할 수 없는 라이브러리 혹은 레거시 코드를 사용하여 데이터를 변경해야할 때이다. 그렇다면 우리가 불변성을 지…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 6. 변경 가능한 데이터 구조를 가진 언어에서 불변성 유지하기(feat. JS) 데이터가 바뀌지 않도록 적용하기 깊이 중첩된 데이터에도 적용하기 이해하기 1) 동작을 읽기, 쓰기 혹은 둘 다로 분류하기 : 데이터를 바꾸지 않고 정보를 꺼내는 것 인자에만 의존해서 정보를 가져오는 읽기는 즉, 이 된다. : 데이터를 바꾸는 것 변경되는 데이터가 어디에서 사용될지 알 수 없기 때문에 이 필요하다. : 데이터를 바꾸면서 정보를 꺼내는 것 2) 카피-온-라이트 원칙 세 단계 복사본 만들기 복사본 변경하기 복사본 반환하기 2-1) 배열의 카피-온-라…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 5. 더 좋은 액션 만들기 암묵적 입력과 출력을 제거해서 재사용하기 좋은 코드 만들기 복잡하게 엉킨 코드를 풀고 더 좋은 코드 만들기 모든 액션을 없앨 수는 없다. 액션은 필요하다. 하지만 암묵적 입력과 출력을 줄임으로써 액션을 최소화할 수 있다. 1) 비즈니스 요구사항과 설계 고려하기 기계적인 리팩토링만이 항상 최선의 구조를 만들어주진 않는다. 비즈니스 요구사항을 고려해야 한다. 비즈니스 요구 사항: 장바구니에 담긴 제품을 주문할 때 무료 배송인지 확인하는 기능 아래 함수는 비즈니스 요구사항인 에 대한 내용 없이 과 에 대한 내용만을 가지고 있…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 4. 액션에서 계산 빼내기 함수로 정보가 어떻게 들어가고 나오는지 이해하기 테스트하기 쉽고 재사용성이 좋은 코드를 만들기 위한 함수형 프로그래밍 이해하기 액션에서 계산을 분리하는 방법 알기 1) 변경 전 코드 2) 명시적 입력/출력, 암묵적 입력/출력 명시적 입력: 함수의 인자로 전달되는 값 명시적 출력: 함수의 반환값 암묵적 입력: 전역변수를 읽는 등 인자 외의 다른 모든 입력값 암묵적 출력: console.log(), DOM 변경, 전역변수 변경 등 반환값 외의 다른 모든 출력값 암묵적 입력과 출력: 3) 변경 절차 계산에 해당하는 코드를 …

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 3. 액션과 계산, 데이터의 차이를 알기 액션과 계산, 데이터의 차이를 알 수 있다. 액션이 코드 전체로 퍼질 수 있다. 코드에서 어떤 부분이 액션인지 찾을 수 있다. 액션과 계산, 데이터 모든 개발 과정에서 액션과 계산, 데이터를 구분하는 기술을 적용할 수 있다. 액션(부수 효과) 실행 시점과 횟수에 의존 계산(순수 함수, 수학 함수) 입력을 받아서 출력을 반환한다. 데이터 이벤트에 대한 사실 함수형 프로그래머는..! 최대한 액션에서 계산을 빼내려고 한다. 또 계산에서 데이터를 분리할 수 있는 생각한다. 나아가서 액션을 계산으로, 계산을 데이터…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 2. 현실에서의 함수형 사고 현실적인 문제에 함수형 사고를 적용해보자. 소프트웨어 구조를 계층으로 나눠서 설계해보자. 시간에 의존하는 액션을 타임라인으로 시각화해보자. 액션과 계산, 데이터 코드를 과 , 로 나누는 작업이 우선이다.(계층형 설계) 액션 와 에 의존한다. 사용할 때 항상 조심해야한다. 계산 어떤 것을 결정하거나 계획하는 것 함수형 프로그래머는 액션보단 계산을 선호한다.(다루기 쉬우므로) 데이터 가능한 데이터를 사용한다. 유연하기 때문에 저장하거나 네트워크로 전송하는 등 다양하게 활용 가능하다. 변경 가능성에 따라 코드 나누기 자…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 1. 쏙쏙 들어오는 함수형 코딩에 오신 것을 환영합니다. 함수형 사고가 무엇인지 그리고 왜 함수형 사고가 더 좋은 소프트웨어를 만드려는 개발자에게 도움이 되는지 설명한다. 함수형 프로그래밍이란? 수학 함수를 사용하고 부수 효과를 피하는 것이 특징인 프로그래밍 패러다임 부수 효과 없이 순수 함수만 사용하는 프로그래밍 스타일 부수 효과 함수가 리턴값 이외에 하는 모든 일 리턴값이 필요해서 호출했지만 의도하지 않게 부수효과가 발생할 수 있다. ex) 이메일 보내기, 파일 읽기, 웹 요청하기 등 순수 함수 인자에만 의존하고 부수 효과가 없는 함수 같은 …

🧷 CS-Network 스터디 코드스쿼드 과정을 마치고 프론트엔드 개발자로서 알아야될 네트워크 지식을 채우기 위해 시작한 CS 스터디! Tech-Interview-Network를 참고하여 스터디를 진행하기로 했다. 2. HTTP 응답코드에 대해 설명해 주세요. HTTP 응답코드는 HTTP 요청에 대한 응답으로 요청의 처리 상태를 알려주는 코드로 클라이언트와 서버 간의 HTTP 통신이 복잡해짐에 따라 이를 간다나게 표현하기 위해 만들어졌습니다. 100번부터 500번대로 크게 5가지의 응답을 코드로 나타냅니다. 100번대는 이라는 의미, 200번대는 는 의미, 300번대는 는 의미, 400번대는 는 의미, 500번대는 는 의미입니다. 일반적으로 통신이 성공했을 때, 200번 그리고 클라이언트 측의 요청 리소스가 서버에 존재하지 않을 때의 404번을 자주 볼 수 있습니다. 1. 401 (Unauthorized) 와 403 (Forbidden)은 의미적으로 어떤 차이가 있나요? 401번은…

🧷 CS-Network 스터디 코드스쿼드 과정을 마치고 프론트엔드 개발자로서 알아야될 네트워크 지식을 채우기 위해 시작한 CS 스터디! Tech-Interview-Network를 참고하여 스터디를 진행하기로 했다. 1. 쿠키와 세션의 차이에 대해 설명해주세요. 먼저 쿠키와 세션은 모두 HTTP의 connectionless, stateless를 보완하기 위해 등장한 기술입니다. 단순하게 생각하면 쿠키는 클라이언트 측에 사용자 정보 등의 데이터를 저장하는 기술이고 세션은 서버 측에 데이터를 저장하는 기술입니다. 그렇기 때문에 서버의 과부하 면에서는 세션보단 쿠키가 유리하고 보안 면에서는 쿠키보단 세션이 유리합니다. 이 둘의 가장 큰 차이는 데이터가 유지되는 유효 시간 관리에 있습니다. 쿠키는 서버에서 쿠키를 만들 때 정한 유효시간 동안 계속 유지되지만 언제든지 클라이언트가 수정 및 삭제가 가능하다는 특징이 있습니다. 반면 세션은 클라이언트가 직접 데이터의 라이프사이클에 개입할 수 없…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Managing State Reacting-to-input-with-state React는 선언형 UI 라이브러리 택시기사에게 목적지만 말하면 알아서 가는 것처럼, React는 상태에 따라 UI를 자동으로 업데이트 Thinking about UI declaratively 컴포넌트의 다양한 시각적 상태를 식별한다. 상태 변화를 촉발하는 요소를 파악한다. useState를 사용하여 메모리의 상태를 표현한다. 비필수적인 state 변수를 제거한다. 이벤트 핸들러를 연결하여 state를 설정한다. Step 1: Identify your component’s different visual states Displaying many visual states at once 컴…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Adding Interactivity 리액트에서는 를 모두 라고 한다. Responding to events React를 통해 JSX에 이벤트 핸들러를 추가할 수 있다. 이때, 이벤트 핸들러는 클릭, 마우스오, input에 초점 맞추기 사용자 상호작용에 의해 실행되는 콜백함수를 의미한다. State: a component’s memory 컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 이 때, 컴포넌트는 이런 변하는 내용을 하고 있어야 한다. React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다. 컴포넌트에 state를 추가하려면 useState 훅을 사용하면 된다. 훅들은 컴포넌트가 React 기능을 사용할 수 있게 해…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Learn React - Describing the UI 리액트는 UI(User Interface)를 렌더링하기 위한 자바스크립트 라이브러리이다. UI는 버튼, 텍스트 그리고 이미지들과 같은 작은 단위로부터 구성된다. 리액트는 그 작은 단위들을 재사용 가능하고, 중첩 가능하게 결합할 수 있게 해준다. 웹 사이트에서부터 폰 앱들까지 화면에 있는 모든 것들은 컴포넌트로 분해할 수 있다. 이번 챕터에서 리액트 컴포넌트들을 만들고, 커스터마이즈하고 조건적으로 보여지게하는 방법을 배울 것이다. Describing the UI 텝의 요약 내용은 짧게 작성하고 넘어가겠습니다. 당신의 첫 컴포넌트 리액트 어플리케이션은 컴포넌트라고 불리는 독립된 UI 조각들로 구성된다. 리액트 컴포넌트는 이다. 컴포넌…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 useState 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 React useState Hook 만들기 1. React의 useState 1) 의문갖기 useState를 호출하여 state와 setState를 가져온다. 500ms(0.5초)마다 setCount를 실행한다. 값이 1씩 증가한다. setCount가 실행되면 다시 렌더링이 실행된다. 렌더링이 실행되면 Counter가 다시 실행될 것이다. 어떻게 Counter…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 가상돔 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 가상돔(VirtualDOM) 만들기 1. 브라우저 로딩 과정 -> -> -> -> -> 위 과정이 진행 후, CSS나 JS를 통해 변화가 생길 경우 re-플로우(re-레이아웃) 또는 re-페인트 과정이 진행된다. 1. 파싱 DOM Tree HTML을 토대로 DOM Tree를 생성한다. Bytes: HTML을 바이트 단위로 읽는다. ex) Characters:…

📎 React 이 글은 리액트 공식문서 - 함수 컴포넌트를 읽고 작성한 글입니다. 모든 내용을 다루지는 않고 개인적으로 부족했다고 느꼈던 부분, 새롭게 알게 된 부분들을 간단하게 정리할 예정입니다. Get Started - Quick start 아래와 같은 것을 배울 수 있다. How to create and nest components - 컴포넌트 생성하는 방법 How to add markup and styles - 마크업과 스타일을 추가하는 방법 How to display data - 데이터를 표시하는 방법 How to render conditions and lists - 조건과 리스트를 렌더링하는 방법 How to respond to events and update the screen - 이벤트에 응답하고 화면을 업데이트하는 방법 How to share data between components - 컴포넌트 간 데이터를 공유하는 방법 Creating and nesting co…

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 상태관리 시스템 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 상태관리 시스템 만들기 1. 중앙 집중식 상태관리 현대 프론트엔드 개발에서 제일 중요한 것은 어플리케이션의 규모가 커질수록 컴포넌트의 depth가 깊어지며 더불어 상태관리도 굉장히 어려워진다. 이 때, 상태를 위에서 아래로 하나하나 전달하지 않고 을 하면서 동시에 으로 다룰 수 있다면 어떨까? 참고: Redux 공식문서 2. Observer Pattern에 …

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 웹 컴포넌트 만들기 1편을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 웹 컴포넌트 만들기 - 1 1. 컴포넌트와 상태관리 크로스 브라우징 웹 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오는 작업(호환성 해결) 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽으로 최적화 되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기 단순하게 말하…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 7장. 인터페이스 인터페이스는 types alias로 정의된 객체 타입과 유사하지만 차별점 존재 더 읽기 쉬운 오류 메시지 더 빠른 컴파일러 성능 클래스와의 더 나은 상호 운용성 Type alias VS Interface 두 가지 모두 세미콜론과 쉼표 둘 다 가능하다. 인터페이스의 특징 속성 증가를 위해 병합이 가능하다. 클래스가 선언된 구조의 타입을 확인하는데 사용 가능하다. 일반적으로 인터페이스에서 타입 검사기가 더 빨리 작동한다. 내부적으로 더 쉽게 캐시할 수 있는 명명된 타입을 선언하기 때문이다. 이름 없는 객체 리터럴의 별칭이 아닌 이름이 있는 하나의 객체로 간주되므로 오류 메시지를 좀더 쉽게 읽을 수 있다. 읽기 전용 속성(readonly) 인터페이스에 정의된 객체의 속성을 재할당하지 못하도록 차단…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 5장. 함수 선택적 매개변수 선택적 객체 타입 속성과 유사하게 타입 애너테이션의 : 앞에 ?를 추가해 매개변수가 선택적임을 나타낼 수 있다. 선택적 매개변수는 반드시 마지막에 전달해줘야한다. 선택적 매개변수에는 기본적으로 undefined가 할당되기 때문에, 함수 내부에 유니언 타입이 추가된다. 나머지 매개변수 명시적 반환 타입 변수와 마찬가지로 타입 애너테이션을 사용해 함수의 반환 타입을 명시적으로 선언하지 않는 것이 좋다. 매개변수 목록이 끝나는 ) 다음 혹은 함수 선언의 경우 { 앞에 배치한다. 그외 반환 타입 void 함수가 어떤 값도 반환하지 않는 경우, void를 통해 반환 타입을 확인할 수 있다. 함수 타입을 선언할 때, void를 사용하면 함수에서 반환되는 모든 값이 무시된다. JS에서의 함수는…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 3장. 유니언과 리터럴 유니언(union): 값에 허용된 타입을 2개 이상의 가능한 타입으로 확장 내로잉(narrowing): 값에 허용된 타입을 하나 이상의 가능한 타입이 되지 않도록 좁히기 ⇒ 다른 프로그래밍 언어에서는 불가능하지만 TS에서는 가능한 코드 정보에 입각한 추론 유니언 주의할 점 위의 예시를 보면 유니언은 마치 ‘또는’(||) 같지만 객체의 개념에서는 한쪽이 아닌 모두 갖고 있는 프로퍼티, 메서드만 사용할 수 있기에 약간 && 느낌이 난다. ⇒ string | number을 객체의 개념으로 생각하면 이해가 되는 것 같다!!! 내로잉 말 그대로 타입을 좁힌다. 이 때, 타입 내로잉과 조건문을 함께 씀으로써 의 역할을 하게 할 수 있다. 위 말이 책에서 말하는 타입가드: “타입을 좁히는 데 사용할 …

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 1장. 자바스크립트에서 타입스크립트로 자바스크립트 다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있다. 하지만 자바스크립트는 로 충돌 가능성을 먼저 확인하지 않고 코드를 실행한다. 이런 자바스크립트의 자유는 재미를 주기도 하지만 안정성면에서는 위험 부담이 있다. JSDoc: 자바스크립트 소스 코드에 주석을 달기 위해 사용하는 마크업 언어 타입스크립트의 타입을 주듯이, JSDoc을 작성해두면 타입에 대한 힌트를 제공받을 수 있다. 그러나 잘못된 코드를 막을 수는 없다는 점 리팩터링 중 생긴 변경사항과 관련된 현재는 유효하지 않은 JSDoc 주석을 모두 찾는 건 어렵다. 다소 복잡한 객체를 설명하기 어렵다. https://poiemaweb.com/jsdoc-type-hint 타입스크립트…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 4. 콜백함수 일시: 2월 19일 22시 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제 🏀 기술책 스터디 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 3. this 일시: 2월 12일 20시 Quiz 1 p79. class의 this 생각해보기 예상 답안 test 객체 undefined - 함수로서 호출했으므로 전역 객체일 것 같지만, class는 es6에 도입되어 기본적으로 가 적용되기 때문입니다. call, apply, bind 메소드 Quiz 2 p83. 예제 3-18-(1) 예상 답안 2가지 Quiz 3 p87. 예제 3-25 1. 예상 답안 2. 예상답안 Quiz 4 p93. 개념 + p77. 예제 3-12-(2) 1, 2. 예상 답안 3. 예상 답안 🏀 기술책 스터디 Quiz 1 p79. class의 this 생각해보기…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 5. 클로저 일시: 2월 3일 20시 클로저 MDN: 함수(inner)와 그 함수가 선언될 당시(outer)의 lexical environment의 상홍관계에 따른 현상 에서 선언한 를 참조하는 를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 가 사라지지 않는(가비지 콜렝팅되지 않는) 현상 Quiz1) p119. 예제 5-3. 말로 설명해보기 bind() call, apply와의 차이 Quiz2) p127. 예제 5-8. 말로 설명해보기 Quiz3) p128. 예제 5-9. 화살표 함수로 변경해보기 public, private, protected 찾아보기 정보 은닉 = …

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 2. 실행 컨텍스트 일시: 1월 29일 19시 실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행 실행 컨텍스트 구성 방법: 전역공간, eval() 함수, 함수 구성하는 방법은 오로지 최상단의 공간(전역공간)은 코드 내부에서 별도의 실행이 없어도 브라우저가 자동으로 실행하여 전역 컨텍스트를 만든다.(anonymous) 콜 스택의 가장 위(마지막) 실행 컨텍스트가 쌓이는 순간이 현재 코드에 관여하게 되는 시점 실행 컨텍스트 객체 3형제…