cometruedream의 등록된 링크

 cometruedream로 등록된 티스토리 포스트 수는 230건입니다.

MAC에서 사용중인 특정 포트 찾아서 포트 kill하는 방법 [내부링크]

c️ 에러 코드 MAC에서 볼수있는 이미 실행중인 포트 에러 서버를 실행시 이미 사용중인 포트라는 오류를 볼수있다. Error: listen EADDRINUSE: address already in use :::3000 c️ 해결 방법 1. 3000번 포트를 사용하고 있는 프로세스 확인 명령어 sudo lsof -i :포트번호 ex:3000, 3003, 8000 위에 명령어를 터미널에서 입력하면 아래의 리스트를 볼수 있다. 내가 친 명령어 sudo lsof -i (모든 프로세스를 확인하기 위해서) PID가 현재 사용중인 프로세스의 고유번호 2. 실행중인 프로세스 강제 종료 시키기 sudo kill -9 PID번호 프로세스 리스트를 확인후 고유번호 PID를 입력해서 강제 종료 종료 후 다시 서버를 띄..

알아두면 좋은 개발용어 프로토타입, MVP 개념 정리 [내부링크]

c️ [개발용어] 프로토타입 & MVP란 ? HTML 삽입 미리보기할 수 없는 소스 스타트업 또는 새로운 제품을 개발할 때 많이 사용하는 용어 프로토타입(Prototype)과 MVP(Minimum Viable Product)의 뜻과 차이점에 대해서 알아보겠습니다. 프로토타입(Prototype)란? 아이디어나 디자인, 기능 등을 시각적으로 또는 동작적으로 구현하고 요구사항들과 시나리오를 구현한 초기 설계 버전 프로토타입은 제품의 컨셉을 시험하고 피드백과 요구사항을 수집하기 위해 서비스 초기에 많이 사용됩니다. 보편적으로 개발 초기 단계에서 많이 활용되며 사용자, 고객 요구사항을 이해하고 디자인을 검증하며 문제를 해결하는데 도움을 줍니다. 가장 중요한 개념은 프로토타입은 실제 제품과 비슷한 모습을 가지지..

[Docker] Mac 운영체제에 도커 개념 & 설치 방법 [내부링크]

c️ 도커란? HTML 삽입 미리보기할 수 없는 소스 (Docker)도커는 애플리케이션을 개발, 배포, 실행하도록 도와주는 오픈 소스 플랫폼이다. 컨테이너화 기술을 사용하여 애플리케이션과 관련된 파일들을 컨테이너안에 패키징해서 독립적으로 실행, 관리할 수 있도록 돕는다. 도커의 컨테이너화 기술은 안정적이며 효율적으로 애플리케이션을 관리할 수 있다. Docker Container (도커 컨테이너)란? 도커 컨테이너는 가상화된 공간을 생성하기 위해 리눅스 자체 기능인 chroot, 네임스페이스(namespace), cgroup을 사용함으로써 프로세스 단위의 격리 환경을 만들기 때문에 성능 손실이 거의 없습니다. 컨테이너에 필요한 커널을 공유해서 사용하고, 컨테이너 안에는 어플리케이션을 구동하는 데 필요한..

react input 모든 텍스트 선택하는 방법 [내부링크]

