#javascript
24 posts
Typescript : 타입스크립트 언어의 특징과 장단점
1분
Typescript 타입스크립트(Typescript): Microsoft에서 개발한 자바스크립트(Javascript) 기반 언어 정적 타입 언어: 자바스크립트에 정적 타입 문법을 추가한 상위 언어, 반면 자바스크립트는 런타임에 따라 결정되는 동적 타입 언어 // 타입을 명시적으로 선언 const foo: string; const bar: number; const baz: boolean; 컴파일 언어: 자바스크립트로 컴파일 과정을 거친 후 실행할 수 있음, 반면 자바스크립트는 …
Javascript : 프로토타입과 this, call, apply, bind
3분
프로토타입 javascript에는 클래스라는 개념이 없기 때문에, 자신이 다른 객체의 원형이 되는 객체를 의미 // Person에 대한 프로토타입 생성 function Person() { this.name; this.age; this.job; } // Person 프로토타입에 대한 setData 함수 생성 Person.prototype.setData=(name, age, job)=> { this.name=name; this.age=age; this.job=job; }; // …
Javascript : var, let, const, 스코프
2분
var var(variable): 데이터 타입을 지정할 필요가 없는 변수 선언 방식 함수 범위로 사용되며, 함수 또는 프로그램(전역)이 실행되면 생성되고, 종료되면 소멸되는 방식 var globalVar="hello"; // 전역 변수 function show(){ var localVar="hi"; // 지역 변수 console.log(localVar); // hi console.log(globalVar); // hello } console.log(localVar); // error undefined console.log(globalVar); // …
[트위치 도네이션 계산기 제작기]이거 혹시 하면 안되는건가요..?
7분
코드가 유실됐고 완벽하게 완성한 것도 아니었지만 작년 이맘때쯤 너무 재밌게 개발했던 경험이라 기록으로 남겨두고 싶어서 포스팅을 해본다. 지금은 안보지만 작년 이맘때쯤 인터넷 방송에 빠졌었다. 국내 인터넷 방송 플랫폼이라고 하면 크게 두 가지로 나뉘는데 하나가 국내 플랫폼인 아프리카, 다른 하나가 글로벌 플랫폼인 트위치였다. 나는 그 중에서 트위치에 빠졌었는데 이 트위치는 글로벌 …
브롤스타즈 API 전적 사이트 : 플레이어 전투 기록 불러오기
14분
브롤스타즈 API를 이용해 플레이어 전투 기록을 불러오면서 게임 모드 전투 정보를 통일하고 API에서 직접적으로 제공하지 않는 클럽 리그를 따로 구분해보았다.
브롤스타즈 API 전적 사이트 : 토큰 키 발급 및 클럽 플레이어 정보 불러오기
5분
브롤스타즈 API 홈페이지에서 토큰 키를 발급 받고 클럽 멤버와 플레이어 정보를 불러오는 과정을 정리해보았다.
Node.js 교과서 : 6. 익스프레스 웹 서버 만들기
6분
Express(익스프레스) 편의 기능들을 추가한 웹 서버 프레임워크 중 하나 http 모듈의 요청과 응답 객체에 추가 기능들이 부여됨 npm i express // Express 설치 npm i -D nodemon // 서버를 자동으로 재시작 시켜주는 모듈 const express=require('express'); const index=express(); index.set('port', process.env.PORT || 3000); // 서버가 실행될 포트 설정 …
Node.js 교과서 : 5. 패키지 매니저
2분
npm Node Package Manager : javascript 패키지가 등록되어 있는 곳으로 Node.js로 javascript 프로그램을 실행할 수 있음 패키지 : npm에 업로드된 노드 모듈로 패키지간에 의존 관계가 있음 yarn : 페이스북에서 내놓은 패키지 매니저로 npm 서버가 너무 느릴 경우 yarn 패키지로 대체 가능 package.json 설치한 패키지 버전을 관리하는 파일 노드 프로젝트를 시작하기 …
Node.js 교과서 : 4. HTTP 모듈로 서버 만들기
10분
요청과 응답 클라이언트와 서버가 통신할 때 HTTP(HyperText Transfer Protocol)를 사용해 TCP Connection으로 연결해 요청으로 원하는 정보를 서버에 보내고, 서버에서 해당하는 내용은 응답으로 클라이언트에 받을 수 있음 createServer : 인수로 요청한 콜백 함수를 실행할 수 있음 const http=require('HTTP'); http.createServer((req, res)=> { // 이벤트 리스너 응답 // req : …
Node.js 교과서 : 3. 노드 기능 (2)
19분
Node.js의 파일 시스템에 접근하는 모듈인 fs 모듈을 사용하여 파일을 읽고 쓰는 방법을 다루고 있습니다. 콜백 형식의 메서드를 프로미스 형식으로 작성하는 방법부터, 동기-블로킹 방식과 비동기-논블로킹 방식의 차이, 버퍼와 스트림의 개념 등을 다루고 있습니다. 이를 통해 파일 시스템 접근에 대한 이해를 높일 수 있습니다.
Node.js 교과서 : 3. 노드 기능 (1)
31분
REPL 사용하기 READ(읽기) / EVAL(해석) / PRINT(반환) / LOOP(반복) 정보를 읽어 해석한 것을 출력하는 과정을 반복하는 것을 의미 미리 컴파일하지 않아도 콘솔을 통해 사용 가능함 JS 파일 실행하기function helloWorld() { console.log('Hello World'); helloNode(); } function helloNode() { console.log('Hello Node'); } helloWorld(); $ node helloWorld Hello World Hello Node 모듈 만들기 …
Node.js 교과서 : 2. 알아두어야 할 자바스크립트
16분
ES2015+const, let const : 고정된 값 할당할 시 사용 let : 다른 값을 할당하는 상황이 생길 경우 사용 템플릿 문자열 (`)백틱으로 감싸며 문자열 안에 ${변수}를 넣을 수 있음 ${num1} + ${num2}=${result2} 입니다. 객체 리터럴 속성명과 변수명이 동일한 경우 한 번만 써도 괜찮음 객체의 속성명은 동적으로 생성 가능 var …
Node.js 교과서 : 1. 노드 시작하기
4분
Node.js(노드) Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 Javascript 런타임 노드는 서버 뿐만 아니라 자바스크립트 프로그램을 실행하는 런타임으로서 사용할 수 있음 서버 : 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램 정보나 서비스 데이터가 저장되고 불러올 수 있는 곳 요청(Request) : 웹 사이트 방문할 때 주소를 입력(요청) 응답(Response) : 브라우저에서 …
명품 웹 프로그래밍 정리 노트 : 4. CSS3로 웹 페이지 꾸미기
13분
CSS3는 HTML 문서의 외관을 꾸미는 언어로, 스타일 시트에 CSS로 작성된 코드를 사용한다. 스타일 시트는 <style></style> 태그, HTML 태그의 style 속성, 또는 별도 파일로 작성될 수 있다. 스타일 상속, 합치기와 오버라이딩, 셀렉터 조합, 가상 클래스 셀렉터 등의 기능을 제공하며, 색 표현, 텍스트 꾸미기, 폰트 제어 등 다양한 스타일 속성을 제공한다. CSS 표준 단위로는 em, %, px, cm, mm, in, pt, pc, deg 등이 있다. 폰트 제어 스타일 속성으로는 폰트 패밀리, 폰트 크기, 폰트 스타일, 폰트 굵기 설정 등이 있다.
명품 웹 프로그래밍 정리 노트 : 3. HTML5 문서 구조화와 웹 폼
15분
--> <label>선택 항목 :</label> <input list="options" name="selected_option"> <datalist id="options"> <option value="항목 1"> <option value="항목 2"> <option value="항목 3"> <option value="항목 4"> </datalist> </form> <select></select> : 드롭다운 리스트를 만드는 태그로 <option> 태그로 여러 항목을 만든다. <form> <label>선택 항목 :</label> <select name="selected_option"> <option value="항목 1">항목 1</option> <option value="항목 2">항목 2</option> <option value="항목 3">항목 3</option> <option value="항목 4">항목 4</option> </select> </form> <input type="radio"> : 여러 개의 선택지 중 하나를 선택하는 라디오 버튼을 만드는 태그 <input type="checkbox"> : 여러 개의 선택지 중 여러 개를 선택하는 체크박스를 만드는 태그 <form> <label>라디오 버튼 :</label> <input type="radio" name="radio_option" value="옵션 1">옵션 1 <input type="radio" name="radio_option" value="옵션 2">옵션 2 </form> <form> <label>체크박스 :</label> <input type="checkbox" name="check_option1" value="옵션 1">옵션 1 <input type="checkbox" name="check_option2" value="옵션 2">옵션 2 </form> <input type="submit"> : 폼을 제출하는 버튼 <input type="reset"> : 폼을 초기화하는 버튼 <form> <input type="text" name="user_name" placeholder="이름을 입력하세요"> <input type="password" name="user_password" placeholder="비밀번호를 입력하세요"> <input type="submit" value="로그인"> </form>
명품 웹 프로그래밍 정리 노트 : 2. HTML5
19분
HTML 페이지 <!DOCTYPE html> : HTML5 문서를 표시하는 지시어 <!--"내용"--> : 주석문 작성하는 부분으로 화면에 출력하지 않는다. <html>, <head>, <title>, <body> : 시작/종료 태그가 모두 존재하며, HTML5 구조를 나타내는 필수 태그 HTML 태그 구성<img src="heart.jpg" width="100" height="50" alt="사랑합니다"> <!-- img : 태그 이름 src : 속성 이름 "heart.jpg" : 속성 …
한 달 안에 취업하기 #8
3분
오늘 할 일 알고리즘 1문제 SPA 프로젝트 진행 프로그래밍 관련 영상 리뷰해보기 알고리즘 1문제 오늘의 문제: https://app.codesignal.com/arcade/intro 친구의 추천으로 위의 사이트에 들어가 intro 1,2,3번 문제를 풀었다. 앞으로 이곳의 문제를 좀 풀어보려고 한다. 문제도 영어로 되어있어서 녹슬어있는 영어실력에 기름칠도 할 겸. 원어라 문제수도 많고 종류도 다양해보여서 기존의 Programmers는 잠시 중단할 예정이다. …
한 달 안에 취업하기 #7
2분
오늘 할 일 알고리즘 1문제 SPA 프로젝트 진행 프로그래밍 관련 영상 리뷰해보기 알고리즘 1문제 오늘의 문제 : 문자열 내 p와 y의 개수 솔루션 : GitHub SPA 프로젝트 진행 SPA Project 개발 노트 프로그래밍 관련 영상 리뷰해보기 오늘의 영상 : 테크보이 워니 - 개발자의 포트폴리오 - 취업을 위한 포트폴리오 완벽 가이드 …
한 달 안에 취업하기 #6
2분
오늘 할 일 알고리즘 1문제 SPA 프로젝트 프로그래밍 관련 유튜브 리뷰해보기 알고리즘 1문제 오늘의 문제 : 구명보트 Github SPA 프로젝트 [SPA Project] 개발노트 프로그래밍 관련 유튜브 리뷰해보기 오늘의 영상 : VELOPERT 최초 공개?! React계의 문익점이 말하는 프론트엔드 개발 React의 아버지 Velopert님의 인터뷰 영상이 있길래 가져와봤다. 전체적으로 React의 장점을 나열해 놓은 …
한 달 안에 취업하기 #5
1분
오늘 할 일 알고리즘 1문제 velopert님의 React Router 강의 수강 SPA 프로젝트 최대한 진행해보기 알고리즘 1문제 오늘의 문제 : 가장 큰 수 Programmers GitHub 필자는 매일 알고리즘을 1문제씩 풀고있는 스터디에 참여중이다. 그리고 얼마전부터 level 1에서 level 2로 올렸는데 하루하루 문제푸는게 쉽지가 않다. 오늘은 스터디를 시작한 후 첫 실패작이다. 테스트 케이스에만 …
한 달 안에 취업하기 #4
6분
오늘 할 일 알고리즘 1문제 Javascript Array 메소드 공부 SPA 프로젝트 주제 선정 프로젝트 최대한 진행해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub Math.floor(x) : x보다 작은 정수중 최대값을 return Javascript Array 메소드 공부 Javascript Array Method 정리 SPA 프로젝트 주제 선정 고민을 많이 했는데 …