react

해당 글에서는 React를 사용한다면 요즘 필수적으로 사용이 되는 React 웹 프레임워크인 next.js에 대해서 이해하고 왜 사용해야 하는지에 대해 공유합니다. 1) 웹 프레임워크의 동향 💡 웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 ‘React’는 CSR(Client Side Rendering) 방식으로 동작을 합니다. 이에 동작 방법에 대해서 여러 가지 단점을 많이 가지고 있습니다. 그렇기에 CRS 방식과 SSR 방식의 각각의 장점을 유지하는 Next.js에 대해서 이해를 돕기 위한 글입니다. (* SSR , CSR 방식에 대한 설명은 하단에 준비되었습니다) 💡 2021년 / 2022년 Stack Overflow에서 조사한 웹 프레임워크 선호도 조사입니다. - 2021년에 React.js는..

해당 글에서는 '데이터 바인딩'에 대해서 이해를 하고, 더 나아가서 '단방향/양방향 데이터 바인딩'에 대해 이해하기 위한 글입니다. 1) 데이터 바인딩(Data Binding)이란? 💡 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미합니다. 💡 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다. [ 간단한 예제 - 1 ] 값을 데이터 바인딩한다. 💡 아래의 예제는 함수형 컴포넌트 안에서 ‘initData’로 초기화 한 값..

해당 글은 React의 ‘함수형 컴포넌트’의 ‘생명주기’를 이해하기 위한 글입니다. 💡 [참고] 이전에 작성한 ‘클래스 컴포넌트의 생명주기'를 이해하고 오시면 더 쉽게 이해가 가능합니다 [React] 클래스 컴포넌트 생명주기(lifecycle) 해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다. 1) React의 생명주기 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니 adjh54.tistory.com 1) 함수형 컴포넌트 생명주기 💡 함수형 컴포넌트는 React Hook 이라고도 하며 React 16.8 버전 이후부터 React 요소로 추가가 되었으며, 해당 글에서는 React 17 이상 버전을 기준으로 작성..

해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다. 1) React의 생명주기 용어 용어 설명 ~ will 어떤 '작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니다. ~ did 어떤' 작업을 수행한 이후'에 실행되는 메서드와 관련된 용어입니다. mount 컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타는 메서드와 관련된 용어입니다. unmount 컴포넌트 내에서 'DOM을 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련된 용어입니다. update 컴포넌트 내에서 '변화'가 발생하였을때 수행하는것을 의미합니다. ex) props, state, 부모 컴포넌트의 리 렌더링, forceUpdate를 통해 강제로 변경하는 경우 2) Re..

해당 글은 React-native 내에서 AppState 라이브러리를 적용하는 사용법을 설명한 글입니다.1) 문제점💡 프로젝트를 진행하는 도중에 안드로이드 디바이스에서 홈 버튼을 눌렀다가 다시 앱으로 돌아오는 경우 아래와 같은 문제점이 발생하였습니다. ​해당 문제는 TensorCamera(expo-camera)를 사용하고 있는데, 앱을 벗어나는 경우에 'Unmount'를 수행하지 않고 나가고 다시 돌아온 경우에 발생하는 오류로 판단이 되었습니다.parameter specified as non-null is null: method kotlin.o0.d.t.e, parameter settings                         2) 해결책💡 이는 사용자가 앱을 벗어나는 경우에 TensorCam..

해당 글의 목적은 React Native 개발을 하기에 앞서서, React Native에 대한 정의와 개발 방식(expo-cli / react-natvie-cli)에 대해 장단점을 알고 선택을 돕기 위한 목적으로 작성한 글입니다. 1) React Native 💡 React Native 란? - 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. - JavsScript로 개발하며 IOS나 Andriod, Web, UWP에 대한 모바일앱을 동시에 개발을 할 수 있는 크로스 플랫폼입니다. [ 더 알아보기 ] 💡 크로스 플랫폼(Cross Platform)이란? - 여러 플랫폼에서 동작하는 애플리케이션 개발 방법을 의미합니다. 하나의 코드로 여러 플랫폼에 대응할 수 있으며, 개발 비..

해당 글은 자바스크립트 라이브러리 'Prettier'에 대해서 이해하고 환경설정을 하기 위한 목적으로 작성된 글입니다. 1) Prettier 이해하기 💡 Prettier는 코드를 읽어 들여서 사용자가 지정한 '옵션'에 따라 코드를 다시 포맷팅(정렬)하는 "코드 포맷터"입니다. 코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와는 성격이 다릅니다 Prettier 지원 언어들 * JavaScript (including experimental features) * JSX * Angular * Vue * Flow * TypeScript * CSS, Less, and SCSS * HTML * JSON * GraphQL * Markdown, including GFM and MDX *..

웹 상에 캔버스를 통해서 그림, 도형들을 그리는 동작들을 해주는 KonvaJS를 이해하기 위한 목적이며, 해당 작성글은 초기 구조 이해와 용어에 대해 익히기 위한 목적임. 1) KonvaJS 구조 이해 1. KonvaJS 정의 💡 Konva는 HTML5 2D Context를 확장한 Canvas JavaScript framework입니다. Konva는 또한 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 제공해줍니다 2. Konva 구조 💡Stage, Layer, Group, Shape는 HTML 페이지 내의 가상의 DOM 노드로 구성이 되어서 화면상에 그려집니다. 💡 대략적인 구조는 Stage안에 각각에 Layer를 가지고, 그 안에 Gr..