cometruedream의 등록된 링크

키자드에 등록된 총 252개의 포스트를 확인하실 수 있습니다.

Tistory

javascript execCommand (복사 기능)

다양한 사이트에서 버튼을 클릭하면 텍스트를 복사해서 copy할 수 있는 기능을 사용한다. 복사기능을 구현하는데는 execCommand API를 사용하거나 clipboard API를 사용하는 두 가지 방법이 있다. * clipboard API 최신 스펙으로 지원하지 않는 브라우저가 많습니다. 저는 execCommand API를 활용해서 클릭시 복사기능을 구현했다. Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an..

원문보기 내부링크
Tistory

javascript Math.random() 활용한 랜덤 명언

랜덤으로 배열에 데이터를 변경시켜 데이터를 변경하는 경우에 Math.random() & Math.floor 사용해서 구현했다. 이 기능뿐만 아니라 가격, 숫자등등 다양하게 값을 구하는데 활용성이 좋은 함수다. Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. quotes 배열에 데이터를 만들어준다. 2. quoteFun 함수를 선언한다. 3. 보여줄 t..

원문보기 내부링크
Tistory

javascript countDown (날짜 카운트다운)

카운트다운 시계를 javascript 메소드를 활용해서 구현했다. 새로운 제품이 출시되거나 이벤트 상품이 출시되면 할인 or 각종 카운트다운 이벤트가 종료될때 사용될 수 있는 기능이다. 비즈니스에서 유용하게 사용될 수 있는 기능이다. ex: 할인 기간동안은 구매 가능 기간 종료우 구매 불가능 등등... Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. ..

원문보기 내부링크
Tistory

javascript FAQ(자주 묻는 질문)

javascript 활용해서 FAQ(자주 묻는 질문) 을 구현했다. 많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. ex: 강의에 자주묻는 질문들을 정리, 비즈니스 정보를 쉽게 제공 등등... Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 질문 dom을 찾는다. 2. 찾아온 dom을 순회해서 각..

원문보기 내부링크
Tistory

javascript 문단 생성하기

javascript 활용해서 더미 문단을 만드는 기능을 구현했다. 프로젝트시 무작위 문단 or 문장이 필요할 경우에 활용하면 좋다. Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 필요한 dom 찾는다. 2. form submit event 만든다. 3. input 값을 parseInt 숫자로 변환 4. switch문을 활용해서 예외처리 5. text..

원문보기 내부링크
Tistory

Next.js typescript mysql styled-components 셋팅

Next.js typescript 프로젝트 구축, 보일러 플레이트처럼 만들어 놓고 쓰면 좋을꺼 같다. Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/next-boilerplate GitHub - yoogukhyeon/next-boilerplate Contribute to yoogukhyeon/next-boilerplate development by creating an account on GitHub. github.com structure 구조 pages, components, config, public, styles, .babelrc pages: next에서 auto routing 되는 페이지를 생성한다. components: 재사용 ..

원문보기 내부링크
Tistory

[React] 리다이렉트를 이용한 로그인 후 이전 페이지 이동

c️ React 로그인후 로그인 이전페이지로 이동하는 방법. 1. 커뮤니티에서 페이지 이동시 navigate에 state에 pathname 값을 할당 2. 커뮤니티에서 login 페이지로 이동하고 로그인 후 다시 커뮤니티 페이지로 이동 Router Header Login 이동 1. react-router-dom에 useLocation 사용 2. pathname으로 현재 페이지 path값을 찾고 login 이동시 state에 현재 페이지 path를 넣어준다. Sign in 이동 1. react-router-dom에 useLocation 사용 2. useLocation에 state 찾는다. 3. 로그인 성공 후에 navigate에 받아온 state 값으로 이동시킨다. url로 접속 하게되면 state 없..

원문보기 내부링크
Tistory

[ Trouble Shooting ] Shasum command not found

Trouble Shooting 이란? 시스템에서 발생하는 복잡한 문제들을 종합적으로 진단해 해결하는것. 즉 문제 해결이라고 생각하면 된다. Problem Nginx에 Github Action 에이전트를 설치하는 도중 생긴 에러. Shasum command not found Github Action 으로 CI/CD 구축 중 self-hosted runner 를 Linux CentOS 7에 설치하는 도중 발생 $ echo "... actions-runner-linux-x64-2.299.1.tar.gz" | shasum -a 256 -c Soultion shasum은 SHA 메시지 다이제스트, 암호화 체크섬 또는 암호화 해시코드를 계산하는 데 사용됩니다. Reference : https://linuxh..

원문보기 내부링크
Tistory

AWS S3 CORS 헤더 관련 이슈 해결방법

c️ CORS? cors란? cors란 Cross Origin Resource Sharing을 의미한다. cors는 웹 브라우저에서 보안상의 이유로 도입되었는데. 현재 사용자가 접속한 웹 애플리케이션이 다른 출처의 리소스를 불러올 때, Access-Control-Allow-Origin 헤더를 보내주지 않으면 브라우저가 그 리소스를 거부하는 보안 정책 이다. 즉 다른출처에 도메인에 요청을 보냈을때 보안상 요청이 불가능하다. 다른 출처에 도메인에 요청을 보냈을때 위와 같은 에러를 보실수 있다. c️ AWS S3 cors Error? React에서 바로 s3에 파일을 전송하는 로직을 작업하던 도중 s3 요청을 보낼때 받은 cors 에러. c️ Soultion? AWS S3 이동 권한 클리후 아래에 ..

원문보기 내부링크
Tistory

javascript scroll active

웹사이트에 사용자가 어디위치 콘텐츠를 보고있는지 사용자 편의를 높여줄 수있는 scroll 이벤트를 다루는 방법입니다. github에서 Sourse 입니다! https://github.com/yoogukhyeon/vanilla_javascript javascript 사용해서 scroll일 경우 각 Element 요소에 active 사용방법 입니다. See the Pen Scroll Active by 유국현 (@yoogukhyeon) on CodePen. 웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우에 사용하는 속성 * 브라우저간 호환성을 위해서는 window.scrollY 대신 window.pageYOffset을 사용하세요. HTML 요소에 높이나 너비를 구해야할 경우 많이 쓰이는 속성 offs..

원문보기 내부링크
Tistory

AWS Elastic Beanstalk

c️ EB(Elastic Beanstalk)란? AWS에서 제공하는 100개 이상의 서비스로 구성되어 있으며 다양한 서비스는 AWS 인프라 관리 방법의 유연성을 제공하는 반면에 어떤 서비스를 사용해야 하고 해당 서비스를 프로비저닝하는 방법을 파악하는 것이 까다로울 수 있다. Elastic Beanstalk를 사용하면 애플리케이션을 실행하는 인프라에 대해 자세히 알지 못해도 AWS클라우드에서 애플리케이션을 신속하게 배포하고 관리할 수 있다. Elastic Beanstalk는 Go, Java, Php, Node.js, Python 등에서 개발된 애플리케이션을 지원합니다. AWS 클라우드에서 애플리케이션을 신속하게 배포하고 관리할 수 있는 서비스 애플리케이션을 업드만 하면 용량 프로비저닝, 로드 밴런싱, ..

원문보기 내부링크
Tistory

HTTP Content-Disposition란?

c️ Content-Disposition? 일반적인 HTTP 응답에서 Content-Disposition 헤더는 컨텐츠가 브라우저에 inline 되어야 하는 웹페이지 자체이거나 웹페이지의 일부인지, 아니며 attachment로써 다운로드 되거나 로컬에 저장될 용도로 쓰이는 것인지를 알려주는 헤더입니다. 정리하자면? HTTP Response Header에 들어가는 Content-Disposition은 HTTP Response Body에 오는 콘텐츠의 성향을 알려주는 속성 Content-Disposition에 attachment를 주고 filename과 함께 주게 되면 body에 오는 값을 다운로드 받으라는 뜻이 된다. ex: Header 부분에 content-disposition 설정해준다. Conte..

원문보기 내부링크
Tistory

[Trouble Shooting] Nginx proxy 설정

c️ Proxy? 다른 서버에서 리소스를 찾는 클라이언트의 요청에 대한 중계자 역할을 하는 서버이다. 따라서 프록시 서버는 클라이언트와 클라이언트가 찾고 있는 데이터를 호스팅하는 실제 서버 사이에 위치한다. 클라이언트에게 프록시 서버는 실제 백엔드 서버로 나타나고, 백엔드 서버에는 프록시 서버가 클라이언트처럼 보인다. 프록시를 사용하는 이유는 단순히 보안때문만이 아니라 프록시 서버에 요청이 된 데이터들을 [캐시]를 이용해 저장해 둡니다. 캐시를 활용해서 요청시간을 절약 할 수 있습니다. c️ Reverse Proxy? 하나 이상의 백엔드 서버 앞에 위치하여 각 요청에 사용할 백엔드 서버를 결정하는 것이다. Reverse Proxy 장점 동시성 : 다중 연결을 더 잘 처리할 수 있는 역방향 프록시를..

원문보기 내부링크
Tistory

Mysql - union, union all 차이

c️ UNION AND UNION ALL 사용법 차이? UNION이란? union ( distinct ): 중복을 제거한다. 쿼리의 결과를 합친다. 중복된 row는 제거 UNION ALL 이란? union all: 중복을 제거 하지 않는다. 쿼리의 결과를 합친다. 같은 ROW의 결과도 보여준다. c️ UNION AND UNION ALL 개념? UNION ALL 중복을 제거하지 않으므로 UNION보다 속도가 빠르다 MySQL의 내부적으로 UNION ALL과 UNION을 처리하는 과정 최종 UNION[ ALL | DISTINCT ] 결과에 적합한 임시 테이블을 메모리 테이블로 생성 UNION 또는 UNION DISTINCT의 경우, 임시 테이블의 모든 컬럼으로 Unique Hash 인덱스 생성 쿼리 ..

원문보기 내부링크
Tistory

FormData 사용법 & 개념

c️ FormData란? FormData 알아보기 앞서 먼저 파일이나 이미지를 서버에 전송하는 경우에 중요한 개념인 multipart/form-data 알아야한다. multipart/form-data 간략한 정리: http 메시지에 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송한다. 즉 이미지, 파일 등이 png, jpg 파일 자체가 전송되는 것이 아니고 인코딩된 데이터로 전송된다. 이미지, 파일 등을 서버로 보내줄때 FormData 객체가 많이 사용이 된다. // FormData 기본 문법 // 자바스크립트로 직접 form 태그를 생성 let formData = new FormData(); // 새로운 폼 객체 생성 form..

