개발하다가 정리할 시간이 필요하여 글을 적어봅니다. 내 혼자 볼려고 하는 글이지만, 공개로 해 놓고 언제든지 수정하여 업데이트 할 거에요. //개발해야 할 디자인을 보고 직관적으로 필요한 상태 유무를 유추 간단히 예를 들자면... 체크박스를 생각해봅시다! 체크박스가 있는 상태! 또는 체크박스가 없는 상태! 바로 useState 가 필요하고 들어갈 값은 boolean 이 되겠죠! 또한 버튼을 눌러 수정 및 완료를 하기 위해서도 상태가 필요합니다. 거기에 버튼의 이미지도 달라져야 하기에 그 상태에 맞는 상태가 필요하죠. 이러한 것을 집중(?)해서 연습하다보면, 직관적으로 이런 코드들이 나오지 않을까(?) 하는 그런 맥락적인 부분이 필요하지 않나.. 생각합니다.

1. 데이터 모델링의 정의 탄생배경은? 프로세스 중심의 정보시스템 분석이나 설계 기법에 문제점이 있다고 생각하여 정보를 중복없이 정확하게 유지 관리가 필요함 또한, 설계나 개발의 문제보단 정확한 업무의 파악과 정확한 분석이 선결되어야 한다고 생각함 따라서, 이러한 환경에 잘 표현할 수 있는 관계형 데이터베이스나 개체 관계 모델링 기법을 발전 시켜 옵니다. 그럼 모델이란? 어떤 대상을 의미하는 포괄적인 의미를 가지는 것으로 실험용이나 축소 모형등의 물리적인 모델과 원형은 그대로인데 조작, 수정, 변경을 통한 경제 모형과 같은 개념적 모델이 있다. 데이터에서 말하는 모델링 정의는? 복작한 현실 세계를 단순화 시키며 현실 세계를 추상화된 반영시킨 것으로 현재 업무를 파악하여 문제점 인식과 개선 사항을 도출하여..

전사아키텍처를 정의하고자 할 때 크게 아래와 같이 분류해보았습니다. 왜 도입을까? (도입배경) 그래서 전사아키텍처의 정의란? 전사아키텍처에서 전사와 아키텍처의 개념 추진 현황 또는 방향 도입배경 - 비지니스 복잡도가 증대하고, 업무와 IT 기능분리가 힘듦. - 기업의 환경 변화는 시스템의 변화와 비슷하며, 이러한 기업의 전체 시스템을 쉽게 파악할 수 있도록 필요한 형태로 변화시키기 위해 도입 전사아키텍처의 정의 기업의 목표와 요구를 지원하기 위해 IT 인프라를 체계적으로 기술한 것 비지니스, 데이터, 애플리케이션, 기술과 같이 이해하기 쉽도록 체계적으로 구축하고 활용 IT 투자대비 효과를 최대화 비지니스와 IT를 유기적 연결 비지니스 환경에 신속 대응 및 IT 자체 효율성 증가 우리나라는 업무, 응용, ..

React-DOM 공식문서 React를 사용하면 React-Dom을 볼 수 있는데 아래의 공식사이트에서 자세한 것을 알 수 있습니다. React-Dom 공식사이트 설명 ReactDOM – React A JavaScript library for building user interfaces ko.reactjs.org 내가 이해한 React-DOM은? 리엑트는 순수 자바스크립트로 컴포넌트를 만들어 브라우저를 구성합니다. 그런데 브라우저는 CSS, HTML 그리고 순수 자바스크립트를 이용할 수 있습니다. 즉, 위의 3 가지만 브라우저는 이해합니다. 그런데 리엑트를 보면 순수 자바스크립트와 다른 문법을 볼 수 있습니다. 이러한 다른 부분은 Babel 을 통해 순수 자바스크립트로 변환되어야 합니다. 그래야 브라우저..

React에서 Font Awesome 을 사용할 경우 이 블로그를 봐주세요! 공식문서 Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com FontAwesome 설치 npm 또는 yarn 을 이용하여 아래와 같은 명령어로 설치 가능합니다. // npm 일 경우 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fo..

