전체 글
[JS/Basic/함수] 자바스크립트 함수
JavaScript는 다양한 함수 선언방법이 있다. Arrow Function, 함수 선언식 ,익명함수 등등 .. 본인은 Arrow Function을 주로 사용하지만, JavaScript가 오래된 언어인만큼 여러가지 방법으로 작성된 함수를 "이해"하는정도는 되야하기 때문에, 다 알아야합니다 :( 함수(Function) 프로그래밍에서 함수를 설명하는 책을 보면 대부분 수학시간에 배운 함수를 이용해서 설명합니다. 그 설명이 틀린 것은 아닙니다. 맞습니다. 하지만, 저에게는 와닿지 않아서 보통 다르게 설명을 합니다. 프로그램을 작성하다가 "반복적인 로직을 줄이기 위해 만든 방법"이 프로그래밍에서 함수입니다. (모듈화의 개념이 먼저에요!!) 프로그램을 작성하다보면, 똑같은 논리를 여기저기 갖다 쓰는 경우가 많습..
[JS/Basic/문법/반복문] 자바스크립트 반복문
반복문은 이런 관점에서 이해해준다면, 더 와닿을 수 있습니다.(개인적인 관점입니다) 프로그램은 사람의 일을 돕기위해 만들어졌습니다. 반복적이고 단순한 작업을 기계가 대신하기 위해서 프로그램을 만들기 시작했습니다. 사람은 감정이 있고 육체의 한계가 있습니다. 따라서, 당연하게 "실수"라는 것이 발생합니다. 따라서, 단순하고 반복적인 작업이라면 기계를 쓰는것이 더 효율적입니다. 즉, 프로그램에서 반복은 필수적인 요소이고, 그만큼 많이 쓰이고 중요한 영역이라는거죠! 반복문은 엄청 많은 작업에 쓸 수 있습니다. 예를들어, 구구단을 출력하는 간단한 프로그램에서 2*1,2*2...와같이 사람이 하나하나 입력해도 되겠지만, 반복문을 이용하면 더 간단하게 풀어낼 수 있습니다. while/do-while 반복문을 작성하..
[JS/Basic/문법/연산자,조건문] 자바스크립트 연산자, 조건문
JavaScript는 특이한 자료형과 연산자가 몇개 있기 때문에, 한번 정리해보려고 합니다. 자바스크립트 재활훈련 3편입니다. "===" 라던가, NaN,undefined,null 이라던가... 자바스크립트의 자료형 자바스크립트는 변수를 let,const로 선언하여 사용한다. 자료형에 따라서 변수형이 다르지 않지만, 변수끼리 계산을 하거나, 어떠한 로직의 Parameter로 들어갈 때는 자료형을 신경써줘야한다. 기본적으로 문자형, 숫자형,Boolean 3가지 type이 있다. 특이한 자료형인 NaN,undefined, Null 3가지가 있다. 문자형(string) : " " , 숫자형 : 정수형, 실수형 , Boolean: true,false 자바스크립트의 연산자 기본적인 수학의 사칙연산과 거듭제곱, 나..
[JS/Basic/문법/입출력] 자바스크립트 입출력
자바스크립트 재활훈련 2편 입출력 JavaScript는 브라우저 환경에서 실행된다. 브라우저에 내장되어있는 입출력 기능들을 먼저 알아봅시다. 브라우저 내장함수는 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단(I/O Interrupt)됩니다. 즉, 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능합니다 Modal은 편한대신, Customize가 불가능합니다. 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다. Alert 브라우저가 제공하는 출력기능입니다. Alert 함수가 실행되면, 사용자가 "OK(확인)"버튼을 누를 때 까지 ,메세지를 보여주는 창이 ..
[JS/Basic/문법/변수] 자바스크립트 변수
자바스크립트 재활훈련 1편 한동안 이론공부를 좀 많이 하였고 Python3를 주로 사용해서 , JS의 문법이 익숙하지 않아져버렸습니다.. ㅠ const , let, while, for , array 활용 등 유용하고 내가 자주 썻던걸 정리할 예정입니다. 빠르게 짚고 넘어가는 내용을 기록하기 위한 글입니다. JavaScript는 "사용자, 서버" 로부터 입력받은 정보를 처리한다. 온라인쇼핑몰 : 판매 중인 상품의 정보,이미지, 고객의 장바구니 정보,위시리스트 등 채팅: 사용자의 정보, 메세지 ,이모티콘 등 변수 "데이터"를 처리하기 위한 저장공간 자세하게 들어가면, 메모리 공간의 일정공간을 할당해서 labeling 시키는건데, 복잡하게 들어가면 끝도 없으니 이정도만 하자. 당연히, 똑같은 이름으로 다른공간..
[React/JSX/Component] React의 특징(2)
Step3. React는 Component로 구성되며, Component는 state(Data)와 Render(view)로 구성된다. React는 Data와 화면(view)를 일치시키기 위해서, 만들어졌습니다. 따라서, Data(State)를 다루는 곳과 화면에 반영(Render)하는 영역이 있습니다. 이 둘을 합쳐서 Component라고 하는데, 컴포넌트가 React의 최소 단위라고 할 수 있습니다. Class Component로 보면, Component의 구성을 한눈에 볼 수 있습니다. (원시적인 형태) Example Code) 좋아요 버튼 Class Component // Class Component로 // React가 설치 되어있다고 가정합니다. import react from 'react' co..
[React/SPA/View] React의 특징
React가 막 특별한 것처럼 느껴질 수 있지만, 한가지만 일단 알고갑시다. 브라우저는 HTML,CSS,JS만 알아들을 수 있다. React는 JavaScript로 만들어진 하나의 Libraray ? FrameWork ? 일 뿐입니다. React는 Data와 View를 통합해서 관리하면서, 독자적인 생태계를 구축하기 시작했습니다. 그러면서, React만의 특징을 갖게 되었는데 , 먼저 눈으로 쭉 보고 하나씩 뜯어봅시다. React의 특징 React는 결국 JavaScript이다. React로 만든 페이지는 SPA이다. React는 "View"만을 구성한다. React는 Component로 구성되며, Component는 state(Data)와 Render(view)로 구성이 된다. React는 JSX를 지..
[React/JS] 리왜씀 (React 왜 쓰나요)
https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React 공식문서를 참고하면 아래와 같이 안내되어 있습니다. React는 상호작용이 많은 UI를 만들 때, 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하고, React는 데이터가 변경됨에 따라, 적절한 컴포넌트만 효율적으로 갱신하고 렌더링하게 됩니다.(이뭔솔?) 처음 본다면, 어떤 어려움이 있는지 모르겠습니다. 3줄요약으로 지르고 가겠습니다. React를 만든 Facebook은 데이터를 실시간으로 화면에 반영을 해야했다. Facebook은..