원문보기 내부링크
Tistory

화살표 함수 (Arrow Function)란?

c️ 화살표 함수? 화살표 함수는 ES6에 도입된 새로운 기능으로 일함 함수보다 간결하고 짧게 작성할 수 있다. 일반 함수와 화살표 함수는 동작 방식은 비슷하지만 몇가지 차이점이 있다. c️ 구문? 더짧은 코드로 함수를 선언할 수 있다. 일반함수 function addFunc(x, y) { return x + y; }; 화살표 함수 let addFunc = (x, y) => { return x + y }; 가장 중요하면서 간결하게 사용할 수 있는 방법으로 return문을 생략할 수 있다. 화살표 함수는 본문이 짧은 경우 중괄호와 return문을 생략할 수 있습니다. 생략 전 let addFunc = (x, y) => { return x + y } 생략 후 let addFunc = (x, y) =>..

원문보기 내부링크
Tistory

모놀리식 아키텍처 vs 마이크로서비스 아키텍처

c️ 모놀리식와 마이크로서비스 아키텍처란? 모놀리식 애플리케이션은 하나의 통합된 유닛으로 만들어지는 반면, 마이크로서비스 아키텍처는 독립적으로 배포할 수 있는 서비스다. 어떤 것이 적합한지는 여러 요인에 따라 다르다. 모놀리식 아키텍처 (Monolithic Architecture)? 전통의 아키텍처를 지칭한다. 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어 있는 형태. 모놀리식 아케텍처의 경우 모든 프로세스가 긴밀하게 결합되고 단일 서비스로 실행된다. 따라서 애플리케이션의 한 프로세스에 대한 수요가 급증하면 해당 아키텍처 전체를 확장해야 한다. 코드 베이스가 증가하게 되면 모놀리식 애플리케이션의 기능을 추가하거나 개선하기가 더 복잡해진다. 모놀리식 아키텍처 장점 모놀리식 아키텍처를 사용하여 ..

원문보기 내부링크
Tistory

Javascript에서 false로 간주되는 것들(알아두면 유용한 정보)

c️ Javascript 공부전에 알면 좋은것 자바스크립트는 두 가지 종류의 값이 있다. 하나는 Primitive Value(원시값)이고, 다른 하나는 Reference Value(참조값)입니다. 원시값: number, string, boolean, null, undefined 참조값: array, function, object c Javascript 에서 boolen 결과가 false로 판명되는 것들은? undefined, null NaN 0, -0 " " false 다음과 같이 7가지 정도의 boolen 결과값은 false로 판명이 된다. c 주의할점? 주의할 점은 빈 문자열은 false 이지만 빈 배열, 빈 객체는 true라는 것이다. > Boolean( "" ) false > Boolean( ..

원문보기 내부링크
Tistory

[git] .gitignore이 적용이 안될 때 해결 방법

c️ .gitignore 란? 프로젝트 작업시 로컬 환경의 정보나 빌드 정보등 원격 저장소에 관리하지 말아야되는 파일들에 대해서 지정하여 원격 저장소에 실수로 올라가지 않도록 관리하는 파일이다. 정의한 정보들에 해당하는 파일들에 대하여 git track(추적)하지 않도록 설정하는 역활을 한다. c️ .gitignore 적용이 안될때? 프로젝트를 진행 하다보면 .gitignore에 제거할 파일이나 폴더를 적용했음에도 적용이 안되고 계속 저장소에 올라와 있는 경우가 있다. 또한 실수로 커밋을 해서 원격저장소에 올라가는 경우도 있다. 이경우 .gitignore에 캐시를 삭제한 후 commit을 하면 .gitignore에 제거할 파일이나 폴더가 적용이 되어 로컬 저장소에 올라오지 않고 실수로 commit..

원문보기 내부링크
Tistory

json-server 구축해서 React 프로젝트

git address: https://github.com/yoogukhyeon/react-study-group/tree/api c️ json-server란? 프론트엔트 사이드프로젝트 혹은 개발을 하다보면 server 데이터가 필요합니다. 백엔드 개발에 많은 시간을 사용할 수 없다면 json-server를 활용해서 API서버를 만들수 있습니다. 이런 경우에 필요한 도구가 json-server 입니다. 참고로 이 도구는 프로덕션에서 사용하기위하여 만들어진것입니다. 실제 운영에서는 사용하시면 안됩니다. * 프론트엔드 테스트 용도 1. json-server npm 설치 npm i -D json-server //dev에 설치 프로젝트 package.json에 scripts 추가 "scripts": { "sta..

원문보기 내부링크
Tistory

Nest.js Middleware logger

c Nest.js 미들웨어란? 미들웨어는 Route 핸들러 보다 먼저 호출되는 함수입니다. 미들 웨어 기능은 애플리케이션의 요청-응답 주기에서 요청 및 응답 객체 와 미들웨어 기능에 액세스할 수 있습니다. Next() 다음 작업으로 넘긴다는 의미입니다. Nest.js 미들웨어는 기본적으로 Express 미들웨어와 동일하다. 미들웨어 기능은 다음 작업을 수행할 수 있습니다. 모든 코드를 실행합니다. 요청 및 응답 객체를 변경합니다. 요청-응답 주기를 종료합니다. 스택에서 다음 미들웨어 함수를 호출합니다. 현재 미들웨어 기능이 요청-응답 주기를 종료하지 않으면 Next() 다음 미들웨어 기능으로 제어를 전달하도록 호출해야 한다. Next() 호출하지 않을경우 요청이 중단 됩니다. 정리하면: 미들웨어는 클라이..

원문보기 내부링크
Tistory

Mysql Auto Increment, Primary Key, Foreign Key 옵션 정리

c Mysql Auto Increment 란? 테이블 값을 입력하다보면 자동으로 값을 증가 시켜야된다. 그 이유는 테이블 마다 PK(primary key) 설정을 한다. 그래서 PK의 특징은 고유성(unique) 중복된 데이터를 가지면 안되는 특징 때문에 각 row에 index를 체크해서 자동으로 값을 올려주는 옵션이 AUTO_INCREMENT이다. 조건: 기본키(Primary Key)에만 옵션 부여가 가능하다. 사용 예제 CREATE TABLE auto_test( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY, name VARCHAR(64) ); 개념 : AUTO_INCREMENT을 사용하다가 1~5번까지의 데이터를 넣고 2~5번 데이터를 지우고 데이터를 다시 생성..

원문보기 내부링크
Tistory

Mysql Subquery 개념 정리!

c Mysql 서브쿼리(subquery) 란? 서브쿼리(subquery)란 하나의 SQL 문 안에 포함되어 있는 또 다른 SQL문을 말한다. 첨 select 문이 메인쿼리이고 from (select) 문이 서브쿼리가 된다. select * from prem_board where 1 = 1 and b_no = ( select bc_seq from prem_board_comment group by bc_seq limit 1 ) order by b_no desc c Mysql 서브쿼리 장점? 서브쿼리는 쿼리를 구조화시키므로, 쿼리의 각 부분을 명확히 구분할 수 있게 해준다. 서브쿼리는 복잡한 JOIN이나 UNION과 같은 동작을 수행할 수 있는 또 다른 방법을 제공 서브쿼리는 복잡한 JOIN이나 UNION보다..

원문보기 내부링크
Tistory

DNS(Domain Name System) 개념과 동작 원리

cDNS(Domain Name System)? 도메인 이름 시스템(DNS)은 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP주소로 변환한다. DNS 동작 원리? 컴퓨터에서 브라우저에서 www.naver.com 을 입력한다. 컴퓨터는 DNS 서버로 www.naver.com에 맵핑된 IP주소를 물어본다 DNS 서버는 해당 도메인의 IP 주소를 알려준다. 컴퓨터는 이를 받아서 IP주소에 해당하는 컴퓨터에 접속하게 된다. cDNS A타입 레코드, CNAME 레코드, NS레코드? 타입 레코드 설명 A Address Record CNAME Canonical Name Record A recode란? A는 Address의 약자로 도메인네임과 IP 주소를 맵핑할때 사용한다. ex) www.google.c..

원문보기 내부링크
Tistory

React-query 상태 관리

React-query 알기전에 JSX란? JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다. JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다. JSX는 javascript 확장한 문법으로 바벨등등을 사용하여 트랜스파일러로 javascript 형태의 코드로 변환이 된다. JSX 문법은 반드시 부모요소 하나가 감싸는 형태 여야한다. 문법으로 부모요소를 만드는 경우가 많다. JSX에서 javascript 표현식을 작성하려면 {}로 코드를 감싸줘야한다. {isLoading && Loading} JSX에서 class사용이 아닌 className을 사용한다. cReact-query 란? React-query는 서버 상태 라이브러리 입니다. 서버와 클라..

원문보기 내부링크
Tistory

ESLint, Prettier Setting 이해하며 정리

c ESLint & Prettier 정확한 차이? ESLint 와 Prettier는 둘다 코드 컨벤션을 도와주는 역활을 한다. 둘중에 하나만 써도 되는데 왜 둘을 같이 사용하는 경우가 많다. ESLint 와 Prettier 다른 차이가 있기 때문에 둘을 같이 사용한다. "eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다." 그 차이에 대해서 알아보자. ESLint 개발중 기능을 구현 할때, 한개의 기능을 구현하기 위한 엄청나게 많은 방식들이 있다. // function 키워드 사용 function foo() { ... } // arrow function 사용 const foo = () => { ... } const Temps = [1,..

원문보기 내부링크
Tistory

Nest.js - 개념 & 초기셋팅

c Nest.js 란? Nest.js는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크이다. JavaScript를 사용하고 TypeScript로 구축되어 완벽하게 지원하며 OOP, FP, FRP 요소를 결합합니다. OOP(Object Oriented Programming) FP(Functional Programming) FRP(Functional Reactive Programming) 내부적으로 Nest.js는 Express와 같은 강력한 Http 서버 프레임워크를 사용하며 선택적으로 Fastify도 사용하도록 구성할 수 있다. Nest.js 장점 Nest.js는 Express를 기반으로 만들어진 웹 프레임워크다. Java의 Spring와 비슷한 아키텍쳐 구조를 ..

원문보기 내부링크
Tistory

