Fomagran 💻

본문 바로가기

728x90

[React Native] RTK-Query로 서버와 통신하기 (feat. Typescript) Install redux-toolkit npm install @reduxjs/toolkit TodoModel interface TodoModel { id: number; title: string; content: string; } Create API Slice createApi와 fetchBaseQuery를 import 해줍니다. import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'; 저는 TodoList를 기반으로 아래와 같이 만들어 주겠습니다. reducerPath: 스토어의 reducer로 지정할 Path의 이름 baseQuery: 기본으로 지정할 서버 URL tagTypes: 자동으로 데이터가 패치되게 구별할 타입 endpo.. 2022. 8. 6.

[React Native] Redux-Toolkit이란? (feat. 기존 Redux와 비교) 안녕하세요. Foma 입니다! 저번 글에서 Redux가 무엇이고 어떻게 사용하는지에 대해 다뤘었는데요. (아직 안 보신 분들은 여기 에서 보시면 됩니다!) Redux에 대해 찾아보니 Redux를 사용하기 쉽고 효율적인 Redux-Toolkit이 있더라구요. 그래서 오늘은 Redux-Toolkit이 무엇이고 왜 더 사용하기 쉽고 효율적인지에 대해 정리해 보려고 합니다. 바로 시작할게요~ Redux-Toolkit이란? Redux-Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷입니다. Redux 작성하는 코드를 간단하게 작성할 수 있고, Redux 보다 훨씬 효율적이므로 사용을 공식적으로 강력히 권장합니다. 그렇다면 어떤 면에서 더 효율적이라는 것 일까요? 기.. 2022. 8. 6.

[React Native] Redux를 이용해 Counter 앱 만들어 보기 (feat. Typescript) 안녕하세요 Foma 입니다! 이전 글에서 Redux에 대해 다뤘는데요. 오늘은 그 Redux를 이용해 간단한 Counter 앱을 만들어 보려고 합니다. 바로 시작할게요~ (환경은 React Natvie CLI, Typescript로 진행하겠습니다.) Preview Install Typescript Project Init npx react-native init "프로젝트 이름" --template react-native-template-typescript redux npm install redux react-redux npm install react-redux @types/react-native npm install @types/react-native Counter 가장 먼저 카운터 인터페이스를 만들어 줍.. 2022. 8. 4.

[React Native] Redux란? (feat. Flux) Redux란? Javascript 어플리케이션에서 상태 관리를 도와주는 라이브러리 입니다. 여기서 "상태?는 바뀌는 어떤 값들을 의미하는데요. 예를 들면 계산기에서 어떤 버튼들을 누르면 계산한 값이 계속해 달라지죠? 바로 계산한 값이 => 계산한 결과를 나타내는 상태인 것 입니다. Flux란? Redux는 Facebook의 Flux 디자인 패턴에서 유래된 것인데요. Flux는 Web 어플리케이션을 MVC 패턴으로 구현할 때 발생하는 문제들을 해결하고자 만들어 졌습니다. 그렇다면 어떠한 문제들이 발생했을까요? 기존 MVC는 아래와 같이 Model과 View가 양방향으로 데이터를 주고 받았습니다. 하지만 앱이 커지면 커질수록 Model과 View의 양방향 소통이 늘어났고, 이것은 데이터의 변경 사항을 빠르게.. 2022. 8. 3.

[Node.js] Prisma CRUD 구현해 보기 (feat Prisma Studio) 안녕하세요. Foma 입니다. 저번 글에 Prisma에 관한 내용과 사용해야 하는 이유에 대해서 정리했는데요. (혹시 안보신 분들은 여기 에서 보시면 됩니다!) 오늘은 Prisma를 이용하여 CRUD를 구현해 보도록 하겠습니다. 바로 시작할게요~ Init Prisma 빈 폴더를 만들고 npm을 초기화 해줍니다. npm init -y 그 다음 타입스크립트 prisma와 ts-node, @types/node를 설치해 줍니다. npm install prisma @prisma/client typescript ts-node @types/node --save-dev 그 다음 prisma를 아래 명령어로 초기화 해줍니다. npx prisma init 아래와 같이 자동으로 prisma 폴더와 env 파일이 생성될 거에.. 2022. 8. 2.

[Node.js] Prisma란? (feat. 사용해야 되는 이유) 안녕하세요. Foma 입니다! 지난 Sequelize, TypeORM과 같은 ORM 라이브러리에 이어서 Prisma라는 ORM 라이브러리에 대해 정리해 보려고 합니다. 바로 시작할게요~ (혹시 ORM에 대해 모르시는 분들이 있다면 여기 를 참고해 주세요!) Prisma란? 프리즈마 공식 홈페이지에선 아래와 같이 소개하고 있습니다. "우린 차세대 Node.js와 TypeScript ORM야" 아래와 같이 3가지를 제공합니다. Prisma Client: Node.js와 Typescript를 위한 자동 생성과 안전한 타입 쿼리 빌더 Prisma Migrate: 마이그레이션 시스템 Prisma Studio: 데이터 베이스의 데이터를 보고 편집할 수 있는 GUI 편집기 Prisma Client는 REST API,.. 2022. 8. 2.