git의 상태를 확인하는 명령어가 있습니다. git 상태 확인하기 git status 파일이 있다면 현재 파일이 git에 추가되어 있는지도 확인 가능합니다. On branch master No commits yet Untracked files: (use "git add ..." to include in what will be committed) ginsung.txt hanna.txt kosu.txt sujeong.txt nothing added to commit but untracked files present (use "git add" to track) 반복적으로 쓰이는 명령어 단축하여 사용하기 기본 구조는 아래와 같습니다. git config --global alias.단축명령어 status 단축명령..

오늘의 목표 깃 초기화 방법 깃 삭제 방법 깃 초기화 방법 아래와 같은 명령어를 입력합니다. git init 확인 방법은 아래와 같은 명령어를 입력하면 .git 파일을 확인 할 수 있습니다. ls -al 또는 l 일반적으로 파일을 확인하는 방법은 ls 명령어를 사용하지만 .git 파일은 숨겨져 있어서 위와 같은 명령어를 입력합니다. 깃 삭제 방법 삭제를 위한 명령어는 아래와 같습니다. rm -rf .git

Cmder 설치하기 git 사용자 설정하기 사용자 정보 설정 개행문자 (줄바꿈) 설정 cmder 설치 맥에서 사용하던 명령어를 윈도우에서 사용하고 싶지 않았나요 ?? 물론 Bash 를 설치해서 사용 가능합니다. 하지만 아래의 링크에서 cmder 를 다운받아 설치하면 맥에서 사용하던 명령어를 함께 사용 가능합니다. cmder 다운로드 링크 Cmder | Console Emulator Total portability Carry it with you on a USB stick or in the Cloud, so your settings, aliases and history can go anywhere you go. You will not see that ugly Windows prompt ever again...

NumPy 를 파이썬을 이용하여 공부한다면 아래의 링크에서 공부 가능합니다. NumPy quickstart NumPy quickstart — NumPy v1.22.dev0 Manual NumPy provides familiar mathematical functions such as sin, cos, and exp. In NumPy, these are called “universal functions” (ufunc). Within NumPy, these functions operate elementwise on an array, producing an array as output. See also all, any, apply_al numpy.org 그리고 데이터 사이언스 스쿨의 넘파이 배열 프로그래밍에 설..

SELECT 문을 이용한 데이터 읽기 SELECT 를 사용한 문법으로 아래의 명령어를 사용합니다. SELECT [필드목록] FROM [테이블] 필드 목록에 * 을 사용하여 전체를 가져올 수 있지만, 내가 원하는 목록만 가져와서 볼 수 있습니다. SELECT name from myclass; +------+ | name | +------+ | Hong | +------+ 1 row in set (0.001 sec) SELECT 문을 이용한 WHERE 조건문 특정한 조건을 이용하여 원하는 데이터를 읽어올 수 있습니다. 예를들어 Grade1 인 학생만 읽어 온다면 아래와 같이 가능합니다. SELECT * FROM myclass -> where className = 'Grade1'; +-----------+--..

데이터 입력 데이터를 입력하기 위해 아래의 명령어를 사용합니다. INSERT INTO [테이블이름] VALUES ([테이블에 맞는 조건 입력]); 테이블 이름은 myclass이고 테이블에 맞는 조건 입력은 studentID (숫자), name(문자열), className(문자열) 이 됩니다. INSERT INTO myclass VALUES (1, 'Song', 'Grade1'); Query OK, 1 row affected (0.003 sec) INSERT INTO myclass VALUES (2, 'Hong', 'Grade2'); Query OK, 1 row affected (0.003 sec) 입력된 데이터 읽기 데이터는 넣었고 이젠 읽어와 봐야 합니다. 데이터를 읽는 명령어는 SELECT 입니다. ..

DB 선택하기 생성된 DB 중에 사용할 DB를 선택합니다. 선택할 명령어는 아래와 같이 입력합니다. use [데이터베이스 이름]; 여러 테이터 베이스들 중 use 사용하여 선택해봅니다. MariaDB [(none)]> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | study | | study1 | | sys | +--------------------+ 6 rows in set (0.001 sec) MariaDB [(none)]> use study; Database changed 테이블 생성하기 테이블을 생성하기 전 ..

