목록

'홈' 729건

  • react-router-dom 설치하고 프로젝트 폴더 정리하기
    프로그래밍 언어/REACT · 댓글
    '화면 이동'을 시켜주려면 '화면 이동을 시켜주는 장치'가 필요합니다. 그것이 바로 라우터입니다.쉽게 말하면 라우터는 URL에 맞게 이동시켜주는 장치입니다. react-router-dom 설치하기npm install react-router-dom  components 폴더에 Movie 컴포넌트 옮기기이제 컴포넌트를 역할에 맞게 분리해서 폴더에 담아 관리할 것입니다. 만약 VSCode에서 무언가를 업데이트하겠냐고 물어보는 창을 띄우면 를 누릅니다. routes 폴더에 라우터가 보여줄 화면 만들기  Home.js 파일에 작성할 구조는 App.js  파일의 코드를 그대로 복사하면 됩니다. Home.js 파일부터 수정해봅시다. Home.js 수정하기import axios from "axios";import Re..
  • 제품 소프트웨어 패키징하기
    정보처리기사 실기/제품 소프트웨어 패키징 · 댓글
    1. 제품 소프트웨어 패키징의 개념제품 소프트웨어 패키징은 개발이 완료된 제품 소프트웨어를 고객에게 전달하기 위한 형태로 패키징하고, 설치와 사용에 필요한 제반 절차 및 환경 등 전체 내용을 포함하는 메뉴얼을 작성하며, 제품 소프트웨어에 대한 패치 개발과 업그레이드를 위해 버전 관리를 수행하는 능력 2. 제품 소프트웨어 적용상의 특성(1) 재품 소프트웨어는 개발자가 아닌 사용자 중심으로 진행(2) 신규 및 변경 개발 소스를 식별하고, 이를 모듈화하여 상용 제픔으로 패키징(3) 고객의 편의성을 위해, 신규/변경 이력을 확인하고, 이를 버전 관리 및 릴리즈 노트를 통해 지속적으로 관리해 감(4) 사용자의 실행 환경을 이해하고, 범용 환경에서 사용이 가능하도록 일반적으로 배포 형태로 분류하여 패키징이 진행 3..
  • 메소드 오버라이딩
    프로그래밍 언어/JAVA · 댓글
    메소드 오버라이딩의 개념슈퍼 클래스와 서브 클래스의 메소드 사이에 발생하는 관계로서, 슈퍼 클래스에 선언된 메소드와 같은 이름, 같은 리턴 타입, 같은 매개 변수 리스트를 갖는 메소드를 서브 클래스에서 재작성하는 것입니다.서브 클래스의 개발자는 슈퍼 클래스에 있는 메소드로 목적하는 바를 이룰 수 없을 떄 동일한 이름의 메소드를 서브 클래스에 다시 작성할 수 있습니다. 메소드 오버라이딩은 '슈퍼 클래스 메소드 무시하기 혹은 덮어쓰기'로 표현할 수 있습니다. 이는 슈퍼 클래스의 메소드를 무시하고 서브 클래스에서 오버라이딩된 메소드가 무조건 실행되도록 한다는 것인데, 이런 처리를 동적 바인딩이라고 부르며, 메소드 오버라이딩을 유발시킵니다. 오버라이딩 사례로 이해하기  오버라이딩된 메소드 호출Line line ..
  • 내외부 연계 모듈 규현
    정보처리기사 실기/통합 구현 · 댓글 2
    연계 데이터 구성1. EA/ESB 방식EAI기업 내의 시스템들끼리의 커뮤니케이션을 위한 미들웨어.이중(다른) 시스템들 사이에 위치하여 각 시스템간의 필요한 정보를 서로 소통하여 관리의 효율성을 증대시키는 방법기업에서 운영되는 서로 다른 플랫폼 및 애플리케이션들 간의 정보 전달, 연계, 통합을 가능하게 해주는 솔루션EAI를 사용함으로써 각 비지니스 간 통합 및 연계성을 증대시켜 효율서을 높여 줌. EAI의 구축 유형유형개념도설명특징Point-to-Point중간에 미들웨어를 두지 않고 각 애플리케이션간 Point to Point 형태로 연결솔루션 구매 없이 통합상대적 저렴하게 통합 가능변경, 재사용 어려움Hub & Spoke단일 접점이 허브 시스템을 통해 데이터를 전송하는 중앙 집중적 방식모든 데이터 전송 ..
  • 클래스
    프로그래밍 언어/NODE JS · 댓글
    다른 언어처럼 클래스 기반으로 동작하는 것이 아니라 여전히 프로토타입 기반으로 동작합니다. 프로토타입 기반 문법을 보기 위해 클래스로 바꾼 것이라고 이해하면 됩니다. 다음은 프로토타입 상속 예제 코드입니다.var Human = function(type) { this.type = type || 'human';};Human.isHuman = function(human) { return human instanceof Human;}Human.prototype.breathe = function() { alert('h-a-a-a-m');}var Zero = function(type, fistName, lastName) { Human.apply(this, arguments); this.firstName = fistN..
  • 영화 앱 멋지게 스타일링하기
    프로그래밍 언어/REACT · 댓글 1
    App.css 파일 수정하기@font-face { font-family: "Ownglyph_wiseelist-Rg"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/Ownglyph_wiseelist-Rg.woff2") format("woff2"); font-weight: normal; font-style: normal;}* { box-sizing: border-box;}body { margin: 0; padding: 0; font-family: "Ownglyph_wiseelist-Rg"; background-color: #eff3f7; height: 100%;} Movie.css 파일 수정하기   .movies..
  • 업캐스팅과 instanceof 연산자
    프로그래밍 언어/JAVA · 댓글
    캐스팅(casting)이란 타입 변환을 말합니다. 클래스에 대한 캐스팅은 업캐스팅(upcasting)과 다운캐스팅(downcasting)으로 나뉩니다. 업캐스팅서브 클래스는 슈퍼 클래스의 속성을 상속받기 때문에, 서브 클래스의 객체는 슈퍼 클래스의 멤버를 모두 가집니다. 그러므로 서브 클래스의 객체를 슈퍼 클래스의 객체로 취급할 수 있습니다.서브 클래스의 객체에 대한 레퍼런스를 슈퍼 클래스 타입을 변환하는 것을 업캐스팅(upcasting)이라고 합니다.업캐스팅은 슈퍼 클래스의 레퍼런스로 서브 클래스의 객체를 가리키게 합니다.Person p;Student s = new Student();p = s; // 업캐스팅 이 코드에서, 슈퍼 클래스 타입의 레퍼런스 p가 서브 클래스 객체(s)를 가리키도록 치환되는 ..
  • 연계 데이터 & 연계 메커니즘 구현
    정보처리기사 실기/통합 구현 · 댓글
    연계 데이터 구성통합 구현단위 기능을 하는 모듈 간에 연게와 통합 연계 시스템 구성 요소별 수행 역할 및 기능구성 요소수행 역활 및 기능송신 시스템과 모듈송신모듈-전송하고자 하는 데이터를 생성하여 필요에 따라 변환 후 송신모니터링-데이터 생성 및 송신 상태를 모니터링통계 시스템외부 시스템 간의 연계, 인터넷망(Internet)과 인트라넷망(Intranet)을 연결중계 모듈-송신된 데이터의 오류 처리, 수신 시스템의 데이터 형식으로 변환수신 시스템과 모듈수신모듈-수신 받은 데이터를 정제(Cleansing)하고, 응용 애플리케이션이나 데이터베이스의 테이블에 적합하도록 변환하여 반영연계 데이터송수신되는 데이터데이터베이스(DB: Database)의 테이블과 컬럼, 파일, text, xml, csv네트워크물리적인..
  • 구조 분해 할당
    프로그래밍 언어/NODE JS · 댓글
    구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.var candy Machine = { status: { status: 'node', count: 5, }, getCandy: function () { this.status.count--; return this.status.count; },};var getCandy = candyMachine.getCandy;var count = candyMachine.status.count; 이 코드를 다음과 같이 바꿀 수 있습니다.const candyMachine = { status: { name: 'node', count: 5, }, getCandy() { this.status.count--; return ..
  • 영화 앱 전체 모습 수정하기
    카테고리 없음 · 댓글 1
    App.css 내용 모두 지우기 노마드 코더 영화 API에서 장르 키 살펴보기 Movie 컴포넌트에 genres props 넘겨주기Movie 컴포넌트 인자에 genres을 추가하고, Moive.propTypes에는 genres props가 문자열 배열 arrayOf(PropTypes.string)이며 반드시 필요함(isRequired)을 추가합시다.import React from "react";import PropTypes from "prop-types";import "./Movie.css";const Movie = ({ title, year, summary, poster, genres }) => { return ( {title} {year} ..
  • 상속과 생성자
    프로그래밍 언어/JAVA · 댓글
    서브 클래스와 슈퍼 클래스의 호출 및 실행서브 클래스와 슈퍼 클래스는 각각 생성자를 가지고 있습니다.서브 클래스의 객체가 생성되면 이 객체 속에 서브 클래스와 멤버와 슈퍼 클래스의 멤버가 모두 들어있습니다.서브 클래스의 생성자는 생성된 객체 속에서 들어 있는 서브 클래스의 맴버 초기화나 필요한 초기화를 수행하고, 슈퍼 클래스의 생성자는 생성된 객체 속에 있는 슈퍼 클래스의 멤버 초기화나 필요한 초기화를 각각 수행합니다. 슈퍼 클래스의 생성자가 먼저 실행된 후 서브 클래스의 생성자가 실행됩니다.C = new C(); 컴파일러는 이 new 문장이 실행되면 즉각 생성자 C()를 호출하게 합니다. 서브 클래스의 생성자가 먼저 호출되지만, 결국 슈퍼 클래스의 생성자가 먼저 실행되고 서브 클래스의 생성자가 나중에 ..
  • 데이터 조작 프로시저 작성 & 데이터 조작 프로시저 최적화
    정보처리기사 실기/데이터 입출력 구현 · 댓글
    데이터 조작 프로시저 작성데이터 저장소에 연결을 수행하는 프로시저데이터 저장소로부터 데이터를 읽어 오는 프로시저데이터 변경 내용 또는 신규 입력된 데이터를 데이터 저장소에 저장하는 프로시저 SQL 분류1) 데이터 정의어(DDL)명령설명예시CREATE오브젝트 생성CREATE TABLE dept1(deptno number(2), dname varchar2(14), loc varchar2(13));DROP오브젝트 삭제DROP TABLE dept1;RENAME오브젝트 이름 변경RENAME dept1 TO dept_copy;ALTER오브젝트 구조 변경ALTER TABLE dept_copy MODIFY (loc varchar2(14));TRUNCATE모든행 삭제TRUNCATE TABLE dept_copy; 2) 데..

react-router-dom 설치하고 프로젝트 폴더 정리하기

'화면 이동'을 시켜주려면 '화면 이동을 시켜주는 장치'가 필요합니다. 그것이 바로 라우터입니다.쉽게 말하면 라우터는 URL에 맞게 이동시켜주는 장치입니다. react-router-dom 설치하기npm install react-router-dom  components 폴더에 Movie 컴포넌트 옮기기이제 컴포넌트를 역할에 맞게 분리해서 폴더에 담아 관리할 것입니다. 만약 VSCode에서 무언가를 업데이트하겠냐고 물어보는 창을 띄우면 를 누릅니다. routes 폴더에 라우터가 보여줄 화면 만들기  Home.js 파일에 작성할 구조는 App.js  파일의 코드를 그대로 복사하면 됩니다. Home.js 파일부터 수정해봅시다. Home.js 수정하기import axios from "axios";import Re..

제품 소프트웨어 패키징하기

1. 제품 소프트웨어 패키징의 개념제품 소프트웨어 패키징은 개발이 완료된 제품 소프트웨어를 고객에게 전달하기 위한 형태로 패키징하고, 설치와 사용에 필요한 제반 절차 및 환경 등 전체 내용을 포함하는 메뉴얼을 작성하며, 제품 소프트웨어에 대한 패치 개발과 업그레이드를 위해 버전 관리를 수행하는 능력 2. 제품 소프트웨어 적용상의 특성(1) 재품 소프트웨어는 개발자가 아닌 사용자 중심으로 진행(2) 신규 및 변경 개발 소스를 식별하고, 이를 모듈화하여 상용 제픔으로 패키징(3) 고객의 편의성을 위해, 신규/변경 이력을 확인하고, 이를 버전 관리 및 릴리즈 노트를 통해 지속적으로 관리해 감(4) 사용자의 실행 환경을 이해하고, 범용 환경에서 사용이 가능하도록 일반적으로 배포 형태로 분류하여 패키징이 진행 3..

메소드 오버라이딩

메소드 오버라이딩의 개념슈퍼 클래스와 서브 클래스의 메소드 사이에 발생하는 관계로서, 슈퍼 클래스에 선언된 메소드와 같은 이름, 같은 리턴 타입, 같은 매개 변수 리스트를 갖는 메소드를 서브 클래스에서 재작성하는 것입니다.서브 클래스의 개발자는 슈퍼 클래스에 있는 메소드로 목적하는 바를 이룰 수 없을 떄 동일한 이름의 메소드를 서브 클래스에 다시 작성할 수 있습니다. 메소드 오버라이딩은 '슈퍼 클래스 메소드 무시하기 혹은 덮어쓰기'로 표현할 수 있습니다. 이는 슈퍼 클래스의 메소드를 무시하고 서브 클래스에서 오버라이딩된 메소드가 무조건 실행되도록 한다는 것인데, 이런 처리를 동적 바인딩이라고 부르며, 메소드 오버라이딩을 유발시킵니다. 오버라이딩 사례로 이해하기  오버라이딩된 메소드 호출Line line ..

내외부 연계 모듈 규현

연계 데이터 구성1. EA/ESB 방식EAI기업 내의 시스템들끼리의 커뮤니케이션을 위한 미들웨어.이중(다른) 시스템들 사이에 위치하여 각 시스템간의 필요한 정보를 서로 소통하여 관리의 효율성을 증대시키는 방법기업에서 운영되는 서로 다른 플랫폼 및 애플리케이션들 간의 정보 전달, 연계, 통합을 가능하게 해주는 솔루션EAI를 사용함으로써 각 비지니스 간 통합 및 연계성을 증대시켜 효율서을 높여 줌. EAI의 구축 유형유형개념도설명특징Point-to-Point중간에 미들웨어를 두지 않고 각 애플리케이션간 Point to Point 형태로 연결솔루션 구매 없이 통합상대적 저렴하게 통합 가능변경, 재사용 어려움Hub & Spoke단일 접점이 허브 시스템을 통해 데이터를 전송하는 중앙 집중적 방식모든 데이터 전송 ..

클래스

다른 언어처럼 클래스 기반으로 동작하는 것이 아니라 여전히 프로토타입 기반으로 동작합니다. 프로토타입 기반 문법을 보기 위해 클래스로 바꾼 것이라고 이해하면 됩니다. 다음은 프로토타입 상속 예제 코드입니다.var Human = function(type) { this.type = type || 'human';};Human.isHuman = function(human) { return human instanceof Human;}Human.prototype.breathe = function() { alert('h-a-a-a-m');}var Zero = function(type, fistName, lastName) { Human.apply(this, arguments); this.firstName = fistN..

영화 앱 멋지게 스타일링하기

App.css 파일 수정하기@font-face { font-family: "Ownglyph_wiseelist-Rg"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/Ownglyph_wiseelist-Rg.woff2") format("woff2"); font-weight: normal; font-style: normal;}* { box-sizing: border-box;}body { margin: 0; padding: 0; font-family: "Ownglyph_wiseelist-Rg"; background-color: #eff3f7; height: 100%;} Movie.css 파일 수정하기   .movies..

업캐스팅과 instanceof 연산자

캐스팅(casting)이란 타입 변환을 말합니다. 클래스에 대한 캐스팅은 업캐스팅(upcasting)과 다운캐스팅(downcasting)으로 나뉩니다. 업캐스팅서브 클래스는 슈퍼 클래스의 속성을 상속받기 때문에, 서브 클래스의 객체는 슈퍼 클래스의 멤버를 모두 가집니다. 그러므로 서브 클래스의 객체를 슈퍼 클래스의 객체로 취급할 수 있습니다.서브 클래스의 객체에 대한 레퍼런스를 슈퍼 클래스 타입을 변환하는 것을 업캐스팅(upcasting)이라고 합니다.업캐스팅은 슈퍼 클래스의 레퍼런스로 서브 클래스의 객체를 가리키게 합니다.Person p;Student s = new Student();p = s; // 업캐스팅 이 코드에서, 슈퍼 클래스 타입의 레퍼런스 p가 서브 클래스 객체(s)를 가리키도록 치환되는 ..

연계 데이터 & 연계 메커니즘 구현

연계 데이터 구성통합 구현단위 기능을 하는 모듈 간에 연게와 통합 연계 시스템 구성 요소별 수행 역할 및 기능구성 요소수행 역활 및 기능송신 시스템과 모듈송신모듈-전송하고자 하는 데이터를 생성하여 필요에 따라 변환 후 송신모니터링-데이터 생성 및 송신 상태를 모니터링통계 시스템외부 시스템 간의 연계, 인터넷망(Internet)과 인트라넷망(Intranet)을 연결중계 모듈-송신된 데이터의 오류 처리, 수신 시스템의 데이터 형식으로 변환수신 시스템과 모듈수신모듈-수신 받은 데이터를 정제(Cleansing)하고, 응용 애플리케이션이나 데이터베이스의 테이블에 적합하도록 변환하여 반영연계 데이터송수신되는 데이터데이터베이스(DB: Database)의 테이블과 컬럼, 파일, text, xml, csv네트워크물리적인..

구조 분해 할당

구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.var candy Machine = { status: { status: 'node', count: 5, }, getCandy: function () { this.status.count--; return this.status.count; },};var getCandy = candyMachine.getCandy;var count = candyMachine.status.count; 이 코드를 다음과 같이 바꿀 수 있습니다.const candyMachine = { status: { name: 'node', count: 5, }, getCandy() { this.status.count--; return ..

영화 앱 전체 모습 수정하기

App.css 내용 모두 지우기 노마드 코더 영화 API에서 장르 키 살펴보기 Movie 컴포넌트에 genres props 넘겨주기Movie 컴포넌트 인자에 genres을 추가하고, Moive.propTypes에는 genres props가 문자열 배열 arrayOf(PropTypes.string)이며 반드시 필요함(isRequired)을 추가합시다.import React from "react";import PropTypes from "prop-types";import "./Movie.css";const Movie = ({ title, year, summary, poster, genres }) => { return ( {title} {year} ..

상속과 생성자

서브 클래스와 슈퍼 클래스의 호출 및 실행서브 클래스와 슈퍼 클래스는 각각 생성자를 가지고 있습니다.서브 클래스의 객체가 생성되면 이 객체 속에 서브 클래스와 멤버와 슈퍼 클래스의 멤버가 모두 들어있습니다.서브 클래스의 생성자는 생성된 객체 속에서 들어 있는 서브 클래스의 맴버 초기화나 필요한 초기화를 수행하고, 슈퍼 클래스의 생성자는 생성된 객체 속에 있는 슈퍼 클래스의 멤버 초기화나 필요한 초기화를 각각 수행합니다. 슈퍼 클래스의 생성자가 먼저 실행된 후 서브 클래스의 생성자가 실행됩니다.C = new C(); 컴파일러는 이 new 문장이 실행되면 즉각 생성자 C()를 호출하게 합니다. 서브 클래스의 생성자가 먼저 호출되지만, 결국 슈퍼 클래스의 생성자가 먼저 실행되고 서브 클래스의 생성자가 나중에 ..

데이터 조작 프로시저 작성 & 데이터 조작 프로시저 최적화

데이터 조작 프로시저 작성데이터 저장소에 연결을 수행하는 프로시저데이터 저장소로부터 데이터를 읽어 오는 프로시저데이터 변경 내용 또는 신규 입력된 데이터를 데이터 저장소에 저장하는 프로시저 SQL 분류1) 데이터 정의어(DDL)명령설명예시CREATE오브젝트 생성CREATE TABLE dept1(deptno number(2), dname varchar2(14), loc varchar2(13));DROP오브젝트 삭제DROP TABLE dept1;RENAME오브젝트 이름 변경RENAME dept1 TO dept_copy;ALTER오브젝트 구조 변경ALTER TABLE dept_copy MODIFY (loc varchar2(14));TRUNCATE모든행 삭제TRUNCATE TABLE dept_copy; 2) 데..