Node.js Express 정적(static) Public 폴더 사용하기

c Node.js Static File(정적 파일) 정적 파일이란, 직접 값에 변화를 주지 않는 이상 변하지 않는 파일을 의미합니다. 즉 css, image, js 파일 등을 의미합니다. 프로젝트를 진행하다보면 정적 파일 사용이 필요할때가 있습니다. 그래서 Express 이러한 정적 파일을 손쉽게 제공할 수 있는 미들웨어를 제공합니다. Node.js Static File(정적 파일) Express에 static 메소드를 제공합니다. static 메소드를 활용해서 편리하게 정적폴더 public 미들웨어를 설정할수있습니다. ex : http://localhost:3000/public/css/common.css http://localhost:3000/css/common.css 이런식으로 파일경로를 접근..

원문보기 내부링크
Tistory

AWS CodePipeLine & Elastic Beanstalk CI/CD

c AWS CodePipeLine 개념 신속한 제공 구성 가능한 워크플로우 빠르게 시작 손쉬운 통합 c️ AWS CodePipeLine 이란? AWS CodePipeLine은 빠르고 안정적인 애플리케이션 및 인프라 업데이트를 위해 릴리스 파이프라인을 자동화하는데 도움이 되는 완전관리형 지속적 전달 서비스입니다. 즉 CodePipeLine은 코드 변경이 발생할 때마다 사용자가 정의한 릴리스 모델을 기반으로 릴리스 프로세스의 빌드&테스트 및 배포 단계를 자동화 해서 개발자의 편리를 제공합니다. AWS CodePipeLine을 Github 또는 형상관리 서비스와 손쉽게 통합해서 Code 관리를 할수있습니다. c AWS Elastic Beanstalk 개념 빠르고 간단하게 서버 구성 생산성 적절한 규모 유지..

원문보기 내부링크
Tistory

[Typescript] 적용 Node.js 사용하기

