var defaultMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3606904, 127.1061625),
    map: map,
    icon: {
        content: '<img src="'+ HOME_PATH +'/img/example/pin_default.png" alt="" ' +
                 'style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; ' +
                 '-webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;">',
        size: new naver.maps.Size(22, 35),
        anchor: new naver.maps.Point(11, 35)
    }
});

네이버 지도api 예제코드.

... ?

저는 현재 네이버 지도api 를 활용하여 react로 지도 관련 웹을 개발 하고있고, 위치를 표시해주는 마커를 커스텀하기 위해 예제를 살펴보았습니다. 예제를 보았을때 icon에 content를 활용하여 커스텀 할 수 있는것을 파악하였고 인라인 스타일을 사용한 것 또한 알 수 있었습니다. 하지만 저는 react 를 사용시 styled-component 로 스타일을 적용하였는데 위 코드에서는 styled-component 를 활용하여 태그를 집어넣었을시에 에러가 발생하였고. 이렇게 되니 ' ' 로 감싸진 코드에서는 자동완성 기능도 쓸수없고 가독성도 떨어지니 답답하게 느껴졌습니다.

이를 해결하고자 생각하던중에 스타일 컴포넌트를 쓰면서 잊고있던 class 를 주고 외부 App.css 파일을 임포트해서 스타일을 적용해주는 방법이 생각났고 다행이도 생각대로 잘 적용 되었습니다.

import "./App.css";

