건브로의 소소한 개발

1. 오늘 배운 것 class 접근 제어자(private, public, protected) 이중 초기화 막기 readonly super() override getter setter static 추상 클래스 싱글톤 패턴 2. class에 대한 공부 class 내부의 필드에 있는 변수들은 속성이라고 한다. //TypeScript //일반적으로 쓰이는 class class Animal { kind: string; habitat: string; constructor(kind: string, habitat: string){ this.kind = kind; this.habitat = habitat; } printIntroduction(){ console.log('이 동물의 종류는 ' + this.kind + '입..

1. 오늘 배운 것 나머지 매개변수 변수에 대한 class의 this 2. 나머지 매개변수 이 개념은 ES6부터 사용 가능해졌다. spread 연산자를 사용하기 때문에 최소 ES6부터 사용 가능할 거라고 추측은 가능하다. 이 개념의 핵심은 해당 함수의 인수들이 선언된 함수의 매개변수(파라미터)가 바로 배열로 만들어져서 이 매개변수를 배열로써 바로 사용 가능하다. //타입스크립트 function add(...numbers: number[]){ console.log(numbers); const data = numbers.reduce((currentResult, currentValue) => { console.log("currentResult" + currentResult); console.log("curre..

안녕하세요! 건브로입니다. 1주차 때는 화면에 Hello World 나오게 해보자! 그런 느낌이었는데, 와우 이번주는 그냥 자기가 표현하고 싶은 것들을 코딩할 수 있는 느낌이었어요. 그래서 이번주 개발 일기는 제가 표현한 걸 그대로 써서 배웠던 부분을 한 번더 느껴보겠습니다. 1. 코드 import React from "react"; // import './App.css'; import Starter from "./Starter"; import Score from "./Score"; import heize from "./images.jpg"; import styled from "styled-components"; import Quiz from "./Quiz"; import SwipeItem from "...

안녕하세요 건브로입니다!! 오늘은 유용하게 사용하는 Array 내장 함수에 대해서 간단하게 알아보려고 합니다! 1. map 함수 const celebrities = ['헤이즈', '박보영', '송중기', '치즈', '조이']; //for문 사용해서 하나씩 출력하기 for(let i = 0; i< celebrities.length ; i++){ console.log(celebrities[i]+"는 제가 좋아하는 연예인입니다."); } //결과 //헤이즈는 제가 좋아하는 연예입니다. //박보영는 제가 좋아하는 연예입니다. //송중기는 제가 좋아하는 연예입니다. //치즈는 제가 좋아하는 연예입니다. //조이는 제가 좋아하는 연예입니다. //for문과 동일한 기능으로 사용하기 celebrities.map((ce..

안녕하세요! 건브로입니다. 오늘은 자주 사용하는 ES6 문법에 대해서 정리하려고 해요. ES6 문법은 가장 보편 하게 쓰이고 있는 자바스크립트 표준 문법입니다. ES6중에서 자주 사용하는 문법을 소개하겠습니다. 제가 정리하는 순서는 화살표 함수(arrow function), Class, let과 const 키워드 그리고 scope , Spread 연산자, Template String입니다. 1. 화살표 함수 //일반 함수 function have(name, object){ return name+"이(가)"+object+"를(을)가지고 있다"; } let info = have("건브로", "컴퓨터"); console.log(info); //결과 //"건브로이(가)컴퓨터를(을)가지고 있다" //화살표 함수 ..

안녕하세요 건브로입니다. 이번에 배운 내용은 jQuery와 Ajax였습니다. 저는 온라인 강의를 들을 때마다 jQuery를 사용하는 것보다 바닐라 자바스크립트 쓰는 게 좋다고 들었습니다. 하지만, 이 강의는 왕초보를 위한 강의여서 그런지 코드를 직관적이고, 간단하게 쓸 수 있게 강의가 구성되었습니다. 제 생각엔 웹 개발할 때 팀원들과 소통이 되려면 모두 다 해보는 게 맞는 것 같습니다. 1. jQuery jQuery는 자바스크립트를 미리 만들어 놓은 라이브러리이다. 라이브러리여서 jQuery를 사용하려면 위 사진처럼 script태그 형식으로 넣어서 사용해도 되고, 아니면 라이브러리를 다운로드하여서 사용해도 된다. 만약 script 태그 형식으로 하고 싶으면 아래 링크에 들어가서 Google CDN을 복사..

