소소한 기록 방

1번 import javax.swing.*; public class Chapter9 extends JFrame { Chapter9(){ setDefaultCloseOperation(EXIT_ON_CLOSE); setTitle("Let's study Java"); setSize(400, 200); setVisible(true); } public static void main(String args[]){ new Chapter9(); } } 2번 import javax.swing.*; import java.awt.*; public class Chapter9 extends JFrame { Chapter9(){ setDefaultCloseOperation(EXIT_ON_CLOSE); setTitle("Border..

Recoil이란?리액트를 공부하면 꼭 짚고 넘어가야 하는 부분이 바로 전역 상태 관리입니다. 전역 상태 관리를 쌩(?)으로 하려면 지옥 같은 Props Drilling을 맛보게 될 겁니다. Props Drilling을 더한 상태 관리가 생긴다면, 코드를 읽을 때 props를 추적하기 굉장히 힘들어지고, 추적하다가 개발 시간을 다 잡아먹고 말 것입니다. 이러한 이유로 Redux, MobX, Context API, 오늘 알아보고자 하는 Recoil까지 다양한 상태 관리 라이브러리들을 사용합니다. 제가 가장 처음 접한 상태 관리 라이브러리는 바로 Redux였습니다. DND 포스팅 참고최근 1년간의 npm trends를 살펴보면 Redux가 압도적으로 많은 것을 알 수 있습니다. Redux는 7년이라는 역사를 ..

Hook은 최근 리액트 16.8부터 새로 도입된 기술로, Class Component에서만 사용 가능했던 state와 lifecycle을 function component에서도 사용 가능 하도록 제작됐다. 단지 Class component를 function component로 옮기는 것에서 끝난 것이 아닌, 컴포넌트의 state에 관련된 로직을 재사용 할 수 있다는 장점이 있고, 컴포넌트간의 통신을 도우는 Context API등 다양한 발전들이 이뤄졌다. React v.17 이후부턴 리액트가 공식적으로 Class component를 사용하는 것이 아닌, Functional Component를 사용하라고 권장했다. 따라서 외부 라이브러리부터 다양한 프로젝트에서도 Functional component와 ho..

React에서 HOC라고 불리는 Higher Order Component의 개념에 대해서 알아보자. 한국 말로는 고착 컴포넌트라고도 불린다. Higher Order Component는 Hook이 나오기 이전 React v.16에선 매우 중요한 개념으로 자리 잡았다. HOC와 비슷한 역할을 하는 Hook의 등장으로 중요도가 예전만큼은 아니게 되었다. HOC란? advanced technique in React forreusingcomponent logic. 컴포넌트 로직을 재 활용 할 수 있는 고급 기술 not part of the React API 리액트 API랑은 전혀 관련이 없다 a pattern that emerges from React’s compositional nature. 리액트의 컴포넌트..

React Navigation setup리액트 네이티브 공식 문서를 살펴보면, Pagination 또는 Navigation을 원한다면 React Navigation 모듈을 사용하길 권장하고 있다.다음 과정을 거쳐 나의 프로젝트에 React Navigation을 다운로드 해주었다.먼저 프로젝트에 npm install 해주었다.> npm install @react-navigation/native 그다음 나 같은 경우는 Expo CLI를 사용하는 것이 아닌, ReactNative CLI를 사용하고 있기 때문에, npm install로 새로운 dependencies를 설치해 주었다.> npm install react-native-screens react-native-safe-area-context 리액트 네이티..

리액트 네이티브는 리액트와는 다른 내장 Component 체계를 가지고 있다. Component 모두를 react-native에서 import 해와 사용 할 수 있다.Component란? 재사용이 가능한 조립 가능한 블록으로 화면에 나타나는 UI 요소를 뜻한다.이번 포스팅에선 RN에 내장 되어 있는 Component들을 이야기 해볼까 한다.View와 Textimport React, { Component } from 'react';import {View, Text} from 'react-native';class App extends Component{ render(){ return( hello world ) }}export default App;View와 T..

이번 DND 7기 활동을 시작하고 1주차를 지나고 있다. 원래 React도 제대로 학습 한 적이 없어 학습중이였는데, 프로젝트 기획 단계에서 웹이 아닌 앱으로 만들어보자는 이야기가 나왔다. 나 같은 경우 CrossFlatform Application 개발은 Flutter가 편하지만, 아무래도 팀 빌딩 단계에서 웹 프론트엔드로 맞춰졌기 때문에 테크 스택 자체가 JS나 TS에 초점이 맞춰져 있을 수 밖에 없었다.따라서 이번에 RN을 배워보고 RN을 사이드 프로젝트에 실제로 사용 해보고자 한다. Flutter와 RN이 비슷한 부분이 생각보다 많기 때문에 React와 Flutter를 섞은 느낌이라고 생각하고 개발하면 편할 거 같았다.물론 실제로 프로젝트 셋팅을 해본 결과 Flutter보다 약 10배는 어려운 프..

리액트 컴포넌트를 외부 라이브러리 없이 CSS로 스타일링 하는 방법중 가장 대중적인 방법이 Styled Components를 사용하는 방법이다. 이번 포스팅에선 Styled Components를 알아볼까 한다. CSS in JS Styled Components는 CSS in JS의 개념으로 제작된 라이브러리이다. 스타일 정의를 보통 css 파일에다가 하지만 CSS in JS는 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법을 말하는 것이다. 고전 프론트엔드의 방식은 HTML, CSS, JS를 분리하여 개발하였지만 최근 개발 패러다임은 컴포넌트들을 분리하고, 각 컴포넌트들 안에 HTML, CSS, JS를 모두 때려 박는 방식이 사용되고 있다. Styled Component 또한 이러한 방..