marker = new naver.maps.Marker({
          map: map,
          position: latlng,
          icon: {
            content:
              '<img class="pulse" draggable="false" unselectable="on" >',
            anchor: new naver.maps.Point(11, 11),
          },

이렇게 하여 코드의 자동완성 기능도 사용할수 있게 되었고 가독성도 해결 되었습니다.

이렇게 하여 현재 문제는 잘 해결 되었지만 의문점도 생겼습니다.

추후 해결 해야할 점

1. 클래스명이 많아질경우의 문제점.
2. 스타일 컴포넌트를 사용할 수는 없는지.

타입스크립트 라는 언어를 작년부터 많이 듣기 시작했다. 많이 듣다보니 자연스레 관심은 생겼지만 딱히 배우고 싶은 마음은 없었다. 하지만 모르고있자니 계속 신경이 쓰이는 그런 느낌이 있어서 써야하는 이유라도 알아 보았다.

• 핫한 언어라서가 아닌
• 채용 공고에서 많이 볼 수 있는 내용이여서가 아닌

여러 명이서 개발해보신 경험이 있다면 아마 문서화가 잘 된 코드, 가독성이 높고 한눈에 의미를 파악하기 쉬운 코드를 선호하실 거라고 생각합니다. 타입스크립트는 이러한 장점들을 극대화 시킬 뿐만 아니라 코드를 쉽게 작성하도록 도와주고 향후 애플리케이션을 실행했을 때의 버그도 미리 줄여줄 수 있습니다

라고 내가 많이 배우는 "캡틴판교" 님의 타입스크립트 강의에서 정리된 글을 보았다. 그리고 많이 공감 하였다.

위 글을 보면 크게 두가지로 정리할 수 있을것 같다.

1. 에러의 사전방지
2. 개발생산성 UP

1. 에러의 사전방지 측면

위 코드는 매개변수가 number 타입으로 들어올것을 기대하여 인자를 더해주는 함수이지만 JS 특성상 문자열이 들어올경우 string 값으로 처리하여 값이 반환된다. 그 부분을 브라우저에서 확인하지 않아도 지정해준 타입을 추론하여 에러 문구를 보여준다.

2. 개발생산성 UP

위는 JS파일 아래는 TS 로 타입을 지정해준 결과이다. 보다시피 TS는 타입을 지정함으로서 추론을하여 api나 속성등을 자동완성을 시켜주어 개발생산성을 UP 해주는 효과가 기대된다.

이러한 측면만봐도 왜 그리 많이 사용 되어지고 많이 요구를 하는지 알 수 있어졌다, 개인적으로 생산성을 올려주는 부분은 많이 집착하는 편이기도하고, 무언가의 필요성을 느꼈을때 효과적으로 습득하는 스타일이여서 바로 배워야겠다는 생각이 들게해준다.

[이것은 그래프와 관련이 없습니다]

QueryLanguage 입니다 !

GraphQL에 궁금증이 생겨 살짝 맛만 보았습니다. 나름대로 GraphQL 의 만들어진 이유나 REST와는 다른 점을 찾아보았고 관련 영상을 보며 학습해본 것을 나름의 순서에 맞게 정리해보고자 합니다.

API

Application Programming Interface

:: 응용프로그램 간에 데이터를 주고받는 방법 :: 데이터를 주고 받는 양식

Architecture

:: 프로그래머는 아키텍쳐라는 표현을 사용합니다 아키텍쳐란 시스템 구성과 동작원리등을 설명 및 설계하는 청사진 또는 설계도 라고 할 수 있습니다.

:: 즉 흔히많이알고 당연하게 사용하는 REST 아키텍쳐는 클라이언트와 서버간의 주고받는 데이터를 어떤식으로 표현할지 만들어논 규칙이라 할 수 있습니다.

REST

:: 이 규칙은 정말 당연한 API 아키텍쳐로 여겨져 왔습니다 API 설계를한다 = ' 당연히 REST 아님? '

그러나 REST는 2000년의 처음 소개된 설계방법 이였고 그 당시와는 다른 세상이 되었습니다. IOS, Android등 다양한 기기가 사용되어지고 그에 따른 필요한 정보의 형태도 많이 달라졌습니다. 기존의 RESTful 한 방법으로는 구현하기가 힘들어졌습니다.

단점

Over-Fetching :: 필요한 정보보다 더 많은 데이터를 전달받습니다. :: 불필요한 리소스 낭비가 발생합니다. :: 필요한 정보만 골라내야하는 추가작업이 발생합니다 Under-Fetching :: 필요한 데이터를 만들기 위해 여러번의 호출이 필요합니다. :: 추가적인 리소스 요청이 발생합니다. :: 여러 요청을 통해 전달받은 정보를 조합하는 추가작업이 발생합니다.

GraphQL을 학습한다면 REST를 사용해보았다고 생각하고 예시는 따로 들지 않겠습니다.

GraphQL

:: 위에 단점을 극복하려고 나온것이 그래프큐엘 입니다. 정보를 요청하는 쪽에서 원하는 형태로 정보를 가져오고 수행할수 있는 쿼리언어를 만든것입니다. 즉 사용자가 직접 어떤 데이터가 필요한지 명시시킨것입니다.

:: REST 에서는 people에서 name의 정보를 가져오려면 people 전체를 가져와 필요한 정보를 골라내는 추가작접을 사용해야 했었을겁니다. 하지만 GraphQL 에서는 원하는 정보를 미리 정해놓고 요청하는 것 입니다. GraphQL로 name 만 가져오도록 하겠습니다.

불필요한 age 나 gender의 정보가 담기지 않은 데이터를 가져온 모습입니다.

마무리

:: 저는 무언가를 학습할 때 탄생 배경과 쓰이는 이유를 먼저 알고 공부해보는 편입니다. 처음엔 graphQL 이 무적인 줄 알뻔했지만 그런 건 아닌 거 같고 무엇을 만드느냐에 따라 나뉘는 것 같습니다 REST는 요청은 쉽지만, 응답받는 데이터가 비효율적이고 GraphQL은 요청은 복잡하지만 복잡하게 요청한 만큼 응답 데이터가 효율적이라고 생각합니다.

아직 무엇을 만들며 이건 좋고 나쁘다고 판단할 실력은 아니지만 좋아 보이는 것 정도는 구분할 줄 안다고 생각하는데 GraphQL은 재미도있고 앞으로 학습하고 싶은 기술이라고 생각합니다.

https://www.seobility.net/en/wiki/REST_API https://www.youtube.com/watch?v=xiE9-S7s9rs

Study 를 한 이유

그 동안 취업을 하고싶어 중요한 개발은 하지않고 너무 면접준비만 한다고 느꼈습니다. 개발자에게 가장 중요한 공부는 실습인걸 잊어버리고.. 그래서 다시 기본부터 기억을 한다는 느낌으로 간단하게 만들어보았습니다.

지도서비스를 만들어 본 이유

요즘 가장 큰 이슈는 코로나이고 관련 된 지도서비스 들이 많이 개발되고 있다는걸 알고있었고, 부트캠프 시절 첫 프로젝트로 지도서비스를 만든 기억을 다시 찾고 싶었습니다.

무엇을 사용했나 ?

hook 을 사용하여 함수형 컴포넌트로 제작하였고 , css 는 Styled-component를 사용하였습니다.

제작방식

우선 kakao api 를 HTML 파일에서 불러왔고 전역생성자를 kakao 변수에 할당해줘서 사용했습니다. 그리고 처음엔 addMap()이란 함수에서 지도를 만들어주고 addMarker() 라는 마커를 만들어주는 함수를 사용하였는데 중복코드가 생겨 addMarker() 함수만으로 대체하였고 useEffect 를 사용하여 처음 렌더링될때 불러오도록 하였습니다. 그리고 반복적으로 렌더링이 되지않도록 [] 를 넣어주었습니다. 이것으로 마커와 맵을 불러왔습니다.

마커

마커를 찍기위해선 위치 데이터가 필요하였는데 fakeData로 간단하게 구현하였습니다. 데이터의 좌표로찍는 마커는 반복문을 이용하여 들어온 데이터수 만큼 마커를 찍을 수 있게 구현하였고 만약 데이터가 코로나감염자의 위치데이터라면 코로나서비스와 비슷하게 만들 수 있을거라고 생각합니다.

현재위치로 이동

지도서비스에서 현재 자신의위치를 보여줄 수 있는 기능은 꼭 있어야 한다고 생각합니다. 버튼을 클릭스 온클릭 이벤트를 걸어주고 네비게이터 함수를 이용하여 자신의 위치를 가져왔습니다.

추가할 기능

검색을 통하여 검색위치를 보여주는 기능을 만드려고 합니다. 사실 그런데 이 글은 고민거리가 생겨 쓰게 되었습니다. 페이지의 구조는 app.js 에서 컴포넌트별로 렌더시켜주고있는 구조인데 만들다보니 맵 컨테이너에서 이미맵을 뛰워주고있는데, infoBox는 검색이나,현재날짜,위치 등을 보여주는 컴포넌트인데 여기서 또 한번 맵을 뛰워주고 각종처리를 하는건 중복이 너무많다는 생각이 들어 잠시 멈추고 효율적인 렌더링 방식을 생각하게 되었고 정리할겸 글을 쓰게되었습니다. 이 블로그는 제 TIL 이니깐요!!

마무리

개발을 생각나는대로 하는게아닌 하기전에 전체적인 구상을 한번 해보고 순차적으로 해야된다는걸 느꼈습니다. 그리고 개발공부는 직접 해보는게 역시 최고입니다.

Template literal

기존에 쓰던 " ", ' ' 대신 Backtick 으로 문자열을 만들어줍니다.
백틱안에서 자유롭게 뛰어쓰기 나 문자등을 사용가능하고 식이나 값만 ${ 안에서 사용 } 하면됩니다.

default parameter

매개변수의 디폴트 값을 지정해줍니다. f 함수의 매개변수값을 지정해준다면 알고있는데로 실행되지만 , 없을시의 값을 미리 지정해줍니다. 함수를 넣어줄수도 있습니다.

rest parameter

지정한 파라미터외의 값을 배열안에 전부 넣어줍니다. 기존에있던 arguments 를 대체할수있습니다. 유사배열객체 였던 arguments 를 rest parameter 로 대체를한다면 배열이기때문에 배열 메소드를 사용가능하고 인자에도 영향을 미치지 않습니다.

spread operator

전개연산자, 펼쳐준다는 의미를 가지고있고 안에있는 값을 펼쳐준다 라고 생각하면 될것 같습니다.

제가 공부한 내용을 간략히 정리하여 TIL 목적으로 게시하는것 입니다. 틀린 정보가 있을시 언제든 알려주시면 감사하겠습니다.

스코프, 호이스팅

스코프 : 범위, 유효공간, 허용범위 등을 의미한다. 호이스팅 : 변수를 끌어올린다.

함수스코프

• 함수에 의해서 생기는 범위 : var

블락스코프

• 블락에 의해서 생기는 범위 : const, let

호이스팅 1)변수를 끌어올린다. 2)undefined 를 할당한다. 3)함수스코프에서 이루어진다. 4)함수선언문에서는 이루어지지만 함수표현식은 이루어지지않는다.

