Web Front-end
[JS/Basic/TDD,BDD] 자바스크립트 테스팅 연습
자기 프로그램을 테스트를 안하는 프로그래머가 있을까요 ?? 이건, 음식점을 하는데 간을 보지 않는것과 같습니다. 컴파일을 하면서 출력값을 보는 것도 일종의 테스트입니다. 실제로, 출력값을 중간 중간에 찍는건 아주 좋은 테스트 방법이죠. 그리고, 알고리즘 문제를 풀 때도, 다양한 테케(테스트케이스)를 넣어보는 연습을 하고, 아주 극단적인 상황의 테스트 케이스를 넣어보곤 합니다. 프로그램을 작성할 때 Error를 검출하고, Bug를 막기 위해서 Test는 필수입니다. (실제로 Mapin도 최소한 아주 극단적인 입력값을 넣는 정도는 하고 프로그램을 완성합니다.) 실제로, 하지만, 프로젝트가 매우 크고 , TestCase가 엄청 많아진다면 "Test"하는 것 또한 쉽지않은 일이 되어버립니다. 따라서, TDD,B..
[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를 지..