blog
Code Factory Blog
프로그래밍을 쉽게
플러터의 새로운 여정 Dart 3.0!
서론 Dart언어 드디어 3.0! Dart 언어는 지난 몇 년간 모바일 및 웹 개발에서 주목할만한 성장을 이루었습니다. 구글의 플러터 프레임워크에서 주로 사용되는 언어로, Dart 언어는 크로스 플랫폼 개발에서 핵심적인 역할을 하게 되었습니다. Dart 3.0이 출시되면서 개발자 커뮤니티는 새로운 기능, 개선된 성능, 그리고 더욱 강화된 안정성을 경험할 수 있게 되었습니다. 이 글은 Dart 언어를 이미 사용하고 있지만, 3.0 업데이트의 구체적인 내용을 아직 파악하지 못한...
플러터에서의 Immutable Programming: copyWith 함수 마스터하기!
서론 불변 프로그래밍: 현대 개발의 핵심 현대 소프트웨어 개발에서 불변 프로그래밍(Immutable Programming)의 중요성은 간과할 수 없는 요소입니다. 플러터(Flutter)에서도 마찬가지로 불변 프로그래밍 개념이 매우 중요하며, copyWith 함수는 이러한 불변성을 유지하는 데 핵심적인 역할을 합니다. 이 글에서는 플러터를 배우기 시작하는 개발자들에게 불변 프로그래밍의 중요성을 강조하고, copyWith 함수의 역할과 사용 방법에 대해 설명 해보겠습니다!...
ChatGPT가 이야기하는 2024년 개발자 로드맵
서론 개발자의 여정을 시작하며 안녕하세요, 미래의 개발자 여러분! 오늘부터 시작하는 여러분의 개발 여정에 함께할 수 있어서 기쁩니다. 2023년은 기술이 매우 빠르게 변화하는 해였으며, 이러한 변화 속에서 개발자가 되기 위한 길은 더욱 다채롭고 흥미로워졌습니다. 이 로드맵은 초보자인 여러분이 개발의 세계에 첫발을 내딛는 데 필요한 기초부터 시작해, 점차 심화 단계로 나아가는 길을 안내해 드릴 것입니다. 백엔드 개발 이 글은 단순히 기술을 배우는 것 이상의 의미를 가집니다....
Flutter Freezed 플러그인! Entity Code Generation은 이거 하나로 끝!
https://youtu.be/i5p6wXLAX7I 서론 Flutter 는 Code Generation 기능이 상당히 많이 활성화되어 있어요. 흔히들 많이 사용하는 json_serializable 라이브러리도 있고 retrofit 및 chopper 라이브러리도 있습니다. 오늘 알려드릴 freezed 또한 데이터 클래스에 편의 기능들을 제공해주는 code generation 라이브러리입니다. Freezed vs Json Serializable Code Generation 이라는...
Flutter Equatable 플러그인, 도대체 어디에 쓰는건가요?
https://youtu.be/9-FGJHTRRW0 서론 안녕하세요 코드팩토리입니다. 오늘은 Equatable 플러그인 사용법에대한 강의를 가져왔어요. 외부 플러그인들을 보거나 튜토리얼을 보면 클래스들이 Equatable 부모 클래스를 익스텐드하는걸 자주 볼 수 있는데 커뮤니티에서도 종종 질문이 들어와서 왜 Equatable 플러그인을 사용해야하는지 설명을 해보려고 합니다. Equatable 이란? Equatable 플러그인은 한 인스턴스와 다른 인스턴스가 같은 인스턴스인지...
Flutter 2.0 새로운 AdMob 플러그인 Google Mobile Ads 사용법! (Banner Ads)
https://youtu.be/NqorHLdqyV4 Google Mobile Ads? 기존에 Flutter 에서는 firebase_admob 이라는 플러그인으로 Admob 설정을 했었어요. 이 Admob 플러그인을 사용해보신 분들은 모두 느끼셨겠지만 단점이 정말 많습니다. 여러 단점중 가장 유저들이 불편해 했던건 Flutter 의 위젯 형태로 광고가 들어가는게 아니라 ListView 같은 곳에 배너를 추가할수가 없었어요. 하지만...
Flutter 2.0 Buttons V2
https://youtu.be/gnxd61VRqvg 새로운 버튼! Flutter 2.0 업데이트가 되면서 버튼 위젯이 크게 업데이트 되었습니다. 기존에는 버튼을 사용하려면 FlatButton, OutlineButton, RaisedButton 중 하나를 사용하는게 일반적이었는데 이 버튼들이 1.25버전 기준으로 deprecate 되면서 TextButton, OutlinedButton, ElevatedButton 을 사용해야되게 변경이...
Flutter 2.0 FVM 으로 여러개의 Flutter 버전 관리하기
https://youtu.be/lSzUABa4OTI Flutter 2.0! 어제 Flutter 2.0 버전 및 Dart 2.12 버전에서 추가된 Null Safety 기능에 대해 말씀 드렸었습니다. 이번시간에는 Flutter 2.0 에서 추가된 버튼들의 기능을 정리하면서 FVM 이라는 편리한 라이브러리를 알게되서 FVM에 대해 먼저 알려드리려고 해요! FVM 이란? FVM 은 Flutter Version Management 의 약자입니다. nodeJS 를 서버로 사용해보신...
Flutter 2.0 Null Safety
https://youtu.be/lNUcJXtyeUE Flutter 2.0! 2021년 3월 4일 기준으로 드디어 Flutter 2.0 버전이 Stable Channel 에 머지가 되었습니다. 머지된 pull request 리스트를 보면 정말 어마어마하게 많은 새로운 기능들이 머지가 된것을 볼 수 있는데 Flutter 개발자들이 오랫동안 요구해왔던 기능들이 머지가 되어서 업데이트 사항을 공부하며 목요일을 정말 힘차게 보낼 수 있는 원동력이 될 것 같습니다. 모든 업데이트 사항을...
플러터로 화투 카드 뒤집는 애니메이션 만들기
https://youtu.be/z961uSZ3G5E 강의 소개 안녕하세요 코드팩토리입니다! 제가 최근에 타짜라는 영화를 봤는데요 섯다를 치는 신세경이er 로 화투 카드 뒤집는 애니메이션을 만들어보려고 합니다. 이미지 다운로드 자 일단은 아래 이미지들을 다운받아 주세요. 위부터 아래로 각각 화투의 뒷면, 3광, 8광입니다. 이 카드를 렌더링하는 함수를 먼저 작성 해보겠습니다. renderCard({ @required Key key, bool isBack = true, bool...
Flutter Form 으로 손쉽게 여러개의 텍스트필드 상태관리하기!
https://youtu.be/V4xk4pmzY2I 서론 Flutter 에서 기본적으로 TextField 입력을 받으려면 기본적으로 TextEditingController 를 사용해야 합니다. TextField 가 하나면 괜찮지만 여러개가 되면 될수록 컨트롤러 관리가 굉장히 어려워지죠. 하지만 TextFormField 라는 TextField 의 살짝 변형된 위젯을 이용하면...
Flutter 로 Hermes 애플워치 페이스 그려보기
https://youtu.be/hBq4bqNpcDA 서론 이번 시간에는 Flutter 의 매우 강력한 기능중 하나인 Custom Painter 에 대해 배워보도록 하겠습니다. 연습으로 아래 Apple Watch Hermes 에디션의 워치 페이스를 그려보도록 하겠습니다. 아 전 물론 Hermes 에디션이 없습니다. 없으니 그려서라도 갖어보려구요. Youtube https://www.youtube.com/embed/hBq4bqNpcDA Custom Paint Init...
Flutter 로 커스텀 키보드 구현하기 feat. 카카오뱅크
서론 오늘은 Flutter 로 커스텀 키보드를 만들어보려고 합니다. 특수한 상황이 아닌 경우 각 OS 에서 제공해주는 기본 키보드의 기능이 충분하지만 만약에 특수한 키보드를 사용해서 UI/UX 를 대폭 증진 시킬 수 있다면 직접 키보드를 제작해야하는 상황이 올 수도 있습니다. 예를들면 금융 앱에서 숫자를 입력할때라던가 캘린더 앱에서 날짜를 쉽게 지정할 수 있도록 해야할때가 해당되죠. 연습으로 카카오뱅크의 이체금액 입력 키보드를 카피 해보도록 하겠습니다. Youtube 영상...
2020년 배워볼만한 프레임워크
오늘은 2020년도에 배워볼만한 프레임워크와 라이브러리들에 대해 이야기 해보도록 하겠습니다. 10년정도 전만 하여도 프론트엔드의 영역은 현재처럼 복잡하지 않았습니다. 지금처럼 수많은 사이즈의 스크린을 서포트 할 필요도 없었고, SPA 따윈 존재하지도 않았으며 UI/UX 편의성에 대한 유저들의 기대치가 현대처럼 높지도 않았습니다. 하지만 아이폰의 출시와 함께 프론트 엔드 개발자들의 지옥이 시작되었고 언어 매년 성장이 가장 빠른 언어중 하나인 Javascript를 사용하여...
![[#2] 라우팅 및 ElectronJS 고유기능들](https://i0.wp.com/www.enkis.co.kr/wp-content/uploads/2024/01/Electron.png?resize=400%2C250&ssl=1)
[#2] 라우팅 및 ElectronJS 고유기능들
1편을 읽으신분은 다들 느끼셨겠지만 ElectronJS는 웹앱을 데스크톱앱으로 컴파일해주는 컴파일러에 더 가깝습니다. ReactJS를 잘 다루시는 분들은 1편만 보고도 ElectronJS에대한 이해도가 상당히 올라오셨을겁니다. 이번편에서 다룰 내용은 ReactJS를 웹에서 사용했을때와 ElectronJS로 컴파일해서 데스크톱앱으로 사용했을때 다른점인 “라우팅”과 ElectronJS 고유 기능들입니다. 먼저 라우팅을 시작해볼텐데 ReactJS를 웹으로 사용할때와 다른점은...
[#1] 프로젝트 세팅하기
이번 튜토리얼 시리즈는 React, ElectronJS, Typescript, Material UI, React Router를 사용해서 크로스 플랫폼 데스크톱 앱을 제작해보도록 하겠습니다. 필수지식 Javascript 기본기. 모든 라이브러리들이 Javascript 기반이므로 Javascript에대한 기본 지식은 갖추셔야 합니다. React 기본지식. React에대해 상세히 알아보는 시간은 다른 튜토리얼에서 갖도록 하겠습니다. 기본적으로 Create React App을 사용해...
![[#8] React Front 및 Redis 작업하기](https://i0.wp.com/www.enkis.co.kr/wp-content/uploads/2024/01/Docker-부터-Kubernetes-까지.png?resize=400%2C250&ssl=1)
[#8] React Front 및 Redis 작업하기
이번 글에서는 React Front 와 Redis 작업을 하여 Docker Compose 에 대한 작업을 마무리 해보도록 하겠습니다. 빠른 개발과 편의성을 위해 create-react-app 을 사용하도록 하겠습니다. create-react-app 에대한 정보는 아래 링크를 참조해주시면 되겠습니다. Create React App 프로젝트 루트 디렉터리에 터미널을 실행해주시고 npm init react-app reactfront 를 실행해주세요. 커맨드 실행이 완료되면 저희...
크로스플랫폼 앱 개발, 어떤 프레임워크를 사용해야 하나?
https://youtu.be/nyHIau1shc0 오늘은 앱 크로스 플랫폼에서 현재 가장 많이 사용되는 React Native와 구글의 야심작인 Flutter를 비교해보는 시간을 갖도록 해보겠습니다. 왜 크로스 플랫폼 앱을 개발할까요? 기업의 규모가 굉장히 크고 많은 엔지니어들을 고용할 수 있다면 네이티브 앱 개발을 진행하는 것도 좋은 방법입니다. 각 OS 별 고유의 기능들을 모두 활용하며 크로스 플랫폼 개발에서 생기는 추가적 버그 및 기술적 문제를 최소화할 수 있기...
GraphQL 5분만에 이해하기
가볍게 RESTful API가 익숙하신 분들에게 GraphQL에대해 설명해드리는 글을 하나 작성해보려고 합니다. GraphQL이란 무엇인가? GraphQL은 RESTful API와 비교했을때 Response를 효율적으로 받아오는데에 공을 많이 들인 아키텍쳐입니다. RESTful API의 경우 효율적으로 설계할경우 일반적으로 한 페이지를 디스플레이하는데 필요한 데이터를 가져올때 여러번의 반복적인 서버-클라이언트 요청이 있어야하지만 GraphQL은 그런 불필요한 오버헤드를 말끔히...
로마 숫자 Integer 로 변형하기
오늘은 일상에도 쓰일법한 로마 숫자 Integer로 변형하기 알고리즘에 대해 알아보도록 하겠습니다. 문제 로마 숫자가 주어졌을 때 Integer로 변경을 하는 문제입니다. 로마 숫자 테이블은 아래와 같습니다. 심볼 값 I 1 V 5 X 10 L 50 C 100 D 500 M 1000ShellScript 다만 예외가 몇 가지 있습니다. V의 경우 5를 리턴하면 되지만 IV의 경우 4를 리턴해야 하고 IX의 경우 9를 리턴해야 합니다. 또한 XL의 경우 40, XC의 경우 90이...
Palindrome 숫자 찾기
오늘은 앞으로 읽어도 뒤로 읽어도 똑같은 Palindrome Integer를 확인하는 방법에 대해 알아보도록 하겠습니다. 문제 함수에 x 파라미터가 Integer 값일 때 이 값이 Palindrome 인지 여부를 Boolean으로 리턴하는 문제입니다. 예를 들면 아래와 같은 아웃풋이 나오면 되겠습니다. Input: 121 Output: true Input: -121 Output: false Input: 10 Output: falseShellScript 여기서 주의해아할 점은...
두 숫자의 덧셈
오늘은 간단한 알고리즘 “두 숫자의 덧셈"에 대해 알아보도록 하겠습니다. 문제 문제는 심플합니다. 함수의 파라미터에 두 변수를 입력받는데 첫 번째 nums 파라미터는 array를 받고 두 번째 target 파라미터는 숫자를 받습니다. 알고리즘의 목표는 nums array에 존재하는 숫자 두 개를 더하여 target 숫자를 만들어낼 수 있는 값들의 인덱스를 리턴해주면 됩니다. 예를 들어 아래와 같이 변수가 지정되었을 때 const nums = [2, 7, 11, 15];...
반복없는 가장 긴 substring 의 길이 구하기
오늘은 String 내에서 반복이 없는 가장 긴 Substring의 길이 구하는 법에 대해 알아보도록 하겠습니다. 문제 String인 s 변수가 함수의 파라미터로 주어질 때 s의 substring 중 가장 긴 substring의 길이를 구하는 문제입니다. 예를 들면 Input: "abcabcbb" Output: 3 Input: "bbbbb" Output: 1 Input: "pwwkew" Output: 3ShellScript...
Linked List 덧셈
오늘은 Linked List 덧셈 문제를 풀어보는 시간을 가져보도록 하겠습니다. Linked List란? Linked List는 List를 구현하는 방법 중 하나입니다. Linked List 안의 각각 값을 Node라고 부를 때, 각 Node는 자신의 값 그리고 다음 값에 대한 레퍼런스를 가지고 있습니다. 그러므로 시작 Node부터 다음 값에 대한 레퍼런스를 쭉 타고 올라가면 전체 List가 완성이 되는 형식입니다. 예를 들어 Javascript로 구현한 간단한 Linked...
Prisma 사용하여 5분만에 ORM 레이어 생성하기
오늘은 제가 일반적으로 개발할 때 절대적으로 채택하는 GraphQL을 사용해 ORM을 설정해보는 방법에 대해 알아보도록 하겠습니다. ORM 이란? ORM은 Object Relational Model의 약자입니다. 일반적인 SQL 데이터베이스를 사용하게 되면 하나의 객체에 대한 정보를 불러오기 위해 수많은 조인 쿼리를 작성하게 되는데 이는 앱이 확장하며 스키마가 많아질수록 사소한 기능을 만들기 위해 작성해야 하는 sql 쿼리가 점점 많아지고 개발 시간이 길어집니다. 이런 현상을...
[#7] Polling Server, Express Server, Nginx 작업하기
오늘은 Polling Server를 작업해보는 시간을 갖어보도록 하겠습니다. 아래는 저희가 기획하는 아키텍쳐의 리뷰입니다. 우선 아래와같은 현재 프로젝트 파일시스템에 Polling Server라는 폴더를 아래와같이 생성해줍니다. - root - Mongodb - PollingServerShellScript 이후 Polling Server 에서 터미널을 실행후 아래 커맨드를 실행해 npm 프로젝트를 초기화 해줍니다 npm initShellScript 완료되면...
[#6] Mongodb 작업하기
전 회에서 docker compose를 설치하셨다면 아래 커맨드를 사용해서 설치 완료된걸 확인해주세요. docker-compose versionShellScript 위 커맨드를 실행했을 때 아래와 비슷한 응답이 오면 잘 설치하신 겁니다. 꼭 읽어주세요! 이 강의는 Docker, Docker Compose 그리고 Kubernetes 강의이지 nodeJS, Javascript, database 강의가 아닙니다. 이 회 이후 나오는 프레임워크 및 언어는 기본적으로 이해하신다는...
[#5] Docker Compose 입문
소개 이번 회부터는 docker compose의 기본기를 다지며 여러 개의 도 커 컨테이너들을 한 번에 관리하는 orchestration에 대해 알아보도록 하겠습니다. 꼭 읽어주세요! 이 강의는 Docker, Docker Compose 그리고 Kubernetes 강의이지 nodeJS, Javascript, database 강의가 아닙니다. 이 회 이후 나오는 프레임워크 및 언어는 기본적으로 이해하신다는 가정하에 진행하도록 하겠습니다. 코드에 대한 더 깊은 이해를 하고 싶을...
[#4] Docker Hub 에 레포지토리 업로드하기!
소개 이번 회에선 로컬 시스템에서 빌드 한 Docker 컨테이너를 Docker Hub로 업로드하는 작업을 하고 태그에 대해 자세히 알아보도록 하겠습니다. 로컬 시스템에 존재하는 이미지 리스팅 하기 외부 레포지토리에서 Pull을 해와서 로컬에 시스템에 캐싱이 되어있거나 로컬 시스템에서 커스텀 이미지를 빌드 한 경우 아래 커맨드를 사용해서 현재 로컬 시스템에 존재하는 모든 이미지들을 리스팅 해볼 수 있습니다. docker image lsShellScript 실행이 되면 아래와...
[#3] 커스텀 Docker 이미지 만들어보기
소개 이번 회에선 Docker 커스텀 이미지를 제작하는 방법에 대해 알아보도록 하겠습니다. Docker 부터 Kubernetes까지 GitHub 레포지토리 https://github.com/serendipity1004/medium-docker-to-kubernetes 에 접속하셔서 횟수 이름으로 브란치를 변경하시면 해당 횟수의 코드를 chekcout 하실 수 있습니다. 예) 3회 -> #3 브란치 더 진행하기전 필수지식 Javascript 언어와 nodeJS...
[#2] Docker 기본기
Docker는 기본적으로 리눅스 환경에서 네이티브 하게 실행됩니다. Docker 초기에는 다른 운영체제에서 Docker를 실행할 경우 리눅스 가상화를 거치게 됐는데 이제 맥의 경우에는 네이티브 하게 지원이 됩니다. (윈도즈로는 개발을 안 해 잘 모르겠네요). 여기 이 링크로 가셔서 해당되는 운영체제용 Docker를 설치하시면 됩니다.
[#1] Docker 란?
Docker와 Kubernetes를 여러 프로젝트에 사용해보며 삽질도 많이 하고 많은 어려움을 극복해온 사람으로서 그동안의 경험을 커뮤니티에 공유해보려고 합니다. [Docker부터 Kubernetes] 연재는 Docker의 가장 기본적인 지식부터 docker compose를 사용한 개발 환경 구축, Travis CI를 이용한 CI/CD 파이프라인 구축, Kubernetes를 이용한 로컬 디버깅, GKE를 사용한 Kubernetes 프로덕션 환경 구축을 컨테이너에 대한 기본 지식 없이도 처음부터 따라올 수 있도록 작성해보려합니다.