[21일] JS 실행컨텍스트

실행컨텍스트 ? 실행할 코드에 제공할 환경정보를 모아놓은 객체 이다. 자바스크립트에서는 실행 컨텍스트가 활성화되는 시점에 호이스팅, 외부환경정보를 구성, this값을 설정 하게되는 특징이있어 다른언어와 차이를보인다. 함수가 실행됬을때 call stack 에 실행 컨텍스트 객체들이 순차적으로쌓이게됨. 참고자료 * https://charming-kyu.tistory.com/19 실행컨텍스트 객체 ? 해당 컨텍스트 관련된 코드를 실행하는데 필요한 환경정보를 가지고있다. variableEnvironment 현재 컨텍스트 내의 식별자 정보 외부 환경 정보 선언 시점 lexicalEnvironment 의 snapshot 찍고 유지함 lexicalEnvironment variableEnvironment 동일하나 변경..

• format_list_bulleted JavaScript
• · 2022. 11. 29.
• textsms

[16일차] SPA

현재프로젝트를 진행하는중인데, 전체적으로 페이지가 완료되서 팀원들 페이지 모아서 SPA 를 구현하려고 전체적으로 내용을 살펴봤다 현재까지는 팀원분들 과 조율해서 제공받은 스니펫으로 하는데 시간이 남는다면 마지막으로 html 파일로 route를 구성하지않고 js로 구성하도록 리팩토링해야겠다. https://velog.io/@tlatjdgh3778/Vanilla-JavaScript%EB%A1%9C-SPA%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 Vanilla JavaScript로 SPA구현하기 Vanilla JavaScript로 SPA구현하기 > 본 포스트는 [ dcode - YOUTUBE](https://www.youtube.com/watch?v=6BozpmSjk-Y&t=1009s)..

• format_list_bulleted JavaScript
• · 2022. 11. 21.
• textsms

[13일차] 리액트 HOC

HOC ? Higher-Order-Component 고차컴포넌트라 부른다. 고차컴포넌트는 컴포넌트 로직을 재사용하기위해서 사용된다. 컴포넌트를 가져와서 새컴포넌트를 반환하는 함수이다. 주의사항 render 메서드 안에서 고차 컴포넌트를 사용하면안된다. 정적 메서드는 따로 복사해야된다. ref는 전달되지않는다. 참고자료 https://velopert.com/3537 https://jeonghwan-kim.github.io/2022/05/28/react-high-order-component Controlled Component 엘리먼트를 가지고있는 컴포넌트가 관리함 대표적으로 등이있다. Uncontrolled Component 엘리먼트의 상태를 관리하지않고 , 엘리먼트의 참조만 컴포넌트가 소유 참고자료 ht..

• format_list_bulleted React
• · 2022. 11. 16.
• textsms

[12일차] React Component Styling

css,sass css, sass 를 리액트 create-app 에서의 import 하는 방식은 전역적으로 순서대로 불러오게된다. 여러가지 스타일 들이 순서대로 전역적으로 불러오게됨 이런전역적으로 적용되는 스타일들이 react처럼 기능별로 분리하는 성격과 맞지않는다 생각하게됬고 , 이를 보안하기위해 css module 이나 styled-components 등이 등장했다. css module, sass module ,styled-components className 의 중복을 막아주고 로직을 분리해서 재사용성을 높이고 유지보수에 용이하다는 장점이있다. react의 부모 컴포넌트의 css 가 자녀에 적용이되서 side effect 발생확률이 높아진다. 하지만 리액트처럼 기능분리가 확실치 않은 프로젝트에 경우..

• format_list_bulleted React
• · 2022. 11. 15.
• textsms

리액트를 다루는 기술 13장

1. 라우팅이란 ? 웹앱에서의 라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는것을 의미한다. 여기서 여러페이지로 구성된 웹페이지에서 페이지별로 컴포넌트를 분리해가며 프로젝트를 관리하기위해 필요한것이 라우팅 시스템이다. 우리는 React-Router 를 사용해서 예제를 해보자 2. 싱글 페이지 어플리케이션이란? 말그대로 한개의 페이지로 이루어진 어플리케이션 이다. 기술적으로는 한페이지만 존재하는것이지만, 사용자는 여러 페이지가 존재하는것처럼 느낀다. React-Router 는 링크를눌르면 브라우저에 History API 를 사용해 주소창 값만 변경하고 기존 페이지의 웹 어플리케이션은 유지 하면서 라우팅설정에따른 다른 페이지를 보여주는 방식이다. 3. 리액트 라우터 적용 및 사용법 3.1 프..

• format_list_bulleted React
• · 2022. 7. 28.
• textsms

리액트를 다루는 기술 13장 리액트 라우터로 SPA 개발하기 v5 -> v6 이슈

리액트를 다루는 기술 책에서 13장 라우터 부분에대해서 React-Router 버전업데이트로 인한 이슈가있다. 예제를 살펴보면 구버전에서 동작하는 코드들이기에 최신버전의 React-Router를 사용하게되면 동작하지 않을것이다. 코드가 틀린줄알고 여러번 보면서 확인했으나 결국 구버전 코드를 사용하여 동작을하지않는것이였다. 아래 링크를 통해서 공식사이트에서 버전업에대한 문서가 존재한다 근데 처음배우는사람은 공식문서를 읽고 이해하기힘들것이다. https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5 React Router | Upgrading from v5 Declarative routing for React apps at any scale rea..

• format_list_bulleted React
• · 2022. 7. 27.
• textsms