안녕하세요! 건브로입니다. 요즘 시험보고, 학교 전공 중에 캡스톤 디자인 과목 때문에 블로그 활동을 잘 못했네요! 이제 방학이니까 자주 활동할게요! 제가 이번에 한이음(공모전)을 통해서 스파르타코딩클럽에 대해서 알게 되었어요. 지금까지 저는 독학으로 html, css, javascript, node.js ,react.js를 공부했었습니다. 하지만 node.js, react.js는 안 사용한지 오래되서 까먹기도 하고, 기초를 탄탄하게 하기위해서 스파르타코딩클럽 왕초보반으로 시작해서 나중엔 node.js, react.js 이렇게 들으려고해요! 1. 배우는 내용 HTML: 구성요소 CSS: 블록 정렬, 배경관련 꾸미기, 블록 크기 조절, 블록 여백 조절 등 Javascript: 배열, 객체, 배열관련 함수(s..

안녕하세요. 건브로입니다. 오늘은 HTTP 통신에 대해서 한 번 다루어 보도록하겠습니다. 1. HTTP란 무엇인가? HTTP란 Hyper Text Transfer Protocol의 약자이다. 즉, HTML 문서를 전송하기 위한 프로토콜이다. 그리고 클라이언트와 서버의 약속이라고 봐도된다. 2. HTTP 메세지의 구조는 어떻게 될까? 먼저 HTTP 메세지 의 구조는 크게 두 가지로 나뉘어진다. 바로 그 두 가지가 헤더와 바디이다. 먼저 예시 코드를 보여주겠다. 로그인 form { display: flex; flex-direction: column; align-items: center; } form section{ display: flex; justify-content: center; } form secti..

안녕하세요 건브로입니다. 오늘은 Redux에 대해서 정리를 해보려고 합니다. 1. Redux란 무엇인가? Redux란 상태 관리를 쉽게 해주는 자바스크립트 기반 기술이다. 아마 react를 하면서 redux를 같이 배우는 사람들이 많은 걸로 알고 있다. 나도 이번에 react 공부하다가 redux를 알게 되었고 공부하게 되었다. 2. Redux 코드들 분석하기 Redux에는 여러 가지 함수들이 있다. 1) createStore() createStore()는 데이터를 넣을 수 있는 장소를 생성해주는 함수이다. 하지만 createStore의 인수로는 reducer 인수가 들어가야 한다. 2) reducer() reducer()는 data를 수정하는 함수이다. return 값으로는 state data를 전달할..

안녕하세요. 건브로입니다! 제가 react를 공부하면서 예전에 공부했던 비동기 처리방식을 까먹어서 이렇게 다시 정리합니다!😛 아 그리고 제가 정리하는 것은 자세한 정리가 아닌 표면적인 정리에요. 더 자세한 것은 차근 차근 업데이트 할게요! 1. callback callback은 비동기 처리를 위해서 사용해요! callback은 다른 객체에 일을 맡기고, 호출하기 전에는 다른 일을 해도 되는 것이죠! 제가 세탁기에 빨래를 넣고 돌리는 동안 제 할 일하고, 빨래가 다 돌려질 때 제가 세탁기에 가는 것을 예로 들어볼게요. 그러면 세탁기에 빨래를 넣고 돌린다는 것은 callback 함수가 되고, 제 할 일을 다하고 빨래가 다 돌려질 때가 callback 함수를 호출 한 것 입니다! 이번엔 코드로 예를 들어볼게요..