오늘도 공부

NestJS에서 .nvmrc 파일을 사용하여 Node.js 버전을 관리하는 방법을 단계별로 설명하겠습니다.1. .nvmrc 파일 생성 및 설정.nvmrc 파일은 프로젝트에서 사용할 Node.js 버전을 명시하는 파일입니다. 프로젝트 루트 디렉터리에 .nvmrc 파일을 생성하고, 원하는 Node.js 버전을 입력합니다.echo "18.17.0" > .nvmrc위 명령어는 .nvmrc 파일을 생성하고, Node.js 18.17.0 버전을 사용하도록 설정합니다. (버전은 프로젝트에 맞게 변경).nvmrc 파일을 열어 직접 수정할 수도 있습니다.# .nvmrc 파일 내용18.17.02. nvm(Node Version Manager) 설치 및 설정.nvmrc를 사용하려면 nvm이 필요합니다. 먼저 nvm이 설치되..

NestJS를 API로 활용하기 위한 다양한 오픈소스 보일러플레이트가 존재합니다. 아래에 몇 가지 추천할 만한 보일러플레이트를 소개해 드리겠습니다.1. NestJS REST API Boilerplate by Brocoders특징: TypeORM과 PostgreSQL을 사용하며, 인증, 권한 관리, 이메일 확인, 비밀번호 재설정, 파일 업로드, Swagger 문서화, Docker 설정 등을 포함한 종합적인 기능을 제공합니다.GitHub: https://github.com/brocoders/nestjs-boilerplate2. Awesome NestJS Boilerplate특징: TypeORM과 PostgreSQL을 기반으로 하며, JWT 인증, 역할 기반 접근 제어(RBAC), Swagger 문서화, 환경..

HTML의 img, picture, source 태그 속성과 기능 정리1. 태그개요 태그는 HTML 문서에 이미지를 삽입하는 기본적인 태그이다. self-closing 태그이며, 콘텐츠를 포함하지 않는다.기본 문법주요 속성속성 설명src이미지의 URL 또는 경로alt이미지가 표시되지 않을 경우 대체 텍스트width이미지의 너비(픽셀 또는 백분율)height이미지의 높이(픽셀 또는 백분율)title마우스를 올렸을 때 표시될 텍스트loadinglazy(지연 로딩) 또는 eager(즉시 로딩) 지정decodingasync, sync, auto(이미지 디코딩 방식)crossoriginanonymous, use-credentials(CORS 설정)referrerpolicyno-referrer, origin, s..

Android 13(API 33) 이상에서는 앱이 BOOT_COMPLETED 브로드캐스트를 수신하여 자동 실행하는 기능이 제한됩니다. 즉, 기존의 BOOT_COMPLETED를 사용하는 방식이 기본적으로 작동하지 않을 가능성이 높습니다. 하지만 몇 가지 방법을 활용하면 여전히 앱을 재부팅 후 실행할 수 있습니다.✅ Android 13 이상에서 부팅 후 앱 실행하는 방법1️⃣ 기본적인 BOOT_COMPLETED 사용 가능 여부Android 13(API 33) 이상에서도 BOOT_COMPLETED 사용은 가능하지만, 앱이 백그라운드 제한을 받지 않는 경우에만 정상 동작합니다.즉, 앱이 사용자가 직접 설치하고, 최소 1회 실행한 경우, BOOT_COMPLETED 브로드캐스트를 받을 수 있습니다.제한 사항백그라운..

1. pyenv란 무엇인가?pyenv는 다양한 버전의 Python을 손쉽게 설치하고 관리할 수 있는 도구입니다. 보통 시스템에 기본적으로 설치된 Python을 사용하면 여러 프로젝트에서 버전 충돌이 발생할 수 있습니다. 이를 해결하기 위해 pyenv를 사용하면 프로젝트별로 Python 버전을 다르게 설정할 수 있습니다.** Node의 nvm과 같은 기능으로 보면 된다. pyenv의 주요 기능여러 버전의 Python을 동시에 관리 가능프로젝트별로 다른 Python 버전을 적용 가능Python 가상환경을 생성하는 pyenv-virtualenv 플러그인 지원2. pyenv 설치 방법1) macOS에서 설치Homebrew를 사용하여 설치brew updatebrew install pyenv설치 후, pyenv가 ..