• 선언문은 항시 자바스크립트 엔진 구동시 가장 최우선으로 해석하므로 호이스팅 되고, 할당 구문은 런타임 과정에서 이루어지기 때문에 호이스팅 되지 않는다.

함수스코프인 var 는 끌어올려진후 undefined 를 뿜어낸다. 블락스코프인 const 는 에러를 뿜고있다. 하지만 호이스팅이 되어진것은 아니다. 블락스코프에서도 호이스팅은 이루어지지만 undefined 를 할당시키지 않는것이다.

제가 공부한 내용을 간략히 정리하여 TIL 목적으로 게시하는것 입니다. 틀린 정보가 있을시 언제든 알려주시면 감사하겠습니다.

• 코드스테이츠의 마지막 프로젝트로 기업협업 프로젝트를 하였습니다.
• 플라잉 캣 이라는 기업의 쇼핑몰의 장바구니 페이지와 배너페이지를 리팩토링 하였습니다.
• 프론트엔드 개발을 맡았습니다.

그리드

• Zeplin 을 사용하여 UI-UX 디자이너와 협업을 했습니다.
• 디자이너의 가이드라인에 맞춰 Material-ui를 사용하여 그리드를 나눴습니다.

  React

• 함수형 컴포넌트로 제작하였습니다.
• React-Hooks 를 사용하여 useState,useEffect를 사용해보았습니다.

  장바구니 구현

• PC, Tablet, Mobile 에 맞는 반응형 웹으로 제작 하였습니다.
• CSS 는 CSS - in - JS 라이브러리인 styled-componets를 활용하였습니다

• React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있었습니다.

• CSS postion: sticky 속성을 사용하여 계산서가 사용자의 시각에 맞도록 움직이게 제작
• 장바구니에 담긴 정보를 사용하여 정보를 뛰우도록 제작

• 데이터는 장바구니 페이지에서 react에 props 로 가져왔습니다 .

• 기존 장바구니 정보는 기업에서 구현해논 코드입니다.

상품가격 정보

• 상품가격정보는 상위컴포넌트인 장바구니에서 하위컴포넌트인 계산서 컴포넌트에 props로 넘겨주었습니다

배너 구현

• Axios를 사용하여 기업에서 제공한 배너 API를 호출하였습니다.
• API에 영상이 담겨있으면 영상이 나오도록 하였습니다.
• 추천상품 목록을 반응형으로 제작하였습니다.

추천상품 목록

• useEffect로 api요청을 한뒤 useState 를 사용하여 상품 data 를 받아주었습니다
• 데이이터를 받은 items 를 가지고 map 을 사용하여 데이터양만큼 정보에맞게 가공을 해주었습니다.

Review

개발을 이제 막 시작한 저에겐 기업프로젝트 라는 말은 굉장히 많은 의미가 있었습니다. 그중 하나는 내가 경험해보지 못한 엄~청난 기술들을 경험해보겠구나 라는 생각도 있었지만 그런건 개인공부를 하며 경험을해봐야겠구나라는 생각이 들었습니다. 기업은 검증된 안전한 코드로 개발을 해야한다는걸 느꼇기 때문입니다.그리고 오히려 다행이였습니다. 프로젝트를 진행할 기존코드를 보는것만으로도 힘들었으니까요.. 다른사람이 쓴 코드를 본다는게 쉽지가 않았습니다 이 경험은 추후 제가 기업에 들어갔을때 좋은 경험이 될거라고 생각이듭니다.

저는 개발공부를 프론트엔드 개발자를 목표로 하였습니다.

• 애플사이트같은 인터랙티브한 웹이 정말 좋았습니다.
• 백엔드의 기능을 시각화 시켜줄수 있는점이 좋았습니다.
• 디자인 공부를 하진않았지만 교양으로 들었던 UI-UX 수업이 굉장히 흥미로웠습니다.

이러한 이유로 프론트엔드 를 공부하던중 디자이너와의 그 차이점을 종종 생각했었는데 그 의문을 같이 협업하게된 ui-ux 디자이너를 보며 궁금증을 해소하였고 좀더 실무에서의 프론트 엔드 개발자의 업무를 어!느정도는 이해할수 있었습니다.