c TypeScript Global 설치 npm install -g typescript Typescript 글로벌 설치 c Npm 설치 npm init -y -y 기본설치값 c Typescript 필요한 모듈 설치 npm install ts-node typescript nodemon @types/node @types/express --save-dev Typescript setting & options tsc --init 생성시 tsconfig.json 생성됨 { "compilerOptions": { "lib": [ "es5", "es6" ], "target": "es5", "module": "commonjs", "moduleResolution": "node", "outDir": "./build",..

원문보기 내부링크
Tistory

[TypeScript] 타입스크립트 타입정의

c TypeScript 기본 타입 정리 문자열 타입을 정의 하는 방법 //string 타입 정의 let name: string = 'YOO'; 숫자에 타입을 정의 하는 방법 //number 타입 정의 let age:number = 30; Boolean true/false 타입을 정의 //boolen 타입 정의 const isChk: boolean = false; let isAdult: boolean = true; Array 타입을 정의 하는 방법 //array 2가지 타입 정의 방법 let array:number[] = [1, 2, 3] let array2: Array = [1, 2, 3] 함수의 반환값에 타입을 정의 해줄 수 있다. //return 값이 없을때는 값이 없으므로 void 정의해줄수있다. ..

원문보기 내부링크
Tistory

AWS EC2 인스턴스 Putty 활용해서 서버 접속

c Putty를 활용해서 EC2 인스턴스 접속. puttygen를 활용해서 EC2 인스턴스 생성시 받은 키페어 pem 파일을 ppk 파일로 변환을 해줘야 윈도우에서 EC2 인스턴스에 접속이 가능하다. Key passphrase 보안을 높이기 위해 암호입력! EC2 인스턴스 터미널 접속시 필요합니다.

원문보기 내부링크
Tistory

TypeScript type과 interface의 공통점과 차이점

cTypeScript type과 interface의 공통점과 차이점 interface PeopleInterface { name: string age: number } const me1: PeopleInterface = { name: 'yc', age: 34, } type PeopleType = { name: string age: number } const me2: PeopleType = { name: 'yc', age: 31, } type과 interface는 객체의 타입을 지정하는 공통점이 있다. TypeScript type과 interface의 차이점 interface interface PeopleInterface { name: string age: number } interface StudentI..

원문보기 내부링크
Tistory

Aws workshop

c VPC(Vritual Private Cloud)란? VPC는 임의의 사설 IP주소 범의를 설정하고, 서브넷에 가상 서버와 같은 리소스를 배치할수 있다. 사용자의 AWS 계정 전용 가상 네트워크 서브넷은 VPC의 IP주소의 범위 즉 VPC 가상 공간에 작은 박스들을 IP주소로 분리해논 것들?? Subnet 추가 라우팅 테이블 설정 새로 추가한 Subnet이 첨에 만든 VPC와 라우팅이 되도록 설정을 해줘야한다. EC2 인스턴스 생성후 AMI 생성 하기 AMI 란? 틀이라고 이해하면 된다 동일한 구성의 인스턴스 여러개 필요할 때 AMI를 사용하여 동일한 여러 인스턴스를 시작 시작할수 있다. Load balancer Load Balancer 서버에 부하를 분산시켜주는 일 라우팅 역활 고가용성..

원문보기 내부링크
Tistory

AWSAWS Cloud Practitioner 자격증 공부

IAM을 사용하여 AWS 리소스에 대한 관리 리소스는 사용자가 작업을 수행할 수 있는 AWS계정의 엔터티입니다. 리소스의 예로는 Amazon EC2 인스턴스 또는 Amazon S3 버킷이 있습니다. ex : Amazon EC2 인스턴스를 종료, 접근 할수 있는 사용자 제어 세분화된 액세스 권한 정의 리소스에 액세스 할수 있는 사용자 액세스할 수 있는 리소스와 사용자가 리소스에 수행할 수 있는 작업 리소스에 액세스하는 방법 IAM은 AWS 계정에 무료로 제공되는 기능입니다. IAM 필수 구성 요소 IAM 사용자 AWS계정으로 인증할 수 있는 사람 또는 애플리케이션입니다. IAM 그룹 동일한 권한 부여를 허락받은 IAM 사용자의 그룹모음입니다. IAM 정책 액세스할 수 있는 리소스와 각 리소스에 대한 액세스..

원문보기 내부링크
Tistory

Aws cloud practitioner 합격후기

2주간 퇴근후 2시간씩 공부하면 자격증 합격^^ 공부방법은 비즈니스에 초첨을 맞춰 시나리오에 맞게 공부하는 방식으로 암기를 했습니다. 예를들어 EC2 서버에 리소스 코드를 확인하고 싶을땐 어떤 기술로 확인할수 있을까?! CloudWatch 를 활용해서 리소스 모니터링, 알람경보등을 설정할수있다. 이런방식으로 공부를 했습니다!! 다음 Aws 자격증은 에소시에이트 단계로 공부하고 취득 하려고합니다^^

원문보기 내부링크
Tistory

[TypeScript] 타입스크립트 Interface

cTypeScript Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 말한다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. TS에서만 interface를 지원한다. Interface 사용 이유 타입의 이름을 짓고 코드 안의 계약을 정의 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. 객체의 스펙 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체에 접근하는 방식 클래스 c️기본 예제 Properties 컴파일러는 프로퍼티의 두 가지 요소를 검사한다. 필수요소 프로퍼티의 유무 프로퍼티 타입 예약어로 프로퍼티를 세밀하게 컨트롤할 수 있다. ..

원문보기 내부링크
Tistory

AWS Cloud Practitioner 자격증 3주안에 취득하기

클라우드 컴퓨팅 이란? 클라우드 컴퓨팅은 인터넷을 사용해서 공유자원(서버, 네트워크, 스토리지)을 사용할 수 있는 서비스이다. * 클라우드 컴퓨팅은 이러한 모든 작업을 서비스 형태로 제공한다. 예를 들어 컴퓨터를 구매할 필요가 없고 컴퓨터에 운영체제를 설치할 필요도 없이 오직 인터넷에서 제공하는 서비스를 호출하여 즉시 필요한 자원(서버, 네트워크, 스토리지, 소프트웨어 등)을 사용할 수 있는 것이다. On demand는 클라우드 컴퓨팅 서비스 사용자가 요청한 만큼 서비스를 제공하고 비용을 청구하는 모델을 의미한다. 가상화(Virtualization) 가상화란, 여러 개의 물리적 자원을 하나로 통합해서 관리하거나 하나의 물리적 자원을 여러 개로 분활하여 사용하는 기술로 서버 가상화, 데스크톱 가상화, 스토..

원문보기 내부링크
Tistory

AWSAWS Cloud Practitioner 자격증 공부

AWS 장점 ? 새로운 사업을 하기 위해서 때로는 타이밍이 중요하다. 새로운 시장이 생성되었을 때 경쟁사보다 빠르게 시장을 점유하는 것이 아주 중요하지만 시스템 구축과 운영 등으로 시간이 오래 발생한다면 이미 경쟁사에게 타이밍을 뻇길 것이고 따라서 AWS의 장점 중 하나가 속도 및 민첩성이다. 즉 빠르게 서버를 구축하여 서비스를 제공할 수 있다. AWS 장점 특징 장점 특징 초기 투자비용 - 사전에 서버, 스토리지, 네트워크 등의 인프라를 구매하지 않고 서비스 형태로 사용할 수 있다. - 고정비용을 사용량 만큼 지불하는 가변비용으로 대체하게 된다. 운영비용 절감 - 사용한 만큼 비용을 지불하여 운영비용을 줄일수 있다. - 규모의 경제적인 측면에서 비용을 낮출 수 있다. 탄력적 운영 및 확장 - 용량을 예..

원문보기 내부링크
Tistory

AWSAWS Cloud Practitioner 자격증 공부

리전(Region)은 AWS에서 전 세계에 있는 데이터 센터의 물리적 위치를 의미한다. 그리고 논리적 데이터 센터의 그룹은 가용 영역(Availability Zone)이라고 한다. 가용 영역 (Availability Zone)은 데이터 센터 내에 존재하는 하나 또는 그 이상으로 구성된다. 높은 가용성을 제공하기 위해 컴퓨터 자원 최소 한개 이상으로 제공되어야 한다. AWS의 고가용성 아키텍처 패턴에 대한 설명 모든 Single Point Component 장애 시에 대응하기 위해서 설계되었다. 고가용성이란 사용자 서비스를 요청할 때 언제든 서비스할 수 있는 특성으로 이중화를 하여 설계된다. 모든 고객들은 낮은 Latency를 요구하기 때문에 AWS에서 지원할수 있는것은? High availability ..

원문보기 내부링크
Tistory

윈도우(windows)에서 포트 검색 및 포트 죽이기

웹 개발 도중 포트 겹침 오류 때문에 포트연결에 오류가 발생했다... 그래서 특정 포트 2000을 찾아서 프로세스를 종료시킴으로 오류해결 먼저 cmd창 열기 netstat -a -o 명령어 입력 명령어 입력하면 프로토콜 / 로컬 주소/ 외부 주소/ 상태 / PID 저기서 0.0.0.0.:2000 번을 찾아서 포트를 죽인다. (위에 사진엔 2000포트가 없습니다!) taskkill /f /pid 입력 포트에 PID를 입력해주시면 됩니다. 그럼 문제해결 많이 쓰이지는 않는거 같지만 알아두면 좋은 방법입니다.

원문보기 내부링크
Tistory

EC2 개념

EC2 (Elastic Compute Cloud) 개념 EC2란 Amazon Elastic Compute Cloud의 줄임말로서 AWS에서 제공하는 클라우드 컴퓨팅이다. 독립된 컴퓨터를 임대해주는 서비스로서 AWS의 대표적인 서비스다. 즉 쉽게 AWS에 컴퓨터를 대여해서 사용한다고 생각하면 된다. Amazon Elastic Compute Cloud(EC2) AWS 컴퓨팅 서비스 중 하나 EC2 - 확장 가능한 서버(컴퓨터) 제공 Elastic Beanstalk - PaaS 형태의 서비스 제공 Lambda - serverless 컴퓨팅 서비스 제공 Amazon EC2를 사용하면 하드웨어에 선투자할 필요가 없어 더빠르게 애플리케이션 개발하고 배포할 수있음 Amazon EC2를 통해 원하는 만큼 가상서버(In..

원문보기 내부링크
Tistory

EC2 개념 2

인스턴스 유형 인스턴스 유형에 따라 인스턴스에 사용되는 호스트 컴퓨터의 하드웨어가 결정 각 인스턴스 유형은 서로 다른 컴퓨팅, 메모리, 스토리지 용량을 제공하는데, 이 용량에 따라 서로 다른 인스턴스 패밀리로 분류 인스턴스에서 실행 하려는 애플리케이션 또는 소프트웨어의 요구 사항에 따라 인스턴스 유형을 선택 대표적인 인스턴스 구입 옵션 온디맨드 인스턴스(기본값) : 시작하는 인스턴스에 대한 비용을 초 단위로 지불 예약 인스턴스 : 1년 또는 3년 기간 동안 시간당 USD로 일관된 컴퓨팅 사용량을 약정하여 Amazon EC2 비용을 절감 할 수 있다. 스팟 인스턴스 : 경매 단위, 미사용 EC2 인스턴스를 요청하여 Amazon EC2 비용을 대폭 줄일 수 있다.

원문보기 내부링크
Tistory

REST, REST API, RESTful에 대해서 이해하기!

목표 REST의 개념 이해 REST의 특징 이해 REST API의 개념을 이해 REST API의 설계 규칙을 이해 RESTful의 개념을 이해한다 REST의 개념 REST란 REST의 정의 "Representational State Transfer"의 약자 자원을 표현하여 해당 자원의 상태를 주고 받는 모든것을 의미 즉 자원(resource)의 표현(representation)에 의한 상태 전달 월드 와이드 웹(www)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식 REST는 기본적으로 웹의 기존 기술과 HTTP프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일이다. REST는 네트워크 상에서 Client와 Server사이의 통신 방식 중 하..

원문보기 내부링크
Tistory

반응형 웹, min-width vs max-width 정리해보며...

반응형 웹, 혹은 웹앱을 만드는 요소에서 가장 중요한 CSS 미디어 쿼리가 있고 속성중에 min-width, max-width를 이용해서 모바일 부터 pc에 조건에 맞춰 UI를 처리할수 있습니다. min-width - 즉 1000px 이상인 경우에 적용되는 코드 @media (min-width: 1000px) { body { background: gold; } } max-width - 즉 1000px 이하인 경우에 적용되는 코드 @media (max-width: 1000px) { body { background: gold; } } min-width를 사용하는 경우 스마트폰등 모바일 사이즈에서의 레이아웃을 기본으로 점차 pc사이즈로 확장되어가는 형태에 적합 max-width를 사용하는경우 pc에서 모바일로..

원문보기 내부링크
Tistory

DBMS 와 RDBMS 개념 정리

DB - DataBase 데이터베이스는 여러 응용 시스템들의 통합된 정보를 저장하여 운영할 수 있는 공용 데이터들의 묶음입니다. 서로 연관된 여러 가지의 자료의 모음으로 그 내용을 구조화하여 검색과 갱신에 효율성을 높인 것입니다. DBMS란? DBMS는 DataBase Management System의 약자로 데이터베이스를 관리하는 시스템이다. 사용자와 DB사이에서 사용자의 요구에 따라 데이터를 생성해주고, DB를 관리해주는 소프트웨어이다. DBMS는 데이터를 계층 또는 탐색 형식으로 저장한다. DB는 여러사람이 공유하고 사용할 목적으로 관리되는 정보다. 데이터 베이스를 조작하는 소프트웨어를 DBMS라고 한다. RDB(Relational DataBase)란? 우선 RDB는 관계형 데이터 모델에 기초를 둔..

원문보기 내부링크
Tistory

SQL 튜닝의 정리

SQL 튜닝의 필요성 SQL 쿼리문을 작업시 여기서 다양한 SQL쿼리가 성능의 차이를 초래할 수 있다. 데이터의 수가 몇만개가 있는 테이블을 풀스캔을 통해 조회를 하게 되면 정말 오랜시간이 걸리고 성능에 좋지않다. 이러한 상황을 개선할수있는 방법으로 SQL 쿼리의 성능에 따라 다양하게 튜닝작업을 할수있고 성능면에서 향상시킬수있어 튜닝에 필요성을 느낄수있다. SQL 튜닝을 알아보기 전에 먼저 SQL이란 무엇일까? Structured Query Language의 약자이다 SQL 종류는 크게 3가지 (TCL 제외하고)로 구분된다 DML(Data Manipulation Language) 데이터를 조작하는 명령어 Insert Delete Update Select DCL(Data Control Language) 데..

원문보기 내부링크
Tistory

네트워크 관리사 필수 암기 (시험대비)

ping 명령어 ICMP(Internet Control Message Protocol)에서 주로 사용하는 대표적 명령어 TCP/IP 프로토콜을 사용하는 응용프로그램 네트워크에 있는 호스트들의 상태를 점검할 때 사용하는 응용프로그램 원격 호스트까지의 패킷이 도달하는 왕복 시간을 측정할 수 있다 원격 호스트와의 연결상태를 진단할 수 있다 원격 호스트에 네트워크 오류가 있을 경우 이를 체크하지만 정정은 할수없다 Ipconfig IP address 서브넷 마스크 게이트웨이 UDP 헤더구조 SOURCE PORT : 데이터를 보내는 송신측 응용 프로세스 DESTINATION PORT : 데이터를 받는 수신측 응용 프로세스 CHECKSUM : 오류검사 LENGTH : UDP 헤더와 데이터 부분을 포함한 데이터그램 논..

원문보기 내부링크
Tistory

리눅스 X 윈도우

x 윈도우에 대해서 정리해봤습니다! X 윈도우 X 윈도우 시스템은 MIT에서 처음 개발, 지금은 X.org 재단이 X윈도 개발을 주도 XFree86 - X.org Server - Wayland X 윈도우는 네트워크 기반 $/HOME/.Xauthority : X윈도 실행 시 생성된 키 값이 저장됨 xauth : X 서버에 접근 할 수 있는 클라이언트를 서버에 생성된 키 기반으로 제어할때 사용 ./etc/inittab : 리눅스 부팅 시 x 윈도를 실행하기 위해 부팅 모드를 설정 할 수 있는 파일 Xauth, Xauthority 응용 프로그램의 종류 dolphin : 파일 관리자 KDE nautilus : 우분투 윈도우 화면에서 파일관리자 에서 마우스 오른쪽 누르고 open in terminal 누르면 바로..

원문보기 내부링크
Tistory

리눅스 마스터 주변장치 연결 및 설정, 주변장치 활용

주변 장치 연결 및 설정 리눅스 프린터 관련 명령어 리눅스 프린터 관련 명령어는 BSD 계열과 System V 계열로 나뉜다. BSD 계열 : Ipr, Ipq, Iprm, Ipc ipq : 현재 프린트 대기 중인 내용을 보는 명령어 ipr : 파일 내용을 프린트 하는 명령어 iprm : 프린터 큐의 작업을 삭제하느 명령어 EX : ihd.txt 인 문서를 ip라는 이름을 가진 프린터로 3장을 출력한다. System V 계열 Ip, Ipstat, cancel 프린터 설정 X-window 상에서 설정 - system-config-printer LPRng 와 같은 LPD 호스트 또는 프린터는 IPP 프로토콜 기반의 프린터 설정 시 사용 LPRng : 리눅스 초기 인쇄 시스템, 버클리 프린팅 시스템으로 BSD ..

원문보기 내부링크
Tistory

리눅스마스터 명령어 옵션 정리

rm (remove 축약) : 파일 시스템으로부터 파일을 삭제 [option] -r : 디렉터리 삭제, 하위 내용먼저 삭제 -i : 삭제시 매번 삭제 여부를 사용자에게 묻는다 -f : 존재하지 않는 파일을 무시, 어떤 메시지도 보여주지 않음 -v : 삭제하는 동안 삭제 내용을 보여줌 chmod (change mode) : 파일이나 디렉터리에 접근 허가권 설정 명령 : 8진수 값사용하는 숫자 모드(Numeric mode), 알파벳으로 사용하는 문자 모드(symbolic mode) 있음 [option] -R : 하위 디렉터리 포함, 디렉터리 내부 파일 접근 권한 변경 -c : 변경된 정보 출력 -f , --slient : 중요한 메세지만 출력하고 아니면 출력 x --version : 명령어 버전 정보 출력 ..

원문보기 내부링크
Tistory

DB (MySQL) NULL 처리 내장함수(IFNULL, CASE)

MySQL에서 Column의 값이 Null인 경우를 처리해주는 함수들은 IFNULL, CASE 등등이 있습니다. 저는 제가 실무에서 주로 사용하는 IFNULL, CASE만 알아보겠습니다. IFNULL 해당 Column의 값이 NULL을 반환할 때, 다른 값으로 출력할 수 있도록 하는 함수이다. 기본 구조 SELECT IFNULL(Column명, "Null일 경우 대체 값") FROM 테이블명; EX: 간단하게 설명하자면 sec_to_time은 초를 시간으로 바꿔주는 함수입니다. cast는 문자열혹은 숫자로 변환해주는 함수입니다. 즉 컬럼에 값이 null 이라면 '00:00:00' 을 주는 ifnull 사용 방법입니다! CASE 해당 Column 값을 조건식을 통해 True, False를 판단하여 조건에 ..

원문보기 내부링크
Tistory

네트워크 관리사 필수 암기

unicast : 전송이랑 고유 주소로 식별된 하나의 네트워크 목적지에 1 : 1(one to one) 트래픽 또는 메시지를 전송하는 방식 DNS 서버가 호스트 이름을 IP ADDRESS로 변환하는 역할로 수행하는것 : 정뱡향 조회 DNS : 이름과 IP주소를 변화시키는 프로토콜, TCP & UDP 사용 도메인 내에 어떤 컴퓨터에서 접속하든지 자신이 사용하던 폴더가 그대로 보이도록 하는 정책구성 폴더 리다이렉션 메인보드에 설치 가능한 하드웨어 모듈로, 암호화 보안장치 : TPM 여러사이트에 동기 복제를 제공하며, 장애가 발생하기 전에 백업 데이터로 연결을 넘길수 있는것 : 저장소 복제 500(Internal server error) : 내부서버 오류(잘못된 스크립트 실행시) 501(Not implemen..

원문보기 내부링크
Tistory

자바스크립트 innerHtml vs innerText

예시 innerText 와 innerHtml 차이를 알아보겠습니다. innerText 같은 경우는 text만 적용시킬때 쓰면 좋은 property 입니다. 반면에 innerHtml은 html tag 와 함께 사용할시 좋은 property 입니다. 차례대로 1번, 2번, 3번, 4번 순서 입니다. innerText에 html tag 사용할시 문자열로 읽어서 그래로 적용시킵니다. 반면에 innerHtml은 html tag에 em을 적용시켜서 보입니다. 두개의 property 차이를 알아보았습니다.

원문보기 내부링크
Tistory

네트워크 관리사 RPM 과 SAMBA

RPM 패키지 RPM Radhat Package Manager 프로그램을 설치하기 위해서 사용되는 명령어 확장자가 rpm인 파일을 설치할 수 있음 리눅스의 종류별로 패키지 관리 프로그램이 다름 rpm 옵션 (시험에 필요한것들만 정리) -i : 패키지 설치 -v : 설치 과정 확인 -h : 설치 진행 과정을 # 마크로 화면에 출려 -U : 패키지 업그레이드 -e : 패키지 삭제 -qa : 설치된 모든 패키지 확인 -v : 패키지 검사 rpm -qa : 설치된 모든 패키지 확인 패키지 검증 rpm -v 패키지 검사 명령 다음을 확인함 패키지의 임의 변경 여부 파일 크기 심볼릭 링크 장치 파일 변경 등 rpm 추가 옵션 -test : 패키지 설치 시 가능한 문제점 점검 -force : 설치를 강제적으로 진행 ..

원문보기 내부링크
Tistory

scroll할때 progress bar 표시

요즘 많은 WEB에서 볼수 있는 기능입니다. See the Pen progress bar by 유국현 (@yoogukhyeon) on CodePen.

원문보기 내부링크
Tistory

getElementById 그리고 querySelector 차이점

자바스크립트로 개발하던중 selector로 html 요소들을 다뤄야 할때가 있을때 마다 getElemetById 와 querySelector의 차이에 대해서 잘 몰랐습니다. 두개의 selector에 차이를 알아보았습니다. getElemetById() 란? getElemetById(id) element = document.getElementById(id); id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다. querySelector() 란? querySelector(selector) element = document.querySelector(selectors); selector의 요소와 일치하는 document안에 첫번째 엘리먼트를 반환한다. 일..

원문보기 내부링크
Tistory

네트워크 관리사 리눅스 파일시스템

파일 시스템(File System) 리눅스 파일 시스템 리눅스 파일 시스템은 ext(extend) 2, ext 3, ext 4가 있으며, 현대 대부분의 리눅스는 ext4를 지원함. ext 4 파일 시스템 대용량의 파일을 저장, 관리할 수 있음. 큰 extend 단위로 파일 시스템을 할당하거나 삭제 가능 파일 시스템에 오류가 없는지 확인하는 fsck를 지원함 fsck기능 파일 시스템의 무결성을 검사하는 명령어 fsck는 기본적으로 자동으로 실행되고, 상황에따라서 직접 실행할 수도 있음. ext2 파일 시스템 단일 파일의 크기 : 최대 2GB 파일명 : 최대 256 B 최대 파일 시스템 크기 : 4 TB 디렉터리 당 저장 가능한 최대 파일 수 : 25,000개 ext3 파일 시스템 단일 파일의 크기 : 최대..

원문보기 내부링크
Tistory

javascript 쉽게 구현하는 아코디언(accodion)

질문답변이 혹은 정보를 알려줄때 많이 사용되는 아코디언을 구현해봤습니다. See the Pen javascript 아코디언 by 유국현 (@yoogukhyeon) on CodePen.

원문보기 내부링크
Tistory

javascript classList 메소드

Html 요소들마다 classList 작업해서 변화를 줘야 될떄마다 유용하게 쓸수있는 메소드입니다. classList.toggle() 토글이란? on/off switch의 개념으로 스위치를 켯다, 껏다 하는 기능을 가지고 있습니다. add() / remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다. 즉 click 이벤트에 classList.toggle() 추가시켜서 css에 style줘서 구현시킵니다. ex : add() classList.add() add란? 지정한 요소에 클래스 값을 추가시키는것입니다. ex : remove() classList.remove() remove란? 지정한 요소에 클래스 값을 제거시키는것입니다. ex : 전체적인 classList 예제는 https://cometr..

원문보기 내부링크
Tistory

네트워크 관리사 액티브 디렉터리

액티브 디렉터리(Active Directory) 중앙에서 통합적으로 관리하기 위해서 네트워크 정보를 등록 네트워크, 사용자, 그룹에 대한 정보를 통합 관리함 액티브 디렉터리(Active Directory) 개요 윈도우 탐색기에서 내 컴퓨터 속성에 들어가면 다음을 확인할 수 있음 워크 그룹(workgroup) 자신의 pc에 저장되어 있는 데이터베이스 작은 규모의 네트워크 환경에서 자신의 시스템을 스스로 관리할 때 사용하는 기능 도메인 (domain) 기업 내의 모든 컴퓨터 및 사용자 계층을 컴퓨터 마다 생성하지 않음 하나의 마스터 서버에 의해 생성 및 관리할 수 있는 중앙 집중적인 관리 액티브 디렉터리(Active Directory) 기능 사용자 계정 관리를 중앙에서 통합관리 사용자에 대한 일괄된 보안 정..

원문보기 내부링크
Tistory

css 활용한 기본적인 hover 기능 구현

실무에서 활용한만한 기본적인 hover 기능을 구현해봤습니다. See the Pen basic hover by 유국현 (@yoogukhyeon) on CodePen.

원문보기 내부링크
Tistory

네트워크 관리사 리눅스(Linux)

리눅스(Linux) 개요 리눅스의 윈도우, 유닉스, ios와 같은 운영체제의 한종류 컴퓨터 시스템의 하드웨어를 효율적으로 관리하기 위한 시스템 소프트웨어 1989년 핀란드 헬싱키 대학에 재학 중이던 리누스 토르발스가 개발한 것 유닉스(Unix)를 기반으로 개발 공개용 운영체제 기존 유닉스와 다르게 대형 서버를 위해서 개발된 운영체제가 아닌, 개인 컴퓨터나 워크스테이션을 위해 개발됨 소스 코드부터 운영체제 사용까지 모두 무료로 공개된 운영체제 리눅스의 특징 다중 사용자(Multi User) 리눅스는 여러 명의 사용자가 네트워크를 통해서 접속하여 컴퓨터 시스템을 사용할 수 있도록 지원함 다중 사용자를 지원하기 때문에 사용자 별 권한 관리와 자원 관리를 지원함. 다중 작업 (Multi-Tasking) 운영체제..

원문보기 내부링크
Tistory

MySql 유용한 시간 더하기 빼기 함수

함수 설명 MySQL에서 특정 시간을 기준으로 더하거나, 빼야 하는 경우가 있습니다. 이 때 사용하는 함수가 DATE_ADD와 DATE_SUB입니다. DATE_ADD는 기준 날짜에 입력된 기간만큼을 더하는 함수고, DATE_SUB는 기준 날짜에 입력된 기간만큼을 빼는 함수입니다. 시간 더하기 DATE_ADD(기준 날짜, INTERVAL) 시간 빼기 DATE_SUB(기준 날짜, INTERVAL) 예제 시간 더하기 DATE_ADD(기준 날짜, INTERVAL) 시간 빼기 DATE_SUB(기준 날짜, INTERVAL) DATE_ADD 예제 쿼리 (Example Query) 현재 시간 select now() 2022-07-20 12:00:00 현재 시간에 1초 더하기 쿼리 SELECT DATE_ADD(NOW(..

원문보기 내부링크
Tistory

네트워크 관리사 용어 및 개념 정리

PCM (Pulse Code Modulation) PCM(Pulse Code Modulation)는 한국어로 펄스 부호 변조이다. 아날로그 신호를 디지털 비트스트림으로 변환해준다. 그 과정에서 표본화, 양자화, 부호화, 복호화, 여과가 이루어진다. 자료 출처 : http://www.ktword.co.kr/abbr_view.php?nav=&m_temp1=582&id=260 DNS (Domain Name System) DNS(Domain Name System)란 도메인 이름과 IP 주소를 서로 변환하는 역활을 한다. 리소스 레코드 (Resource recode)를 가지며, 이 리소스 레코드는 A, AAAA, CNAME, NS, MX, SPF, PTR 등으로 이루어져 있다. Forward Zone(도메인 이름..

원문보기 내부링크
Tistory

네트워크 관리사 필수 암기

패킷이 라우팅 되는 경로의 추적에 사용되는 유틸리티로 목적지 경로까지 각 경유지의 응답속도를 확인할수 있는 window cli : tracert IP 헤더에 포함이 되는 필드 : Version, Header Checksum, Header length TCP 헤더에는 수신측 버퍼의 크기에 맞춰 송신측에서 데이터의 크기를 적절하게 조절할 수 있게 해주는 필드 : Sliding Window OSI 7 LAYER 프로토콜 중 3계층 프로토콜 : IP, ICMP, IGMP, ARP, RARP IPv4 : 32bit IPv6 : 128bit MAC : 48bit TFTP 특징 : Trivial File Transfer Protocol 약어, 네트워크를 통한 파일 전송 서비스, 신속한 파일의 전송을 원할 경우 FTP..

원문보기 내부링크
Tistory

네트워크 관리사 필수 암기 간단 정리

IPv4 : 32bit, 10진수 IPv6 : 128bit, 16진수 MAC : 48bit POP3 : 메일 읽은후 삭제, 메일을 서버로부터 받는다, Post Office Protocol Version3의 약자 TCP110번 SNMP (simple network management protocol) : 에이전트 사용, UDP사용, 응용계층, 네트워크관리 서브넷 마스크 : network id 1, host id 0, 여러개 서브넷을 분리하는 작업, 호스트가 동일한지 확인, 서브넷 마스크 값을 결정 라우팅을 지원하는 프로토컬 : TCP/IP, IPX/SPX

원문보기 내부링크
Tistory

회선교환 && 패킷교환

회선 교환이란 ? 통신매체를 파이프라고 한다면, 1개의 파이프로 1 대 1로 밖에 연결되지 않는다. 다수의 컴퓨터와 연결하려면, 여러개의 파이프가 필요하다 즉 컴퓨터가 증가 할수록 계속 파이프를 생성할수 있기때문에 교환기를 사용 교환기를 사용하여 파이프를 교체하는 방식을 회선교환 회선교환은 다수와 동시에 여러개의 컴퓨터에 송신할수 없다. 즉 1대1 연결만 된다 패킷 교환이란 ? 패킷 교환은 데이터를 일괄적으로 한 번에 보내지 않고 여럿으로 분활해서 송신하는 것을 말함 분활한 데이터를 패킷 이라고함 데이터를 패킷으로 분할해서 송신하기 때문에 회선이 점유되지 않아서 다수의 기기가 동시에 사용 가능 복수의 컴퓨터가 사용할수 있다 즉 동시에 여러대 연결이 가능

원문보기 내부링크
Tistory

네트워크 관리사 첫번째 필수 암기 정리

DQDB 1980년대 IEEE 802.6 표준으로 MAN 네트워크로 개발된 프로토컬 2개 버스 이중버스 구조 1. 현 채널을 독점적으로 연결하는것 - 전화기 회로 - 회선교환 2. CSMA/CD 특징 유선, 무선 LAN에서 사용되는 방식, 다른 호스트 채널검사, 채널감시, 재전송 3. OSI 7 LAYER 물리적 링크 간의 신뢰성 있는 정보전송, 동기화, 에러제어, 흐름제어 데이터링크 4. 프로토컬 통신규약, 캡슐화, 다중화, 재조립 기능을 가지고있다 5. 네트워크 과정중 브로드캐스트 스톰은 포화 상태라고 의미 6. 베이스 밴드 순차적으로 전송, 디지털 전송방식 7. 네트워크 계층에서 데이터 단위 패킷 8. 광섬유 구조 코어, 클래팅, 코팅 9. IEEE 802.11n 54MBPS ~ 600MBPS 10..

원문보기 내부링크
Tistory

네트워크 관리사 TCP/IP 4계층

TCP/IP (Transmission Control Protocol / Internet Protocol) 현재 수많은 프로그램들이 인터넷을 통신하고 있는데 가장 기반이 되는 프로토콜로는 TCP/IP로 통신을 하고있다. ARPANET이 개발된 이후 인터넷 세상이 발전해나가는 과정에서 대부분 데이터 통신이 TCP와 IP 기반으로 이루어져 있어서 프로토컬에 대표적인 것들 이라고 생각해도 될만큼 중요하다. 이를 이용해서 컴퓨터를 연결하는 체계를 이더넷이라고 부른다. 네트워크는각각 계층이 정의되어 있고 각 계층마다 하는 역활과 책임지는 영역이 나뉘어져 있다. TCP/IP 4계층 정의 1계층 네트워크 액세스 계층 (Network Access Layer or Network Interface Layer) OSI 7계층..

원문보기 내부링크
Tistory

근거리 통신(LAN : local Area Network)

1. 근거리 통신 개요 개념 : 동일 건물이나 공장, 학교 구내 등 제한된 일정 지역 내에 분산 설치된 각종 정보기기들 사이에서 통신을 수행하기 위해 구성된 최적화되고 신뢰성 있는 통신 채널을 제공하는 것이 근거리 통신망, 근거리 통신망은 일반적으로 전송 거리가 약 50m 정도의 거리 특징 : 건물 내에서 데이터 통신을 위해 사용되고 공유 파일 서버, 프린터 공유 등을 위해서 사용됨 이 기종 통신과 연결되어 데이터를 송수신 할 수 있음 10Mbps에서 100Mbps의 속도로 데이터 전송 가능 멀티미디어 데이터를 전송 할 수 있음 채널(Chaanel) 채널은 데이터 통신을 위해서 통신 매체에서 제공하는 통로로 채널을 점유하여 통신이 이루어짐, 채널의 예로서 TV 채널의 11번,10번 ..이 있음 티비를 볼..

원문보기 내부링크
Tistory

네트워크 관리사 IEEE 802

IEEE 802 위원회는 LAN 관련 표준화를 수행하는 표준화 기관이다. 가장 대표적인 예가 무선 LAN 관련 표준안인데, 무선 LAN은 모두 802.11로 시작함 그 이유는 IEEE 802 위원회가 무선 LAN을 위해서는 약 50m 전송거리, 11Mbps 전송 속도등을 요구사항으로 정의했기 때문이다. 이 조건을 만족하는 무선 LAN 표준들로는 IEEE 802.11b, IEEE 802.11a, IEEE 802.11g 등이 있으며 요구사항은 좀 더 발전되어서 54Mbps, 100Mbps등으로 변경되고 있다. < IEEE 802 위원회 LAN 표준 > 802.1 - 상위 계층 인터페이스와 MAC BRIDGE 802.2 - LLC(Logical Link Control) 802.3 - CSMA/CD(Carrie..

원문보기 내부링크
Tistory

1.네트워크 관리사 네트워크 일반

1. 아날로그 신호와 디지털 신호 정보신호에는 아날로그 신호와 디지털 신호가 있다 아날로그 신호는 연속적으로 변화하는 전자기파로서 간단하게 생각하면 사람의 음성 신호 음성은 소리에 높낮이가 있어서 유연한 곡선형 형태로 나타나며 이러한 아날로그 신호는 거리가 멀어지면 점점 감쇄하는 현상 발생 디지털 신호의 예로는 컴퓨터. 컴퓨터는 데이터를 표현할 때 0 혹은 1로만 표현 아날로그 신호에 비해서 잡음이 적고 오류율이 적은 장점 2 ) 신호 변환 방식 아날로그 아날로그 전송 : 증폭기를 이용하여 신호의 세기를 증폭(잡음까지 증폭됨, 왜곡 심함) / (신호 변환기 : 전화기) 디지털 전송 : 코덱 을 사용, 디지털 전송을 하기에 원음만을 재생, 왜곡현상 방지 : 패턴 재생을 통해 신호 재전송 역할 / (신호 변..

원문보기 내부링크
Tistory

네트워크 관리사 광대역 기술

프레임 릴레이 개요 프레임 릴레이는 멀티 액세스를 위한 네트워크 로 LAN과 비슷하게 두 개 이상의 장비를 네트워크에 동시에 연결 하여 X.25의 패킷 전송 기술을 고속 데이터통신에 적합하도록 개선한 프로토콜 X.25 : X.25는 네트워크 선로가 좋지 않았을 때 개발된 네트워크로서 많은 에러 처리 기능을 포함하고 있음 X.25는 에러 처리 때문에 통신에서 오버헤드가 높음 프레임 릴레이는 네트워크 선로가 좋은 환경에서 등장한 것으로 X.25의 에러 처리를 단순화하여 오버헤드를 감소시켰음 2 ) 프레임 릴레이의 특징 상위 계층에서 오류를 복구하고 재전송 경로 설정이 가능 데이터의 전송 속도를 향상시켜 전송 지연을 감소 망 내부 기능을 단순화 하나의 물리적 링크에 복수의 논리적인 가상 회선을 설정 망과 단말..

원문보기 내부링크
Tistory

OSI (open system interconnection) 7계층

OSI(open system interconnection) 7계층 통신이 일어나는 과정을 7단계로 정의한 국제 통신 표준 규약입니다. 계층을 분리함으로써 각 계층은 독립적인 역활을 할수있다. 암기 tip : 모든 사람은 데이터 처리가 필요한 듯하다(ALL-PEOPLE-SEEM-TO-NEED-DATA-PROCESSING). 아래 그림을 참고. OSI 7계층 1. 물리 계층(Physical Layer) : 데이터를 전기적인 신호로 주고받는 기능을 하는 계층. 2. 데이터링크 계층(Data Link Layer) : 데이터링크 계층은 Point to Point 간의 신뢰성 있는 전송을 보장하기위한 계층이다. 또한 전송데이터에 대한 CRC 오류제어가 필요하다. 3.네트워크 계층(Network Layer) : 네트..

원문보기 내부링크
Tistory

1.네트워크 개요

실수를 통해 성장한다. 네트워크에 개요 - 네트워크란 네트워크 송신자의 메시지를 수신자에게 한지점에서 다른지점까지 의미 있는 정보를 정확하고 빠르게 전달한다는 것을 의미한다. - 사용자들이 스마트폰 데스크톱으로 인터넷을 사용할수 있는것은 네트워크가 있어서 가능한것 - 네트워크는 유선 & 무선으로 나눠질수있다. 네트워크에 종류 한예로 = 블루스트는 초대 10m 정도까지 신호를 전송한다. 그래서 PAN 네트워크에서 무선으로 사용하면 WPAN을 사용한다. PAN 약 5m 이내의 인접지역 간의 통신방법 - 짧은 거리는 보통 유선보다는 무선으로 통신 된다. LAN 근거리 30m~50m 예로 회사같은 곳에서 고속의 전용회선을 연결하여 구성하는 통신망 - WAN 보다 빠른 통신속도 - 50m 범위 이내 한정된 지역 ..

원문보기 내부링크
Tistory

Mysql 타입변환 (type casting)

MySQL은 비교나 검색을 수행할 때 데이터의 타입이 서로 다를경우, 내부적으로 타입이 같아 지도록 자동 변환하여 처리합니다. 하지만 사용자가 명시적으로 타입을 변환 할수 있도록 연산자 함수를 제공하고 있읍니다. 대표적으로 제가 가장 유용하게 쓴 타입변환 함수를 보려합니다. CAST() CAST() 함수는 인수로 전달받은 값을 명시된 타입으로 변환하여 반환합니다. 이때 변환하고자하는 타입을 as에 전달을 하면됩니다. 대표적으로 이렇게 사용할수있습니다. 문자를 숫자로 변환할 때에는 select cast('1' as unsigned) as test 숫자를 문자로 변환할 때에는 select cast(2 as char(1)) as test

원문보기 내부링크
Tistory

업무 자동화 node-schedule

비즈니스 업무 자동화를 위해서 스케줄링을 돌려서 로직을 실행할수있는 node_schedule 입니다. 자바스크립트에서 제공하는 setInterval을 사용하면 특정 시간마다 함수를 실행시킬수 있습니다. 하지만 실행시켜야하는 시간이 복잡해지고 비즈니즈 처리를 해야될경우 스케줄러를 활용하는것이 좋습니다. Cron 표기법 입니다 숙지하고 있으면 좋습니다. * * * * * * day of week (0 - 7) (0 or 7 is Sun) month (1 - 12) day of month (1 - 31) hour (0 - 23) ..

원문보기 내부링크
Tistory

[Docker] Docker의 개념 및 핵심 설명

Docker란? Go언어로 작성된 리눅스 컨테이너 기반으로하는 오픈소스 가상화 플랫폼입니다. VM(Virtual Machine)과 컨테이너(Container)의 차이 가상화는 VM 버추얼 머신으로 OS가상화죠. 대표적으로 window, linux가 있죠. VM같은 경우는 OS위에 하이퍼바이저 위에 있는 경우라 속도가 느리고 용량또한 큽니다. 하지만 도커의 경우에 VM설치할필요가 없이 OS위에 docker engine있어서 용량이적고 속도가 빨라 빠르게 개발환경구축 및 배포에 좋습니다. 도커에서 Container 란? 쉽게 생각하면 하나의 어플리케이션을 실행시키기위한 독집적으로 운용할수있는 격리 기술입니다. 도커에서 image 란? 도커 이미지란 컨테이너를 실행할 수 있는 실행파일, 설정 값 들을 가지고 ..

원문보기 내부링크
Tistory

개발에서 가장 중요한 html 네이밍 컨벤션

실수를 통해 배우고 성장하자. HTML에서 CLASS이름을 짓는것을 굉장히 중요하다. 나 뿐만아니라 다른 개발자들과 협업을 해야 하므로 또는 유지보수시에 혼란스러움과 불필요한시간을 줄일 수 있기때문에 naming은 굉장이 중요하다. 저또한 이러한 실수로 많이 혼났기 때문에 다시 상기시키고자 다시한번 정리하겠습니다. 공통규칙 naming의 첫 시작에 숫자, 특수문자, 대문자의 사용은 지양한다. ex) 2list_notice ( x ) list_notice2 ( o ) naming은 '형태_의미_상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다. ex) btn_apply_on, box_news, box_reply_open, use_yn, open_yn 등 id/class 규칙 id는 캐멜..

원문보기 내부링크
Tistory

타임제한을 만들어봐요!!!!

실무에서 프로젝트를 하다보면 인증코드나 인증을 할때 시간제한을 주는 경우가 있습니다. 이런 방법으로 해보았습니다. See the Pen javascript timeout by 유국현 (@yoogukhyeon) on CodePen.

원문보기 내부링크
Tistory

GIT ssh 생성 및 git remote 저장소 ssh로 접속

개발을 하다보면 ssh란 단어를 들어본적이 많을것입니다. ssh란 무엇인가? ssh란 Secure Shell의 줄임말로, 두 컴퓨터 간 통신을 할 수 있게 해주는 하나의 protocol 입니다. protocol이란 서로 다른 통신장비간 주고받는 통신 규약 입니다. ssh암호는 암호화가 되어 보안에 좋습니다. 그럼 git ssh 활용해봅시다. 터미널에 ssh 쳐보면 저런 옵션 창이 나옵니다. ssh-keygen 치시면 저기 경로에 2개의 파일이 생깁니다 간단하게 설명하자면 id_rsa는 private key 입니다 저의 로컬컴퓨터의 암호화 키 입니다. id_rsa.pub는 public key 서버에 저장되는 암호화 키 입니다. 생성을 하고난후에는 git 설정에서 ssh keys를 값을 넣어주면 됩니다. i..

원문보기 내부링크
Tistory

React hooks useSate 에 대해서

리액트 프레임워크중에 꼭알아야할 React hooks 중에 가장 중요한 useState 상태관리 입니다. useState 간단하게 컴포넌트 상태를 간단하게 생성하고 업데이트를 시킬수있는 도구를 제공합니다. 기본 문법은 useState import시키고 import React, {useState} = 'react'; const [state, setState] = useState(초기값) 이런 문법으로 사용하실수있습니다. state를 변경시키고 값을 할당할때는 setState로 값을 할당할수있고 state변수에 저장된다. useState 활용방법 입니다. **** setNumber(number + 1) 보다는 setNumber(preNumber => preNumber + 1) 활용하자 기존 값을 업데이트 하..

원문보기 내부링크
Tistory

Javascript null , undefind , empty 체크시 좋은 코딩방법

javascript 언어는 null , undefind , "" , empty 는 false로 변환이 됩니다***** 그래서 좋은코드로 예외처리하는 방법을 알아 보겠습니다. null,undefined,’‘,0 === false 로 반환됩니다! 그렇다면? 1) obj === 0은 false를 반환한다 그래서 !0은 true가 된다 obj === 0 보다는 더 짧은 !obj를 사용합니다 2) undefined , null , "" 공백문자를 판별하고 싶을때는 마찬가지로 하면 됩니다. undefined , null , "" , 0 false를 반환 하기 때문에 !obj를 하면 true면이 됩니다! 3) true인지 판별할때 4) false 인지 판별할때 이런식에 좋은 코드로 활용이 가능합니다! 참고로 0, “..

원문보기 내부링크
Tistory

git에서 특정 브랜치 clone하는 방법

git 프로젝트 진행중에 많은 branch가 존재할수있습니다. 특래서 특정 브랜치를 들고와서 clone 해야될 경우가 있습니다. 그런 상황에서 좋은 git 명령어 입니다. git clone -b (branch name) --git URL EX=) git clone -b master yoogukhyeon 위와 같이 명령어를 사용하시면 특정 branch를 clone 할수있습니다.