[Node.js] TypeORM로 CRUD 구현해 보기 (feat. MySQL) 안녕하세요 Foma 입니다. 저번 글에서 TypeORM이 무엇인지에 대해 다뤄 보았는데요. 이번 글에선 TypeORM으로 생성, 조회, 삭제, 수정을 다뤄보는 법에 대해서 작성해 보려고 합니다. 바로 시작할게요~ Init TypeORM 우선 typeORM을 사용하기 위해선 생성할 프로젝트 폴더에 typeorm 모듈을 설치해 주셔야 합니다. npm install typeorm -g 아래와 같이 typeorm 프로젝트를 생성해 줍니다. typeorm init --name 프로젝트 이름 --database 사용할 데이터베이스 그러면 아래와 같이 해당 경로에 프로젝트가 생성된 것을 볼 수 있을거에요. 해당 프로젝트를 VSCode로 켜보면 아래와 같이 몇 가지 폴더와 파일이 미리 생성되어 있는 것을 볼 수 있습니.. 2022. 8. 2.

[Node.js] TypeORM이란? (feat. ORM Library) 안녕하세요 Foma 입니다! 오늘은 저번 글 Sequelize에 이어서 Node.js ORM 라이브러리인 TypeORM에 대해서 다뤄보려고 합니다. 평소에 Typescript로 개발하는 것을 선호하기 때문에 "Sequelize를 Typescript로 개발할 수 있나?" 하고 찾아봤더니 Typescript 기반으론 TypeORM 라이브러리를 많이 사용하는 것 같더라구요. (물론 Sequlize도 Typescript를 지원합니다. 여기 에서 확인하실 수 있습니다.) 그래서 오늘은 TypeORM이 무엇인지에 대해 정리해 보려고 합니다. 바로 시작할게요~ ORM이란? 먼저 Sequelize를 알기 위해서 ORM의 개념을 알아야 하는데요. 그 이유는 바로 Sequelize가 Node.js의 ORM 라이브러리이기 .. 2022. 8. 2.

[iOS/UI] 특정 부분만 투명하게 만들기 (feat. fillRule, evenOdd) 안녕하세요 Foma 입니다! 오늘은 프로젝트 진행 중에 특정 부분만 투명하게 해서 그 부분만 보이게 하는 기능을 만드는 법에 대해 정리해 보려고 합니다. 바로 시작할게요~ Preview Add a label 배경에 레이블을 하나 넣어 투명한지 아닌지 확인하기 쉽게 만들어 주겠습니다. let label = UILabel(frame: CGRect(x: view.center.x - 100, y: view.center.y - 100, width: 200, height: 200)) label.backgroundColor = .systemBlue label.textColor = .white label.font = UIFont.boldSystemFont(ofSize: 20) label.text = "Fomagran".. 2022. 7. 31.

[Node.js] Sequelize로 C.R.U.D 구현해 보기 (feat. MySQL) 안녕하세요 Foma 입니다! 오늘은 저번 Sequelize 이론 글에 이어서 C.R.U.D를 직접 구현해 보도록 하겠습니다. (혹시 저번 글을 안보신 분들을 여기 에서 확인해 주세요) 바로 시작할게요~ Install express npm install --save express cors npm install --save cors sequelize npm install --save sequelize mysql2 npm install --save mysql2 Sequelize init sequelize init Sequelize를 init 해주면 자동으로 config, migrations, models, seeders 이렇게 4개의 폴더가 생길거에요. 이번 글에서는 seeders는 이용되지 않으니 삭제해 줍.. 2022. 7. 30.

[Node.js] Sequelize란? (feat. ORM) 안녕하세요 Foma 입니다! 평소에 SQL문을 작성하는데 익숙하지 않아 불편한 점이 많았었는데요. 객체 지향적인 코드로 SQL문 작성 대신 관계형 데이터 베이스 조작을 도와주는 라이브러리인 Sequelize에 대해 알아보려고 합니다. 바로 시작할게요~ ORM이란? 먼저 Sequelize를 알기 위해서 ORM의 개념을 알아야 하는데요. 그 이유는 바로 Sequelize가 Node.js의 ORM 라이브러리이기 때문이죠. ORM은 Object Relational Mapping의 줄임말로 객체와 관계를 매핑해주는 것 입니다. 좀 더 구체적으로 객체와 관계를 매핑해준다는 게 어떤 것일까요? 예를 들면 객체 지향 언어에서는 모델을 정의할 때 Class를 사용하고, 관계형 데이터 베이스에선 Table을 사용합니다. .. 2022. 7. 30.

[Data Structure] Trie란? (feat. 이론) 안녕하세요 Foma 💻 입니다! 오늘은 연결된 문자열을 효율적으로 저장해 검색을 효율적으로 도와주는 자료구조인 트라이(Trie)에 대해 정리해 보려고 합니다! 바로 시작할게요~ Trie란? 트라이(trie)는 컴퓨터 과학에서 탐색 트리의 일종이다. 동적 집합이나 연관 배열을 저장하는 데 사용되는 트리 자료 구조이다. 주로 문자열이 키인 경우가 많다. 이진 탐색 트리와 달리 트리의 어떤 노드도 그 노드 자체와 연관된 키는 저장하지 않는다. 대신 노드가 트리에서 차지하는 위치가 연관된 키를 정의한다. 즉, 키의 값은 자료 구조 전체에 분산된다. 노드의 모든 자손은 노드에 연관된 문자열의 공통 접두사를 공유한다. 루트는 빈 문자열에 연관된다. - 위키 백과 - 즉, 트리 형태로 연결된 문자열을 차례로 저장하는.. 2022. 7. 29.

이전 1 2 3 4 5 ··· 49 다음

728x90

티스토리툴바