상태관리의 중요성을 느꼇 던 것 같다. 리액트의 상태는 상위컴포넌트에서 관리하고 하위컴포넌트에게 프롭스로 전달하는 흐름인데 하위 컴포넌트에서는 절대 직접 상태를 관리할수가 없다 . 그러하여 파일이 복잡해질수록 , 많아질수록 상태관리를 여간 까다로운게 아니다 .

사실 처음에는 리덕스라는 상태관리 라이브러리를 알고있어서 사용은 해보려했다 . 그러나 역시 무작정 공부를 해서 쓰기에는 나의 집중력이 한계를 느꼇다... 그런데 이번 프로젝트에서 얻은점이 있다면 상태관리의 중요성과 리덕스의 필요성 ? 을 느껴버렸다 , 이 필요성을 느낀다는게 개인적으로는 정말 중요하다고 생각을하는데 그 이유는 , 사람이 필요성을 느끼고 무엇을 하는 것과 느끼지 못하고 그냥 하는거는 엄청난 차이를 생겨난다고 생각한다 필요에 의한 공부(코딩) 이 정말 중요한것 같다.

그래서 Redux가 대충 어떠한 것이냐면

상위 컴포넌트에서 상태관리를 하는것이 아닌 store라는 곳에서 전체적인 상태를 정말 이름그대로 상점처럼 사용하는것이기 때문에 필요할때마다 액션을 취해서 상태를 가져다 쓸수 있는 그런 기능이다..

사실 이 글에서는 이 프로젝트 후기를 써보고싶었는데.. redux 찬양글이 된거같다 , 그만큼 이번 프로젝트가 그렇게 큰 사이즈의 개발이 아니였음에도 많이 고생했고 필요성을 엄청나게 느꼇 던 것 같다.

그리고 저는 프론트엔드 개발자를 목표로 공부를 하고있었습니다 , 프론트엔드가 단순히 좋아서 , 하지만 이번 프로젝트가 역시 공부를 위한 프로젝트이다 보니 기능적구현을 많이 못해본거는 아쉬웠고 이 아쉬움을 통해 백단에 관심이 켜젔다는건 비밀입니다..

그래서 앞으로 하고싶은 공부는 Redux 나 다른 상태관리 라이브러리 mobx 를 한번 찾아보고 입맛에맞는 걸로 공부를 해보고 다른 프로젝트에 사용하고싶고 백단을 한번 작성해보고싶어졌습니다 ,

결국 첫번째 프로젝트는 앞으로의 방향성을 잡아주었고 무언가 과제를 남겨 저를 좀더 발전할 원동력이 되는거 같아서 좋았고 , 앞으로의 성장할 나의 모습을 기대하게 만들어 주었습니다

이상으로 마무리하겠습니다.

p.s 정말 글쓰는게 쉽지않지만 재밌네요 생각을 어느정도 정리하게끔 해주기도하고.. 앞으로 공부노트로 사용해보려합니다 ㅎㅎ;

1. 컴포넌트 설계

나의 첫번째 프로젝트를 시작하였다 . 프로젝트 내용은 코로나 사태로인한 경기도 긴급재난자금 사용처를 알려주는 웹사이트이다

https://mask-nearby.com/ 마스크알리미 웹을 모티브 삼았다.

내가 맡은역할은 Front-end 이다 우선 프로젝트 설계를 시작하였는데 그중에 컴포넌트 구조를 구성해보았다. 우선 첫 리액트프로젝트라 막상 어떤식으로 컴포넌트를 구상해야 효율적일지 생각해보았고 꽤 막막헀다. 그래서 우선 폴더별로 구조를 해보았다 . 이미지에서 보다시피 가장 기초는 App 이고 여기서 라우트처리를 해주었다. 그리고 맨 처음화면인 Landingpage에서 상단메뉴와 그 상단메뉴 에 있는 로그인 , 로그아웃 회원가입 컴포넌트를 처리해주게 하였고

따로 Map 컴포넌트를 생성하여 지도에 관한 처리를 할수있게금 짜 보았다.

컴포넌트를 구상하고 어떻게 효율적이게 만들지 공부를 하면서 다양한 방식이 있다는걸 알았고 그중 지금 방식처럼 각각폴더를 나눠서 구상하는게 괜찮아보였고 아예 컨테이너화 시키는 방식도 있었다 .

추후 프로젝트를 진행하면서 느꼇지만 나의 컴포넌트 구조는 역시 미흡했고 왜 효율적으로 짜야하는지 좀더 절실히 느끼는 계기가되었다.. 그리고 아쉬웠다.

2. SPA , ui 구성

React 나 vue ,anguler 등의 라이브러리, 프레임워크를 사용하는 이유는 single page application을 사용하기 위해서라고 생각한다

SPA 란 말그대로 싱글페이지 한개의 페이지라는 뜻인데 장점은 요즘은 웹에서 처리되는 정보가 정말 많기때문에 속도도 느려지고, 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문이다 그래서 우리는 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여준다

그래서 내가 이 화면에서 렌더를 하는 방식은 위에 Navbar는 고정하되 밑에있는 메인화면만을 바꿔주어 완전히 정보를 새로 받아오는것이 아닌 필요한 부분만 보여지게끔 페이지를 이동시켜주었다. Login 을 누르면 위에선 props.location.pathname 를 활용하여 현재 페이지화면을 보여주는 ui를 만들어보았고 밑에 메인화면도 정상적으로 작동하는 모습이다

3. Styled.component

나는 Front-end 개발자를 목표로 공부하고있기 떄문에 CSS 와 HTML 를 상당히 중요시하게 생각하고있는데 React 에서는 다양한 css 방식이 있는데 그중 styled.componet라는 css 라이브러리 방식을 사용하였다 . 사용하려면 설치를해야하는데 npm 에서 install 해서 사용하면 된다 자세한 방식은 구글신이 더 자세하게 알려줄것이다