원문보기 내부링크
Tistory

RDBMS MYSQL varchar vs char vs text 차이점

TYPE BYTE DESCRIPTION char 255 고정형 varchar 65535 가변형 text 65535 가변형 1. char 고정형 char(8)로 데이터타입 선언시 글자를 한개를 넣던 두개를 넣던 8byte의 공간을 차지한다. (고정) ex) 전화번호 , 주민번호 , 우편번호 등에 사용될수있음. 2. varchar 가변형 varchar(10)로 데이터타입 가변형 선언시 글자를 2개를 넣든 3개를넣든 2byte 3byte 공간을 유동적으로 차지한다. 3. text 가변형 text는 최대 65535자입니다. 값을 편집하거나 인덱스에 일부로 사용될수없습니다 그럼 varchar vs text 차이 index 일부로 사용가능 여부 varchar index에 사용가능하다. text index로 사용이 ..

원문보기 내부링크
Tistory

[Git] Git Authentication Failed 사용자 인증 문제 해결방법

Github Authentication Failed Git을 사용하다 보면 push/pull을 했을 때 아래와 같이 메시지가 발생하면서 실패를 하는 현상이 발생하곤 한다. 나의 경우는 오랜만에 새로운 작업을 할때 생긴 이슈. 해결방법 Git terminal을 실행한 후에 아래와 같이 설정을 해주자. userName, passWord에는 본인의 Github 계정을 적어주고 @ 뒤에는 repository 경로를 적어주면 된다 이렇게 명령어를 쓰고 git remote url 받아 적으면 끝!! 저는 이렇게 해결은한후에 작업을 완료했습니다.

