티스토리

강백호같은개발자
검색하기

블로그 홈

강백호같은개발자

seagull-dev.tistory.com/m

좋은 개발자가 되기 위해서 공부하는 블로그 입니다. JavaScript HTML CSS

구독자
0
방명록 방문하기
공지 이 블로그에 관하여... 모두보기

주요 글 목록

  • 구글 로그인 클라이언트 - 회원가입 // signup.js /* eslint-disable react/prop-types */ /* eslint-disable no-unused-vars */ import React from "react"; import { withRouter, Link, useHistory } from "react-router-dom"; import axios from "axios"; axios.defaults.withCredentials = true; class Signup extends React.Component { constructor(props) { super(props); this.state = { email: '', password: '', username: '', mobile: '' }.. 공감수 0 댓글수 0 2020. 9. 17.
  • Github - Fork 포크와 Clone 클론의 의미 Github - Fork 포크와 Clone 클론의 의미 깃헙에서 포크를 왜 해야할까요? 깃헙에는 repository 라는 공간이 있습니다. 이 저장소라고 하는 repository는 2가지로 나눠볼 수 있는데 github 웹 상에 존재하는 remote repository와 나의 작업 공간인 노트북, 데스크탑인 local repository가 있습니다. 내가 어떤 repository(이하 repo)를 복사해서 작업하고자 한다면, 해당 repo 전체를 복사해서 나의 깃헙 remote repository에 옮기기 위해서 하는 작업이 바로 Fork, 포크 라고 합니다. 그리고 나의 remote repo에서 나의 작업공간인 local repo로 복사해오는 것이 바로 Clone 입니다. Github - fork 포크.. 공감수 0 댓글수 0 2020. 7. 16.
  • React State와 생명주기 React에서 State란 컴포넌트가 갖는 상태를 말합니다. 컴포넌트의 상태를 관리할 수 있습니다. 객체의 형태로 컴포넌트 내에서 보관하고 관리합니다. State가 작성되기 위해서는 class 컴포넌트로 작성되어야 합니다. 그리고 State 값을 변경할 땐 반드시 setState 메소드를 사용해야합니다. State가 변경되면 랜더 함수가 다시 실행됩니다. 하나씩 살펴봅시다. 째깍 시계 코드를 살펴봅시다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(t.. 공감수 0 댓글수 0 2020. 7. 9.
  • React Components and Props 리액트 컴포넌트와 props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴퍼넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. function Welcome(props){ return Hello, World! } 이 함수는 데이터를 가진 하나의 'props'(props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로, 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript함수이기.. 공감수 0 댓글수 0 2020. 7. 8.
  • React Element rendering 엘리먼트 렌더링 Element 는 React 앱의 가장 작은 단위입니다. 엘리먼트는 화면에 표시할 내용을 기술합니다. const element = Hello, World; 브라우저 DOM 엘리먼트와 다르게, React 엘리먼트는 일반 객체(plain object)이고, 쉽게 생성할 수 있습니다. 그리고 React DOM은 React엘리먼트와 일치하도록 DOM을 업데이트합니다. *주의* '컴포넌트'와 '엘리먼트'를 혼동하지 마세요. 엘리먼트(element)는 컴포넌트의 구성요소입니다. DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가 이 있다고 가정해 봅시다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에, 이것을 "루트(root)" DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일.. 공감수 0 댓글수 0 2020. 7. 8.
  • React JSX const element = Hello, world!; JSX는 HTML도 아니고, 문자열도 아닌 형태로 사용합니다. 아주 희안합니다. 그러니까, JavaScript안에서 태그 모양을 그대로 불러와서 사용하는 문법이라고 생각하면 좋겠습니다. 1. 먼저 하나의 엘리먼트가 모든 엘리먼트를 감싸고 있어야합니다. 2. 자바스크립트 코드를 적용할 땐 중괄호 {} 안에서 이용해야한다. 3. JSX 내부에서는 if문을 사용할 수 없기 때문에 3항 연산자로 표시해야합니다. 조건부랜더링 할 땐 () ? a : b 4. 엘리먼트의 클래스 이름은 class 대신 className이라고 사용한다. JSX도 표현식이기 대문에 컴파일이 끝나면 JavaScript객체로 인식됩니다. 즉, JSX를 if 구문이나 for loop 안에.. 공감수 0 댓글수 0 2020. 7. 8.
  • TIL(20/06/17) Prototype Chain 프로토타입 체인 in JavaScript Prototype Chain 프로토타입 체인 in JavaScript 모든 함수에는 prototype이라는 속성이 있고, 할당을 할 수 있다. constructor는 생성자다. 특정 객체가 생성될 때 실행되는 코드라고 한다. prototype - 클래스를 만들 때 원형객체 인스턴스를 생성하는 것을 Instantiation이라고 한다. 아래와 같은 클래스와 steve라는 인스턴스가 있다. 이때 steve 와 prototype은 어떤 관계일까. var Human = function(){ this.name = name; }; Human.prototype.sleep = function(){}; var steve = new Human('steve'); __proto__ : 프로토타입 체인 steve.__proto.. 공감수 0 댓글수 0 2020. 6. 18.
  • TIL(20/06/18) ES6 : class와 super in JavaScript ES6 : class와 super in JavaScript ES5에서 클래스를 만들고 상속받는 상황을 코드로 한번 보자. var Human = function(name){ this.name = name; } Human.prototype.sleep = function(){ console.log(this.name + ' is sleeping...'); }; var steve = new Human('steve'); var Student = function(){ Human.call(this, name); // Human.apply(this. arguments) } Student.prototype = Object.create(Human.prototype); Student.prototype.constructor =.. 공감수 0 댓글수 0 2020. 6. 18.
  • TIL(20/06/17) 객체 지향 프로그래밍 Object Oriented Programming(OOP) in JavaScript 자바스트립트의 객체 지향 프로그래밍 Object Oriented Programming(OOP) 객체 지향 프로그래밍이란? JavaScript같은 high-level languages 에 있어서 지향하는 방향에 따라 2가지 종류로 나눠볼 수 있습니다. 하나는 절차 지향적 언어 다른 하나는 객체 지향적 언어 절차 지향적 언어는 함수나 변수가 나열되어 있고, 그것을 어떤 절차로 진행되는지 정하는 것이 매우 중요합니다. C언어나 HTML이 해당합니다. 객체 지향적 언어란 모든 것을 '객체' 또는 '물체'로 만드는 방식입니다. java, JavaScript, C++, python 등이 해당합니다. 이때 객체지향 프로그래밍이라고 하면, 일종의 철학입니다. 모든것을 object로 모든 설명 가능하다는 것입니다. 모든.. 공감수 0 댓글수 0 2020. 6. 17.
  • JavaScript로 Queue 자료구조 구현하기 JavaScript 로 Queue 자료구조 구현하기 Queue란? 큐는 먼저 입력된 데이터가 먼저 나오는 자료구조를 말합니다. FIFO(First In First Out) 이라고도 합니다. 흔히 대기열이나 선착순을 생각하면 됩니다. 먼저 줄을 서면 먼저 처리됩니다. Queue의 속성으로는 가장 앞을 가리키는 Head(front)와 가장 뒤를 가리키는 Rear(tail)가 있고, front는 데이터를 get(delete) 할 수 있는 위치를 의미하고, tail은 데이터를 put(insert) 할 수 있는 위치를 의미합니다. 데이터를 꺼내는 것이 get(queue에서 delete) 데이터를 입력하는 것이 put(queue로 insert) 입니다. 이 중에서 get(delete) 작업을 deQueue 매소드로.. 공감수 1 댓글수 0 2020. 6. 14.
  • JavaScript로 Stack 자료 구조 구현하기 JavaScript로 Stack 자료 구조 구현하기 Stack 이란? Stack은 언제나 목록의 끝에서만 작업이 일어나는 자료구조를 말합니다. 그래서 마치 접시 쌓기와 비슷하기도 합니다. 접시를 쌓으면 제일 위에서만 쌓이고, 접시를 뺄 때도 제일 위에서만 뺄 수 있습니다. 이를 LIFO (Last In Firsh Out)라고도 합니다. 가장 나중에 들어온 것이 가장 먼저 나간다는 의미입니다. Stack에서 자료가 들어오는 것은 Push라고 하고, 꺼내는 것을 Pop이라고 합니다. 만약 S를 스택이라고 하고, x를 데이터요소라고 한다면 다음과 같은 연산이 가능합니다. S.top() : 스택의 가장 윗 데이터 반환. 만약 스택이 비어 있으면 연산 정의 불가 S.pop() : 스택의 가장 윗 데이터 삭제. 만.. 공감수 0 댓글수 0 2020. 6. 14.
  • JavaScript 함수선언식과 함수표현식 JavaScript 함수선언식과 함수표현식 JavsScript 에서 함수를 사용하는 두가지 방식을 알아보자. 함수 선언식 function 함수명() { 함수실행 } 함수선언식은 function 이라고 적어주고 함수 이름, 소괄호, 중괄호로 구성되어 있다. 함수 표현식 let 함수 이름 = function ( ) { 함수실행 } 함수 표현식은 마치 변수처럼 함수의 이름을 선언해준 다음 할당 연산자로 function ( ) 소괄호 {} 중괄호를 할당해준다. 공부하면서 별 것 아닌 것 같지만, 어떤 형태가 함수선언식이고, 또 함수 표현식인지 헷갈릴 때가 있다. 함수 선언식은 바로 function이라는 것으로 함수를 선언해준다고 이해하고, 함수 표현식은 마치 변수처럼 표현해서 함수를 정의한 것이라고 이해하면, .. 공감수 0 댓글수 0 2020. 6. 13.
  • 깃헙으로 페어 프로그래밍하기 깃헙으로 페어 프로그래밍하기 페어와 함께 하나의 프로젝트를 작업하는 경우. 어떻게 깃헙을 활용해야할까? 즉 상대방이 작업한 작업물의 최신 버전을 어떻게 다운받고, 또 업로드 할 수 있는지에 관한 내용이다. 우선 각자 프로젝트 repository를 fork하고 clone한다. 그리고 페어가 작업한 결과물 위에서 코딩을 해야하기 때문에 페어의 repository를 연결하는 작업이 필요하다. 이 때 연결하는 명령어는 다음과 같습니다. $ git remote add pair $ git remote -v 연동이 되었다면, 먼저 드라이버 역할을 하는 페어가 코드를 작성하고 자신의 remote repository에 변경사항을 push합니다. 네이게이터 역할을 했던 페.. 공감수 0 댓글수 0 2020. 6. 8.
  • JavaScript 에서의 객체 (Object) 이해 JavaScript에서의 객체에 대해서 알아봅시다. '객체'란 무엇인가요? 우리가 변수에 데이터를 저장할 때 변수를 선언하는 방법, 그리고 또 배열을 이용하는 방법이 있습니다. 하나씩 변수로 선언하는 경우, 데이터의 종류마다 선언을 해줘야해서 종류가 많다면 어렵습니다. let userFirstName = 'Steve'; let userLastName = 'Lee'; 배열로 만드는 경우, 데이터간의 연관성은 가지지만, 인덱스를 해석하기 어렵습니다. let user = [ 'Steve', 'Lee' ] 그래서 객체라는 형태를 이용할 수 있습니다. let user = { firstName : 'Steve', lastName : 'Lee' } 객체는 이렇게 하나의 대상에 다양한 데이터가 저장될 때 적합한 자료 .. 공감수 0 댓글수 0 2020. 6. 7.
  • 수도코드(pseudocode) 작성하는 방법 수도코드(pseudocode) 작성하는 방법 수도코드란? 수도코드 또는 의사코드로 불리는 이 방법은 실제로 코딩으로 들어가기 전에 우리의 언어로 만들어질 코딩의 흐름을 정리해보는 것이다. 수도코드의 장점? 내가 생각해본 수도코드의 장점은 우선 가설과 검증 이라는 사이클로 효율적으로 답을 찾아나갈 수 있다는 것이다. 물론, 수도코드 없이 다 기억이 된다면 좋겠지만, 그렇지 않은 경우 어떤 논리 흐름으로 코드를 짜 나갔는지를 기록하는 것은 매우 도움이 된다. 둘째로 협업하는 경우 함께 코딩하는 사람과 이해도를 맞추는데 도움이 된다. 협업을 하는데 있어서 무엇보다 중요한 것은 같은 해결방법을 가지고 같이 고민하는 것이라고 생각한다. 서로 다른 정보를 바탕으로 다른 고민을 하고 있다면, 팀이라고 할 수 없고, .. 공감수 8 댓글수 1 2020. 6. 7.
  • JavaScript 에서의 falsy 값 falsy javascript 자바스크립트에서 falsy한 값은 무엇이 있을까? MDN에서 이야기하기를 falsy = 거짓 같은 값 이라고 이야기하고 있다. false면 false이지 false같은 값은 무엇일까. 아무튼 이걸 파고들면 학문 공부하는 느낌이 드니 우선은 그렇다고 하고 넘어가자. falsy한 값들은 Boolean 맥락에서 false로 표현됩니다. 우선은 이렇게 이해하고 넘어가도록 하자! 다음 8가지는 falsy한 값으로 숙지하도록 하자. false 키워드 false 0 숫자 0 -0 음수 0 (엥? 0이 음수도 있어?) 0n 거짓같은 값 "" 빈스트링 null 아무 값이 없음 undefined undefined - 원시값 NaN 숫자가 아님 이 중에서 아직까지 자주 보이는 녀석은 false.. 공감수 0 댓글수 0 2020. 6. 4.
  • Math.pow JavaScript 제곱 함수 Math.pow JavaScript 제곱근 함수 Math.pow() 함수는 제곱을 구할 때 사용한다. 문법은 아래와 같다. Math.pow(밑, 지수) 2의 4승을 구한다고 생각해보면 이렇게 사용할 수 있다. console.log(Math.pow(2, 4)); // expected output : 16 딱히 pow라는 영어 단어에 그런 뜻은 없는 것 같지만, 프로그래밍 언어에서 pow라는 단어가 주로 제곱함수로 많이 사용된다고 하니 기억하면 좋겠다. 다양한 자료와 글을 참고하여 배우고 있는 개발 뉴비의 블로그입니다. 수정 보완할 것이 있다면 부담없이 댓글 남겨주세요 :) Math.pow javaScript 제곱 함수. 공감수 0 댓글수 0 2020. 6. 4.
  • 각자리수 곱셈 JavaScript 두 양의 정수가 주어졌을 때, 주어진 수의 각 자리의 숫자를 곱했을 때 한자릿수가 될 때까지의 계산 횟수를 반환하는 함수를 작성하시오. pseudo-code(의사코드) 1. 한자릿수로 만드는 형태는 리듀스를 이용해보면 어떨까? 2. 리듀스 매소드를 이용하기 위해서, 주어진 숫자를 배열로 바꿔보면 어떨까? 3. 숫자를 String()을 사용하여 문자열로 변환한 다음, split('')을 이용해서 배열로 변환하면 어떨까? 4. 문자열의 길이나 배열의 길이를 .length를 이용해서 2자리 수 이상의 경우 반복하는 반복문을 사용하면 어떨까? 5. 반복문이 종료될 때 count를 하는 변수를 선언하여 몇번 반복했는지 카운트하면 어떨까? 위와같은 코드를 짜보았다. function multiple(num){ let.. 공감수 0 댓글수 0 2020. 6. 1.
  • 배열 매서드 reduce 함수 javaScript 배열 매서드인 reduce 함수에 대해서 알아봅시다. .reduce(함수(누적값, 현재값, 현재인덱스, 원본배열), 초기값) reduce는 배열에 대해서 실행할 수 있는 함수인데, 내부에 '리듀서'(reducer)함수를 가지고 실행하며, 배열 인덱스 요소들을 리듀서 함수를 실행하므로써 단 하나의 결과만을 반환하는 함수입니다. 리듀스함수의 핵심은 단연 '리듀서'reducer 함수입니다. 리듀서 함수는 네개의 인자를 가질 수 있습니다. 순서대로 1. 누적값(acc;accumulator) 2. 현재값(cur;currentValue) 3. 현재인덱스(idx) 4. 원본배열(arr) 물론 보통 사용되는 인자는 주로 누적값(acc)와 현재값(cur)이 가장 많이 사용되고, 저는 그래서 인자 이름도 acc 와 cur.. 공감수 0 댓글수 0 2020. 6. 1.
  • while loop javascript while 반복문은 생활코딩에서 들은바로는 for 문이 생겨나기 이전에 만들어진 조건문이라고 들었다. while (조건문) { // 반복될 코드 } while문은 괄호 안이 참(true)일때 실행되는 반복문이다. 어떻게 보면 참 거짓을 판단하는 if문의 능력을 가지고 있는 반복문으로 조건을 포함한 반복을 만들 때 유용할 것 같다. 특히 숫자 연산과 관련된 형태에서 자주 보이는 것 같다. 반복문에서 계속 더하거나 계속 곱하고, 조건문에서 상한선을 정해두는 그런 형태 말이다. let i = 0; while (i < 10) { text += "The number is " + i; i++; } 숫자 연산 시 참거짓에서 활용! 기억해두자. while loop javascript 개발 뉴비의 블로그입니다. 수정 보.. 공감수 0 댓글수 0 2020. 6. 1.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.