장점으론 js페이지에서 한번에 css처리를 해줄수있어서 좋다 내 코드에서 예시는 이런식으로 변수를 만들어 스타일 속성을 입혀준뒤 변수를 태그로 감싸줘서 사용하면된다 . 코드에 가독성도 올라가고 유지보수도 좀더 편하게 할수있다는 느낌을 팍팍준다.

1)props의 값에따라 내부구현에 필요한 데이터를 말 할수 있다. 2)component 내부적으로 사용된다. 3)object이다. 4)class 컴포넌트로 작성해야한다. 5)값을 변경할때는 setState 를 사용해야한다.

class App extends Component {
  constructor(props) {
    super(props);
    console.log("hello");
  }
  state = {
    count: 0,
  };
  add = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState((current) => ({ count: current.count - 1 }));
  };
    render() {
    console.log("i'm render");
    return (
      <div>
        <h1>>Im a class {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

state를 이용한 간단한 예시이다. add와 minus라는 버튼을 만들어주었고 state객체의 값을 변경시켜준다.

Life cycle

컴포넌트가 브라우저에 보여질때 업데이트 될 때, 사라질 때 각 단계 전,후로 특정메서드가 호출되는 것을 말하는데. 밑에 위에 state를 작성한 코드에이어 특정메서드 가 실행될때마다 console로 출력해보는 코드를 작성하였다

class App extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    count: 0,
  };
  add = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState((current) => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log("component rendered");
  }
  componentDidUpdate() {
    console.log("update");
  }
  componentWillUnmount() {
    console.log("die");
  }
  render() {
    console.log("i'm render");
    return (
      <div>
        <h1>>Im a class {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

이 코드에 출력 순서는 먼저 render함수가 실행이되고 component가 실행된 직후 발생하는 Mount함수가 출력이 되었습니다. 그리고 만들어둔 add 버튼을 클릭을하면 다시 render 함수가 호출이되고 update함수가 호출이되는걸 볼 수 있습니다.

component가 삭제될시 unmount 함수가 호출되는데 이거는 어떻게 테스트해볼지 좀더 생각해보아야 하겠지만. 이 함수가 호출이 된 다는건 분명합니다.

이렇게 react에 state와 lifecycle에 대해 나름대로 정리를 해 봤습니다.

prop = property 입니다. props 는 속성을나타내는 데이터입니다 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다

props를 이용하면 component는 언제나 같은 값을 만들어주었는데 동적으로 변경이가능해집니다.

function Food(props){
  console.log(props.name)
  return <h1> I Like {name}</h1>
}
-->console.log = kimchi가 출력된다.
  return 값으로는 I Like Kimchi가 출력된다

finction App(){
return(
  <div>
    <Food name ="kimchi"/>
  </div>
  );
 } 

지금 코드처럼 props란 뭐든지 component에 넣게되는것들입니다 props 는 즉 food에 첫번째 argument로 가게 되는것이고 우린 이걸 이용해 동적으로 변경을 할수있게 됩니다.

ES6 문법을이용해 좀더 있어보이게? 만들수있는데

function Food({ name }){
  return <h1> I Like {name}</h1>
}

props는 객체이기때문에 인자로 즉시 name을 넣어주어서 좀더 보기좋게 만들었습니다.

JSX

JSX는 React에서 거의 유일하게 자체적으로 사용되는 컨텐츠 일 것입니다. JSX는 그저 react가 만든 HTML + Javascript 일 뿐입니다. 그렇기 떄문에 React가아닌 다른 vue나 anguler 등에서는 사용이 불가능합니다.

주의사항으로는 자바스크립트 코드를 적용할때는 { } 안에서 사용해야하고, camelCase를 사용하는게 암묵적 룰입니다.

ECMA6부터 추가된 새로운 기능, constructor 는 객체를 만들고 초기상태를 세팅해준다.

function person(name,first,second){
this.name = name ,
this.first = first,
this.second = second
    }

class person{
  constructor(name,first,second){
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

class 에 constructor 는 약속된 이름이다 다른이름이 들어가서는 안된다,

class person{
  constructor(name,first,second){
    this.name = name;
    this.first = first;
    this.second = second;
  }
  sum(){
  return 'hello :' + (this.first + this.second);
  }
}

class personPlus extends person{
  avg(){
  return (this.first + this.second)/2;
  }
}



let kim = new personPlus('kim',10,20);
console.log(kim.sum())
console.log(kim.avg())

personPlus 함수는 extends(확장하다) person 을 함으로서 person의 속성들을 inheritance(상속)을 받고있다 상속을 받음으로서 불필요한 코드를 제거할수 있고 유지보수를 하는데 상당히 용이하다고 생각되고, 만약 원본 함수를 건드릴수 없는 상황이여도 상속을 받음으로서 원하는 기능을 추가로 구현 할 수 있는 장점이 있다.

Super

부모 클래스를 불러서 부모클래스에 일을시키고 부모가 하지 못 하는일을 나만 하는 하는 keyword가 Super 이다 super() 부모클래스 생성자를 실행시켜주고 personplus 에서는 this.third = third 를 해주면서 코드의 중복을 제거하고 파라미터 한개를 더 받을수 있는 코드를 만들었다. sum 메소드에서도 super.sum() 을 해줌으로서 person 함수에서 계산값 + personPlus의 함수의 계산을 각각 실행하게 해주었다.

즉 super() 괄호를 붙이면 부모클래스의 생성자, 괄호가없으면 super.method() 부모클래스에 있는 메소드를 호출한다.

코드의 중복을 많이 줄일 수 있는 방법이라 생각된다.

let superObj = {superVal : 'super'}
let subObj = {subVal : 'sub'}
subObj.__proto__ = superObj;

console.log(subObj.subVal)
console.log(subObj.superVal)

sub
super

subObj 에는 superVal 이라는 속성이 없음에도 불구하고 super가 출력이 되는데 이러한 이유는 proto 라는 keyword 때문인데 우선 subObj는 자신이 superVal이라는 속성이 있는지 찾아보고 없다면 proto 로연결된 superObj를 찾아가 superVal 이라는 속성을 찾은후 값을 출력해 준다고 이해하면 된다고 생각한다.이렇게 proto 속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라고 합니다.

proto 는 사실 javascript 표준에서는 표준이라고 인정하지는 않는다 하지만 대부분의 브라우저와 javascript 는 proto 를 구현하여 사용한다 하지만 정석이라고는 할수없으니 똑같은 역활을 하는 상속방법인 Object.create()를 소개해보겠습니다

Object.create()

let superObj = {superVal : 'super'}
// let subObj = {subVal : 'sub'}
// subObj.__proto__ = superObj;
let subObj = Object.create(superObj);
subObj.subVal = 'sub'

console.log(subObj.subVal)
console.log(subObj.superVal)

sub
super

Object.create() 메소드를사용한 proto 와 같은 출력값을가진 코드이다,성능은 같지만 이 정석적인 방법이 더 좋은 방법이라고 할수있다고 한다, 또 이 방법을 사용시 주의할점은 constructor를 명확히 연결시켜주는게 중요하다

subObj.prototype.construcotr = subObj;

이유는 자바스크립트가 OOP를 생각하지 않고 만들어진 언어이기 때문이다.

모든 객체는 Object.prototype를 상속받는다. 모든 function 에는 프로토타입이라는 속성이있다. prototype = 모델의 청사진을 만들 떄 쓰는 원형객체(original form) constructor = 인스턴스가 초기화될 때 실행하는 생성자 함수 this = 함수가 실행되때, 해당 scope 마다 생성되는 고유한 실행 context new키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 this의 값이 된다.

function person(name,first,second,third){
 this.name=name ,
 this.first = first,
 this.second = second,
 this.third = third,
 this.sum = function(){
    return this.first + this.second+this.third;
 } 
}
console.log(new person())

생성자함수로 만든 person 함수이다, 역시 거슬리는 부분이 있다 바로 sum 이다,만약 이번에도 100개의 person을 이용한 객체를 만들었다고 할때 sum 은 100개의 중복된 코드가 될 것이기 때문이다.

let kim = new person('kim', 10, 20);
kim.sum = function(){
  return 'modified : ' + (this.first + this.second);
}

이런식으로 sum을 바꿔줄수가 있지만, 만약 100개의 함수를 바꿔준다고 생각하면 아주 좋지않다,그러면 person을 이용한 객체가 공통적으로 사용할수있는 함수 나 속성이 있다면 얼마나 편할지 상상이 아주 잘 간다. 그것이 바로 prototype이 필요한 이유일 것 이다.

function person(name,first,second){
 this.name = name ,
 this.first = first,
 this.second = second
}

person.prototype.sum = function(){
  return this.first + this.second;
} 

let kim = new person('kim', 10, 20);
let lee = new person('lee', 10, 10);
console.log(kim.sum())
console.log(lee.sum())

결과값으로는 30, 20 이 아주 잘 출력이 될 것이다. 즉 prototype.sum을 따로 정의해줌으로서 객체가 만들어질떄마다 불필요한 실행이 사라질 것이고 한번만 정의 되기떄문에 메모리도 절약 할 수 있다

let kim = new person('kim', 10, 20);
kim.sum = function(){
  return 'hello :' + (this.first + this.second);
}
let lee = new person('lee', 10, 10);
console.log(kim.sum())
console.log(lee.sum())

이런식으로 sum의 리턴값을 바꿔줄수도있는데 여기서 prototype의 특징을 알수가 있는데, 객체 자신이 sum 이라는 메소드를 호출할 때 자신이 sum이라는 속성을 가지고있는지 찾고 그 속성이있다면 재정의된 값을 출력할 것 이고 자신이 가지고 있지 않다면 객체의 생성자인 person 의 prototype 의 sum 이라는 메소드가 있는지 찾을것이고 찾아졌다면 그 sum 을 실행하게 될 것이다.

요약을 하자면 프로토 타입은 객체를 정의하는 시점이 아닌, 필요한 시점에 정의 할수 있기 때문에 메모리 이점이 있고, 생성된 모든 객체가 공통으로 프로토타입을 사용할 수 있고 재정의도 가능하다.

let kim = {
 name:'kim',
 first : 10,
 second:20,
 third : 30,
 sum : function(){
    return this.first + this.second+this.third;
 } 
}

let lee = {
 name:'kim',
 first : 10,
 second:10,
 third:10,
 sum : function(){
    return this.first + this.second+this.third;
 } 
}

2개의 객체가 있다. 지금 보기엔 문제가없지만 만약 1억명의 사람이있다고 가정을한다면 분명 문제가 생길것이다. 그러하여 나는 저 객체를 찍어내는 공장을 만들어보겠다,

function person(){
 this.name='kim',
 this.first = 10,
 this.second = 20,
 this.third = 30,
 this.sum = function(){
    return this.first + this.second+this.third;
 } 
}

이 person 이라는 객체를 찍어내는 공장을 만들었다. 의 결과는 같은 값이 출력되는것을 볼수 있는데 그 이유는 new 에 있다, 이렇게 앞에 new가붙어있으면 맥락적으로 자바스크립트에서는 생성자함수 영어로는 constructor 라고 부른다고 한다.

이런식으로 입력값을 만들어주면 안에있는 값도 각각 다르게 설정할수도있다. 이렇게 기존에는 객체를 만들때마다 하나하나 다시 정의를 해줘야했는데, Person 이라는 Constructor 함수를 만들어주고 new를 사용함으로서 실행할때마다 객체를 찍어내는 공장을 만들수있다.

즉 Person 함수를 수정해주면 그 함수로 만든 모든 객체를 한번에 수정을 할수있게된다.

이것이 Constructor 생성자함수이다.

정보)생활코딩

복잡도 분석 알고리즘을 푸는데있어서 시간과 공간을 얼마나 차지하는지 나타내는 지표이다. 시간과 공간의 복잡도가 곧 효율성을 나타낸다. 알고리즘은 일단 성능을 내는게 중요하지만 그 다음으로는 그 효울을 따져 알고리즘을 평가한다고 할수있다.

Big - O

알고리즘의 성능을 수학적으로 표현해주는 표기법 알고리즘의 시간과 공간 복잡도를 표현할수 있다

O(1) : constant time

입력데이터의 크기의 상관없이 언제나 일정한 시간이 걸리는 알고리즘을 표현한다. 데이터가 증가해도 성능의 변함이없음을 볼수있다.

O(n) : linear time

입력데이터 크기에 비례해서 처리시간이 걸리는 알고리즘을 표현한다. 데이터가 증가함에 따라 처리시간도 같이 증가하고있다.

O(n^2) : Quadratic time

첫번째 Loop 에서 n번 돌면서 각각의 엘리먼트에서 n 번씩 또 돌기때문에 처리횟수가 n을 가로 세로 길이로 가지는 면적만큼추가된다. n이하나 늘어날때마다 n만큼식 계속해서 생성되기때문에 데이터가 커지면 커질수록 처리시간이 크게 늘어난다.

O(nm) : Quadratic time - 2

O(n^2)표기법과 비슷하지만 해당 표기법은 변수가 다르다면 빅O가 표기법에도 반드시 다르게 표현하여야 한다.

O(n^3) : (polynomial / cubic time)

O(n)일 경우에는 직선이고 O(n^2)이면 면적이된다. 그리고 O(n^3)이면 n의 제곱을 n만큼 더 돌리니까 큐빅모양이 될 것이다.

O(2^n) : Fibonacci (Exponential Time)

데이터의 증가에따라 처리시간이 현저히 늘어난다.

출처: https://bkjeon1614.tistory.com/25 [아무거나]

그림은 방 5개가 있습니다, 5번방에가려면 1번부터 5번까지 거쳐가야합니다, 왜냐하면 5번방의위치는 4번방의 주인이 알고있고 4번방의 위치는 3번방의 주인만 알고있기때문에 순서대로 물어물어 가야하기 때문입니다, 이 경우 1번방의 주인이 HEAD가 되고 5번방의 주인이 Tail 이 되는것입니다. 이러한 방식이 Linked list 입니다.

Property

Head : 첫 번째 노드를 지정하는 참조값 Tail : 마지막 노드를 지정하는 참조값

Method

addToTail : 마지막 번째 노드에 데이터를 삽입 removeHead : 첫 번째 노드를 삭제 contains : 연결 리스트가 주어진 값을 포함하고 있는지 확인

Hash Table

데이터관리 와 유지를 하는데 유용한 자료구조이다. 리소스를 포기하고 속도를 더 챙겼다. 규칙성이없는 집단이 있었는데 해쉬함수를 거쳐 규칙성있는 집단으로 바꾸어주었다 이것을 해싱 이라고하고, 규칙성이생긴 저 곳을 해쉬테이블이라 한다 해쉬함수의 규칙은 만들기 나름인것같다.

하지만 문제가 있는데 만약 1이란 숫자가 2개일경우에 한곳에 두개의1이 생긴다 그러하여 충돌이생기는데 이 충돌을 보완하고자 많은 방법등이 생겼는데 2가지를 얘기해보겠습니다.

Chaining

위에서 말한 linked list 처럼 값 뒤에 '슥' 하고 붙여나가는 방법이다. 1 - 2- ....7

Linear Probing

체이닝을 하다보니 리소스가 많이소모되고 다른테이블은 쓰지않게 되다보니 다른테이블을 소모하고자 나온 기법이다 만약 1번의자리를 들어가려는 데이터가있는데 그 자리가 차있다면 다른 빈자리를 들어가게끔 하는것이다.

Resizing

빈 자리로 넣는것도 한계가 있을것이다.그럴때 Table - Resizing 을 하게되는데 테이블의크기를 늘려준뒤 기존의 데이터들을 다시 해쉬함수로 보낸다 그리고 다시 늘려준 해쉬테이블의 재정렬 시켜주는 방법이다. 그렇게하면 다시 겹치는 테이블이 있어도 Linear Probing 기법을 쓰면 될 것이다.

Tree

노드가 하나 이상의 자식을 가지면 Tree 라고 한다. 비선형 자료구조로 계층적 관계를 표현한다. (디렉터리구조, 조직도) 대표적으로 HTML 구조에서 사용된다. 루트 노드(root node): 부모가 없는 노드, 트리는 하나의 루트 노드만을 가진다. 단말 노드(leaf node): 자식이 없는 노드, ‘말단 노드’ 또는 ‘잎 노드’라고도 부른다. 내부(internal) 노드: 단말 노드가 아닌 노드 간선(edge): 노드를 연결하는 선 (link, branch 라고도 부름) 형제(sibling): 같은 부모를 가지는 노드 노드의 크기(size): 자신을 포함한 모든 자손 노드의 개수 https://gmlwjd9405.github.io/2018/08/12/data-structure-tree.html

Binary Search tree (이진 검색 트리)

노드가 하나 이상의 자식을 가지면 Tree 라고 하는데 최대 2개까지만 붙는 트리를 Binaty tree 라고 부른다. 이진 검색 트리는 위와 같이 생겼습니다, 숫자가 정렬된 형태를 가지고있는데 가장작은숫자는 가장왼쪽, 가장 큰 숫자는 오른쪽에 있습니다. 그러하여 만약 데이터를 기준으로 작은숫자를 찾고싶으면 왼쪽으로, 큰 숫자를 찾고싶으면 오른쪽 방향을 탐색하면 쉽게 찾을 수 있습니다,그러하여 이진검색트리 는 중복 데이터가 없다는 가정 하에 크다와 작다를 쉽게 구분할 수 있게됩니다.

Graph

Graph 는 상하위 개념이없이 각각의 node와 node들 간의 edge 을 하나로 모아놓은 자료구조이다. Tree 는 Graph 의 한 형태라고 할수있다.

이미지와 같이 좋은? 입구가 있습니다.. 줄을서있다고 가정하였을때 어떠한 색상의 블럭이 가장먼저 탈출을 할까요 ?

탈출은 당연히 들어온 순서대로 겟죠? 이처럼 들어온 순서댇로 먼저 나가는 것이 큐입니다. FIFO (First in First Out) 선입선출이라 부르며 프로세스처리,CPU 관리에서 많이 사용됩니다. 큐의 문제점도 있습니다. 만약 줄을 서있던 초록블럭이 사라지게 된다면 그 뒤에 데이터들을 차례대로 땡겨주어야 겟죠 ? 그러하여 소수의 자료라면 상관이없지만 많은 데이터의 경우 연산에 많은시간이 걸리는 단점이 있습니다. 이러한 문제점을 해결하기위해 원형큐, 순환 큐, 환영 큐라는 방법등이 나왔습니다.

Stack

스택은 자료구조에서는 무언가를 쌓는다라는 의미를 갖는 자료구조입니다, 자료를 순서대로 쌓아서 보관하고 사용한다는 의미입니다, 이미지와 같이 후입 선출 이라 할수있습니다. 스택에서 사용되는 함수로는 Push와 Pop 이 있습니다 만약 자료가 없을때 pop을 한다면 자료가없기에 뺄수도 없습니다 이때 발생하는 에러를 Stack underflow 라고 합니다 반대로 ! 배열의 크기 이상의 자료를 Push 할 떄도 자료를 넣을 수없으므로 Stack overflow 라는 에러도 발생합니다.

객체

예를 들어, 자동차가있다면 자동차 1대 1대를 객체라 할 수 있습니다. 차의 모양이 전부 같다고 하더라도 차 한대가 사라진다고 다른차도 없어지는게 아니기때문에 객체입니다.

클래스

자동차는 일반적으로 같은 속성을 가지고 있는데 여기서 속성이란 자동차의 색 , 바퀴 , 사이드 미러등을 의미합니다. 이러한 공통적으로 갖는 속성들을 모아서 정의내린 것이 클래스입니다.

즉 자동차라는 클래스는 색,바퀴,사이드미러 등의 속성이 존재하고 객체들은 각 속성의 모양이 다르기때문에 각 각 다른 객체로 분류된다고 하는것입니다.

객체 지향 프로그래밍(OOP)

프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체'라는 기본 단위로 나누고 이 객체들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드와 변수(데이터)'의 묶음으로 봐야 한다.

OOP의 특징

추상화

추상화는 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현하기 위한 개념입니다. 객체와 클래스의 관점에서 살펴보면 객체는 실제 그 모습이지만 클래스는 객체들이 어떤 특징이 있어야한다고 정의하는 추상화된 개념이라고 생각하면 될 것 같습니다.

캡슐화

캡슐화는 일반적으로 연관있는 변수와 함수를 클래스로 묶는 작업을 말합니다, 객체가 기능을 어떻게 구현 했는지 외부에 감추는 것 캡슐화만 잘해도 좋은 코드를 만들 수 있다고합니다, 보안적인 의미도 있습니다.

상속

앞서말한 자동차의 속성으로 자동차의 핸들,바퀴, 사이드 미러 등을 말하였는데 같은 자동차란 객체에는 이와같은 공통점이 있는데 그것은 클래스를 상속받았다고 표현할 수 있을것 같습니다,이처럼 공통된 요소를 상속받게 되면은 불필요한 코드의 중복을 없앨 수 있습니다.

다형성

다형성은 형태는 같지만 다른 기능을 하는 것을 의미합니다. 페라리 와 람보르기니는 바퀴가 있다는점에서 같은 클래스를 상속받았다고 할수있습니다, 하지만 페라리 와 람보르기니의 바퀴 모양은 다르겟죠 ? 이것을 '다형성'이라고 합니다. 그럼 다형성을 사용하면 좋은 점은 무엇일까요?같은 이름의 속성을 유지함으로서, 속성을 사용하기 위한 인터페이스를 유지하고, 메서드 이름을 낭비하지 않는다는 것입니다.

Functional

let Car = function(){
  let comeInstance ={};
  someinstnace.positon = 0;
  someinstance.move = function(){
  this.position += 1;
  }
  return someInstance
};

let car1= Car();
let car2= Car();
car1.move(); 
console.log(car1); // {position: 1, move: ƒ} 
console.log(car2); // {position: 0, move: ƒ}

Functional Shared

Prototypal, Preudoclassical

이 내용은 좀더 숙지가 필요할것같아 추후에 추가하겠습니다.