원문보기 내부링크
Tistory

Encoding , 유니코드 , UTF-8 에 대해서......

Encoding 개념과 유니코드 , UTF-8에 대해서 알아봤습니다! Encoding 이란? - 정보의 형태나 형식을 다른 형태나 형식으로 변환하는 처리 혹은 처리방식 이라고 이해를 합니다. === 즉, 컴퓨터가 이해할 수 있는 형식으로 바꾸어주는것 - 인코딩의 종류에는 ASCLL,URL,HTML,BASE64,MS Script 등이 있다. === (이부분은 나중에 더 자세히 알아보겠습니다!) Unicode(유니코드)란? - 즉 네트워크가 인터넷이 발전하면서 다른외국 사이트에 들어가는 일이 잦아졌고 언어가 깨진 상태로 나오는 일이 빈번하게 일어나서 국제적으로 전세계 언어를 모두 표시할 수 있는 표존 코드를 만들기로 했고 그것이 바로 Unicode입니다. 유니코드 약속된 코드 표기법이 있다. unicode ..

원문보기 내부링크
Tistory

Npm 버전 설치 및 버전 다운그레이드 하기

Node.js , React등등 프레임워크를 작업을 하다보면 다양한 Npm 모듈을 사용해야 합니다. 개발환경에 맞춘 버전 관리도 중요합니다. 그래서 Npm 설치 및 버전 다운그레이드 대해 알아보았습니다. 설치 방법 npm install 설치module ex : npm i(install 약자) express 이런식으로 설치를하고 사용이 가능합니다. 하지만 개발중 사용하던 npm module에 버전을 다운그레이드해야할 상황이 있습니다. 먼저 module 삭제 npm uninstall 설치module ex : npm uninstall express 현재 npm module을 삭제한후 원하는 버전을 뒤에 붙이고 다시 설치하면 됩니다. 다운그레이드 npm install 설치module@버전 ex : npm i e..

