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