TwentyTwentyOne

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 네 번째 글입니다. 이번에는 자바스크립트 라이브러리와 프레임워크에 대해 알아보겠습니다. 프론트엔드 개발에서 유명한 React, Vue, Angular를 중심으로, 각각의 특징과 장단점을 간단히 비교해보며 왜 사용하는지 알아보겠습니다.1. 자바스크립트 라이브러리와 프레임워크란?1-1. 라이브러리 vs 프레임워크라이브러리(Library): 특정 기능을 쉽게 구현하도록 도와주는 도구 모음입니다. 필요할 때 개발자가 가져다 쓰는 형태이며, 비교적 자유도가 높습니다.예: React (UI 라이브러리)프레임워크(Framework): 개발의 큰 뼈대를 제공하며, 정해진 규칙과 구조 내에서 코드를 작성합니다. 프로젝트 구조가 이미 잡혀있어 빠르게 개발할 수 있지만, 어..

https://fontawesome.com/docs/web/use-with/react-native 1. install npm i --save @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/free-regular-svg-icons cd ios && pod install

https://reactnavigation.org/docs/getting-started/ npm install --save @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack 1. NavigationContainer 로 감싸기 2. createNativeStackNavigator 3. Stack.Navigator + name + component 4.Stack.Navigator + initialRouteName + Stack.Screen 5. options={{ title: '타이틀이름' }} 6. 이동 : {navigation} + onPress={() => na..

리액트 네이티브를 공부하면서 네이티브모듈을 사용해보고 싶어졌다. 사용하기 위해서 코틀린 설정을 해봐야하는데 너무 오래걸렸다. 기록기록 네이티브 모듈을 사용하려면 모듈 생성 -> 패키지 등록 순으로 이루어진다. 먼저 react native 사이트에 있는 setting 방법으로 react-native cli 를 이용해서 프로젝트를 생성해 준다. 안드로이드 스튜디오와 xcode 등 설벙은 공식 사이트를 참고했다. https://reactnative.dev/docs/environment-setup 실행 환경은 MacOS m1 jdk 11 react-native 0.71 을 사용했다. npx react-native init 으로 프로젝트를 생성해 준다. 1. android/build.gradle 먼저 생성된 프로..

연습 겸 코드 기록으로 작성 데이터베이스는 docker 를 이용해 mariadb 컨테이너를 사용하고, 서버로는 springboot , 프론트로는 react를 사용해보기로 했다. 1. mariadb - docker 먼저 docker-desktop 이나 docker가 설치 되어있다는 가정하에 진행한다. 먼저 mariadb 이미지를 pull 받아준다. docker pull mariadb docker run으로 mariadb 컨테이너를 만들어 줍니다. docker run -dit --name=mariadb -p 3307:3306 -e MARIADB_ROOT_PASSWORD=root --restart=always mariadb docker exec 로 root 접속해 유저생성, 데이터베이스 생성, 권한을 부여해 ..

overview 리덕스의 action 과 reducer를 간단하게 정의해 놓았습니다. 이제 todolist 등록하고, delete하는 기능을 적용하기 위해 reducer를 수정해 줍니다. // src\Redux\TodoList\index.js const CREATE = "todolist/ADD"; const READ = "todolist/READ"; const UPDATE = "todolist/UPDATE"; const DELETE = "todolist/DELETE"; export const onCreate = (todoItem) => { return { type: CREATE, item: todoItem, }; }; export const onRead = () => { return { type: REA..

Overview Redux 는 기본적으로 액션 - 리듀서 - 스토어 - 상태 로 이루어져 있다고 이해하고 있다. 추가적으로 구독이나 디스패치, 미들웨어 등이 있다. 중요한 개념은 스토어에 등록된 리듀서에서 디스패치된 액션 타입 별로 상태를 변화 시켜 주는것으로 이해된다. 나는 Redux 디렉토리를 만들고 그 안에 Redux를 사용하는 프로젝트 별로 액션과 리듀서를 작성하고, CombineReducers를 index.js에 선언에 RootReducer를 Export하는 방식으로 사용할 계획을 가지고 시작한다. 1. 디렉토리 및 파일 만들기 src 디렉토리에 Redux 를 디렉토리를 만들고, 그안에 TodoList 디렉토리를 만들어 준다. 각각 index.js 파일을 만들어 준다. 그리고 webpack.co..

Overview 리액트 관련 프로젝트에서 많이 사용하는 상태 관리 라이브러리로서 Redux(리덕스)를 사용해 보면서 정리하는 글을 작성해 보고자한다. 간단한 Todo List의 상태를 Redux로 상태 관리하는 것을 통해 정리해보고자한다. 먼저, Dummy data를 통해 초기 페이지 UI를 간단하게 만들어 본다. Todo List UI 세팅 1. Data Structure TodoList에 필요한 데이터는 아이디 , 제목, 내용, 생성날짜,완료 체크 이다. 추후에 추가될수도있지만, 우선은 이포맷으로 더미 데이터 3개 정도를 만들어 준다. // ./data.js export const dummy = [ { id: 1, title: "블로그 작성", contents: "리액트 블로그 작성하기", done:..

[Project][SVG] Text를 그려보자!SVG 에는 text 태그를 이용해 원하는 text를 표현할 수 있습니다.x,y 속성을 통해서 위치를 정하고, textAnchor 나 alignmentBaseline 등으로 text를 좌표기준 정렬 시킬수 있습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text 전체 코드 // src\project\s\svg\components\text.js // modules import React, { useRef, forwardRef, useEffect, useState } from "react"; const Text = forwardRef(({ x, y, children, config = {} }, re..

[Project][SVG] Arc 를 그려보자! SVG 로 Arc를 그리기 위해서는 path를 사용해야합니다. path의 d 속성에는 여러개의 명령어가 있는데, 그중 M 과 A 를 이용해 그려보는 react 용 Arc Component를 만들어 봅니다. https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths A 명령어 원호를 그릴수 있는 명령어인 A는 A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y 로 이루어져있습니다. rx 는 x축 반지름 ry 는 y축 반지름 입니다. 큰-호-플래그 는 180도를 기준으로 중심각을 결정합니다. M 명령어 M 명령어는 Move To 호를 그릴 시작 좌표를 지정해줍니다. Arc Components Ar..