c️ 본론에 들어가기 앞서 React 프로젝트 중에 input 입력 후에 Enter or 등록 버튼 후에 모든 테스트를 선택해야 되는 기능을 만들어야 했다. 나는 자바스크립트에 addeventlistener 메소드를 활용해서 하려고 했지만 더 좋은 방법이 있기 때문에 기억보다는 기록으로 남겨본다. c️ focue가 맞춰지면 React를 사용하여 입력 요소의 모든 텍스트를 선택 input 포커스가 되면 입력요소에 모든 텍스트를 선택하는 select() 요소를 활용해서 포커스가 있을 때 모든 텍스트를 선택하는 방법 select() 요소를 활용해서 input 요소에 모든 텍스트를 선택하는 이유는 똑같은 값을 사용하거나 전체 삭제를 효과적으로 사용할 수 있기 때문에 필요한 기능이다. EX: App() {..

script 요소의 defer과 async 속성을 통한 효과적인 스크립트 로딩 [내부링크]

c️ 본론에 들어가기 앞서 웹 개발을 하다 보면 B 위 HTML 문서는 브라우저에서 다음과 같이 순차적으로 처리가 됩니다. A가 화면에 출력됨 script.js 파일을 내려받아 자바스립트 코드가 실행됨 B 가 화면에 출력 * HTML은 동기식으로 한줄한줄 읽어나가는 특징을 가지고 있다. HTML 삽입 미리보기할 수 없는 소스 c️ defer vs async 속성? 전통적으로 script 요소를 head 요소 안에 넣도록 배우는 경우가 많지만 실제 프로젝트 or UI & UX 측면에서 body 요소 제일 마지막에 script를 넣어서 사용자에게 최적화된 웹페이지 경험을 줄 수 있다. 미리 HTML 그려주고 script를 렌더 하는 방식이다. Defer 속성 정의 요소에 defer 속성의 정의 def..

VPN 개념 정리 및 접속 방법 [내부링크]

c️ 본론에 들어가기 앞서 코로나 이후로 IT 전공이 아니신 분들도 VPN, 네트워크 등등에 단어들을 많이 들어보고 사용했을 것이다. 코로나 이후로 재택근무가 활성화되면서 VPN을 이용하여 회사 네트워크에 접속해서 회사 업무를 처리했을 것이다. 나 또한 우리 회사의 자회사 데이터 센터에서 업무를 위해서 VPN을 접속해서 업무를 했던 경험이 있다. 그러면서 자연스럽게 VPN이 무엇이고 VPN의 개념에 대해서 궁금해졌다. c️ VPN(Virtual Private Network) 이란? 사용자들은 인터넷에 접속하여 웹을 이용할때 ISP(KT, SKT, LG 같은 업체)의 통신망을 사용한다. 통신망을 사용하면 사용료를 지불하고 이따 사용하는 네트워크를 public network라고 한다. public n..

React 중복 파일 업로드 오류 해결 방법 [내부링크]

c️ React에서 동일한 파일 업로드 구현 프로젝트중에 PDF 파일 업로드 기능 구현 당시 동일한 파일을 업로드 하는 경우 input태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제가 발생했다. 파일 업로드 과정 브라우저에서 PDF 업로드를 클릭하면 파일 탐색기 창이 열리고 파일을 선택후에 파일을 업로드한다. 여기서 오류는 동일한 파일을 두번 이상 업로드시 onChange 이벤트가 발생하지 않는 문제였다. 20230920001_00_40.pdf 파일을 업로드하고 다시 20230920001_00_40.pdf 파일을 업로드하면 onChange 이벤트가 발생하지 않는다. 정리: React에서 동일한 파일을 연속해서 선택했을 때 input 태그에 onChange 이벤트 핸들러 함수..

defaultPrevented 이벤트 속성 개념 총정리 [내부링크]

c️ 본론에 들어가기 앞서 javascript 이벤트와 이벤트 핸들러의 이해 자바스크립트는 이벤트 기반에 프로그램이며 자용자 또는 브라우저가 페이지를 클릭하거나 action을 통해서 이벤트가 발생한다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고 있습니다. 예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다. 이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다. 이와 같은 시나리오에서 이벤트 발생을 감지하기 위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를..

ESLint & Prettier 와 프로젝트 build 해결 일대기 [내부링크]

경험 만큼 좋은 교훈은 없다. 들어가기 앞서 지키지 않는 정책과 규칙은 없으니만 못하다. 이 말에 누구나 다 고개를 끄덕이겠지만 이 세상에 정책과 규칙을 준수하는 것만큼 가장 어려운 일도 없다. Prettier 일관성 있는 코드 스타일 유지해서 코드 퀄리티를 일관 적으로 유지하는 것을 돕는다. * 참고 vscode 자체에도 prettier 설정을 해줄 수가 있는데 이것은 프로젝트에 공유되지 않으니 prettierrc 파일에 설정을 하는 것이 좋다. 만약 prettierrc 파일이 있다면 우선적으로 그 설정을 따른다. Eslint 코드에 문제 패턴을 식별하고 코드에 오류를 검사해준다. Eslint rules Eslint 규칙을 설정 가능하다. VScode Prettier 셋팅 방법 Intellij 셋팅 B..

URL 인코드와 디코드 변환하는 방법과 개념 [내부링크]

인코딩 & 디코딩 이란? Encoding: 인코딩이란 사람이 인식할 수 있는 문자열을 바이트 형식으로 변환 하는 과정 Decoding: 디코딩이란 인코딩과 반대 개념으로 바이트 형식을 문자열로 변환 하는 과정 인코딩과 디코딩은 주로 HTTP 통신을 할때 URI에 한글 혹은 특수문자가 포함되어 있을때 주로 사용한다. 인코딩 & 디코딩 개념 EX: URI 상수에 값을 encodeURI로 변환하면 아래에 변환된 값으로 변환된다. 인코딩된 값을 다시 decodeURI로 변환을 하면 다시 안녕하세요 문자열을 변환시킨다. 인코딩과 디코딩을 사용하는 이유 인코딩과 디코딩을 하는 이유 중에 가장 큰 이유는 URI 주소 또는 file 이름에 한글 or 특수문자가 포함되면 에러를 발생 시킬 수 있다. 이러한 에러를 해..

프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교 [내부링크]

모듈 번들러? 모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다. 핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다. 압축시킨 단일 파일을 브라우저에서 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게된다. 빌드 도구란? 애플리케이션을 개발할 때 사용하는 도구이다. 위에 언급한 번들링을 위한 도구다. 이 도구는 프론트엔드 코드를 빌드하고 번들링하며, 최적화하고, 테스트하고, 배포하는 데 사용된다. 프론트엔드에서 가장 많이 사용되는 빌드 도구로는 Webpack, Parcel, Rollup, Gulp, Grunt, Vite 등이 있다. 요즘은 webpack, vite 많이 사용된다. 이 도구들은 각각의 장단점이 있으며, 프..

immer를 사용해서 불변성을 지켜야하는 이유와 얕은 복사의 개념 [내부링크]

immer 란? React에서 불변성을 유지하느라 난잡해진 코드를 짧고 간결하게 불변성을 유지할수 있게 도와주는 라이브러리이다. 반대로 immer 사용함으로 짧은 코드가 길어지는 경우도 있다. 불변성 개념 불변성이란 기존의 상태 값을 유지하면서 새로운 상태 값을 추가하는 것을 의미한다. 불변성을 지키는 이유 만약에 list OR 상태 값을 리렌더링 하고 싶을때가 있다고 가정한다. state.push({ title: "값 추가" })을 통해서 배열에 직접 10이라는 값을 추가한다. React에서는 해당 state라는 값은 새로운 참조값으로 바뀐것이 아니기 때문에 push 이전에 값가 push 이후에 값에 state 참조하는 메모리값이 같다고 판단하여 리렌더링이 일어나지 않는다. 이러한 이유로 state 값..

프론트엔드 꼭 필요한 디바운싱과 쓰로틀링 중요 개념 [내부링크]

디바운스와 쓰로틀링 모두 웹에서 발생하는 이벤트를 제어하는 방법이다. 예를 들어 스크롤 이벤트의 경우 스크롤링 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면 성능 문제가 발생할 수 있다. 디바운스와 쓰로틀링을 적절한 상황에서 사용하여 그런 상황이 발생하지 않도록 막을 수 있다! 목록으로가기 or 버튼 이벤트에서 여러번 클릭하면 여러번에 이벤트가 일어나면서 예측할 수 없는 다음 액션이 일어날수도 있다. ex: 목록으로가기 이벤트가 router.back()을 2번 누르면 history 2번째 stack 페이지로 이동하는 경우도 있다. 디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법이다. 디바운싱 (Debouncing) 연속으로 호출되는 함수들 중에 마지..

1분만에 나만의 QR 만들고 QR 코드 소문내기 [내부링크]

QR코드(QR CODE)란? 기존에 사용되던 바코드형태에서 발전한 흑백 격자무늬 패턴 코드이며, 정보를 나타내는 매트릭스 형식의 이차원 코드이다. 기존의 바코드 형태의 용량 제한에서 벗어나 형식과 내용을 확장하여 2차원의 패턴으로 정보를 저장하여 숫자 외에 문자의 데이터도 저장할 수 있다. 일반적으로 디지털카메라나 전용 스캐너로 읽어 활용하고, 근래에는 핸드폰을 이용하여 대중적으로 사용되고 있다. QR코드의 명칭은 덴스 웨이브가 등록한 상표인 'Quick Response'에서 유래되었고, 주로 한국, 일본, 중국, 영국, 미국 등에서 많이 사용된다. QR코드(QR CODE)의 장점 QR코드의는 누구라도 다양한 목적으로 쉽게 제작하여 사용할 수 있다. 그리고 많은 양의 데이터와 정보를 넣을 수 있지만 코드..

SEO 최적화 블로그 글자수 꿀팁 [내부링크]

SEO(Search Engine Optimization, 검색 엔진 최적화)에서 추천하는 블로그 글자수 상세한 내용 제공: 글자수가 많을수록 더 많은 키워드를 포함시킬 수 있고, 주제에 대해 더 상세하게 설명할 수 있습니다. 이는 검색 엔진이 블로그 글의 주제를 더 정확하게 이해하는 데 도움이 됩니다. 독자의 관심 유지: 너무 긴 글은 독자가 중간에 지치거나 관심을 잃을 수 있습니다. 따라서, 글의 길이를 적절하게 유지하면서 독자의 관심을 유지하는 것이 중요합니다. 고질적인 내용: 글자수가 많을수록 주제에 대해 더 깊이 있는 분석이 가능하며, 이는 블로그가 전문성을 갖추는 데 도움이 됩니다. 검색 엔진 순위: 더 긴 글은 일반적으로 검색 결과에서 더 높은 순위를 차지하는 경향이 있습니다. 이는 검색 엔진..

모든 브라우저 복사 금지 되어있는 글 복사 방법 [내부링크]

모든 브라우저 복사 금지 되어있는 글 복사 방법 글을 쓰거나 수정하다 보면 정말 필요한 내용이나 정보를 복사해야 되거나 복사한 글을 다시 한번 가공해야 될 때가 많습니다. 간혹 중요한 내용이나 정보를 복사 하려는데 복사 방지 or 복사 금지가 되어 있는 경우에 복사 할수 있는 유용한 방법을 알려드겠습니다. 전 세계 3대 웹 브라우저 (크롬, 파이어폭스, 엣지) 더해서 네이버웨일, 사파리에서 모두 똑같이 사용 할 수 있는 방법입니다. 1. 브라우저에서 복사할 내용이 있는 웹페이지로 이동합니다. 2. F12(개발자 도구)를 누르면 아래 이미지 처럼 소스를 볼 수 있는 창이 뜬다. 3. 빨간색으로 표시한 부분의 아이콘을 클릭합니다. (항상 Elements가 선택되어 있어야 합니다) 4. 화면에 커서를 옮기면 ..

내 아이피 확인 (My IP Address) 안전하고 빠르고 쉽게 아는 방법 [내부링크]

빠르고 쉽게 내 IP 주소를 확인하는 방법 브라우저 즐겨찾기를 통해 빠르게 확인하는 것은 IP주소를 확인하는 가장 쉽고 빠른 방법 중 하나입니다. webtool.everyday-365.com 개인정보 수집 없이 안전하게 현재 접속한 기기의 공인 IP(Internet Protocol) 주소를 제공합니다. 내 아이피 바로 찾기 IP, IP 주소란? IP란 인터넷 프로토콜(Internet Protocol)의 약자로 인터넷에 연결되어 있는 장치를 식별하기 위해 각각의 장비에 부여하는 고유 주소입니다. 데이터를 주고 받기 위해서 데이터를 발신하는 곳과 수신하는 곳이 필요합니다. 통신을 위해 부여한 주소가 IP 주소(Internet Protocol Address)입니다. 공인IP와 사설IP IP는 사용자 입장에서 ..

git clone -- recursive 옵션의 의미 [내부링크]

git clone -- recursive 무엇인가? 위에 프로젝트는 Lerna를 활용한 모노레포 프로젝트 저장소이다. 위 오픈소스를 clone 할때 --recursive 옵션을 추가 해야 한다고 나와있다. 해당 옵션을 설정 안하고 clone 하게 되면 WIGOEditor 폴더 아래는 비워진 폴더로 clone 이 된다. 그래서 해당 옵션을 설정함으로 하위 서브 모듈에 까지 clone한다. 서브 모듈이란? 서브 모듈은 기존 저장소 하위에 다른 저장소가 존재한다는 것이다. 그것은 .git 파일이 있음으로 저장소를 확인할 수 있다. 상위에 .git 과 하위에 .git 파일 2개 존재하는 것을 확인할 수 있다. ex: 아래와 같이 한개의 프로젝트에 2개의 .git 파일을 볼수 있다. git clone 사용..

보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유 [내부링크]

보일러 플레이트란? 코딩을 하다 보면 의미 없는 코딩을 할 때도 있고 불필요한 작업에 때문에 업무 생산성이 떨어지는 경우가 있습니다. 이럴 경우를 대비해 보일러 플레이트로 기본적인 골격을 미리 만들어서 업그레이드하는 방식이며 불필요한 코드와 생산성을 높일 수 있는 방법이다. 개발자에게 보일러 플레이트 란? 코딩에서 보일러 플레이트는 개발자에게 꼭 필요한 요소이다. 직접 타이핑, 반복적인 작업, 하드 코딩 등은 자동화로 맡겨 버리고 꼭 필요한 코딩을 할 수 있도록 도와주는 방법이 보일러 플레이트입니다. 가장 대표적인 예로 create-react-app 활용하면 미리 갖춰진 골격을 주고 개발자는 거기서 원하는 서비스에 맞춰서 개발을 하는 것이다. 만약 create-react-app 없이 첨부터 세팅을 한..

GitLab 개념 & 정리 [내부링크]

GitLab이란? - 프로젝트 버전 관리를 위해서 사용 - 소스코드를 저장할 수 있는 서버를 운영하고 서버에 저장 함으로 버전관리, 협업, 백업, 유지보수 등 다양한 장점이 있다. - CI및 CD를 구축해서 프로젝트에 생산성을 높일 수 있고 코드 컴토및 안전하게 관리가 가능하다. 1. Git 설치 https://git-scm.com/ Git git-scm.com 2. Gitlab 프로젝트 셋팅 3. Gitlab Config 셋팅 사용자이름과 이메일 주소 전역으로 셋팅 git config --global user.name "yoo" git config --global user.email "[email protected]" 사용자 config 확인 # git config --list user.name=yoo use..

자바스크립트 알고리즘 52 일차 (프로그래머스) [내부링크]

52일차 첫번째 문제 문제: 나머지가 1이 되는 수 찾기 난이도: 하 풀이 과정: 나머지가 1이 되는 가장 작은 자연수를 찾기 위해서 매개변수 n 개수만큼 for 문을 순회하고 n % i 나눈 나머지 값이 1 조건에 만족하는 경우가 가장 작은 자연수 이기때문에 i 값을 return 한다. 참고사항: 산술 연산자: % 나눈 나머지값을 반환 https://school.programmers.co.kr/learn/courses/30/lessons/87389 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 51 일차 (프로그래머스) [내부링크]

51일차 첫번째 문제 문제: 숫자 문자열과 영단어 난이도: 중 풀이 과정: 매개 변수 s 문자열 length만큼 for문을 순회하고 변수 2개들 만들고 순회하는 원소 값이 숫자면 정규식 조건에 걸려 result 에 값을 할당하고 숫자가 아니고 문자열이면 currentNumber에 문자를 할당해서 numberMap에 문자열에 프로퍼티가 할당 되면 프로퍼티에 값을 할당하고 currnentNumber 값을 초기화 해준다. 참고사항: 문자열도 길이가 있어서 for문 순회가 가능하다. hasOwnProperty는 객체에 특정 값이 있는지 블리언 값으로 반환한다. https://school.programmers.co.kr/learn/courses/30/lessons/81301 프로그래머스 코드 중심의 개발자 채용...

자바스크립트 알고리즘 50 일차 (프로그래머스) [내부링크]

50일차 첫번째 문제 문제: 제일 작은수 제거하기 난이도: 하 풀이 과정: 매개변수 arr를 Math.min 스프레드 구문으로 배열에 최소값을 찾아서 상수에 담고 매개변수 arr filter 메소드를 활용해서 최소값에 상수와 다른것들만 걸러내서 상수에 담는다. 배열에 값이 1개거나 이하라면 [-1]반환하고 아니면 filter로 걸러낸 배열에 값을 return 참고사항: Math.min() 최소값을 찾을수 있고 스프레드 구문으로 배열에 최소값을 찾는다. Math.max() 최대값을 찾을수 있다. filter 함수는 배열에 순회해서 값들을 필터할 수 있다. 삼항연산자 true = ? false = : https://school.programmers.co.kr/learn/courses/30/lessons/12..

자바스크립트 알고리즘 49 일차 (프로그래머스) [내부링크]

49일차 첫번째 문제 문제: 직사각형 별찍기 난이도: 하 풀이 과정: row 3줄이며 a N개수 만큼 * 채워져야해서 repeat 함수로 문자열을 개수만큼 돌려서 셋팅하고 b개수만큼 for 문을 순회하며 값을 출력한다. 참고사항: repeat 함수는 문자열은 개수만큼 반복한다. 이 문제 로직은 게시판에서 별표 평점을 내는 기능이나 이런곳에서 활용할수 있는 로직으로 문제를 풀었다. https://school.programmers.co.kr/learn/courses/30/lessons/12969 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 48 일차 (프로그래머스) [내부링크]

47일차 첫번째 문제 문제: 부족한 금액 계산하기 난이도: 중하 풀이 과정: 매개변수 price, money, count 자연수로 넘어오고 count만큼 for문을 순회하고 result 변수에 price N배의 값을 축적한다. money 값이 result 값에 같거나 이상이면 반환할 값이 없기 때문에 0 아니라면 result값과 money값을 빼줘서 return한다. 참고사항: 삼항연산자는 조건 연산자로 가독성과 쉽게 조건문을 표현할 수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/82612 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을..

자바스크립트 알고리즘 47 일차 (프로그래머스) [내부링크]

47일차 첫번째 문제 문제: 없는 숫자 더하기 난이도: 중하 풀이 과정: 매개변수로 넘어오는 배열에 원소는 0~9 중 일부가 있어서 0~9 숫자가 담긴 배열을 하나 만들고 for문으로 순회하면서 매개변수 배열에 특정 숫자가 없으면 그 숫자를 result에 더해서 return 값을 반환 참고사항: let 블록스코프이며 재할당이 가능하다. includes 메소드는 특정 문자열을 찾는데 사용하면 특정문자열이 있으면 true 없으면 false 반환한다 https://school.programmers.co.kr/learn/courses/30/lessons/86051 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을..

자바스크립트 알고리즘 46 일차 (프로그래머스) [내부링크]

46일차 첫번째 문제 문제: 같은 숫자는 싫어 난이도: 하 풀이 과정: 매개변수 arr 배열에 길이 만큼 for문을 순회하고 상수로 새로운 배열과 벼수로 prev 값을 정의하고 prev 값하고 순회하는 arr배열에 원소값하고 같지 않다면 새로운 배열 result 넣으면 중복되는 숫자를 넣지 않은 배열을 return 할수 있다. 참고사항: 순회하는 현재값과 이전값에 조건이 중요하다. https://school.programmers.co.kr/learn/courses/30/lessons/12906?language=javascript# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. progr..

자바스크립트 알고리즘 45 일차 (프로그래머스) [내부링크]

45일차 첫번째 문제 문제: 푸드파이트 대회 난이도: 중 풀이 과정: 매개변수 food 배열에 문제설명에 음식개수를 2로 나눠서 Math.floor로 소수점을 내려서 새로운 배열을 만든다. divide 배열을 순회하면서 2로나눈 원소값만큼 idx 값을 돌려서 result 문자열에 놓고 sort함수로 내림차운 새로운 배열은 만들고 문자열을 조합해서 return 참고사항: Math.floor 메소드로 소수전음 내린다. ex: 1.5 > 1 repeat 함수 현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열. ex "1".repeat(2) > "11" [...값] 깊은 복사로 새로운 메모리에 배열을 저장하고 sort함수로 내림차순을 만들고 join으로 문자열로 반환. https://school.prog..

자바스크립트 알고리즘 44 일차 (프로그래머스) [내부링크]

44일차 첫번째 문제 문제: 크기가 작은 부분문자열 난이도: 하 풀이 과정: 매개변수 t, p에서 p 길이를 뺀 t 길이 만큼 for문을 순회하고 substring 메소드로 3개씩 문자열로 짜르고 매개변수 p 값과 substring 짜른 문자열을 정수로 변환해서 작거나 같으면 count 변수에 1 축적해서 return 한다. 참고사항: substring 메소드는 문자열을 짜를수있다. 변수 앞에 + 의미는 Number 정수변환 의미다. https://school.programmers.co.kr/learn/courses/30/lessons/147355?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기..

자바스크립트 알고리즘 43 일차 (프로그래머스) [내부링크]

43일차 첫번째 문제 문제: 두수의 합 난이도: 하 풀이 과정: 매개변수 a, b를 BigInt 활용해서 숫자형으로 형변환을 해서 a, b를 더하고 toString() 함수로 문자열로 변환해서 값을 반환 참고사항: Number 객체는 2^53 - 1 최대 수를 표현할 수 있다. 그래서 BigInt를 활용해서 2^53 -1 이상에 수를 표현할 수있다. toString() 형변환으로 문자열로 변환시킨다. https://school.programmers.co.kr/learn/courses/30/lessons/181846 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co..

자바스크립트 알고리즘 42 일차 (코딩도장) [내부링크]

42일차 첫번째 문제 문제: 1차원의 점들이 주어졌을 때, 그 중 가장 거리가 짧은 것의 쌍을 출력하는 함수 난이도: 코딩테스트 문제 풀이 과정: s 배열에 값이 있고 ss는 slice 활용해서 깊은 복사로 인덱스 1부터 시작하는 새로운 메모리에 저장된 배열을 생성 s배열에 원소를 순회하면서 인덱스 1부터 시작하는 ss 배열로 각 쌍의 배열을 반환한다. [ [1,3], [3, 4], [4, 8], ...] sort 함수를 활용해서 각 쌍의 두번째 요소와 첫번째 요소의 차이를 기준으로 오름차순으로 정렬을 하면 차이가 가장작은 쌍의 정렬된 배열로 반환이 된다. const s = [1, 3, 4, 8, 13, 17, 20] const ss = s.slice(1) s.map((v, i) => [v, ss[i]]..

자바스크립트 알고리즘 41 일차 (프로그래머스) [내부링크]

41일차 첫번째 문제 문제: 배열 만들기6 난이도: 하 풀이 과정: 매개변수 arr에 원소들을 for문으로 순회를하고 새로운 배열 stk 마지막 값과 순회하는 arr 값이 같으면 stk배열에 마지막 값을 지우고 아니면 stk 배열에 arr 원소 값을 넣는다. for문을 순회하고 return값으로 빈배열이면 [-1] 값을 아니면 stk 값을 반환하면 된다. 참고사항: javascript 배열에 유용하게 사용가능한 함수 정리 .push(): 배열의 맨뒤에 값을 추가. .unshift(): 배열의 맨앞에 값을 추가. .pop(): 배열에 맨뒤 값을 제거 .shift(): 배열에 맨앞 값을 제거 https://school.programmers.co.kr/learn/courses/30/lessons/181859 ..

자바스크립트 알고리즘 40 일차 (코딩도장) [내부링크]

40일차 첫번째 문제 문제: 1부터 10,000까지 8이라는 숫자가 총 몇번 나오는가? 난이도: 코딩테스트 문제 풀이 과정: 새로운 배열 10000개를 0으로 채워주고 map으로 10000숫자를 idx 순서로 채워준다. toString 함수로 배열에 숫자를 문자열로 만들어주고 split("") 모든 숫자를 배열로 만든다. 거기서 배열안에 8이 들어가는 모든 원소 값을 걸러주면 10000개 안에 들어가는 8의 개수를 찾을수 있다. const arr = Array(10000).fill(0).map((val, idx) => idx).toString().split("").filter((val) => val === "8").length 참고사항: 새로운 배열에 fill 함수로 0값을 채우고 map idx로 0~9..

자바스크립트 알고리즘 39 일차 (프로그래머스) [내부링크]

39일차 첫번째 문제 문제: 겹치는 선분에 길이 난이도: 중 풀이 과정: 매개변수에 lines 2차원 배열에 개수에 겹치는 부분은 중복이 되는 개념으로 새로운 배열을 만들어 준다. 문제에 -100 에서 100까지에 원소값이 있기때문에 200개의 배열을 0으로 채워준다. 매개변수를 foreach로 순회를 하고min < max만큼 순회를 돌명선 새로운 배열에 값을 채워나간다. +100은 음수값에 대한 예외로 min + 100개 값에 index 부터 시작한다. 참고사항: foreach는 map 같은 개념으로 배열을 순회한다. new Array는 새로운 배열을 만들고 fill 배열에 값을 채워준다. 만약에 1일라면 200개 배열에 값은 1로 채워진다. https://school.programmers.co.kr/..

자바스크립트 알고리즘 38 일차 (프로그래머스) [내부링크]

38일차 첫번째 문제 문제: 조건에 맞게 수열 변환하기1 난이도: 하 풀이 과정: 매개변수 arr넘오고 배열에 원소를 순회하기위해서 map함수를 사용하고 원소에 값으로 if 조건을 만들어준다 설명에서 말했듯이 val 값이 50보다 크거나 짝수라면 나누기 또는 짝거나 홀수라면 곱하기로 원소에 값들은 반환한다. 참고사항: if문에 &&는 and 뜻에 논리 연산자이고 ||는 or뜻에 연산자이다. https://school.programmers.co.kr/learn/courses/30/lessons/181882 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 37 일차 (프로그래머스) [내부링크]

37일차 첫번째 문제 문제: 무작위로 K개수 뽑기 난이도: 중 풀이 과정: 매개변수 arr 길이 만큼 for문을 순회하고 빈배열 result에 arr원소값을 담아준다. includes에 중복문자열이 없는 값들을 배열에 넣고 result 배열에 길이하고 매개변수 k에 길이하고 같으면 break로 for문을 빠져 나오고 result에 길이가 k보다 작으면 result 배열 원소 값을 -1 바꿔준다. 참고사항: includes는 특정문자열을 찾는 메소드로 있으면 true 없으면 false를 반환한다. for문, while문은 배열을 순회하는 방식이다. break 순회하는 배열을 빠져나오게 한다. https://school.programmers.co.kr/learn/courses/30/lessons/181858..

자바스크립트 알고리즘 36 일차 (프로그래머스) [내부링크]

36일차 첫번째 문제 문제: 대소문자 바꿔서 출력 난이도: 하 풀이 과정: str 문자열 값을 split 함수로 배열로 만들고 map돌려서 javascript 알파벳 소대문자 메소드를 활용해서 값을 반환하고 join 함수로 문자열 반환 참고사항: javascript 알파벳 소대문자 메소드로 toUpperCase() (대문자) 와 toLowerCase() (소문자) 사용한다. https://school.programmers.co.kr/learn/courses/30/lessons/181949?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programme..

자바스크립트 알고리즘 35 일차 (프로그래머스) [내부링크]

35일차 첫번째 문제 문제: OX퀴즈 난이도: 하 풀이 과정: 매개변수 quiz에 원소들을 for문을 돌려 순회하고 원소에 값들을 split하고 구조분해할당으로 if 조건문으로 값을 할당. 참고사항: 배열, 객체에 값들을 분해해서 값을 할당받을수 있는 표현식. https://school.programmers.co.kr/learn/courses/30/lessons/120907 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 34 일차 (프로그래머스) [내부링크]

34일차 첫번째 문제 문제: 안전지대 난이도: 중 풀이 과정: 2차원 배열에 매개변수에 총 길이를 상수에 담고, d 2차원 배열로 특정 방향들을 찾아준다. 2중 for문으로 매개변수에 1의 값을 찾아주고 상하 좌우 대각선에 값을들 찾아서 new Set에 추가를 해주고 n * n - new Set 객체 사이즈 만큼 삭제를 한다. 참고사항: new Set: 객체는 중복되지 않는 유일한 값들에 집합이다. forEach는 배열을 순회하는 여러 방법중 하나다. map 비슷한 함수 https://school.programmers.co.kr/learn/courses/30/lessons/120866?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발..

자바스크립트 알고리즘 33 일차 (프로그래머스) [내부링크]

33일차 첫번째 문제 문제: 다항식 더하기 난이도: 중 풀이 과정: 매개벼수 polynomial을 split(" + ") 함수로 공백 + 기준으로 짤라주고 동류항과 일반항에 값을들 더하는 변수 값들을 만들어준다. result 배열에 상수를 만들어서 각각에 값들을 만들어 준다. 참고사항: filter로 includes 메소드에 x값이 true or false로 배열에 원소값을 걸러준다. replace로 x를 빈값 or 1로 반환 reduc함수로 값을 더한다. if 문에 !로 판명되는 값들은 undefined, null, NaN, 0, -0, "", false는 false로 판명되서 if (!xNumber)로 조건을 걸수 있고 ! 없다면 true 값이 로직을 타게된다. https://school.progra..

자바스크립트 알고리즘 32 일차 (프로그래머스) [내부링크]

32일차 첫번째 문제 문제: 등수 매기기 난이도: 하중 풀이 과정: 매개변수 n에 정수를 배열로 변환해서 정수 개수만큼 숫자를 정렬하고 counter 변수를 만들고 for문으로 arr 길이 만큼 순회를 하면서 counter 1씩 더하고 while문에 3의 배수인 값과 3이 들어간 숫자 while문을 타서 1을 더 증각해서 값을 반환. 개념을 이해하면 쉽다(위에 배열과 아래 배열에 맵핑하는 원소를 확인): [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] [1, 2, 4, 5, 7, 8, 10, 11, 14, 16 ] = 3, 6, 9, 12, 15 는 3의 배수이기때문에 포함하면 안되고 13은 3의 숫자가 있기 때문에 포함하면안된다. 참고사항: includes 메소드는 특정 문자가 포함하고 있는지..

자바스크립트 알고리즘 31 일차 (프로그래머스) [내부링크]

31일차 첫번째 문제 문제: 등수 매기기 난이도: 하 풀이 과정: 매개변수로 넘어오는 2차원배열 score에 map 함수로 평균 점수 값을 구하고 sort 함수로 내림차순 정렬을 한다. 정렬하지 않은 배열을 평균값을 구해서 하나더 만들고 map을 돌려서 내림차순으로 정렬된 배열에 indexOf +1 을 해서 값을 반환 참고사항: indexOf 문자열에 위치 값을 반환해주고 아니면 -1 반환 자바스크립트 사칙 연산 순위: * / + - 이고 ( ) 우선 순위로 계산 https://school.programmers.co.kr/learn/courses/30/lessons/120882?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤..

자바스크립트 알고리즘 30 일차 (프로그래머스) [내부링크]

30일차 첫번째 문제 문제: 컨트롤 제트 난이도: 하 풀이 과정: 매개변수 s를 split 함수로 공백 으로 짤라주고 값을 정의해줄상수 result = 0 으로 for문을 순회하면서 Z가 아니숫자 들을 더하고 Z에 원소를 순회할때 이전 원소를 빼주는 if 조선문으로 풀이 참고사항: split 공백기준으로 짤름 https://school.programmers.co.kr/learn/courses/30/lessons/120853?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 29 일차 (프로그래머스) [내부링크]

29일차 첫번째 문제 문제: 문자열 밀기 난이도: 하 풀이 과정: 첫번째 풀이 과정에서 while 문을 사용했다 하지만 다른 코드를 찾아보고 공부를 하면서 더 간단하고 쉽게 풀수 있는 indexOf 방식이 있어서 indexOf를 활용해서 결과값 추출 첫번째 풀이과정. 참고사항: indexOf 함수는 알고리즘문제 에서 자주사용되서 숙지를 하면 좋다. indexOf는 문자열을 찾을때 많이 사용된다. 문자열을 찾으면 문자열 index 위치를 반환하고 없으면 -1을 반환한다. https://school.programmers.co.kr/learn/courses/30/lessons/120921 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기..

Nest.js - 홈텍스 종합소득세 API 파싱 [내부링크]

c 프로젝트? 홈택스 종합소득세 API를 활용하면 종합소득세 관련 사용자 데이터를 전부 가져올 수 있다. 한번 호출할 때 300원 비용이 들며 카카오, 네이버, pass 등등 에서 인증서 인증만 하면 빠르고 정확하게 종합소득세 데이터를 가져와서 가공을해서 유의미한 데이터로 활용 c Nest.js 외부 API 통신 방식은? npm 설치 npm i --save @nestjs/axios axios Axios는 널리 사용되는 풍부한 기능의 http 클라이언트 패키지 이며 nest.js는 axios를 래핑하고 내장된 httpModule 메소드를 내장하고 있다. module import import { HttpService } from '@nestjs/axios'; httpService module 초기 값을 셋팅..

자바스크립트 알고리즘 28 일차 (프로그래머스) [내부링크]

28일차 첫번째 문제 문제: 외계어 사전 난이도: 하상 풀이 과정: 매개변수 spell에 배열에 원소가 dic 배열 원소에 조합되는 문자가 있는지 찾기 위해서 some 함수를 사용해서 조건에 만족이 되면 true를 반환 아니면 false로 반환해서 있으면 true 면 1 아니면 2로 결과값 출력. 참고사항: some 함수는 하나라도 조건에 만족이 되면 true를 반환 아니면 false로 반환 특이 사항으로 [...v].sort() === [...spell].sort() 비교를 하면 false 떨어진다 그 이유는 주소 값으로 비교를 해서 서로 다른 메모리 주소 값으로 저장하고 비교를 하기 때문에 값이 똑같아도 비교가 안된다. 해결하기 위해서 toString() 메소드로 문자열로 변환을 해서 비교를 하면 해..

자바스크립트 알고리즘 27 일차 (프로그래머스) [내부링크]

27일차 첫번째 문제 문제: 영어가 싫어요 난이도: 하중 풀이 과정: 매개변수 numbers 맵핑할 수 있는 배열을 하나 만들고 배열에 index번호로 각각에 문자열에 맞는 숫자를 변환해준다. replace 함수로 문자를 숫자로 치환해서 반환 참고사항: replace 함수는 정규식 혹은 문자열을 치환해주는 함수다. replace 함수는 첫번째 인자는 치환할 문자를 넣고 2번째 인자는 value 혹은 함수를 받을수 있다. ex: "apple".replace("a", "") or "apple".replace("a", (v) => something) 알아두면 좋은 정규식 표현 * /searchvalue/ : '/ /' 사이에 검색할 문자를 입력 * searchvalue1 | searchvalue2 | .....

자바스크립트 알고리즘 26 일차 (프로그래머스) [내부링크]

26일차 첫번째 문제 문제: 진료 순서 정하기 난이도: 하중 풀이 과정: 매개변수에 값을 sort로 내림차순으로 정렬을한 배열을 하나 복사하고 원본 배열에 map을 순회하면서 복사한 배열에 indexOf 메소드로 index를 찾아서 반환하고 배열은 0부터 시작하기 때문에 +1을 해준다. 참고사항: slice 는 얇은 복사로 원본에 배열을 건드리지 않고 얕은 복사본으로 새로운 배열 객체를 반환. indexOf 배열에 값이 몇번째 index 인지 찾아준다 그래서 내림차순으로 0, 1, 2 이런식으로 index를 찾아서 반환한다. https://school.programmers.co.kr/learn/courses/30/lessons/120835 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭...

자바스크립트 알고리즘 25 일차 (프로그래머스) [내부링크]

25일차 첫번째 문제 문제: 잘라서 배열 저장하기 난이도: 하중 풀이 과정: 매개변수 my_str index만큼 for문을 순회하고 for문의 증감을 n 개수 만큼으로 할당하고 slice로 각각의 문자를 잘라준다. ex 1번순회: 0, 6, 2번순회: 6, 12, 3번순회: 12, 18 참고사항: slice 는 얇은 복사로 원본에 배열을 건드리지 않고 얕은 복사본으로 새로운 배열 객체를 반환. https://school.programmers.co.kr/learn/courses/30/lessons/120913 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 24 일차 (프로그래머스) [내부링크]

24일차 첫번째 문제 문제: 한번만 등장하는 문자 난이도: 하중 풀이 과정: 다양한 방법으로 한 번만 등장하는 문자를 찾을수 있지만 매개변수 문자열은 split 함수로 배열로 만들고 filter 함수로 순회하며 indexOf 와 lastIndexOf로 한번만 등장하는 문자를 찾아서 반환. 참고사항: indexOf, lastIndexOf 함수는 문자열안에 조건이 되는 문자열이 몇 번째 존재하는지를 확인하는 함수 lastIndexOf 함수는 동일한 역활을 하지만 뒤에서부터 몇전째 위치에 존재하는지를 확인해주는 함수이므로 한번만 등장하는 문자열은 index값이 똑같기 때문에 원하는 결과값을 얻을 수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/..

자바스크립트 알고리즘 23 일차 (프로그래머스) [내부링크]

23일차 첫번째 문제 문제: 가까운 수 난이도: 하중 풀이 과정: 매개변수 n 값에 가장 가까운 array 값을 찾기 위해서 배열을 sort로 정렬을 해주고 reduce로 순회를 하고 Math.abs 함수로 절대값을 만들어서 비교를해서 해당 값을 찾는다. 참고사항: array 배열에 더 적은 숫자를 출력하기 위해서는 배열을 sort함수로 정렬을 해줘야한다. math.abs를 활용해서 절대 값으로 변환 https://school.programmers.co.kr/learn/courses/30/lessons/120890 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co..

자바스크립트 알고리즘 22 일차 (프로그래머스) [내부링크]

22일차 첫번째 문제 문제: k의 개수 난이도: 하중 풀이 과정: for문으로 j의 개수만큼 순회를 해서 j개수 만큼 값을 result에 문자열로 축적을 한다. split 함수를 활용해서 k값을 짜라서 배열로 만들고 -1 해주면 반환값을 받음 참고사항: split 함수를 짜르면 해당 개수에 +1이 된다. length -1을 주어야 한다. https://school.programmers.co.kr/learn/courses/30/lessons/120887 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 21 일차 (프로그래머스) [내부링크]

21일차 첫번째 문제 문제: 팩토리얼 난이도: 하중 풀이 과정: 2개의 값을 축적하기위해서 변수를 선언하고 while을 factorial 축적값을 n값만큼 값을 순회해서 조건에 만족하는 가장큰 수를 찾는다. 참고사항: 예로 1 * 2 * 3 * 4 * 5 * 6 * 7에서 2 * 3 = 6 이고 while 문에 factorial

자바스크립트 알고리즘 20 일차 (프로그래머스) [내부링크]

20일차 첫번째 문제 문제: A로 B 만들기 난이도: 하 풀이 과정: 함수에 2개의 매개변수를 배열로 변환해서 sort() 메소드로 오름차순을 해주고 삼항연산자로 true일 경우 1 아닐경우 0을 반환 참고사항: sort() 메소드는 기본적으로 오름차순으로 배열 요소를 정렬해준다(default ). 배열에 List 값을 뿌려줄때 sort() 메소드를 활용해서 오름차순, 내림차순 정렬로도 활용할 수 있다. Array.from(arr), [...arr], arr.split("") 문자열을 배열로 만들수 있는 방법은 다양하다. https://school.programmers.co.kr/learn/courses/30/lessons/120886# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. ..

자바스크립트 알고리즘 19 일차 (프로그래머스) [내부링크]

19일차 첫번째 문제 문제: 중복된 문자 제거 난이도: 하 풀이 과정: 매개변수에 문자열을 배열로 변환해서 new Set 객체로 중복을 제거 해주고 중복을 제거한 객체를 배열로 만들어서 join함수로 문자열로 변환 참고사항: javascript에서 Set 객체를 이용하면 순서를 보장받으며 중복없는 데이터를 표현할 수 있다. Set 객체의 이런 특징을 이용해서 배열의 중복을 제거할 수 있습니다. Set 객체로 반환. Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환 개념, Array.from(), forEach문을 사용할 수도 있다. https://school.programmers.co.kr/learn/courses/30/lessons/120888 프로그래머스 코드 중심의..

자바스크립트 알고리즘 18 일차 (프로그래머스) [내부링크]

18일차 첫번째 문제 문제: 369 게임 난이도: 하 풀이 과정: 매개변수의 숫자를 문자열로 변환하고 for of 문을 활용해서 369 조건문 해당되면 1씩 count 해준다. 참고사항: for of 반복문은 배열에 주로 사용한다. 배열을 순회해서 자료들을 하나씩 꺼내고 싶을때 사용한다. * 배열뿐만 아니라 문자, NodeList, Map, Set같은 자료형에도 사용이 가능하다. https://school.programmers.co.kr/learn/courses/30/lessons/120891 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 17 일차 (프로그래머스) [내부링크]

17일차 첫번째 문제 문제: 외계행성 나이 난이도: 하 풀이 과정: age 자연수를 문자열로 만들어서(숫자를 바로 배열로 변환이 안됨) 배열로 만들고 map 함수로 알파벳에 해당 값을 찾아서 join함수로 문자열로 변환해서 나이를 반환 참고사항: toString() 숫자를 문자열로 반환, split 함수, map 함수, join 함수, alphabet 상수를 배열로 말고 문자열로 해도 인덱싱있어서 똑같은 결과값이 나온다. https://school.programmers.co.kr/learn/courses/30/lessons/120834 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. pr..

자바스크립트 알고리즘 16 일차 (프로그래머스) [내부링크]

16일차 첫번째 문제 문제: 배열 회전 시키기 난이도: 하 풀이 과정: 오른쪽으로 회전 시킬시에 javascript pop 함수로 뒤에 값을 빼서 unshift 함수로 pop으로 뺀 값을 맨 앞에 할당 왼쪽으로 회전시킬시 역으로 shift 함수로 앞에 값을 빼서 push 함수로 맨 뒤로 값을 할당. 참고사항: javascript 배열 함수 pop, unshift, shift, push 개념 필요 https://school.programmers.co.kr/learn/courses/30/lessons/120844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 15 일차 (프로그래머스) [내부링크]

15일차 첫번째 문제 문제: 가위 바위 보 난이도: 하 풀이 과정: javascript 내장함수 split 활용해서 배열로 만들어 주고 map 활용해서 배열을 순회해서 가위 바위 보에 이기는 값들을 조건문으로 할당하고 join으로 배열을 문자열로 푼다. 참고사항: split 개념, map 개념, if문 개념. split 말고도 [...rsp] 스프레드 연산자 혹은 Array.from() 활용해서 문자열을 배열로 만들수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/120839 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. ..

자바스크립트 알고리즘 14 일차 (프로그래머스) [내부링크]

14일차 첫번째 문제 문제: 배열의 유사도 난이도: 하 풀이 과정: javascript 내장함수 filter를 활용하고 includes 메소드를 활용해서 배열에 원소값을 찾아서 풀음 참고사항: filter 개념 알고리즘 문제풀이에 자주사용. includes: javascript 메소드로 배열에 특정값을 판별하는데 사용한다 반환값으로 특정값이 있으면 true 없으면 false를 반환. https://school.programmers.co.kr/learn/courses/30/lessons/120903 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 13 일차 (프로그래머스) [내부링크]

13일차 첫번째 문제 문제: 특정 문자열 지우기 난이도: 하 풀이 과정: 다양한 방법으로 특정 문자열을 찾을 수 있다. split 함수로 letter 매개변수 값을 짤라서 join 으로 문자열로 반환 하는 방법도 있었고 replaceAll 활용해서 특정 문자열을 제거할 수 있다. 정규식 공부할겸 정규식을 활용해서 풀음 참고사항: new RegExp 인스턴스를 사용 https://school.programmers.co.kr/learn/courses/30/lessons/120826 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 12 일차 (프로그래머스) [내부링크]

12일차 첫번째 문제 문제: 문자열 뒤집기 난이도: 하 풀이 과정: 문자열을 javascript 내장함수 split 문자열을 배열로 만들고 reverse 순서를 뒤집고 join 배열을 문자열로 합쳐준다. 참고사항: split, reverse, join 함수 개념필요 https://school.programmers.co.kr/learn/courses/30/lessons/120822 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 11 일차 (프로그래머스) [내부링크]

11일차 첫번째 문제 문제: 배열 두배 만들기 난이도: 하 풀이 과정: 배열에 map으로 순회를 돌면서 값을 구함 참고사항: map 개념, map 순회를 돌면서 연산값도 구하지만 데이터를 추출하는데 많이 사용된다. https://school.programmers.co.kr/learn/courses/30/lessons/120809 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 10 일차 (프로그래머스) [내부링크]

10일차 첫번째 문제 문제: 짝수 홀수 개수 난이도: 하 풀이 과정: 변수 2개들 만들고 배열에 순회를 돌면서 해당 값에 조건을 걸어서 결과값 출력 참고사항: for of 문에 개념, if문 개념 코딩테스트 연습 - 짝수 홀수 개수 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 9 일차 (프로그래머스) [내부링크]

9일차 첫번째 문제 문제: 피자 나눠 먹기 난이도: 하 풀이 과정: 자바스크립트 Math.ceil 내장함수를 사용 해서 가장 큰 정수 반환 참고사항: Math.ceil 내장함수 개념 https://school.programmers.co.kr/learn/courses/30/lessons/120814?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 8 일차 (프로그래머스) [내부링크]

8일차 첫번째 문제 문제: 중복된 숫자 개수 난이도: 하 풀이 과정: filter 함수를 활용해서 중복된 숫자의 개수를 찾을 수 있다. 참고사항: filter 개념 필요 코딩테스트 연습 - 중복된 숫자 개수 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 7 일차 (프로그래머스) [내부링크]

7일차 첫번째 문제 문제: 키 큰 사람 난이도: 하 풀이 과정: for문, filter 중에 넘어오는 매개변수 height로 키 큰 사람을 찾을 수 있다. 참고사항: for문, javascript 내장함수 filter 개념 필요 https://school.programmers.co.kr/learn/courses/30/lessons/120585?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 6 일차 (프로그래머스) [내부링크]

6일차 첫번째 문제 문제: 배열의 평균값 난이도: 하 풀이 과정: 배열에 매개변수를 reduce 함수를 활용해서 총 값을 더하고 배열에 전체 만큰 나눠서 평균값을 구한다. 참고사항: Reduce 개념이 필요하다. parseFloat 함수는 문자열 실수를 숫자로 변환해주는 함수라서 없어도 상관은 없다. https://school.programmers.co.kr/learn/courses/30/lessons/120817?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 5 일차 (프로그래머스) [내부링크]

5일차 첫번째 문제 문제: 짝수의 합 난이도: 하 풀이 과정: 정수의 개수만큼 배열로 변환 javascript 내장 함수filter, reduce 활용해서 값 구함 참고사항: Array.from, Filter, Reduce 개념이 필요하다. https://school.programmers.co.kr/learn/courses/30/lessons/120831

자바스크립트 알고리즘 4 일차 (프로그래머스) [내부링크]

4일차 첫번째 문제 문제: 양꼬치 난이도: 하 풀이 과정: 사칙 연산 우선 순위: * / + - 참고사항: Math.floor 소수점을 버리는 자바스크립트 함수 https://school.programmers.co.kr/learn/courses/30/lessons/120830 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 3 일차 (프로그래머스) [내부링크]

3일차 첫번째 문제 문제: 각도기 난이도: 하 풀이 과정: else if 조건문 활용, let 값 재할당으로 return 참고사항: 이하, 미만, 이상, 초과 이해 필요 https://school.programmers.co.kr/learn/courses/30/lessons/120829 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

자바스크립트 알고리즘 2 일차 (프로그래머스) [내부링크]

2일차 첫번째 문제 문제: 출생년도 구하기 난이도: 하 풀이 과정: new Date 객체, getFullYear 속성을 활용해서 구현 가능 참고사항: 2022년도에 기준으로 생년월일을 출력시 현재년도 2023으로 출력하면 2022년도 기준에 출생년도가 나온다. 하지만 2023년도 기준으로 생년월일 출력시 birthYear + 1 해줘야된다.

자바스크립트 알고리즘 1 일차 (프로그래머스) [내부링크]

1일차 첫번째 문제 문제: 몫 구하기 난이도: 하 풀이 과정: 자바스크립트 수학 함수에 대한 이해도만 있으면 쉽게 풀음 참고사항: 실수: 10/5 하면 정수가 나오지만 7/2 경우 소수점까지 출력이 된다. Math.floor: 소수값이 존재할때 내림을 하거나 가장 큰 정수로 반환하는 함수. 1일차 두번째 문제 문제: 숫자 비교하기 난이도: 하 풀이 과정: 조건문에 대한 이해도 필요 참고사항: Strict Equal Operator === 를 사용해서 서로 비교 출처: https://school.programmers.co.kr/learn/courses/30/lessons/120805 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술..

javascript 스와이퍼(carousel) 구현 [내부링크]

javascript 활용해서 carousel 구현 했다. 웹페이지에서 자주 볼수있는 swiper를 라이브러리가 아닌 javascript로 구현했다. 커스터마이징으로 기능 & 코드를 개선한다면 실무에서도 적용이 가능할꺼 같다. Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript/blob/main/carousel.html GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 가장 기본적인 HTML, CSS 구축..

GraphQL Express Apollo-Server Mysql 서버 구축 [내부링크]

GraphQL은 클라이언트가 서버로부터 효율적으로 데이터를 가져오는 것에 대해 흥미를 느껴서 GraphQL 활용해봤다. 프로젝트: Express와 GraphQL를 활용해서 RestfulAPI & GraphQL API 구축 학습: GraphQL 런닝커브가 있으며 Apollo-Server, schema, resolver 개념이 필요하다. GraphQL 구현 소스: Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/graphql-express-server GitHub - yoogukhyeon/graphql-express-server Contribute to yoogukhyeon/graphql-express-server development by ..

React 장바구니 기능 구현 [내부링크]

리액트 & 타입스크립트 활용해서 장바구니 기능 구현했다. 웹/앱 개발에서 중요한 CRUD 기능 및 useReducer 활용해서 생산성이 좋게 설계해서 만듬. 기본적인 프로그래밍에 개념과 가장 기본적이 hooks 활용에 대해서 깊이 공부할 수 있다. javascript filter, reduce, map, switch 활용했다. useReducer 미리 숙지하고 하면 유용하게 사용할 수 있다. useReducer: useState처럼 state생성하고 관리하는 hook 이다. useReducer 잘사용하려면 3가지를 알아두면 좋다. Reducer, Dispatch, Action Reducer: State 상태를 업로드하는 역할 Dispatch: Reducer 요구를 하는 역할 Action: 어떤 요구를 보..

React FAQ(자주 묻는 질문) 아코디언 기능 [내부링크]

리액트 & 타입스크립트를 활용해서 FAQ(자주 묻는 질문) 을 구현했다. 많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. 사용자에게 정보를 제공할때 사용된다. ️ 리액트 재렌더링 조건을 미리 숙지하고 있으면 이러한 기능을 만들때 유용하다. 렌더링 조건 1. state(상태) 변경이 되었을때 렌더링 2. 새로운 props가 전달될때 렌더링 3. 기본 props가 업데이트될때 렌더링 4. 페이지에 처음 들어올때 렌더링 Github Source 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/react-camp GitHub - yoogukhyeon/react-camp Contribute to yoogukhye..

소프트웨어 생명주기, SDLC (Software Development Life Cycle) [내부링크]

1. 폭포수 모형 (Waterfall Model) 가장 오랜된 고전적인 생명 주기 모형 한 단계가 끝나야만 다음 단계로 넘어가는 선형 순차적 모형 단계별 정의 및 산출물이 명확 개발 중간에 요구사항의 변경이 용이하지 않음 타당성 검토: 계획 - 요구 분석 - 설계 - 구현 - 테스트 - 유지보수 2. 프로토타입 모형(Prototype Model, 원형 모형) 견본(시제)품을 만들어 최종 결과물을 예측하는 모형 인터페이스 중점을 두어 개발 개발 중간에 요구사항의 변경이 용이 3. 나선형 모형(Spiral Model) 폭포수 모형과 프로토타입 모형의 장점에 위험 분석 기능을 추가한 모형 점진적 개발 과정 반복으로 요구사항 추가 가능 유지보수 과정 필요 없음 계획 - 위험 분석 - 공학적 개발 - 고객 평가 ..

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: 재사용 ..

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..

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을 순회해서 각..

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. ..

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..

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..

[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 없..

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..

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 이동 권한 클리후 아래에 ..

[ 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..

[Trouble Shooting] Nginx proxy 설정 [내부링크]

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

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..

AWS Elastic Beanstalk [내부링크]

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

모놀리식 아키텍처 vs 마이크로서비스 아키텍처 [내부링크]

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

화살표 함수 (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) =>..

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..

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 인덱스 생성 쿼리 ..

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..

[git] .gitignore이 적용이 안될 때 해결 방법 [내부링크]

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

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( ..

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보다..

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번 데이터를 지우고 데이터를 다시 생성..

Nest.js Middleware logger [내부링크]

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

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와 비슷한 아키텍쳐 구조를 ..

ESLint, Prettier Setting 이해하며 정리 [내부링크]

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

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는 서버 상태 라이브러리 입니다. 서버와 클라..

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..

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 서버에 부하를 분산시켜주는 일 라우팅 역활 고가용성..

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..

AWS EC2 인스턴스 Putty 활용해서 서버 접속 [내부링크]

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

[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 정의해줄수있다. ..

[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",..

AWS CodePipeLine & Elastic Beanstalk CI/CD [내부링크]

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

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 이런식으로 파일경로를 접근..

[TypeScript] 타입스크립트 Interface [내부링크]

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

Aws cloud practitioner 합격후기 [내부링크]

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

AWSAWS Cloud Practitioner 자격증 공부 [내부링크]

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

AWSAWS Cloud Practitioner 자격증 공부 [내부링크]

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

AWSAWS Cloud Practitioner 자격증 공부 [내부링크]

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

AWS Cloud Practitioner 자격증 3주안에 취득하기 [내부링크]

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

EC2 개념 2 [내부링크]

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

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..

윈도우(windows)에서 포트 검색 및 포트 죽이기 [내부링크]

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

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) 데..

DBMS 와 RDBMS 개념 정리 [내부링크]

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

반응형 웹, 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에서 모바일로..

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사이의 통신 방식 중 하..

리눅스 마스터 주변장치 연결 및 설정, 주변장치 활용 [내부링크]

주변 장치 연결 및 설정 리눅스 프린터 관련 명령어 리눅스 프린터 관련 명령어는 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 ..

리눅스 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 누르면 바로..

네트워크 관리사 필수 암기 (시험대비) [내부링크]

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

네트워크 관리사 필수 암기 [내부링크]

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

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를 판단하여 조건에 ..

리눅스마스터 명령어 옵션 정리 [내부링크]

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

scroll할때 progress bar 표시 [내부링크]

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

네트워크 관리사 RPM 과 SAMBA [내부링크]

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

자바스크립트 innerHtml vs innerText [내부링크]

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

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안에 첫번째 엘리먼트를 반환한다. 일..

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..

javascript 쉽게 구현하는 아코디언(accodion) [내부링크]

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

네트워크 관리사 리눅스 파일시스템 [내부링크]

파일 시스템(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 파일 시스템 단일 파일의 크기 : 최대..

네트워크 관리사 리눅스(Linux) [내부링크]

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

css 활용한 기본적인 hover 기능 구현 [내부링크]

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

네트워크 관리사 액티브 디렉터리 [내부링크]

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

네트워크 관리사 필수 암기 간단 정리 [내부링크]

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

네트워크 관리사 필수 암기 [내부링크]

패킷이 라우팅 되는 경로의 추적에 사용되는 유틸리티로 목적지 경로까지 각 경유지의 응답속도를 확인할수 있는 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..

네트워크 관리사 용어 및 개념 정리 [내부링크]

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(도메인 이름..

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(..

네트워크 관리사 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계층..

네트워크 관리사 첫번째 필수 암기 정리 [내부링크]

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..

회선교환 && 패킷교환 [내부링크]

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

네트워크 관리사 광대역 기술 [내부링크]

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

1.네트워크 관리사 네트워크 일반 [내부링크]

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

네트워크 관리사 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..

근거리 통신(LAN : local Area Network) [내부링크]

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

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) : 네트..

1.네트워크 개요 [내부링크]

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

개발에서 가장 중요한 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는 캐멜..

[Docker] Docker의 개념 및 핵심 설명 [내부링크]

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

업무 자동화 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) ..

Mysql 타입변환 (type casting) [내부링크]

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

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) 활용하자 기존 값을 업데이트 하..

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..

타임제한을 만들어봐요!!!! [내부링크]

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

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

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

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로 사용이 ..

git에서 특정 브랜치 clone하는 방법 [내부링크]

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

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, “..

Bcrypt를 활용해서 비밀번호를 암호화 하기 [내부링크]

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

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...

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문자열로 변환시킵니다. ..

배열에 개념 과 Api 정리1편 [내부링크]

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

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..

Encoding , 유니코드 , UTF-8 에 대해서...... [내부링크]

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

Git Authentication Failed 사용자 인증 [내부링크]

git remote을 해서 사용을 하다보면 사용자 인증 오류가 날때가 있습니다. 즉 이런문구 : remote:invalid username or password. fatal:Authentication failed for 사용자 인증에 대한 오류가 뜹니다. 다양한 오류증에 로그인 오류 일수도 있고 토큰 만료일수도 있습니다 즉 해결 방법은 리모트된것을 지워줍니다. git remote remove origin git remote add origin https://유저네임:비밀번호@github.com/깃주소 이런식으로 해결을 하고 작업을 하면 됩니다!

오늘은 git branch 활용하기 입니다 [내부링크]

프로젝트를 하게되면 필수적으로 git활용하게 됩니다. 그리고 branch를 따서 작업을 할일도 생기는데요 여기서 git branch 활용하는 방법을 알아보겠습니다. branch 생성 git branch -b 브랜치이름 branch 확인 git branch branch 설정 git checkout -b 브랜치 이름 branch 푸쉬 git push origin 브랜치 이름 branch 당겨오기 git pull origin 브랜치 이름 branch 삭제 git branch -d 브랜치 이름 일단 git remote 이미 있다는 가정하해 진행을 해보도록 하겠습니다. 먼저 git branch 생성을 위해서는 git branch -b 브랜치이름 이렇게 명령어를 쓰면 git branch 가 생성이 됩니다. git ..

Jquery 활용한 modal창 만들기 [내부링크]

오랜만에 글을 올립니다!! 회사 업무로 바빠서ㅠㅠㅠ 오늘은 간단하면서도 활용도가 높은 jquery 활용해서 modal창을 만들어 보았습니다. See the Pen Untitled by 유국현 (@yoogukhyeon) on CodePen.

Node.js express-generator와 미들웨어 개념 [내부링크]

Express는 Node.js에서 가장 대표적인 프레임워크 입니다 Express활용해서 다양한 npm을 사용할수 있고 개발생산성을 높일수 있습니다 그리고 그런 뼈대를 잡아서 더 편리하고 손쉽게 폴더와 파일을생성해주는 express-generator 모듈이 있습니다 이 모듈을 통해서 프로젝트를 진행할 수 있습니다. 1. 비주얼 스튜디어를 켜고 2. Express-generator 모듈 설치 Npm 설치를 해야됩니다 -g 옵션은 global을 의미하면 하나의 옵션입니다 global로 설치한 모듈은 커맨더 창 어디에서든 명령어를 사용할 수 있습니다 3. 프로젝트 폴더에 스켈레톤 어플리케이션을 생성합니다 저런 명령어를 치면 ejs 기반에 view템플릿으로 폴더가와 파일들이 생성됩니다!!!! 아주 편리하고 좋습니..

[문제해결] You are using safe update mode [내부링크]

에러현상 mysql 워크벤치를 사용할때 저런 에러현상이 나올떄가 있습니다. 이러한 에러 현상을 리턴합니다 Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Editor and reconnect. 이러한 현상이유는 테이블에서 키값을 이용한 UPDATE나 DELETE만을 허용하도록 되어 있는데, 그렇지 않게 좀더 넓은 범위의 SQL을 적용하려고 할떄 WORKBENCH에서 경고를 주는것입니다 다수에 쿼리 사용할떄 저런 에러 현상이 발생 합..

관계형 데이터베이스 집합연산과 관계연산 & SQL 종류 [내부링크]

SQL개발자 study 10일차 회사는 다니면서 병행하느라고 공부를 제대로 하지 못하고 있네요 ㅠㅠㅠㅠ 그래도 오늘은 아침일찍 출근해서 30분정도 끄적여본 공부를 다시 복습합니다 관계형 데이터베이스의 특징은 릴레이션을 사용해서 집합 연산과 관계 연산을 할 수 있다. 집합 연산 집한 연산 설명 합집합(UNION) - 두 개의 릴레이션을 하나로 합하는 것이다 차집합(DIFFERENCE) 본래 릴레이션에는 존재하지만 다른 릴레이션에는 존재하지 않는 것을 조회한다 교집합(INTERSECTION) 두 개의 릴레이션 간에 공통된 것을 조회한다 곱집합(CARTESIAN PRODUCT) 각 릴레이션에 존재하는 모든 데이터를 조합하여 연산한다 관계 연산 관계 연산 설명 선택 연산 릴레이션에서 조건에 맞는 행 만을 조회한..

오늘은 디버깅 으로 문제 해결 [내부링크]

Sequelize 기반으로한 프로젝트 이고 저는 백엔드에서 데이터를 가공해서 프론트에 뿌려 주는 작업을 하고 있었습니다 프론트에서 데이터를 잘 가지고 오는데 데이터가 UNDIFIND가 자꾸떠서 계속 해서 삽질중 이였지만ㅎㅎ 이럴때는 백엔드 데이터도 디버깅을 하는 방법을 배웠습니다 sequelize.query() 저런식으로 가공해서 console.log()를 찍어보면 이런식으로 찍힙니다 배열안에 배열로 묶여있는 현상입니다 저는 저것을 파악 못하고 계속 해서 다르게 데이터를 넘겨주고 있었습니다 저런식으로 데이터를 뿌릴려면 한번더 배열에 묶어 줘야지 원하는 값이 나왔습니다. 반대로 sequelize.query()에 replacements를 보내준다면 이렇게 배열안에 바로 값이 떨어져서 제가 원하는값을 가공할수..

MySql 구조 분석 [내부링크]

회사 DATABASE TABLE 패턴과 자주쓰는 컬럼들을 정리했습니다. 저희 회사는 MYSQL 사용합니다 자주 사용하는 Data Type Char (문자형 데이터 타입) 고정 길이 데이터 타입 255byte (255자 까지) 지정된 길이보다 짧은 데이터를 입력될시 나머지 공간을 공백으로 채워진다 Varchar (문자형 데이터 타입) 가변 길이 데이터 타입 지정된 길이 보다 짧은 데이터를 입력될시 빈 공백을 채우지 않는다 Text (문자형 데이터 타입) 문자열 데이터 타입으로 장문에 글을 넣어야될때 사용된다 Int 정수형 데이터 타입 3byte로 unsigned 사용시에 음수값을 저장하지않는다 또한 INTEGER 라고도 사용한다 CHAR 와 VARCHAR 차이? char 와 varchar 차이 char는 ..

req 객체와 res 객체 , res.send 와 res.json 대해서 [내부링크]

node.js express 프레임워크를 사용하면 기본적인 res객체 , req객체 , express()함수에 대해서 헷갈리거나 어려움을 느낄때가 있습니다 그래서 Express 공식 홈페이지를 참고하여 정리를 해봤습니다. req 객체 req.body : POST 정보를 가집니다. 파싱을 위해서 body-parser와 같은 패키지가 필요합니다. req.query : GET정보를 가집니다. 즉 , URL로 전송된 쿼리 스트링 파라미터를 담고 있습니다. req.params : 내가 이름 붙인 라우트 파라미터 정보를 가집니다 req.headers : HTTP의 Header 정보를 가집니다 res 객체 res.send : 다양한 유형의 응답을 전송(클라한테 보낼때 사용) res.redirect : 브라우저 리다이..

Node.js JWT 기반으로 사용자 인증 알아보기 [내부링크]

1. JWT(Json Web Token) 많은 웹 서비스들은 사용자 인증을 구현하기 위해서 쿠키와 세션을 이용해왔습니다. 그런데 쿠키와 세션에는 여러 문제(보안 등등)들이 있어서, 최근에는 OAuth와 JWT 같은 토큰 기반으로 사용자 인증 방식을 사용합니다. OAuth 에 대해서? OAuth는 쉽게 말해서 Facebook , Google 같이 다른 어플리케이션으로 사용자 인증을 인가한 것. JWT 에 대해서? JWT는 사용자 정보를 JSON객체에 담아 이를 암호화하고 해싱 작업을 거쳐 문자열 토큰을 생성하는 기술입니다. 클라이언트는 이 토큰을 HTTP Header에 추가하여 요청을 보냄으로써 사용자 인증을 얻게 됩니다. JWT는 서버에 저장되지 않기 떄문에 서버 부하를 일으키지 않으면 , 해싱작업을 통..

SQL 정규화(Normalization) 와 반정규화(De-Normalizat) [내부링크]

SQLD Study 4일차 정규화란? 1. 정규화는 데이터의 일관성, 최소한의 데이터 중복, 최대한의 데이터 유연성을 위한 방법이며 데이터를 분해하는 과정이다 2. 정규화는 데이터 중복을 제거하고 데이터 모델의 독립성을 확보하기 위한 방법이다 3. 정규화된 모델은 테이블로 분해되고 , Join을 수행하며 하나의 합집합으로 만들수 있다 정규화 절차 (저는 시험문제로 제출될수 있는 BCNF 까지만 공부를 했습니다) 정규화 절차 설명 제1정규화 속성(Attribute)의 원자성을 확보한다 중복값을 제거한다 기본키를 설정한다 제2정규화 기본키의 2개 이상의 속성으로 이루어진 경우, 부분 함수 종속성을 제거 한다 제 3정규화 기본키를 제외한 칼럼 간에 종속성을 제거한다 즉 , 이행 함수 종속성을 제거한다 BCNF..

엔터티(Entity) 종류 [내부링크]

SQLD 시험준비 2일차 엔터티(Entity) 종류 엔터티의 종류는 유형과 무형에 따른 종류, 엔터티가 발생하는 시점에 따른 종류로 나누어 진다 엔터티를 유형과 무형으로 분류하는 기준은 물리적 형태의 존재 여부이다 1. 유형과 무형에 따른 엔터티의 종류 유형 엔터티 업무에서 도출되며 지속적으로 사용되는 엔터티이다 개념 엔터티 유형엔터티는 물리적 형태이지만, 개념 엔터티는 물리적 형태가 없다 사건 엔터티 비즈니스 프로세스를 실행하면서 생성되는 엔터티 이다 2. 발생 시점에 따른 엔터티 종류 기본 엔터티 (basic) 키 엔터티 중심 엔터티 (Main) 기본엔터티와 행위 엔터티 중간에 있는것 행위 엔터티 (Actice) 2개 이상의 엔터티로부터 발생된다 3. 속성의 특징과 종류 1. 속정의 특징 = 속성은 ..

[SQLD] 데이터 모델링의 이해 [내부링크]

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

Mysql 제약 조건에 대해서 알아봐요! [내부링크]

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

Javascript hasOwnProperty 메소드를 알아봐요! [내부링크]

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

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에서는 테이블과 맵핑되는 객체의 메서드를 통해..

MySql 자료형과 옵션 (Data Types and Options) [내부링크]

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

URL 대해서 분석 & 이해 [내부링크]

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

Javascript Class에 대해서 공부해봐요 [내부링크]

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

javascript 함수에 대해서 공부해요 [내부링크]

javascript에서 함수는 정말 중요한 부분인데요. javascript는 함수가 값으로 될수있습니다 그래서 함수를 활용하는방법은 아는것은 정말 중요합니다. function 이라는 함수 키워드로 ()중괄호 {}호로 함수 키워드를 선언할수있습니다 그리고 함수는 함수 선언식, 함수 표현식으로 나눠질수 있습니다. 함수 선언식은 function printFunc(){ console.log('hello') } 함수 표현식은 const func = function printFunc(){ console.log('hello') } 이렇게 사용할수 있습니다 그럼 vs코드를 켜서 볼께요 이렇게 함수에 중괄호는 매개변수가 들어가는자리이고요 대괄호 안에는 함수에 작동하는 값들이 들어가는곳입니다! 저렇게 함수안에 값을 con..

오늘은 javascript에 데이터타입을 알아봐요! [내부링크]

javascript를 공부하다보면은 자료형에 대해서 알게되는데요 그래서 오늘은 javascript 자료형에 대해서 공부를해봐요! 데이터는 값과 값의 유형으로 구분되어져있습니다. 자료형이란 즉 값의 유형입니다 값이 가질수있는 여러가지 유형의 개념을 말합니다 javascript 2가지로 나눠질수있는데요 원시 타입(primitive type) 참조 타입(reference type) 이렇게 2가지로 나눠질수있습니다. 원시타입은 기본 자료형입니다 이렇게 준비를 해보시면 typeof() 함수는 javascript에 타입을 알수있는 함수입니다. 이렇게 각각에 타입을 말해주고 있습니다! 이번엔 참조 타입 참조 자료형입니다. 참조타입은 배열 , 객체 , 함수를 말하는데요 이것또한 typeof를 활용해서 타입을 알아낼수있..

OOP (object oriented programing )을 공부해요 [내부링크]

OOP라 불리며 object oriented programing 객체지향 이라고 부릅니다! 객체 프로그래밍 방식 OOP는 객체들의 유기적인 관계를 통해서 프로세스가 진행이 됩니다. 즉, 어플리케이션을 구성하는 요소들을 객체로 바라보고, 객체들을 유기적으로 연결하여 프로그래밍 하는 것을 말합니다. OOP 장점은 코드 재사용이 높아지고 유지보수가 쉽고 크도가 간결해집니다! 단점은 처리 시간이 비교적 오래 걸리고 프로그램을 설계할때 많은 고민과 시간을 투자해야합니다 OOP의 특징 4가지 추상화 : 추상화는 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현하기 위한 개념입니다 즉 인터페이스로 클래스들의 공통적인 특성들을 묶어 표현한것 캡슐화 : 실제로 구현 부분을 외부에 드러나지 않도록 하는것 , 변수와..

오늘은 자바스크립트에 문서 로딩 순서 제어하기 [내부링크]

작업을 준비하다 보면 작업을 하다보면 Script위치를 어디에 놓는게 좋을까요? 제일 좋은 방법은 body 태그 최하단에 놓는것이 가장 좋습니다! 일단 브라우저의 동작 방식은 1. Html을 읽기 시작합니다 2. Html을 파싱합니다 3. DOM 트리를 생성합니다 4. DOM 트리 + CSS을 생성되고 로드가됩니다 여기서 우리가 스크립트를 중간이나 최상위에 놓는다면 Html 읽는 과정에서 중간에 스크립트를 만난다면 파싱을 하는데 지연이 될것이고 스크립트를 못읽는 현상이 발생할수도 있습니다 그래서 저희는 가장좋은 방법은 body 최하단에 script을 넣는것이 가장 좋습니다. 그럼 스크립트 로딩 순서를 제어해보죠 async 방식은 비동기 방식으로 html 중단되지 않고 진행이 됩니다 defer 문서가 다 ..

javascript 활용해서 plus and minus 만들어봐요! [내부링크]

simple한 plus and minus 만들어 봐요 여기서 배울 javascript 문법은 Dom 과 innerText 그리고 parseInt 와 삼합연산자 입니다! Dom은 HTML 테그를 가져와서 활용할수있고 innerText는 텍스트 노드를 추가할수있습니다 parselnt 소수점을 없애고 정수로 바꾸는 함수 입니다 codePen See the Pen plusandminus by 유국현 (@yoogukhyeon) on CodePen.

오늘은 geolocation API 알아봐요 [내부링크]

geolocation API는 사용자의 현재위치 정보를 가져올때 사용하는 javascript API 입니다 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송됩니다! 저는 여기서 geolocationAPI에 메소드인 getCurrentPosition()을 써서 메소드의 반환값인 coords.latitude 와 coords.longitude를 활용해서 값을 가져와 볼께요! 각각에 메소드는 어떤건가요? getCurrentPosition() : 사용자의 현재 위치를 가져오는 겁니다 coords.latitude : 소수로 표현된 위도 값 coords.longitude : 소수로 표현된 경도 값 그럼 한번 코드를 작성해 보겠습니다! html 을 작성해주시고! DOM으로 값을 변수로 담고 f..

Array splice() 함수에 대해서 알아봐요! [내부링크]

javascript 배열 객체에서 제공되는 함수인 splice() 함수를 이용하면 위치에 요소 추가 or 삭제를 유용하게 할수있습니다. 즉 Array.splice() 함수는 원하는 위치의 요소를 추가 or 삭제를 합니다! 문법또한 이해하기 쉽습니다! Array.splice(시작점 , 길이 , 배열추가 , 배열추가) 이런식인데 아마도 코드를 보시면 훨씬 이해하기가 쉬울꺼 같습니다! vs 코드를 켜주시고 배열 안에 값을들 넣어주시고 배열을 담고있는 m 안에 배열함수 splice()에 5번째에 길이는 0이고 추가1 추가2 를 추가해줘 이런 문법입니다! 역시 결과물은 잘나왔네요!!! 5번째 index가 5번 이니까요ㅎㅎ 다른 방식으로 해보죠 index 1번 뒤에 1뒤에추가 2뒤에추가 추가해줘 이런 문법입니다 결..

오늘은 Github에 저장소이름 바꿔봐요! [내부링크]

오늘은 개발자의 필수인 git에 대해서 공부해요 말그대로 git은 소프트웨어 개발에서 소스 코드를 효과적으로 관리할 수 있도록 하는 무료 , 공개 소프트웨어로 많은 개발자들이 개발을 할때 사용 합니다 그래서 저또한 많이 공부 합니다! 오늘은 github에 만들 저장소에 이름을 바꾸고 티미널에 remote에 바뀐저장소 주소로 remote 해보겠습니다! 저기서 저장소에 이름을 바꾸면 새로운 url 주소를 복사합니다 그리고 cmd창을 틀고 터미널에 git remote set-url origin " 주소 " (쌍다운표안에) 치시고 git remote -v로 바뀐 원격 저장소를 확인 할수 있습니다! 이게 제가 바꾼 새로운 저장소에 remote 입니다! 위에 heroku는 따른 remote한 저장소입니다!

오늘은 bind 알아봐요! [내부링크]

함수안에 this라는 것을 정의할수 있고 this를 활용해서 bind를 써보겠습니다 먼저 함수안에 this를 담을 객체가 필요해서 먼저 객체를 생성하고 객체 안에 name에 값을 넣습니다 그리고 showIntorduce 함수를 만들어서 파라미터값에 here , home , phone 넣고 console.log() 안에 값들을 넣어보겠습니다! 그리고 함수.bind(생성한 객체를 넣습니다); bind 함수를 변수 값에 넣고 boundsay라는 그리고 거기에 인자값을 넘겨 주면 됩니다! call , apply 방식은 조금 다릅니다! 결과값이 잘나오네요!

요즘 많이 쓰이는 gnb floating 을 만들어봐요 [내부링크]

오랜만에 jquery 이용한 기능 구현을 해보네요!! 오늘은 일정 스크롤이 되면 gnb가 나타나는 코드를 짜보아요 여기서 써야되는 메소드는 offset 입니다 그리도 addClass and removeClass 기능 입니다! 그리고 scroll 이벤트 또한 ui구현할때 많이 쓰는 이벤트 입니다 click , mouseover , mouseout 등등처럼요 CodePen See the Pen gnbFloating by 유국현 (@yoogukhyeon) on CodePen. 한번씩 따라해주시면 더 도움이 되겠죠?ㅎㅎ 감사합니다!

Haker News part 마무리 [내부링크]

오늘로서 Haker News Part API를 가져오고 UI를 구현하는 어플리케이션 마무리를 해봅니다 전체 코드는 저의 git에 있습니다! https://github.com/yoogukhyeon/FrontendProject1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com 저번에 말한 replace() 메소드를 활용해서 key value 값을 교체하는 javascript 메소드를 활용해봤습니다 댓글도 구현을했습니다! 이번..

javascript join 메소드에 대해서 알아봐요 [내부링크]

join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다! 바로 예제로 확인해봐요! arr = [] 배열을 만들어주고 arr.join() 메서드로 배열에 index 합쳐춥니다! 추가적으로 배열.push() 맨뒤에 배열 추가입니다 배열.unshift() 앞에 맨앞에 배열추가합니다 join() 메소드를 알아봤습니다!

Haker News Part 8 [내부링크]

이번 part 빈 template에 ui를 구현 해보겠습니다. 그리고 replace 써서 값을 넣어줘서 ui를 구현하는 문법을 사용해보겠습니다 그리고 댓글 ui 를 구현하는 로직을 짜보겠습니다 여기서 재귀함수라는 기술을 사용 해보겠습니다 저의 git에서 코드를 확인하실수 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code7 그리고 replace('a' , 'b') a에 값을 b로 바꾼다 라는 뜻입니다!!!! 여기서 replace 에대해서 공부할수있는 좋은 예시 였습니다! 댓글 함수도 만들어 보겠습니다. 인자값으로 comments 주고 스스로 comments값을 불러온다해서 재귀함수라고 합니다 빈 배열을 만들어서 push로 댓글에 대한 값과 u..

Haker News Part4 , 6 , 7 [내부링크]

part 4 6 7은 코드 양이 별로 없어서 같이 업로드 하겠습니다! 일단 Element 요소로 UI를 만드는 것은 비효율적이기 떄문에 문자열을 통해서 UI를 구현하고 라우터만들어 페이지 이동을하고 메인에 paging 을 구현했습니다! 제 git에서 코드를 보실수 있습니다!!! https://github.com/yoogukhyeon/FrontendProject1/tree/code6 NewsList 빈 배열을 만들어서 push로 문자열을 구현했습니다! 그리고 라우터 부분에 hash를 통해서 페이지 이동을 구현했습니다! paging을 구현해보겠습니다 가장먼저 store에 currentPage 저장소를 만들어 줍니다 그리고 페이지 이동을 UI를 만들고 속성에 저장된페이지 이동 값을 넣습니다 결과물이 잘나오네요..

Haker News Part 3 코드 리팩터리 [내부링크]

이번 part3는 코드 리팩터리를 했습니다.. 개발자의 숙명이죠...중복코드를 줄이는것이요..... 저도 한번 리팩터리 작업을 했습니다ㅎㅎ 여기서 중요한것은 함수에 인자를넣고 인자값을 바뀌면 값을 주는 그런 형태입니다!! 자 그럼 시작해보죠ㅎㅎ 제 git의 part3 코드입니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code3/part03_2%EA%B0%9C%ED%99%94%EB%A9%B4%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A6%AC ajax 중복 코드이기떄문에 함수로 묶어서 뿌려 주겠습니다! function getDate(인자){ ajax.open('get' , 인자값 , false) } 저자리는 url이 들어가는 자리입니다 ..

JavaScript Ajax 비동기 통신에 대해서 알아보자 part3! [내부링크]

이번엔 마지막 part3로 ajax 이용해서 서버에 데이터를 통신해서 받은 데이터값을 UI단에 출력해보겠습니다. 먼저 Html에 표시에줄 테그를 만듭니다! DOM 으로 movieList 값을 가져오고 tag 빈 문자열을 만듭니다! 그리고 tag안에 데이터 값을 출력해주는 겁니다! 그리고 마지막으로 innerHtml = tag 넣어주면 !!! api 호출을 해서 브라우저에 뿌려준 기본적인 ajax 비동기통시을 활용했습니다! 다음번에는 다른 형태에 api 가져와서 뿌려보겠습니다!

Haker News project part2 [내부링크]

Haker News Api를 Ajax 비동기 통신을 이용해서 어플리케이션을 개발해 보겠습니다. part2를 작업하면서 substr() 메소드 replace() 메소드를 활용해 보았습니다. part2 소스코드는 제 git올려져 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code2 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com part2 작업은 hash값으로 a..

객체 생성과 this 에 대해서 알아봐요! [내부링크]

객체는 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙치는 것입니다. 또한 이것을 지칭하는 this 예약어도 있습니다 자바스크립트에서 중요한 부분중 하나입니다! 객체는 { } 안에 key 와 value 이뤄지는 형식 입니다! student 객체 안에 sum 함수도 넣을수있습니다 이런식으로 객체를 쓸수 있지만 불편한 점이 많습니다. 이미 student 객체는 내부적으로 math , science 점수를 알고있습니다. 하지만 저값을 받기위해서 또 다시 언급을 해야되는 번거로움이 있습니다 여기서 this 사용해서 더 편하리하게 만들수 있습니다! this 약속된 키워드 의미 입니다 this가 속해있는 메소드가 속해있는 객체를 가르키도록 하는 특수한 약속입니다 this 사용한다면 변수에 이름에 바꼇을때도 결과 값..

캐시와 쿠키에 대해서 알아봐요! [내부링크]

제가 다니는회사에서 프론트단에서 관리하는 큰규모에 사이트가 있었습니다. 그 사이트를 유지보수를 하다보면 여러가지 이슈들이 있었지만 그중에서도 캐시(cache)문제 트래픽(traffic)문제가 있었다. 나도 이해를 잘못하고 기획팀 디자이팀에게도 설명할 정도에 수준이 안되어서 다같이 힘들었던 기억이 있습니다........그래서 cache & traffic 대해서 알아봅시다! 캐시 & 쿠키를 사용 하는 이유? 쿠키를 사용 하는 이유? 쿠키와 캐시를 사용하는 가장큰이유는 서버가 사용자에게 빠른 검색 결과와 정보를 제공하기 위함 입니다. 웹 사이트를 돌아다니다보면 아이디를 기억하고 있는 사이트 또는 전에 검색한 키워드 들이 저장되어 있는 경험을 해본신적이 있을겁니다. 그럴수 있었던 이유는 본의 즉 client 컴..

Git 에 대해 [내부링크]

개발 & 프로젝트를 진행할때 이메일 메신저를 통해서 협업을 하는것은 상당히 힘들고 어려운 일입니다. 그러한 상황을 개선하고나 쓰는 관리시스템중하나인 GIT에 대해서 알아보겠습니다! Git - 버전 관리 시스템의 종류 * 버전관리 : 여러 파일을 하나의 버전으로 묶어 관리하는 것입니다 버전 관리 시스템의 종류 1. 클라이언트 - 서버 모델 - 하나의 중앙 서버로 여러 클라이언트들이 각자 필요한 데이터만 가져와서 작업을 하고, 다시 중앙 서버로 보내서 통합하는 방식 (CVS(Concurrent Versions System 동시버전관리) , SVN(SubVersion 형상관리)) 2. 분산 모델 - 하나의 중앙 서버가 존재하지만 여러 클라이언트들은 각자의 컴퓨터 저장소에 전세 사본을 가지고 작업하는 방식 Gi..

JavaScript 객체 , 배열 반복문 활용! [내부링크]

자바스크립트를 쓰다보면 객체 , 배열은 항상 필요한 존재죠! 그래서 반복문 또한 중요한 부분중 하나입니다! 오늘은 배열에 반복문과 객체에 반복문을 다뤄 보겠습니다! 지금 제가쓴 for문은 가장 기본적인 방식이고 배열 과 객체를 저런식으로 반복문을 활요해서 값을 뽑아올수 있습니다!!!!

JavaScript 객체 , 배열 사용하기! [내부링크]

JavaScript 프로젝트를 진행하다보면 코드양이 많아지고 복잡해집니다! 그래서 코드의 복잡성을 단순하게 만드는 여러가지도구중 객체라는 도구를 활용해서 코드의 복잡성을 줄이는 기술입니다. 객체는 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것이라고 이해하시면 됩니다! 저는 node.js 기반으로 작업을해서 터미널에서 확인이 가능합니다! node.js 아니더라고 스크립트에서 브라우저 단에서 연습이 가능합니다! 배열에 형태 var 변수이름 = [' ',' ',' ']; 배열에 index 순서는 0 1 2 3 .... 이런식으로 읽습니다! 객체에 형태는 var 변수이름 = { key : value} 이번엔 객체를 수정하고 삭제 해보겠습니다 잘 수정되고 삭제 되었습니다!!! 출처 생활코딩

Haker News project part 1 [내부링크]

Haker News Api를 Ajax 활용해서 어플리케이션을 개발해 보겠습니다! Haker News Project 기본적인 어플리케이션 개발을 위한 기본 연습입니다! part1 부터 단계별로 나아가며 마지막에 기본적인 typescript 활용해보겠습니다! 다같이 공부해봐요!! Part1 = 12줄 Ajax 코드 짜기 코드참고는 저의 git에 올려두었습니다 https://github.com/yoogukhyeon/FrontendProject1/tree/code1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 developm..

JavaScript Ajax 비동기 통신에 대해서 알아보자 part2! [내부링크]

part1에서 기본적인 Ajax 원리를 알아보았다면 오늘은 실제 Api를 활용해봐요! 외부데이터를 받아노는 fetch API를 활용해서 받오겠습니다! PART1 참고해주세요 ㅎ API를 깊에 정의하면 어렵지만 저는 API를 정의한다면 잘만들어진 API에 사용방법을 알려줄께 그방법대로 우리의 API를 잘활용해봐 이렇게 이해해를 합니다 그럼 실제 API를 활용해보겠습니다 사이트는 https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx Eedpoint는 Api 접속하기위한 url ..

오늘은 addEventListener 에 대해서 알아봐요! [내부링크]

addEventListener는 event 방식으로 가장 권장되는 이벤트 핸들러 입니다 사용방식문법또한 어렵지 않습니다! 객체.addEventListener('이벤트 종류' , 함수) or 객체.addEventListener('이벤트 종류' , function(){ }) 이런한 형태로 사용을 합니다 바로 예제 들어가보죠 브라우저를 열고 확인을 하시면 잘나옵니다! 이번엔 조금더 다양하게 해보겠습니다 문법을 이해해보면 onclick 이벤트 실행 if(document.getElementById('prevent').checked) checked property가 체크가 되어있다면 return false 실행시키지 마 이런뜻입니다! 참고로 target="_blank" 새창을 열겠다라는 속성 입니다. 이거는 pro..

오늘은 floating 만들어봐요! [내부링크]

사이트를 보시다보면 자주 볼수있는 floating 메뉴바죠ㅎㅎ 이것또한 jquery로 간단하게 만들수있습니다 scrollTop 기능만 잘 활용한다면 간단하고 쉬운코드로 만들수있습니다 Code Pen See the Pen floating by 유국현 (@yoogukhyeon) on CodePen. 이렇게 쉬운 코드롤 floating menu bar 완성입니다!

NODE 최상의 객체를 활용해봐요! [내부링크]

NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다. Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다 Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다. 프론트 작업중 유용하게 활용할수 있는 기술 입니다 저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다 먼저 Node 객체를 추가해보겠습니다. = createElement() 엘리먼트 노드를 추가하고 = createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다 = 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이..

오늘은 go-Top 만들어봐요 [내부링크]

요즘 웹사이트보시면 go-top이라고 window 스크롤 내리면 나오고 클릭을 하면 최상단으로 올라가는 화살표를 보실수 있었죠? 이것또한 쉬운 jquery 코드로 만들수 있습니다. 다같이 해보죠! 시작하기전에 Jquery cdn 코드에디터에 삽입하겠습니다! https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries. developers.google.com Code &n..

Element Api 속성에 에대서 알아봐요! [내부링크]

태그에 속성을 다룰수 있는 Element 속성에 대해서 알아봐요! Element 속성 값을 제어 하는 기능들은 다음과 같습니다! - getAttribute(' 속성 ') - setAttribute (' 속성 ' , ' value ') - hasAttribute (' 속성 ') - removeAttribute(' 속성 ') 이렇게 4가지 있습니다! 한번 코딩으로 더 알아가봐요ㅎㅎ vs 코드를 켜고 아 참고로 t.id , t.getAttribute 같은 의미 입니다 방식이 다를뿐ㅎㅎ a에 href 속성 값을 바꾸고 싶다면 setAttribute로 속성 , 값으로 주시면 속성값은 바뀝니다! a에 title 추가 하고싶을때도 똑같은 방식입니다. 지우고 싶다면 removeAttribute 속성으로 지울수 있고 h..

Modern JavaScript & TypeScript 개발환경 [내부링크]

요즘 프론트엔드 개발환경은 굉장히 복잡하게 이루어져 있고 프론트엔드 개발환경은 제공되는 tool 과 tool 때문에 빠르게 변화합니다. 이러한 이유는 웹앱에 규모가 굉장히 커지고 있기 때문입니다. 또한 웹개발을 하면서 javascript 얼마나 큰 영향력을 가지고 있는지 알수있습니다. javascript 사용하는 개발자라면 ES6 표준 , ES5 , ES2020 등 단어들을 들어본적 있으실 겁니다 ES = ECMAScript 약자 입니다 ECMAScript 란? ECMAScript는 말 그대로 Ecma라는 기관이 만든 script 언어 이며, ECMA-262 표준를 따르고 있다. ECMAScript는 ECMA-262에 의해 표준화된 자바스크립트의 새로운 이름이다. 보편적으로 ES2015 이후로 대부분 개..

오늘은 Tab-Menu 만들어 봐요! [내부링크]

항상 말하든 Jquery는 javascript라이브러리 이자 보다 편하고 짧은 코드로 강력한 기능을 구현할수 있는 라이브러리 입니다. 저도 jquery 자주 활용을 합니다. 오늘은 간단하고 기본적인 Tabmenu를 만들어보아요. jquery 쓰기 위해서는 jquery script 삽입을 해줘야되는데 저는 jquery cdn 사용합니다 참조 사이트 입니다 https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-sou..

TypeScript [내부링크]

JavaScript & TypeScript Study 시작 최근에 IT기술이 빠르게 변하고 새로운 기술들도 많이 나오는거 같습니다. 그래서 기술에 변화의 3가지 유형에 대해서 공부를 해봤습니다 1. 변하지않는 기술 : 네트워크 , 운영체제 , 컴퓨터 시스템 2. 느리게 변하는 기술 : 프로그래밍 언어, 알고리즘, 보안, 프로그래밍 패러다임 3. 빠르게 변하는 기술 : 프레임워크, 라이브러리, 디자인패턴, UI UX 1번 기술과 2번기술은 3번기술에 비해 더많은 지식과 스터디 양이 필요하고 노력이 필요합니다. 3번기술에 노력과 지식이 필요없다는 말은 아니에^^ 3번기술은 우리가 많이 사용하는 프레임워크, 라이브러리이며 트렌드를 많이 타고 빠르게 변하는 기술이며 공부를 할때도 가장 접근해서 기술을 습득하기 ..

Jquery 기본문법을 알아봐요! [내부링크]

현재 시점에서 가장 많은 사람들이 사용하는 javascript 라이브러리 Jquery 입니다. javascript비해서 jqeury 쉬운코드로 강력한 기능을 만들수 있기 때문입니다. 그래서 유지보수나 가독성이 뛰어난 효과를 볼수있습니다. 기본적인 문법을 알아봐요! 저는 기본적으로 Jquery CDN 사용합니다! " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 실무에서는 주로 Jquery 파일을 다운로드 받아서 프로젝트에 삽입해서 사용하는 경우가 많습니다. 이것을 다운받아서 사용하면 됩니다 Download the compressed, production jQuery 버전 이것을..

전역객체 대해서 알아봐요 [내부링크]

전역객체란? Window 객체는 식별자 Window를 통해서 얻을 수 있다. Window 최상위에 있고 DOM (Document Object Model)은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스다 BOM (Browser Object Model) BOM은 전역객체인 window의 프토퍼티와 메소드를 제어할 수 있다. 현재 브라우저에 정보를 가르쳐주는 객체이다 JAVASCRIPT 객체지향언어이자 Window 객체안에있는 객체이다. vs 켜서 이코드를 작성해보자 그리고 chrom 개발자 모드를 켜고 f12 하지만 window.a 해도 값은 1입니다 그이유는 위에 설명했듯이 window 최상위 객체이기때문에 window 생략을하고 a값을 호출할수있습니다! Reference https://w..

javascript map() 함수 알아보자 [내부링크]

값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다 vs코드를 여시고 let getStarted arr 배열에 값을 꺼내고 싶을때 for문이 가장먼저 생각이 나는데 한번 만들어보겠습니다. 이거는 가장많이 쓰니는 for문 이였습니다 map() 함수를 써볼께요 map() 함수란? 즉 map() 함수를 활용해서 인덱스 인자와 for문에 방식을 같이 활용해서 쓸수 있는 함수입니다. 바로 예제로 let's get started 그럼 결과값은? 마지막으로 map() 함수를 활용해서 여러개 배열문에 값들을 뽑아 볼께요 오늘은 map() 함수를 공부해보았습니다 감사합니다!

Ajax 비동기 통신에 대해서 알아보자! [내부링크]

AJAX (Asynchronous Javascript and XML) 저도 이기술을 공부할떄 조금 힘들었지만 언제가는 공부를 해야되고 알아야되는 분야이므로 오늘은 AJAX(Asynchronous Javascript and XML) 에 대해서 알아봐요! AJAX (Asynchronous Javascript and XML) 비동기 통신 이므로 웹페이지의 이동없이 필요한 데이터만 전송하는 기술이다 일반적인 경우 데이터 처리는 요청 순서대로 하지만 AJAX경우 순차적그로 진행하지않는다 비동기 통신의 여러방법 1.XML HttpRequest 객체 2.fetch Api 3.Axios 라이브러리 4.제이쿼리 동기 vs 비동기 동기는 순서대로 실행한다는 의미인데 ex: 1 2 3 4 있다면 1 처리 하고 2 처리 하고..

jQuery에 정의 [내부링크]

제이쿼리(jQuery)란? 제이쿼리는 오픈 소스 기반에 자바스크립트 라이브러리로 자바스크립트를 더욱 쉽고 편리하게 이해하고 사용할수있게 해주는 라이브러리 입니다!! 코드 자체가 이해하기 쉽고 사용하기 편리하기 떄문에 짧고 단순한 코더로 웹 페이지에 다양한 효과를 적용시킬수 있습니다!! 사용하기 쉽기 떄문에 인기가 있는 라이브러리 중하나입니다! 제이쿼리 더알아보기! jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simp..

오늘은 Filter 함수에 대해서 알아봐요! [내부링크]

filter 함수는 간다한게 요약하자면 조건에 맞는 요소들을 모아서 새로운 배열을 생성한다 라고 이해하시면 됩니다! 그럼 바로 예제로 들어가볼께요 vs를 켜고 그리고 나서 aaa배열에 12 이상에 숫자들을 출력해보자ㅎㅎ 번외로 요런 형태로도 출력이 가능해요!!!^^ 감사합니다!!ㅎ

JavaScript Foreach 알아보자! [내부링크]

안녕하세요! 오늘은 Foreach 대해서 알아보겠습니다! ForEach 메서드는 무엇인가? forEach는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 값을 배열요소로 각각에 대해 값을 출력하는 형태입니다! forEach는 return 하는 값을 따로 모아서 어떤 처리를 하는 과정이 없기 때문에 변수에 할당하기 보다는 if , 반복문으로 바로 호출되는것이 일반적입니다!! 이해를 하기위해서 코드를 짜보았습니다! vs 켜주시고! 첫번쨰로 배열을 만들고 ForEach 메서드를 사용 해보겠습니다! 그리고 나서 결과를 보면!!! 하나더 추가한다면!! 결과를보면 이렇게 name 값만 가져올수 있습니다 ㅎㅎ 부족한 정보지만 감사합니다~^^

Node.js 는 무엇인가? [내부링크]

요즘 개발에서 JavaScript 활용도가 높아지면서 Node.js를 활용하는곳이 점차 늘고 있습니다! 저또한 Node.js를 Study하는 중입니다!!ㅎ 그렇다면 Node.js란 무엇일까요???? 웹어플리케이션을 개발할때 JavaScript를 사용하게 되는데 모든 브라우저는 JavaScript 코드를 해석하기위해서 자바스크립트 엔진을 내장하고 있습니다!ㅎ 쉽게 설명하자면 - 백엔드 개발자가 사용하는 언어 - 서버에서 실행되는 자바스크립트 언어 (브라우저에서쓰는 자바스크립트 언어하고는 달라요!) - Google V8 JavaScript 엔진을 사용하여 코드를 실행하고 기본 모듈로 자바스크립트로 사용됩니다. - Node.js는 웹서버(Apache, IIS, Zeus ..)과 같은 소프트웨어가 필요없이 웹 ..