전체 글 422

[12월 5주차] Vue.js 3 상위 컴포넌트 ↔ 하위 컴포넌트 데이터 전달 방법

얼마 전부터 회사에서 IoT 관련 웹 페이지를 만들고 있습니다. 그림과 같이 최상위 컴포넌트(Page) 안에 검색 컴포넌트(SearchForm)와 목록 컴포넌트(List)가 있고 그 안에 또 자식 컴포넌트(Modify)가 있는 형태입니다. 검색폼에 조건을 넣어서 조회하던 도중, 디바이스 정보를 등록하거나 수정한 다음, (검색 조건을 그대로 적용한) 새로운 목록이 조회되는 기능을 만들려고합니다. 그러기 위해서는 검색 정보(searchInfo)를 Page로 전달하고 또 다시 하위로 전달하는 구조가 필요합니다. Vue.js 3에서 컴포넌트 간에 데이터를 주고 받는 방법을 정리하며 살펴보겠습니다. 하위 컴포넌트(DeviceSearchForm) → 상위 컴포넌트(Page) 데이터 보내기 DeviceSearchFo..

개발 일지 2023.12.31

Ch 05. 객체 지향 설계 5원칙 SOLID

객체 지향 설계의 원칙, SOLID 에 대해 각 예시와 함께 살펴보려고 한다. 평소에 자주 사용하는 Java, JDBC 도 SOLID와 관련되어 있다. SRP (Single Responsibility Principle, 단일 책임원칙) 단일책임원칙이란? 하나의 클래스는 하나의 역할만 수행해야한다는 의미. "어떤 클래스를 변경해야하는 이유는 오직 하나뿐이어야한다." Ex 1) SRP를 만족하는 설계 "남자" 클래스는 다음 네 가지 역할을 하고 다음 8개의 메서드로 구성된다. 남자친구 역할 - 기념일 챙기기(), 데이트하기() 아들 역할 - 효도하기(), 안마하기 사원 역할 - 출근하기(), 아부하기()" 소대원 역할 - 사격하기(), 구보하기() 이를 SRP에 맞게 바꾸려면? 남자클래스 안에서의 역할과 책..

Ch 02. Java와 절차적/구조적 프로그래밍

Java 로 작성된 프로그램을 실행하기 위한 과정에 대해 알아보려고한다. JDK, JRE, JVM 의 역할 Java 로 작성된 프로그램을 실행하기 위해서는 JVM(Java Virtual Machine, 자바 가상 머신)이 필요하다. JVM으로 Java 코드를 실행하는 것은 컴퓨터가 어떤 프로그램을 실행하는 것과 비슷하다. ex) 어떤 소프트웨어 개발자가 개발 도구를 이용해서 개발하고 OS를 통해서 물리적 컴퓨터인 하드웨어 상에서 구동한다. JDK(Java Development Kit, 자바 개발 도구): JVM용 소프트웨어 개발 도구이다. 컴파일러인 javac.exe를 포함한다. JRE(Java Runtime Enviornment): JVM용 운영체제로서Java.exe(자바 프로그램 실행기)를 포함한다...

Ch 03. 자바와 객체 지향

객체 지향 객체 지향은 '인간' 지향 언어이다. 객체 지향은 현실 세계를 반영한다. 기계에 맞춰서 프로그래밍하던 방식(절차 지향 프로그래밍)을 버리고 인간이 사물을 인지하는 방식대로 프로그래밍하고자 만들고자 객체 지향 프로그래밍 언어가 탄생했다. 클래스와 객체의 관계는 붕어빵틀과 붕어빵이라기보다는 분류와 실체의 개념에 가깝다. 클래스는 분류, 집합, 같은 속성과 기능을 가진 객체를 총칭하는 개념이다. 객체지향의 대표적인 특성 캡슐화(정보 은닉) 추상화(모델링) 상속(재사용) 다형성(사용 편의) 추상화 = 모델링 Object 의 의미는 '객체'보다는 '개체'라는 뜻에 더 가깝다. 객체는 세상에 존재하는 유일무이한 사물을 말한다. (By 저자) 객체를 특성(속성, 기능)에 따라 분류해보니 객체를 통칭할 수 ..

Java 큰 수의 피보나치 수열의 값은?