생성하기 현재 콘솔에 아래와 같은 상태로 접속된 상태라고 가정합니다. Server version: 10.6.2-MariaDB mariadb.org binary distribution Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. MariaDB [(none)]> 그리고 DB 를 생성하기 전 DB 리스트를 볼 수 있습니다. show databases; 그럼 만들어진 DB 목록들을 볼 수 있습니다. +--------------------+ | Database | +-----------------..

제목과 같습니다. 웹에서 스크롤을 내렸을 때, 네비게이션 바가 고정되어 같이 내려온 것을 본 적 있으신가요? 그 부분을 공유해보도록 하겠습니다. 설명 1. 글로벌 네비게이션은 스크롤을 이용해 내리면 사라짐 2. 로컬 네비게이션은 스코롤을 내리면 고정되어 보여줌 3. 다시 스크롤을 올려 높였을 때, 두 개의 네비게이션 보여줌 준비 3개의 파일만 준비하면 됩니다. HTML 부분 글로벌 네비게이션을 아래와 같이 적용해봅니다. 명령어를 아래와 같이 입력해 봅니다. .container nav.global-nav .global-nav-links .global-nav-items*4 결과는 아래와 같이 나옵니다. item1 item2 item3 item4 flex를 이용하여 스타일을 적용합니다. .container {..

함수에 매개변수로 숫자도 들어오지만 배열 형태로도 들어 올 수 있습니다. 뿐만 아니라, 함수 형태로도 받을 수 있습니다. 여기에서는 배열을 전개하여 함수의 매개변수로 전달해주는 전개 연산자에서 알아보겠습니다. 전개 연산자 간단한 예제로 차이점을 확인하겠습니다. const array = [1,3,5,7,9]; const spreadOperator = (...items) => { console.log(items); } spreadOperator(array); // 배열안에 배열이 들어옴 [[1,3,5,7,9]] spreadOperator(...array); // 배열형태로 들어옴 [1,3,5,7,9] 전개 연산자를 사용한 것과 사용하지 않는 차이점을 확인 할 수 있습니다. 사실 제가 이해한 건 아래의 코드로..

함수에 들어오는 값을 매개변수라고 하고 함수를 통해 수행된 작업 후 출력된 값을 리턴 값이라고 공부하였습니다. 그럼 여기에 들어오는 매개변수는 무엇이 있는지, 어떤 리턴값을 받는지와 모든 함수에 매개변수가 필요한지 등등 알아보겠습니다. 매개변수를 가지고 리턴값을 갖는 함수 MDN 공식 문서 함수 - JavaScript | MDN 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범 developer.mozilla.org const 함수 = (매개변수, 매개변수) => { 문장 return 리턴값 } 간단 문제 1: 제곱근 구하기 const squareRoot = (x..

함수 수학에서 함수를 정의 한다는 건 변수의 값에 따라 정해지는 다른 변수의 값을 먼저 주어지는 값에 상대하여 일컫는 말 (위키피디아 인용) 위키피디아에서 확인 함수 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 함수는 입력값에 따라 출력값을 만들어 내는 ‘블랙 박스’와 같다. 수학에서 함수(函數, 영어: function) 또는 사상(寫像, 영어: map, mapping)은 어떤 집합의 각 원소 ko.wikipedia.org 위의 그림에서도 보듯이 입력 값 x 를 넣으면 출력 값 f(x)가 나오는 형식입니다. 자바스크립트에서의 함수 위에서 사용한 정의를 그대로 들고옵니다. 입력 값 x 를 프로그래밍에서는 매개변수라고 부릅니다. 그리고 최종적으로 나오는 출력 값을 리턴 값이라고 부릅..

목표설정 Node와 Koa를 설치 후 ES 모듈이 사용되게끔 하기 이유 Node JS 에서는 ES 모듈인 import / export 문법이 지원되지 않습니다. 따라서, 해당 문법을 사용하기 위한 환경설정 방법을 적어봅니다. 1. Node 설치 2. Koa 설치 3. ES 모듈 사용을 위한 esm 설치 4. 환경설정 마무리 1. Node 설치 노드설치를 위해 아래의 링크를 통해서 접속 후 NodeJS 를 설치합니다. Node JS 다운로드 링크 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 후 터미널에서 아래의 명령어로 버전 확인이 되면 설치완료가 된 것입니다. node..

NodeJS에서 Router는 내장함수로 되어있습니다. 공식문서 참조 Express 5.x - API Reference Express 5.x API Note: This is early alpha documentation that may be incomplete and is still under development. express() Creates an Express application. The express() function is a top-level function exported by the express module. const express = require( expressjs.com 하지만 저는 실용파라 저걸 다 읽어보는 것 보단 해보면서 이해해봅니다! 사용방법 공식문서의 예시 var ex..

목적 ES6 문법을 NodeJS 에서 사용을 위함입니다. 예시 // Node 문법 const express = require("express") // ES6 문법 import express from "express" Babel 설치 및 설정 설치할 NPM 모듈 @babel/core @babel/node @babel/preset-env Babel/node 공식 링크 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io Babel Node Server w/Babel 참고 babel/example-node-server Example Node Server w/ Babel. C..

간단 설명 Organization Unit 을 지우기 위해 Protect object from accidental deletion 의 체크박스를 제거해야 합니다. (없다면 제거하는 방법 건너뛰면 됩니다.) 한 두개 정도는 마우스로 직접 해도 됩니다. 하지만, Organization Unit 이 많을 경우 반복문을 통하여 한번에 작업할 수 있는 이점이 있습니다. 그렇기 때문에 제어하는 방법부터 먼저 확인 합니다. Protect object from accidental deletion 제거하기 Get-ADOrganizationalUnit -Filter * -SearchBase "위치" | Set-ADObject -ProtectedFromAccidentalDeletion $false -Verbose 여기서 위..

원인 환경 변수 설정을 제가 이해한 대로 변경 후 완성시켰습니다. 그런데 예상치 못한 실수를 저질렀습니다. 그 결과 Mac 터미널에서 명령어가 실행이 되지 않았습니다. 현상 기본 명령어인 ls, vi 등 입력 후 실행하여도 아무런 반응이 없습니다. 해결책 아래와 같은 명령어를 터미널에서 입력합니다. export PATH=/usr/bin:/bin 임시로 해결되기 때문에 터미널을 끄면, 명령어가 다시 안될 것입니다. 그래서 마지막 환경변수 설정한 파일에 가서 설정을 잘 마무리 하면 됩니다! .bash_profile 에 있습니다. vi .bash_profile 즉, 패스 설정을 잘못해서 /usr/bin 의 패스가 날아갔다고 봐야 합니다.

현재 Windows Server 환경 Windows Server 2012 R2 Windows Server 2008 R2 (가상화) 간단 설명 Active Directory 실행 Organizational Unit 버튼 선택 또는 New -> Organizational Unit 클릭 이름 입력 체크박스 Protect Container from accidental deletion 확인 그림과 설명 (실행) 아래와 같은 Active Directory 아이콘 선택 및 실행 또는 아래와 같은 이름 입력 후 실행 dsa.msc 그림과 설명 (생성) 원하는 위치에서 아래와 같은 아이콘 선택 또는 오른쪽 버튼 후 New-> Organizational Unit 선택 이름 입력 그림과 설명 (삭제) 만약 체크박스 Prot..

Login Admin 선택 Users 선택 Bulk upload users 선택 (2명 이상의 유저를 한번에 등록하기 위해) 처음 유저라면 Blank CSV Template과 user's info 둘 다 다운로드 Blank CSV Template 열기 컬럼에 [Required] 표시가 된 부분은 필수 First Name [Required] Last Name [Required] Email Address [Required] Password [Required] 신규 유저에게는 저희가 입력합니다. 기존 유저에게는 기존 패스워드를 유지하기 위해서 **** 을 입력하면 기존 패스워드 유지됩니다. Org Unit Path [Required] Organizational Unit 약자 같은데 해당 유저가 있는 위치입니다..

2020년 6월 새 컴퓨터를 재 구매! 블루아이티에서 3 번째 입니다! 현재 사용중인 컴퓨터는 CPU - i5 (4세대) RAM - 8GB SSD - 250GB 6년이 넘게 지났고 특히 파워서플라이에서 문제가 많이 발생 중입니다. 고민도 없이 블루아이티에서 3 번째 재 구매를 진행합니다. 박스는 샵 다나와에서 지원한건가... 1. CPU 라이젠만 사다가 인텔을 한번 구매해 보고 싶었습니다. 벌써 10세대 까지 나왔네요. 용도는 사무용 입니다. 하지만 브라우저를 많이 띄우고 엑셀을 많이 사용하는 곳이라면 일반 사무용은 버거울 수 있습니다. - 인텔 코어 i5-10세대 10400 (코멧레이크S) (정품) 220,340원 (6월 기준) 현재 인텔 코어 i5-10세대 10400 (코멧레이크S) 블루아이티 가격 ..

이 글의 구성 1. 텍스트 코드 2. 텍스트와 수식어를 사용하여 활용한 코드 시작 Xcode 를 실행하여 SwiftUI 로 만든 뒤 ContentView.swift 파일을 확인하면 아래와 같은 코드를 볼 수 있습니다. import SwiftUI struct ContentView: View { var body: some View { Text("Hello, World!") } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } Text 코드 사용법 Text() 에 " " 안에 문자를 넣을 수 있습니다. Text ("문자를 넣을 수 있습니다.") Text 와 수식어 사용 -1 Text..

간단설명 구글 그룹 메일 수신이 되지 않는 상황 moderation 문제 발생 해결방법은 해당 그룹의 moderation setting으로 들어가서 Messages -> Pending messages 확인 만약 있다면 moderation 발생되어 메일이 보내지지 않은 상황 메일을 다시 보내고 Settings -> Moderation 으로 가서 Spam Messages 의 옵션 중 Skip the moderation queue and post to the group 으로 변경 증상 사용자의 그룹 메일안에 있는 멤버 모두 메일을 받아 볼 수 없는 상황 아무리 테스트를 해도 받을 수 없습니다. 혹시나 그룹 메일 멤버들 중 일부만 받게되어도 위와 같은 증상으로 생각하면 됩니다. 원인 원인을 알기 전 내가 속해 ..

간단설명 클라이언트와 서버가 통신하여 클라이언트에서 입력한 아이디, 비밀정보를 서버에서 받아볼 수 있도록 하기! 클라이언트와 서버 통신 셋팅 클라이언트 (브라우저) 아이디, 비밀번호 정보 입력 후 서버에 전달 서버 서버는 클라이언트에서 보낸 정보를 받음 여기서 body-parser 를 이용 (공식 링크) body-parser Node.js body parsing middleware www.npmjs.com npm install body-parser --save 설치한 body-parser를 불러옵니다. const bodyParser = require('body-parser'); body-parser 가 클라이언트에서 오는 정보를 서버에서 분석 후 가져오게 하는데 1. 인코딩된 url을 가져오는 방법 2...

간단설명 Node JS 에서 MongoDB 를 연결하기 위해 아래의 코드를 입력 const mongoose = require('mongoose'); mongoose.connect("몽고 DB 주소", { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false }) .then(() => console.log('Successfully connected to mongodb!')) .catch(e => console.error(e)); Mongoose 설치 Node 에서 MongoDB에 연결하기 위해 아래와 같이 Mongoose를 설치합니다. 몽구스 공식 NPM mongoose Mongoose Mo..

1. 누구에게 필요한가? -> 백엔드에 NodeJS 가 필요한 사람 2. 초기 셋팅 방법은? -> 무엇이 필요하여 설치 및 테스트하기 3. 결과 -> 결과 화면 1. 백엔드에 NodeJS 가 필요한 사람 NodeJS는 자바스크립트 언어가 주 언어입니다. NodeJS 가 필요하다면, 자바스크립트 언어를 꼭 공부하시길 바랍니다! 2. 초기 셋팅 방법 먼저 Node가 있는지 확인합니다. 확인 방법은 아래와 같습니다. node -v 없다면 node를 아래의 링크를 통해 설치 바랍니다. 설치 파일 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2.1 노드 프로그램 시작하기 노드 프로그램 ..