티스토리

Fomagran 💻

검색하기

블로그 홈

Fomagran 💻

fomaios.tistory.com/m

- Creative Coder - iOS Develover

구독자: 99

방명록 방문하기

728x90

반응형

주요 글 목록

[Algorithm] LRU(Least Recently Used) Cache 알고리즘이란? (feat. 페이지 교체 알고리즘) 안녕하세요 Foma 입니다. 오늘은 효과적으로 메모리를 관리할 수 있는 페이지 교체 기법 중 하나인 LRU Cache 알고리즘에 대해서 다뤄 보려고 합니다. 바로 시작할게요~ Least Recently Used Cache Algorithm이란? LRU 알고리즘은 FIFO, LFU, MFU 등과 같은 페이지 교체 기법 중 하나인데요. (페이지 교체 기법에 대한 것은 여기 에서 확인해 주세요 ㅜ) 그 중에서도 가장 오랫동안 사용하지 않은 페이지를 교체하는 방법입니다. LRU Design LRU Cache 알고리즘은 오랫동안 사용하지 않은 페이지를 삭제해 주고 새롭게 사용된 페이지를 추가해 줘야 합니다. 삭제와 추가를 효율적으로 빠르게 하는 것이 핵심인데요. 즉, O(1) 시간 복잡도로 해당 기능을 수행해야 .. 공감수 1 댓글수 0 2022. 9. 22.
[Algorithm] Floyd's Cycle Detection이란? (feat. Linked List) 안녕하세요 Foma 입니다! 요새 LeetCode에서 Linked List의 사이클에 관련된 문제를 푸는데 slow, fast 포인터를 많이 이용하더라구요. 해당 풀이가 이해가 안돼서 찾아 보니 관련된 알고리즘이 있었고, 그것이 Floyd's Cycle Detection 이었습니다. 그래서 오늘은 링크드 리스트에서 사이클이 있는지 없는지를 확인할 수 있고, 해당 사이클의 시작점이 어디인지 알아낼 수 있는 Floyd's Cycle Detection 에 대해서 알아보려고 합니다. 바로 시작할게요~ Floyd's Cycle Detection 이란? 🔁 Robert W. Floyd가 고안한 리스트의 사이클을 빠르고 적은 메모리로 찾는 알고리즘입니다. (Robert W. Floyd는 플로이드 와샬 알고리즘을 만들.. 공감수 1 댓글수 2 2022. 9. 18.
[Swift] 2022 KAKAO TECH INTERNSHIP 등산코스 정하기 Problem 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Solution 해당 문제는 BFS 혹은 다익스트라를 이용하여 풀어야 하는 문제입니다. 1. 현재 경로의 최대 intensity와 현재 지점의 정보를 갖는 Node를 만들어 준다. struct Node { let current: Int let maxIntensity: Int } 2. 필요한 변수들을 세팅해 준다. answer: 가장 적은 intensity의 산봉우리와 값을 저장할 변수 connection: path의 연결된 정보를 저장할 변수 summitDic: 산봉우리를 저장할 딕셔너리 gat.. 공감수 0 댓글수 0 2022. 8. 29.
[Swift] 2022 KAKAO TECH INTERNSHIP 코딩 테스트 공부 Problem 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Solution 해당 문제는 다이나믹 프로그래밍으로 풀어야 하는 문제이다. 1. 알고력과 코딩력의 최대치를 구해준다. 문제를 모두 풀 수 있다는 것은 알고력과 코딩력의 최대치를 얻는 다는 것이므로 미리 구해준다. var maxAlp: Int = alp var maxCop: Int = cop problems.forEach { maxAlp = max(maxAlp,$0[0]) maxCop = max(maxCop,$0[1]) } 2. dp 배열을 알고력 + 1 , 코딩력 + 1개의 이중 배열을 만들어 .. 공감수 0 댓글수 0 2022. 8. 26.
[Swift] 2022 KAKAO TECH INTERNSHIP 두 큐 합 같게 만들기 Problem 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Solution 나는 이번 문제를 슬라이딩 윈도우(Sliding-Window)를 이용해서 풀었다. 1. 필요한 변수를 세팅한다. cumulativeSum: 누적합을 담을 배열 q1Length: queue1의 길이 q2Length: queue2의 길이 answer: 가장 적은 작업 횟수를 기록할 변수 start: 슬라이딩 윈도우에서 시작 지점을 가르킬 변수 var cumulativeSum: [Int] = [0] let q1Length: Int = queue1.count let q2Length: I.. 공감수 1 댓글수 0 2022. 8. 24.
[Swift] 2022 KAKAO TECH INTERNSHIP 성격 유형 검사하기 Problem 한 동안 릿코드만 풀다가 정말 오랜만에 프로그래머스를 들어갔더니 새로운 카카오 문제가 있어서 한번 풀어봤다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Solution 1. 주어진 성격 알파벳을 딕셔너리로 만들어 준다. var charDic: [Character:Int] = ["R":0,"T":0,"C":0,"F":0,"J":0,"M":0,"A":0,"N":0] 2. survey를 순회하며 choice의 값에 맞게 첫 번째 또는 두 번째 캐릭터에 값을 더해준다. 만약 choices의 i번째 값이 4보다 작다면 첫 번째 글자에 4에서 해당.. 공감수 1 댓글수 1 2022. 8. 23.
[Node.js] Prisma + MySQL 다대다 관계 만들기 (MySQL Many to Many relationship using Prisma) 안녕하세요 Foma 입니다. 요즘 채팅앱을 만들면서 유저와 채팅방의 관계를 설정해야 하는데 조금 복잡한 게 있더라구요. 간단하게 설명하면 채팅앱을 만드는데 User는 여러 채팅방을 가져야 하고, 채팅방은 여러 유저를 가지고 있는 다대다 관계를 만들고 싶었는데요. 공식 문서를 기반으로 해당 모델과 관계를 정리해 보도록 하겠습니다. 바로 시작할게요~ Model User 유저 모델은 아래와 같이 만들어 줍니다. model User { id String @id @default(uuid()) name String @unique profileImage String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } ChatRoom 채팅방 모델은 아.. 공감수 0 댓글수 0 2022. 8. 18.
[React Native] 스와이프 하면 삭제 버튼 나오는 컴포넌트 구현하기 (Swipeable Component with delete button) 안녕하세요 Foma 입니다. 오늘은 React-Native에서 컴포넌트를 스와이프 했을 때 삭제 버튼이 나오는 기능을 정리해 보려고 합니다. 바로 시작할게요~ Preview Install npm install --save react-native-gesture-handler Screen.tsx import {Swipeable, GestureHandlerRootView} from 'react-native-gesture-handler'; 오른쪽에 들어갈 Delete 버튼을 만들어 줍니다. dragX를 받아와 애니메이션을 적용하고, id에 List의 index를 받아와 버튼을 눌렀을 때 해당 index를 출력해 보겠습니다. const renderRightActions = (dragX, index) => { co.. 공감수 0 댓글수 0 2022. 8. 18.
[React Native] RTK-Query 파라미터에 맞게 특정 데이터만 불러오기(Get specific data by parameter using RTK-query) 안녕하세요 Foma 입니다. 오늘은 RTK-Query에서 파라미터에 맞게 원하는 특정 데이터를 불러오는 방법에 대해 알아보려고 합니다. 많은 삽질을 하고 결국 해결법을 알아내게 되어 글로 정리하려고 합니다. 바로 시작할게요~ 1. 첫 번째 시도 우선 제가 하려 했던건 유저를 이름으로 조회해서 데이터를 가져오는 것이었는데요. 아래와 같이 쿼리를 통해서 엔드포인트를 만들었습니다. export const userAPISlice = createApi({ reducerPath: 'userAPI', baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}), endpoints: builder => ({ ... getUserByName: builde.. 공감수 0 댓글수 0 2022. 8. 12.
[React Native] useNavigation와 useRoute 이용해서 화면 이동하고 데이터 전달하기 (Move and Pass data between two screens using Hooks) 안녕하세요 Foma 입니다. 평소에 리액트 네이티브에서 navigation을 props로 전달하는 게 너무 불편했는데요. 오늘은 React-Native에서 navigation을 props로 전달하는 것이 아닌, useNavigation과 useRoute를 만들어 줘서 화면을 이동과 함께 데이터를 전달하고 받아보도록 하겠습니다. 바로 시작할게요~ Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install @react-navigation/stack npm install react-native-safe-area-context Navigation Navigation/index.ts 기존 Pro.. 공감수 0 댓글수 0 2022. 8. 12.
[React Native] ChatApp Socket.io Room 적용하기 (feat. TypeScript) 안녕하세요 Foma 입니다. 저번 글에서 Node.js에서 Socket.io를 이용하여 Room을 만들어 보았는데요. (혹시 안보신 분들은 여기 에서 확인해 주세요!) 오늘은 백엔드 서버에서 온 데이터를 프론트에 적용해 보는 과정을 정리해 보려고 합니다. 바로 시작할게요~ Preview Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install react-native-screens npm install react-native-safe-area-context npm install socket.io-client ScreenEnums 스크린 종류를 Enum으로 만들어 놓습니다. export .. 공감수 0 댓글수 0 2022. 8. 10.
[Node.js] Socket.io로 Room 구현하기 (feat. TypeScript) 안녕하세요 Foma 입니다. 오늘은 Socket.io를 이용하여 Room을 구현해 특정 Room에 있는 유저들에게만 메세지를 보낼 수 있도록 구현해 보겠습니다. 바로 시작할게요~ Preview Install typescript, ts-node, express, socket.io 를 설치해 줍니다. npm install typescript npm install ts-node npm install express npm install socket.io npm install @types/express npm install @types/socket.io Model 메세지 모델을 만들어 줍니다. export interface Message { type: string; user: string; message: str.. 공감수 0 댓글수 0 2022. 8. 10.
[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.. 공감수 0 댓글수 0 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 보다 훨씬 효율적이므로 사용을 공식적으로 강력히 권장합니다. 그렇다면 어떤 면에서 더 효율적이라는 것 일까요? 기.. 공감수 3 댓글수 0 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 가장 먼저 카운터 인터페이스를 만들어 줍.. 공감수 0 댓글수 0 2022. 8. 4.
[React Native] Redux란? (feat. Flux) Redux란? Javascript 어플리케이션에서 상태 관리를 도와주는 라이브러리 입니다. 여기서 "상태?는 바뀌는 어떤 값들을 의미하는데요. 예를 들면 계산기에서 어떤 버튼들을 누르면 계산한 값이 계속해 달라지죠? 바로 계산한 값이 => 계산한 결과를 나타내는 상태인 것 입니다. Flux란? Redux는 Facebook의 Flux 디자인 패턴에서 유래된 것인데요. Flux는 Web 어플리케이션을 MVC 패턴으로 구현할 때 발생하는 문제들을 해결하고자 만들어 졌습니다. 그렇다면 어떠한 문제들이 발생했을까요? 기존 MVC는 아래와 같이 Model과 View가 양방향으로 데이터를 주고 받았습니다. 하지만 앱이 커지면 커질수록 Model과 View의 양방향 소통이 늘어났고, 이것은 데이터의 변경 사항을 빠르게.. 공감수 0 댓글수 0 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 파일이 생성될 거에.. 공감수 0 댓글수 0 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,.. 공감수 3 댓글수 0 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로 켜보면 아래와 같이 몇 가지 폴더와 파일이 미리 생성되어 있는 것을 볼 수 있습니.. 공감수 1 댓글수 0 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 라이브러리이기 .. 공감수 0 댓글수 0 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".. 공감수 1 댓글수 1 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는 이용되지 않으니 삭제해 줍.. 공감수 1 댓글수 0 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을 사용합니다. .. 공감수 2 댓글수 0 2022. 7. 30.
[Data Structure] Trie란? (feat. 이론) 안녕하세요 Foma 💻 입니다! 오늘은 연결된 문자열을 효율적으로 저장해 검색을 효율적으로 도와주는 자료구조인 트라이(Trie)에 대해 정리해 보려고 합니다! 바로 시작할게요~ Trie란? 트라이(trie)는 컴퓨터 과학에서 탐색 트리의 일종이다. 동적 집합이나 연관 배열을 저장하는 데 사용되는 트리 자료 구조이다. 주로 문자열이 키인 경우가 많다. 이진 탐색 트리와 달리 트리의 어떤 노드도 그 노드 자체와 연관된 키는 저장하지 않는다. 대신 노드가 트리에서 차지하는 위치가 연관된 키를 정의한다. 즉, 키의 값은 자료 구조 전체에 분산된다. 노드의 모든 자손은 노드에 연관된 문자열의 공통 접두사를 공유한다. 루트는 빈 문자열에 연관된다. - 위키 백과 - 즉, 트리 형태로 연결된 문자열을 차례로 저장하는.. 공감수 1 댓글수 0 2022. 7. 29.
[React Native] 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket) 안녕하세요 Foma 입니다. 지난 글에 Node.js로 웹소켓 서버를 구현했는데요. 오늘은 React Native에서 해당 서버를 이용하여 실시간으로 채팅을 주고받는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ (환경은 React Native CLI + Typescript 입니다.) Tutorial 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with webs.. 공감수 0 댓글수 0 2022. 7. 28.
[Node.js] 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 안녕하세요 Foma 입니다. 오늘은 Node.js에서 Websocket을 이용하여 실시간 서버를 구현해 보려고 합니다. 바로 시작할게요~ (백엔드 서버를 초기화 하는 방법은 생략하고 진행합니다. 혹시 모르시는 분들은 여기 에서 확인해 주세요!) Tutorial 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket) Install express 간단하.. 공감수 0 댓글수 0 2022. 7. 28.
[React Native] React Native + Node.js + MySQL To do list 만들기 5 - Axios 이용하여 CRUD 구현하기 (Implementing a api with Axios) 안녕하세요 Foma 입니다. 이번 글은 React Native + Node.js + MySQL 튜토리얼의 마지막 단계인 Axios를 활용하여 CRUD를 구현해 실제 서버에 API를 요청하고 데이터베이스에서 데이터를 받아오고, 생성하고, 수정하고 ,삭제하는 방법에 대해 정리하도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do lis.. 공감수 0 댓글수 0 2022. 7. 27.
[Node.js] React Native + Node.js + MySQL To do list 만들기 4 - Express로 CRUD 구현하기 (Building a CRUD API with Express) 안녕하세요 Foma 입니다. 오늘은 Node.js에서 Express 프레임워크를 활용하여 MySQL 데이터 베이스에 생성, 조회, 수정, 삭제 (CRUD) 를 구현해 보도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) React N.. 공감수 2 댓글수 0 2022. 7. 27.
[React Native] React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) 안녕하세요 Foma 입니다! 오늘은 React Native + CLI + TS로 투 두 리스트 화면을 구현하는 방법에 대해 정리해 보도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) React Native + Node.js + My.. 공감수 0 댓글수 0 2022. 7. 26.
[React Native] 함수형 컴포넌트 props 데이터에 따라 업데이트 해주기(Functional Component update on props change) 안녕하세요 Foma 입니다. 오늘은 함수형 컴포넌트에서 props가 바뀔 때마다 화면이 업데이트 되도록 하는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ Problem 아래와 같이 추가 버튼을 누르거나 수정 버튼이 눌리면 폼 형식의 모달이 뜨도록 구현 했습니다. 위 과정에서 수정 버튼을 눌렀을 땐 해당 버튼이 눌린 데이터 모델의 값이 인풋 안에 미리 작성돼도록 하고, 추가 버튼이 눌렸을 땐 빈 인풋창이 보이도록 구현하고 싶었습니다. 왼쪽이 추가(+) 버튼을 눌렀을 때, 오른쪽이 수정버튼을 눌렀을 때입니다. TodoList.tsx 위 리스트 화면에서 useState를 구현해 줍니다. const [todos, setTodos] = useState(todoDatas); const [todo, setTo.. 공감수 1 댓글수 0 2022. 7. 26.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.