You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[NODE] 📚 require 모듈 (모듈 관리하기) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbIzZgs%2FbtrfG2aMXDu%2FDfUv5rj3Brz4zIHw1CJPrK%2Fimg.jpg)
[NODE] 📚 require 모듈 (모듈 관리하기) 정리
require() CommonJS 방식으로 모듈을 내보낼 때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 합니다. 특히, 제일 햇갈리는 부분이 exports 변수와 module.exports 변수를 상황에 맞게 잘 사용해야 한다는 점입니다. 기본적으로 다음 2가지 규칙만 기억하면 됩니다 여러 개의 객체를 내보낼 경우, exports변수의 속성으로 할당합니다. 딱 하나의 객체를 내보낼 경우, module.exports 변수 자체에 할당합니다. 단, 객체를 묶어서 여러개 값을 export할수 있습니다. 노드 복수 객체 내보내기/불러오기 내보내기 아래는 미국과 캐나다 달러를 상호 변환해주는 자바스크립트 예제 코드입니다. 이 파일에는 3개의 함수가 있는데..
![[NODE] 📚 노드 콘솔창에서 입출력 IO 하는법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FE79f9%2FbtrfuLgbK0h%2FoaAumQFizQnDebY2MFxSV1%2Fimg.jpg)
[NODE] 📚 노드 콘솔창에서 입출력 IO 하는법
노드 콘솔 입력 받기 보통 자바스크립트를 쓰면서 입출력은 웹에서 처리했다. 웹페이지에서 form으로 입력 받고, console.log나 document.write() 등 을 통해서 출력을 했다. 하지만 이는 어디까지나 브라우저에서 묶인 자바스크립트로서의 동작이다. 브라우저로부터 독립된 node.js의 자바스크립트는 다른 C나 JAVA같이 콘솔창에서 입출력을 제어할수 있을까? 정답은 할수는 있지만, C같이 결코 간단하게 처리될수는 없다. 차근차근 하나씩 알아보자. 노드 콘솔 입력 readline 모듈 readline 모듈은 JS 내장 모듈로, 한 번에 한 줄씩 Readable 스트림 (예 : process.stdin)에서 데이터를 읽기위한 인터페이스를 제공한다. 처음 생성 시 createInterface를..
🔮 Bootstrap - Select Picker 메뉴 스타일
Select Picker 선택상자에 css디자인을 입혀주고 자바스크립트와의 동적 동작을 지원해주는 라이브러리 이다. Select Picker 다운 & 사용 Mustard Ketchup Barbecue $('.my-select').selectpicker(); // select피커 작동 Select Picker 다양한 컴포넌트 예시 Examples | bootstrap-select · SnapAppointments Developer width: '150px' Mustard Ketchup Relish All of the above (and much, much more!) developer.snapappointments.com
🗼 TCP / IP 4계층 모델 - 핵심 총정리
TCP / IP 개념 정리 (선수 지식) IP (인터넷 프로토콜) 지정한 IP 주소에 데이터의 조각들을 패킷(Packet)이라는 통신 단위로 최대한 빨리 목적지로 보내는 역할. 조각들의 순서가 뒤바뀌거나 일부가 누락되더라도 크게 상관하지 않고 보내는 데 집중을 한다. 그래서 IP 프로토콜은 패킷의 순서 보장도 할 수 없고 패킷이 중간에 유실되도 이에대한 방안이 없다. TCP (전송 제어 프로토콜) 패킷 데이터의 전달을 보증하고 보낸 순서대로 받게 해준다 도착한 조각을 점검하여 줄을 세우고 망가졌거나 빠진 조각을 다시 요청하는 식으로 순서를 보증. TCP는 데이터를 상대방에게 확실하게 보내기 위해서 3 way 핸드쉐이킹이라는 방법을 사용하고 있다. 이 방법은 패킷을 보내고 잘 보내졌는지 여부를 상대에게 확..
🗼 OSI 7계층 모델 - 핵심 총정리
OSI 7계층 OSI 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. OSI 7계층을 나눈 이유는? 흐름을 한눈에 알아보기 쉽고 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있기 때문이다. 예를들어, pc방에서 롤을 하고 있는데 연결이 끊겼다. 어디에 문제가 있는지 확인을 하기 위해서는? 모든 PC에 문제가 있다면 라우터의 문제 (3계층 네트워크 계층) 이거나 광랜을 제공하는 회사의 회선 문제(1계층 물리계층) 일 것이다. 한 PC만 문제가 있고 롤 소프트웨어에 문제가 있다면 -> 7계층 어플리케이션 계층 문제 롤 소프트웨어에 문제가 없고 스위치에 문제가 있다면 -> 2계층 데이터링크 계층 문제 라고 판단..
🔮 BootStrap - Date picker 템플릿 모음
Date picker 데이트 피커는 날짜를 다룰때 UI형식으로 쉽게 날짜를 선택하도록 하는 모듈이다. 인터넷을 사용하는 사람은 한번쯤은 이러한 UI를 통해 날짜를 정해본 경험이 있을 것이다. 그만큼 요즘 웹사이트를 구성하는데 반드시 필요한 위젯이라고 말할 수 있다. 우선 아래 사이트에 들어가서 cdn을 다운 받아준다. 옵션 설정으로 한국어도 지원한다. 한국어 버전의 캘린더를 원한다면 bootstrap-datepicker.ko.min.js 를 로드한다. bootstrap-datepicker - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A datepicker for Bootstrap ..
![[백엔드 로드맵] 💻 터미널이란](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmOTUJ%2FbtriwxHaol8%2FqPVkXvaqjOQTK9or9OaPpk%2Fimg.jpg)
[백엔드 로드맵] 💻 터미널이란
터미널이란? 유닉스 기반의 대형 컴퓨터에서 사용자들이 컴퓨터에 접속하기 위해 사용했던 단말기로 개인용 컴퓨터가 보급된 요즘에는 '컴퓨터를 직접 제어하기 위해 사용하는 소프트웨어'를 뜻한다. 우리가 익숙한 그래픽으로 이루어진 GUI보다 텍스트 기반의 CLI(명령어로 컴퓨터를 조작하는 방식)를 통해 터미널을 사용하는 이유는 일부 작업을 완료하는 것이 훨씬 빠르고, 더많은 명령과 스크립트에 접근할 수 있기 때문이다. 사용자가 컴퓨터를 조작하기 위해 명령어를 터미널에 입력하면, 쉘(보통은 Bash)이 해당 명령어를 해석하고 커널이 이를 실행하는 구조. 위에서 언급한 것처럼 터미널은 CLI 방식으로 사용하고자 하는 기능의 명령어를 입력해야 한다. 그러나 윈도우와 유닉스의 명령어는 서로 다르기 때문에 ..
💻 윈도우 터미널 명령어 목록
윈도우 CMD 명령어 목록 자주 쓸 것 같은 기초적인 윈도우 쉘 명령어를 우선 추려봤다. 만일 전체 항목을 보고 싶다면 아래 링크를 참조하길 바란다. 커맨드 동작 CD [이동할 경로] 커맨드창 위치이동 dir 현재 위치의 파일과 디렉토리(폴더) 목록 보기 help 명령어 도움말 보기 (명령 프롬프트 명령어를 모두 보여준다) ipconfig 네트워크 설정상태 보기 (/all 옵션을 붙여 상세한 설정 정보를 볼 수 있다) md [생성할 폴더 이름], mkdir [생성할 폴더 이름] 디렉토리(폴더) 생성 rd [삭제할 폴더 이름], rmdir [삭제할 폴더 이름] 디렉토리(폴더) 지우기 (/s 입력시 폴더안 파일이 있더라도 삭제가능, 휴지통으로 가지않고 완전삭제이므로 주의해야합니다) path 환경변수 path..
![[백엔드 로드맵] ✈️ 호스팅은 무엇일까요?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl9Zh4%2Fbtriz78wlm6%2FaYnTxJbqs5JZzrbnairQj1%2Fimg.jpg)
[백엔드 로드맵] ✈️ 호스팅은 무엇일까요?
호스팅이란 호스팅이란 서버나 웹 사이트를 인터넷 상에서 이용할 수 있게 공간을 임대 해주는 서비스입니다. 웹 호스팅은 웹사이트를 구성하는 여러 파일(e.g. 코드, 이미지 등)을 온라인에서 볼 수 있게 해줍니다. 우리가 호스팅을 위해 임대하는 서버의 공간은 호스팅 종류에 따라 다릅니다. 웹 사이트나 웹 페이지를 구성하기 위한 호스팅과, 서버를 열기 위한 호스팅은 관리방법과 제공받는 서비스, 추가적인 서비스등이 다릅니다. 여기서 말하는 공간이란, 우리가 서버를 열기위해 필요한 자원들을 말합니다. CPU, RAM, 하드 디스크, IP Adress, 서버를 설치할 컴퓨터와 컴퓨터의 온습도와 전력 관리등 다양한 자원들을 빌려 직접 운영 하기에는 부담이 큰 다양한 자원들을 빌려 필요한 만큼만 사용할 수 있습니..
![[NODE] 📚 REPL 터미널 사용하는 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrOZx2%2FbtriAryLey0%2FKAMppkx31nFjlj5ilKkDHk%2Fimg.jpg)
[NODE] 📚 REPL 터미널 사용하는 방법
REPL REPL은 Read-Eval(evaluation)-Print Loop의 약어로 사용자가 특정 코드를 입력하면 그 코드를 평가하고 코드의 실행결과를 출력해주는 것을 반복해주는 환경을 말합니다. node.js 에서도 REPL 환경을 지원하기 때문에 자바스크립트 학습중에 간단한 자바스크립트 코드등을 즉석에서 바로 실행해 결과를 확인해 볼 수 있다는 장점이 있습니다. 파이썬 등의 많은 언어들도 REPL을 지원하고 있죠. 간단한 수식을 테스트한다던가 가끔 헷갈리는 문법등이 생겼을 때 간단하게 시도해보기가 좋아서 애용하기에 좋습니다. Node.js는 REPL 환경과 함께 제공되며 다음과 같은 기능을 수행 할 수 있습니다. Read – 유저의 값을 입력 받아 JavaScript 데이터 구조로 메모리에 저장합..
![[백엔드 로드맵] 🌐 브라우저와 동작 원리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcEak7d%2FbtriuVVgKBl%2FB0cU0YM8dDyuI2lTvUFOW1%2Fimg.jpg)
[백엔드 로드맵] 🌐 브라우저와 동작 원리
브라우저 동작 원리 우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것입니다. 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 DOM 요소들이 세팅이 되고 CSS 스타일이 적용돼서 그려지는지 생각해볼 기회가 없었을 것입니다. 이 기회에 한번 자세히 알아보죠. 브라우저의 주요 기능 브라우저의 주요 기능은, '선택한 자원..
📚 머티리얼 디자인(Material Design) 사이트 정리
머티리얼 디자인이란? 머티리얼 디자인(Material Design)은 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인이다. 2014년, 구글이 스마트폰에 적용하면서 널리 퍼지기 시작했다. 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식 채택했는데, 현대적인 출판물 디자인 원칙이 반영되어 다른 부가요소보다 컨텐츠 자체가 강조된다. 디자인 특징 머티리얼 디자인은 다음과 같은 슬로건을 내세운다. "Build beautiful products, faster." "Material is a design system – backed by open-source code – that helps teams build high-quality digital exp..