원문보기 내부링크
Tistory

배열에 개념 과 Api 정리1편

javascript에서 배열에 활용할일이 많은것 같습니다. 그래서 배열에 api개념또한 잘안다면 더 쉽게 원하는 데이터를 가공할수 있다고 생각합니다. 배열에 전체 list 뽑는 api 부터 공부하겠습니다. 제가 가장 많이 활용하는 배열 api 입니다. 이렇게 원하는 list 뽑을수있습니다.

원문보기 내부링크
Tistory

Javascript JSON.parse() , JSON.stringfy() 대해서

개발작업을 할때 많이 활용되는 오늘은 JSON.parse() , JSON.stringfy()에 대해서 알아보겠습니다. JSON.parse()란? = JSON.parse()는 json문자열을 자바스크립트 객체로 변환 시켜주는 api입니다. 변수 stringify에 json문자열을 담아주고 stringify를 parse를 시켜서 json문자열을 javascript객체로 만들어줍니다. 위에가 json문자열 아래는 parse를 통해서 javascript 객체로 변환된 값입니다. JSON.stringfy()란? = JSON.stringfy()는 자바스크립트 객체를 json 문자열로 변환 시켜주는 api입니다. 변수 obj에 객체를 담아서 JSON.stringfy 자바스크립트 객체를 json문자열로 변환시킵니다. ..