MVVM / MVC vs. 디자인 패턴 (팩토리 패턴 등)MVVM(Model-View-ViewModel)과 MVC(Model-View-Controller)는 소프트웨어 아키텍처 패턴(Architectural Pattern) 이고, 팩토리 패턴(Factory Pattern) 같은 것은 디자인 패턴(Design Pattern) 입니다.이 둘의 가장 큰 차이점은 다음과 같습니다.1. 아키텍처 패턴 vs. 디자인 패턴구분 아키텍처 패턴 (MVVM, MVC) 디자인 패턴 (팩토리 패턴 등)목적애플리케이션 전체의 구조를 정의특정 문제를 해결하기 위한 재사용 가능한 코드 설계규모애플리케이션 전반에 적용 (전반적인 소프트웨어 아키텍처를 설계)특정 기능이나 로직을 효과적으로 구현하기 위해 적용예시MVC, MVVM, MV..

안드로이드에서 카메라 라이브러리를 사용할 때 광학 줌(Optical Zoom) 또는 디지털 줌(Digital Zoom) 을 활용하여 더 멀리 보는 기능을 구현할 수 있습니다. 다만, 하드웨어적으로 지원되는 카메라 모듈(예: 망원 렌즈)이 있는지 여부에 따라 방법이 달라집니다.1. 카메라 렌즈 변경 (망원 렌즈 사용)안드로이드 Camera2 API 또는 CameraX를 사용하면 여러 개의 렌즈(예: 초광각, 기본, 망원)를 선택할 수 있습니다. 망원 렌즈를 사용하면 더 먼 거리의 물체를 촬영할 수 있습니다.✅ Camera2 API를 사용하여 망원 렌즈 선택val cameraManager = getSystemService(Context.CAMERA_SERVICE) as CameraManagerfor (cam..

✅ 1. 빌드 시 Lint 오류를 확인하고 맞추는 방법빌드시 오류가 발생하는 주요 원인은 다음과 같습니다:ESLint 규칙 위반: 개발 환경에서는 경고로 표시되지만, 빌드시 오류로 간주될 수 있음.TypeScript 오류: next dev에서는 일부 오류를 무시하지만, next build에서는 엄격하게 적용됨.서버/클라이언트 구성 오류: use client 또는 use server를 잘못 설정한 경우.React Strict Mode 또는 App Router 환경에서 더 엄격한 규칙이 적용됨.🚀 해결 방법✅ 방법 1: next lint를 빌드 전에 실행하기next build를 실행하기 전에 Lint 오류를 먼저 확인하는 것이 중요합니다.다음 명령어를 실행하여 Lint 오류를 확인하세요:bash복사편집ne..

Rust는 안전성과 성능을 중시하는 시스템 프로그래밍 언어로, 이를 기반으로 한 다양한 웹 프레임워크가 개발되고 있습니다. 주요 Rust 웹 프레임워크들의 장단점을 비교해 드리겠습니다.1. Actix-web장점:고성능: 비동기 I/O를 활용하여 높은 성능을 제공합니다.풍부한 기능: 다양한 내장 기능과 확장성을 갖추고 있습니다.활발한 커뮤니티: 꾸준한 업데이트와 지원이 이루어지고 있습니다.단점:복잡한 사용법: 초보자에게는 학습 곡선이 가파를 수 있습니다.안전성 우려: 과거에 일부 안전성 이슈가 제기된 바 있습니다.2. Rocket장점:간결한 문법: 매크로를 활용한 직관적인 라우팅을 제공합니다.동기식 모델: 동기식 요청 처리를 통해 코드의 가독성이 높습니다.안정성: 타입 안전성을 강조하여 컴파일 타임에 오류..

🔹 1. Express.js (가장 널리 사용됨)특징: 경량, 빠름, 최소한의 기능 제공장점:가장 많이 사용되는 프레임워크로 커뮤니티가 활발함미들웨어 기능으로 확장 가능초보자도 쉽게 배울 수 있음사용 사례:REST API 개발간단한 서버 구축빠르게 프로토타입 개발🔹 2. Fastify (Express보다 빠르고 효율적)특징: 높은 성능, 저지연 API 서버 구축에 적합장점:Express보다 성능이 뛰어나고, JSON 처리 속도가 빠름플러그인 시스템을 통해 확장 가능비동기(Async/Await) 방식 지원사용 사례:고성능 API 서버 개발마이크로서비스 아키텍처🔹 3. NestJS (대규모 프로젝트에 적합)특징: 타입스크립트 지원, 구조화된 개발 방식 제공장점:Angular 스타일의 모듈 기반 구조 (..

Ubuntu에서 PHP 8 이상을 설치하는 방법을 설명해드리겠습니다.시스템 업데이트bashsudo apt updatesudo apt upgrade -yPHP 저장소 추가bashsudo apt install software-properties-commonsudo add-apt-repository ppa:ondrej/php -ysudo apt updatePHP 설치기본 PHP 설치bashsudo apt install php8.3 -y주요 확장 모듈 설치bashsudo apt install php8.3-cli php8.3-fpm php8.3-mysql php8.3-xml php8.3-mbstring php8.3-curl php8.3-gd -y설치 확인bashphp -vPHP-FPM 상태 확인bashsudo s..

root 원격 접속 계정 생성MySQL 접속sqlsudo mysql -u root -p계정 생성sqlCREATE USER 'root'@'%' IDENTIFIED BY '비밀번호';권한 부여sqlGRANT ALL PRIVILEGES ON . TO 'root'@'%' WITH GRANT OPTION;FLUSH PRIVILEGES;설정 확인권한 확인sqlSHOW GRANTS FOR 'root'@'%';생성된 계정 확인sqlSELECT host, user FROM mysql.user;

Riverpod는 기존의 provider 를 개선해서 나온 업그레이드 버전이다. 정식 패키지는 https://riverpod.dev/ko/ Riverpod 안전하게 Provider 읽기 Provider를 읽는 중 더 이상 bad state가 되지 않습니다. 만약 Provider를 읽기 위한 필요한 코드를 작성하면, 당신은 유효한 값을 얻을 수 있습니다. Provider는 비동기적으로 로드된 riverpod.dev 자세한 설명은 https://velog.io/@yeahsilver/Flutter-Riverpod-Riverpod%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-Riverpod%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%..

Flutter 대표 카카오톡 개발자 톡을 운영중입니다. https://open.kakao.com/o/gsshoXJ Flutter 개발자 모임 #flutter #android #ios #안드로이드 #아이폰 #모바일 #선물요정소환 open.kakao.com 자바스크립트에서 많이 사용되는 Promise.all 을 다트에선 어떻게 구하는지 알아볼 예정입니다. Promise.all 은 여러개의 Promise 를 모아서 한꺼번에 처리해주는 역할을 해준다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all Promise.all() Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 ..

이 내용은 https://www.udemy.com/course/vue-js-course 를 공부해서 정리한 내용입니다. 개발완료 화면은 다음과 같습니다. Input을 넣으면 텍스트에 맞게끔 이미지가 생성됩니다. vue는 선언형 형태로 개발되며 다음 세가지 flow를 가진다고 한다. Data : 데이터 초기화 Compute : 주어진 데이터를 조합해서 리턴해줍니다. Method : 만들어진 데이터를 이용해서 랜더링해서 화면을 다시 보여줍니다. Html My identicon generator Input: Output: Javascript new Vue({ el: '#app', data: { textInput: '' }, computed: { identicon: function() { return jdent..

저장소 정리하다 보니 1월에 진행된 간단한 백엔드 연동된 스터디 자료가 있어서 공유합니다. 내용 : 간단한 투두 리스트 구현내용 1. Flutter 2. Bloc 3. RxDart 4. Docker 5. Node, Express 6. nginx proxy https://github.com/bear2u/flutter-ecommerce-study

Pragmatic State Management in Flutter (Google I/O’19) Dart: Productive, Fast, Multi-Platform — Pick 3 (Google I/O’19) Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web (Google I/O’19) Building for iOS with Flutter (Google I/O’19) Beyond Mobile: Material Design, Adaptable UIs, and Flutter (Google I/O’19)

.final__clip-image-1 { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); } .final__clip-image-2 { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); } .final__clip-image-3 { -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 7..

.shadow-typo { position: relative; display: inline-block; font-size: 4em; text-transform: uppercase; color: #00b3b4; text-shadow: 3px 3px 0px #e7eef1, 8px 8px 0px rgba(0, 0, 0, 0.1); } .threedee-typo { font-size: 4em; text-transform: uppercase; color: #f2395a; -webkit-transform: skew(-5deg, -5deg) rotate(5deg); transform: skew(-5deg, -5deg) rotate(5deg); -webkit-transform-origin: center center; ..

Flutter 화면 제작 공부https://www.youtube.com/watch?v=dMLreUXpSQ0&t=1s를 보고 하나씩 공부 하고자 한다.우선 사이즈 부분을 알아보자.Row를 사용해서 정렬Container Boxdecoration을 이용해서 박스형태 제작그림자 효과 적용소스높이 자동 계산 로직double baseHeight = 640.0; double screenAwareSize(double size, BuildContext context) { return size * MediaQuery.of(context).size.height / baseHeight; }import 'package:flutter/material.dart'; import 'package:flutter_adidas_shoes_..

부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다도커 & 쿠버네티스 9주차 스터디 pod 자세한 설명 스크립트# kubectl describe > kubectl describe pod client-pod ........... Name: client-pod Namespace: default Node: minikube/10.0.2.15 Start Time: Sat, 02 Feb 2019 12:05:16 +0900 Labels: component=web Annotations: kubectl.kubernetes.io/last-ap..

부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다Kubernetesminikube start 상태확인minikube status 클러스터 정보 확인kubectl cluster-info 목표다양한 도커 이미지들을 활용해서 로컬 쿠버네티스를 통해서 올리는 게 목표도커 컴포즈와 쿠버네티스 비교docker-compose이미지들을 각각 빌드해서 올린다우리가 원하는 컨테이너를 만든다각 네트워크 속성들에 대해 정의를 각각 한다.kubernetes이미 모든 이미지들이 만들어져있다고 가정한다우리가 만들기를 원하는 하나의 오브젝트에 하나의 ..

로그인 수업목표한빛 출반 홈페이지에 접속해서 로그인 과정을 거쳐서 마일리지 와 코인정보를 가져오는 게 목표준비파이썬vscoderequestsbeautifulsoup한빛 출반 네트워크 로그인 과정 뚫어보기로그인 페이지 분석http://www.hanbit.co.kr/member/login.html 한빛출판네트워크 로그인 아이디 저장 아이디 찾기 비밀번호 찾기 회원가입 우선 로그인되는 과정을 분석하기 위해서는 크롬에서 network / doc 탭에서 흐름을 체크를 하자.preserve log 라는 곳에 체크를 해야 한다. 이유는 network 페이지내에서는 한번 새로 고침을 하는 순간 로그들이 없어지기 때문에 이전 로그들을 남겨야 할려면 체크를 하자.로그인을 하는 순간login.html -> login_pro..

React,MongoDB,Express,Nginx 도커 개발 환경 구성하기이번 시간에는 대중적으로 많이 쓰이는 환경을 도커로 하나씩 구축해볼 예정이다.구성 스택은 다음과 같다.Client : ReactApi Server : Node ExpressDB : MongoServer : NginxRoot우선 환경을 구성한다. 기본적으로 3개의 폴더와 docker-compose.yaml 파일로 구성된다.- client - ...sources - Dockerfile.dev - nginx - default.conf - Dockerfile.dev - server - ...sources - Dockerfile.dev - docker-compose.yamlClientcreate-react-app 을 이용해서 구성한다.- ...

Flutter + Steho 사용하기 Flutter 로컬 디비 사용시 대중적인 방법은 sqflite 일것이다. 일반 sqlite 와 문법이 똑같으며 사용하기에도 편하다. sqlite 를 모바일에서 연동시 페이스북에서 나온 steho 라는 라이버러리가 있다. 안드로이드만 현재 가능하지만 꽤 유용하게 사용가능하다. stetho로 android 디버깅을 보다 쉽게 그럼 flutter 에서 어떻게 적용하는지 살펴보자. 우선 sqflite 를 import 로 가져오고 생성시 getDatabasePath() 로 가져올 수 있다. Future init() async { String documentsDirectory = await getDatabasesPath(); //주의하자. final path = join(doc..

Flutter Codelab을 돌려볼때 오류가 발생될 경우가 있다. 코드랩 위치 : https://codelabs.developers.google.com/codelabs/mdc-101-flutter 오류 내용은 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android해결방법은 2가지를 체크 해야 한다. 1. android 폴더내에 project 레벨에서 build.gradle 에서 dependencies 가 3.1 이상으로 되어있는 지 체크하자. dependencies { classpath 'com.android.tools.build:gradle:3.2.1' }2. android/gradle/wr..

지치지 않고 제대로 공부하는 7가지 방법 요약동영상 링크https://www.youtube.com/watch?v=P2rpSiACoVQ&t=890s 어떻게 해야 우울해 지지 않고 하루에 10시간 이상 공부할 수 있을까? 어떻게 해야 그것에 익숙해질 수 있을까?이에 대해 쿼라 에서 유명 교수님의 답변을 요약 한 내용입니다. 나는 당신은 그것을 할수 없다고 생각한다. 나는 당신이 그것을 시도해서도 안된다고 생각한다. 아무도 그렇게 많이 공부하지 않는다. 사람이 하루에 3시간이상 열심히 집중하는 건 매우 드물고 바람직하지 않는다하지만 그래도 꼭 하고 싶다면 다음 7가지 내용을 기억하자. 꾸준하고 제대로 된 공부법은 무엇인가?1. 하루에 7.5 이상 공부하지 마세요. 당신은 매우 지칠 것이다. 더한다고 해도 도움..

Tensorflow JS 스터디 4주차부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/machine-learning-with-javascript 을 같이 보면서 공부중입니다.이전 알고리즘과 비교어떤 버킷에 공을 놓을때 어떤 위치를 갈지 예측하기 -> ClassificationClassification 은 예를 들어 해당 메일이 스팸인지 일반 메일인지 판별하는 문제 해결시 사용된다.주변 시세에 따른 주택 가격 예측 -> Regression (선형 회귀)주택 가격 예측 (by knn)KNN 알고리즘이번 스터디는 텐서플로를 이용해서 KNN 알고리즘 하나하나 구현해본다.특정 기능과 예측포인트 사이를 찾고작은 것에서 큰걸로..

NodeJS 스터디 1주차 정리부산에서 매주 진행되는 노드 입문 강좌 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.이 강좌는 제로초님의 인프런 강좌를 보고 요약해놓은 내용입니다.챕터 2 - ES2018챕터 3 - 노드 기능 알아보기const & letconstconst 는 객체가 할당된 경우 변경이 불가능하지만 오브젝트에 대한 내부 값은 변경가능하다.const item = {a: 1, b: 2, c: 3}; item.a = 3; item => {a: 3, b: 2, c: 3}let구문적인 변수 영역 규칙을 지원한다.{} 블록내에 변수 영역만 처리된다.예를 들어 보자.var 로 할 경우 밖의 변수까지 변경되는 걸 볼수 있다.var test = "test"; if (test)..

Tensorflow JS 입문 ( 부산 3주차 스터디 )부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/machine-learning-with-javascript 을 같이 보면서 공부중입니다.목표텐서플로 JS 에 대한 이해텐서플로를 이용한 예제 재설계 ( lodash -> tensorflow)tensorflow 를 이용해서 knn 알고리즘 재설계tensorflow와 함계 다른 알고리즘 빌딩저번주까지(2주차) 우리는 기본적인 머신러닝 기법인 KNN 에 대해서 공부했다.공부한 내용은 다음과 같다.공식 홈페이지https://js.tensorflow.org/첫번째 예제tensorflow js를 이용해서 배열에 있는 숫자들..