react

  • Web Programming

    NodeJS 와 Angular, React 앱 연동

    안녕하세요, 씨앤텍시스템즈 황순호 연구원입니다. 이번 포스트는 Angular와 React로 빌드된 페이지를 NodeJS에서 사용자에게 제공할 수 있는 방법에 대해 작성하도록 하겠습니다. ※ 사전에 NodeJS가 설치되어 있어야 합니다. NodeJS를 설치하면 npm도 같이 설치되며 명령어를 이용한 Angular와 React 프로젝트 생성이 가능해집니다. 1. Angular 또는 React 프로젝트 생성 먼저 Angular 프로젝트부터 생성을 해보겠습니다. 저는 바탕화면에 프로젝트들을 담을 project 폴더를 생성하고 windows cmd창을 이용해 해당 폴더로 이동 후 진행하겠습니다. 프로젝트 생성을 위해 angular-cli 패키지를 설치합니다. npm i -g @angular/cli 다음 명령어를 ..

  • Web Programming/React

    React 3. Redux, Redux Toolkit - Global UI Component 만들기

    안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 지난 글에서는 리스트 스타일링까지 진행했습니다. 이번 글에서는 redux에 대해 기본적인 내용을 살펴본 후, Redux를 사용하여 리스트의 데이터를 store에 저장하여 사용해 보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 Redux 시작하기 Redux React Redux Redux Toolkit Redux를 사용하여 global component list 만들기 수정 버튼 추가 모달 컴포넌트 생성 슬라이스 작성 스토어 연결..

  • Web Programming/React

    React 2. Emotion를 이용한 React component 스타일링 (with. CSS-in-JS)

    안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이 글에서는 저번 글에서 만든 List 컴포넌트에 스타일을 적용시켜보려고 합니다. html 문서에 css 스타일 코드를 추가하는 것처럼 css 파일을 연결할 수도 있지만 js 파일 안에서 컴포넌트에 바로 스타일을 적용시키거나, 스타일이 적용되어 있는 라이브러리에서 컴포넌트를 가져와 사용할 수도 있습니다. 아래 글에서 여러 방법들에 대해 하나씩 살펴보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 CSS-in-JS Emotion 마..

  • Web Programming/React

    React 1. Component 렌더링

    안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이 글에서는 React를 사용하면서 한 번은 들어본 함수형 컴포넌트와 클래스형 컴포넌트를 만들고 화면에 컴포넌트가 렌더링 되는 과정에 대해 하나씩 알아보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 컴포넌트 렌더링 React 컴포넌트의 라이프 사이클 마무리 1. 컴포넌트 렌더링 우선, 리액트는 v18부터 ReactDOM.render를 더 이상 사용하지 않고 createRoot를 사용하여 root 엘리먼트에서 render 메서드를..

  • Web Programming/React

    React 란?

    안녕하세요 씨앤텍시스템즈 박선희 연구원입니다. 이번 포스트는 React 에 대해 알아보는 시간을 가져보고자 합니다. 1. 리액트란? 2. 리액트는 왜 만들여졌을까? 3. 리액트 구성요소 1. 리액트란? 리액트는 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용됩니다. 컴포넌트 기반으로 동적인 UI를 만들 때 사용되며 데이터가 변경됨에 따라 필요한 컴포넌트만 갱신되고 렌더링 됩니다. 페이스북과 개별 개발자 및 공동체에 의해 개발과 유지보수가 되고 있습니다. 요즘 프론트 개발에 많이 사용되는 Vue, Angular와 동일하게 SPA 개발에 사용될 수 있습니다. 언어는 JSX, JS 그리고 HTML을 사용합니다. 리액트는 라우팅, API 통신 등의 기능을 기본적으로 제공하지 않아 추가 라이..

  • Web Programming/Angular

    Angular란?

    안녕하세요 씨앤텍 시스템즈의 김준형입니다. 이번 포스트는 Angular에 대해서 정리해 보았습니다. 오늘날 JAVA를 이용한 시스템 개발에 많이 사용되는 프레임워크인 Angular는 2009년 Google의 직원인 Miskio Hevery의 개인 프로젝트에서 출발했습니다. 개인 차원에서 시작한 프로젝트였지만 초기 아이디어에 대한 반응이 좋아서 현재는 구글의 공식 지원 프로젝트가 되었습니다. 그렇다면 Angular의 인기는 어떻게 될까요?? 확실히 Vue.js와 React와는 차이가 있는 모습입니다. Vue.js, React, Angular 중 개발 난이도는 어떻게 될까요? Vue.js