피보나치(Fibonacci) 수열이란? 1, 1, 2, 3, 5, 8, .. 와 같이 f(x) = f(x - 2) + f(x - 1); 을 만족하는 수열을 말한다. (첫 항: f(0) = 0 또는 f(1) = 1) 아주 큰 자연수 n에 대하여 피보나치 수열의 n 번째 값은 어떻게 구할 수 있을까? 첫 번째 시도 [Long] static 으로 선언한 List 안에 하나씩 값을 넣어준다. list = [1, 1, 2,3, 5, ...] 해당 리스트에 메모이제이션을 적용했다. static List list = new ArrayList(); private static void fiboFunc(int idx) { if (idx == 1 || idx == 2) { list.add(idx, 1L); return; }..

ubuntu 서버에서 gradle 버전 수정하기

ubuntu 서버에서 gradle를 다운 받으면 최신 버전이 아니라 기본으로 gradle 옛날 버전이 깔린다. 그런데 현재 진행 중인 프로젝트는 gradle 8.2.1 을 이용 중이라서 업그레이드 하려한다. 과정은 다음과 같다 로컬에 gradle 8.2.1 다운 scp 로 원격 서버에 gradle 압축 파일 전송 압축 해제 gradle 관련 환경 변수 설정 gradle -v 를 통해 버전이 바뀌었는지 확인 gradle 버전 확인 방법 현재 로컬에서 개발중인 프로젝트의 gradle 버전은 gradle-wrapper.properties 파일에서 확인 가능하다. 로컬에 gradle 8.2.1 다운 https://services.gradle.org/distributions/gradle-8.2.1-bin.zip ..

Spring 애플리케이션을 원격(ubuntu)에 전송하기

로컬에서 원격(ubuntu) 으로 파일 전송 - SCP 프로토콜 개발하고 있는 spring 애플리케이션을 .jar 파일로 압축해서 ubuntu 서버에 전송하고 실행하려한다. gradle의 'bootJar'를 실행하고 나면build/lib 안에 프로젝트를 압축한 .jar 파일이 생성된다. SCP(secure copy): SSH 프로토콜 기반으로 파일을 안전하게 전송하는 수단이다. SCP는 SCP 프로토콜 또는 SCP 프로그램을 가리킨다. Spring 프로젝트가 실행중인 폴더에서 cmd 창을 열고 다음 명령어를 실행하면 원격으로 파일을 전송할 수 있다. scp -i "pem파일경로" 원본파일주소 사용자@IP주소:/저장폴더 IP주소: 원격 서버 주소를 의미한다. 000.000.000.000:~/ 라고 입력하면..

ubuntu 방화벽 설정 방법(ufw)과 MySQL 접속 및 주의사항

원격 서버에 띄운 MySQL 서버에 접속하기 전 주의사항 mysql 구성 정보 파일에 bind-address: 127.0.0.1 부분을 주석 처리한다. 또는 0.0.0.0 으로 수정한다. mysql 서버에서 각 사용자에 대한 권한 설정 방화벽 설정: 특정 IP 에 대해서 3306번 포트에 접근을 허용한다. 인바운드 규칙 설정 가비아에 설정한대로 작동하지 않을 경우, ubuntu 서버에서 "sudo ufw " 명령어를 사용해서 직접 규칙을 설정할 수 있다. 참고 ) https://oranthy.tistory.com/585?category=1050152 현재 우분투 서버의 방화벽 정보 확인 방법 가비아 관리 콘솔에서 방화벽 규칙을 설정해도 적용되지 않는 것 같아서 알아보니 ubuntu 서버에서 직접 방화벽에..

Chapter 06. 데이터 타입(data type)

데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖는다. 원시 타입과 객체 타입으로 구분한다. 원시 타입 숫자(number) 문자열(string) 불리언(boolean) undefined: 선언되었으나 값이 할당되지 않았다. null: 변수에 값이 없다는 것을 의도적으로 명시하기 위해 사용한다. 변수가 이전에 참조하던 값을 더 이상 참조하지 않는다는 의미다. 심벌(symbol) 타입: 변경 불가능한 원시 타입의 값이다., ES6에서 추가된 타입이다. 객체 타입: 객체, 함수, 배열 등 숫자(number) 타입 C, Java의 경우에는 소수점 이하가 있는 숫자(실수), 소수점 이하가 없는 숫자(정수)를 구분해서 double, float 같은 숫자타입을 제공한다. 이와 다르게 JavaScript에서는 숫..

Chapter 04. 변수

메모리와 변수 메모리(memory)는 메모리 셀의 집합체다. 메모리 셀 하나는 1바이트(8비트)이며 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다. 각 셀은 고유하게 메모리 주소(memory address)를 갖는다. ex) 4GB 는 0 ~ 4,294,967,295 (0x00000000 ~ 0xFFFFFFFF) 까지의 메모리 주소가 있다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 데이터가 숫자, 텍스트, 이미지, 동영상인지에 상관없이 모두 2진수로 저장된다. 메모리에 저장되는 값은 모두 2진수로 저장된다. Ex) 10 + 20 이라는 식을 컴퓨터는 어떻게 처리할까? 사람은 계산, 기억을 두뇌에서 하지만 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다. 피연산자인 ..