원문보기 내부링크
Tistory

SQL의 문법 순서와 실행 순서는 서로 다릅니다.

SQL 작업을 하다보면 SQL 실행 순서와 작동 순서를 숙지하고있다면 좋습니다. 문법 작성 순서와 실행 작동 순서를 알아보겠습니다. 문법 작성 순서 1. SELECT 컬럼명 2. FROM 테이블명 3. WHERE 조건식 4. GROUP BY 컬럼명 5. HAVING 조건식 6. ORDER BY 컬럼명 7. LIMIT 조건 QUERY 문법 작성 순서 입니다. 하지만 실행 작동 순서는 다릅니다 1. FROM 2. ON 3. JOIN 4. WHERE 5. GROUP BY 6. HAVING 7. SELECT 8. ORDER BY 실행 작동 순서는 1. FROM 테이블 조회 2. WHERE 데이터 조건 확인후 추출 3. GROUP BY 컬럽 그룹화 4. HAVING 그룹화 조건 5. SELECT 데이터 추출 6...

원문보기 내부링크
Tistory

Bcrypt를 활용해서 비밀번호를 암호화 하기

비밀번호 암호화 하는 이유? 사용자의 비밀번호를 데이터베이스에 저장할 때 비밀번호를 그대로 저장하게 되면 매우 위험하다. 만약 데이터베이스가 해커들에게 털리면 사용자의 개인정보 & 비밀번호가 그대로 노출되기 때문이다. 따라서 사용자들의 비밀번호를 해싱 알고리즘을 통해서 안전하게 데이터베이스에 저장하는이유다. 그래서 Bcrypt 사용하는 이유다. Bcrypt란? 웹 혹은 앱등등 개발을 할때 보안은 가장 기본적으로 수행되어야 할 요소입니다. 비밀번호를 그대로 DB에 저장을 한다면 해킹당할 위험이 있습니다. 이를 방지하고자 Bcrypt모듈을 활용합니다. Bcrypt는 단방향 해시 함수를 이용한 모듈로써 salt 라는 개념을 사용합니다. Salt라는 값과 해시된 비밀번호를 합쳐서 DB에 암호화 하여 저장을 합니..

원문보기 내부링크
Tistory

Javascript Class에 대해서 공부해봐요

class 정의? 객체를 생성하기 위한 템플렛입니다. ES2015에서 도입된 클래스는 생성자의 기능을 대체하기 위해 사용됩니다. 생성자와 같은 기능을 하는 함수를 훨씬더 깔끔한 문법으로 정의 할 수 있습니다. class 안에 생성자(constructor)는 property라 불리고 함수(function)는 method라 불릴수 있습니다 super 키워드는 부로 오브젝트의 함수를 호출 할때 사용됩니다 extends 키워드는 클래스 상속을해서 클래스를 다른클래스로 사용이 가능합니다. 예제 constructor 생성자를 선언하고 name , age 인자값을 주었습니다 new 새로운 객체를 만들고 값을 출력하면 이렇게 잘나옵니다. 이번에는 extends , super 활용해보겠습니다 class 선언하고 prop..

원문보기 내부링크
Tistory

URL 대해서 분석 & 이해

오늘은 URL에 대해서 알아보겠습니다. 도메인(Domain) ? 도메인은 IP 주소를 갖는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어준 서비스 입니다. 실제 컴퓨터와의 통신에서는 숫자로 표현된 주소를 사용하기 때문에 이를 변환시켜 줄 네임 서버가 필요합니다. 즉 우리가 기억하기 쉽게 만들어주는 것이라고 생각하면 됩니다. 대표적으로 naver , daum 우리가 모두 기억하는 도메인 이지만 실제 고유 IP번호를 가지고도 있습니다. URL(Uniform Resource Locator) ? URL은 도메인을 포함한 경로 입니다 사용자가 도메인 서버로 접속 할 떄 , 프로토콜과 서비스 타입을 통합적으로 적어준 것이라고 볼수있다. 예를 들어 이렇게 분류 될수 있습니다. https://www.naver...

원문보기 내부링크
Tistory

MySql 자료형과 옵션 (Data Types and Options)

MySQL은 오픈 소스와 관계형 데이터베이스 시스템(Ralational DBMS) 입니다. MySQL의 기초 개념은 - TABL(테이블) : 데이터를 기록하는 최종적인 곳 - Schema(스키마) : 데이블들을 모아 놓은 곳 - 데이터베이스(Database) : 마찬가지로 테이블들을 모아 놓은 것 - 관계형 데이터베이스(Relational Database) : key : value 들이 간단한 관계를 테이블화 시킨 데이터 베이스 - SQL (Structrued Query Language) : 관계형 데이터베이스 관리 시스템의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어 - 쿼리(Query) : 데이터베이스에 정보를 요청하는 것. 질의 라고도 합니다 MySql을 사용하기 위해서는 기초 개념으..

원문보기 내부링크
Tistory

NODE.JS ORM 과 Sequelize & Sequelize-cli 대해서

저희 회사에 프로젝트는 NODE.JS ORM방식을 활용하고 있기 때문에 저는 첨으로 ORM을 공부하게 되었습니다. ORM란? ORM(Object Relational Mappings)이란 프로그램 상의 객체(Object)와 DB의 테이블(Relation)이 일대일 대응하는 관계를 맺는것(Mappings)을 의미합니다. ORM을 이용하면 query가 아닌 메서드로서 데이터를 조작할 수 있다는 것이 큰 장점입니다. 예를 들면 USER 테이블을 조회 하기 위해서 MySql SELECT * FROM 테이블명 이렇게 USER 테이블을 조회할수 있다 하지만 ORM 활용하면 ORM USER맵핑 테이블에 USER.findAll() 로 USER테이블을 조회할수있다 이렇게 ORM에서는 테이블과 맵핑되는 객체의 메서드를 통해..

원문보기 내부링크
Tistory

Javascript hasOwnProperty 메소드를 알아봐요!

hasOwnProperty란? hasOwnProperty란 자바스크립트 객체의 네이티브 메소드 중 하나이다 hasOwnProperty 메소드를 쓰는 이유는 특정 Property를 가지고 있는지 없는지를 나타내서 블리언 값으로 반환하는것을 알기 위해서 사용합ㄴ디ㅏ. 즉 : hasOwnProperty() 메소드는 특정 프로퍼티가 해당 객체에 존재하는지를 검사합니다. Ex 조건문을 활용해봅니다! if(Obj.hasOwnProperty('1')) Obj에 1이 없기때문에 결과는 false로 뜹니다 if(Obj.hasOwnProperty('name')) 하면 Obj Property에는 name이 있기때문에 true를 반환 합니다! 저희 회사는 이 메소드를 활용해서 저 또한 공부를 해보았습니다! hasOwnProp..

원문보기 내부링크
Tistory

Mysql 제약 조건에 대해서 알아봐요!

제약조건은 (Constraint) 테이블에 잘못된 데이터의 입력을 막기위해서 일정한 규칙을 지정해서 사용하기 위한것입니다. 즉 제약조건(Constraint)이란 데이터의 무결성을 지키기 위해, 데이터를 입력받을 떄 실행되는 검사 규칙 입니다. 이러한 이유로 제약 조건은 CREATE 문으로 테이블을 생성할 때나 ALTER 문으로 컬럼을 추가할 때도 설정할 수 있다. Mysql 제약조건(Constraint)의 종류 1. Not Null = Null 값 입력 금지 (항상 값이 있어야된다) 2. Unique = 중복값 입력 금지 (null 값은 중복 입력 가능) 3. Primary Key = Not Null + Unique (항상 값이 있어야되고 중복금지) 4. Foreign key = 다른 테이블의 컬럼을 조..

원문보기 내부링크
Tistory

[SQLD] 데이터 모델링의 이해

1. 데이터 모델링의 특징 현실세계를 DB로 표현하기 위한 추상화 고객이 쉽게 이해할 수 있도록 단순화 복잡하지 않게 이해할수 있도록 명확성 추상화 Abstraction 단순화 Simplification 명확성 Clarity - 현실세계를 DB로 표현하기 위한 추상화 - 누구나 쉽게 이해 가능 - 복잡함 no - 모호하지 않고 , 명확하게 - 한가지의 의미를 가집 2. 데이터 모델링의 단계 1.개념적 모델링 2. 논리적 모델링 3. 물리적 모델링 개념적 모델링 논리적 모델링 물리적 모델링 - 업무 전체의 데이터 모델 정의를 수행하고 복잡하게 표현하지 않는다 - 업무적 용어는 가급적 피한다 - 개념적 모델링을 논리적 모델링 으로 변환하는 작업 - 정규화를 수행해서 데이터 모델의 독립성을 확보한다 - 데이터..

원문보기 내부링크
1 2 3