프로그래밍 공부 노트

JavaScript setTimeout, setInterval, clearInterval 비교 setTimeout 메서드는 일정시간 후 함수를 실행한다. (1초후 출력) setTimeout(fn, delay) setInterval 메서드는 일정시간마다 함수를 실행한다.  (1초마다 출력) setInterval(fn, delay) 한가지 주의할점은  fn에 함수가 오지않으면 setInterval도 반복하지 않고 setTimeout과 같이 한번만 실행한다. clearInterval 메서드는 setInterval로 반복중인 작업을 중단시킨다. clearInterval(setInterval로 생성된 변수) clearInterval을 사용하기 위해서는 위의 비동기 함수들을 변수에 할당하고 해당 변수를 clearInterval의 매개변수로 대입헤 줘야한다.

@keyframes는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다. < html lang = "ko" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < style > #rectangle { width : 100px ; height : 100px ; background : red ; position : absolute ; animation : move 5s infinite ; //한줄에 속성을 여러개 작성할 수 있다. animation-direction : alternate ; } @keyframes move { from { top : 0px ; opacity : 0 ; } to { top : 200px ; opacity : 1 ; } } </ style > </ head > < body > < div id = "rectangle" ></ div > </ body > </ html > 해당코드를 복사하여 창에 띄어보면 빨간색 네모 상자가...

표를 만들때 table, th, tr, td 태그를 사용한다. table은 표를 만드는 태그 th는 표의 헤더 부분을 만드는 태그 tr은 표의 행을 만드는 태그 td는 표의 열을 만드는 태그 table과 td 태그에 border 속성을 사용하면 두 줄로 표시된다.  border-collapse 미적용 이때 border-collapse 속성을 사용하면 표의 바깥 테두리와 각 셀의 테두리가 떨어져 있는것을 그대로 둘지 혹은 두 테두리를 하나로 합칠 것인지 결정할 수 있다. border-collapse 적용

＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의미와 사용법 ＆nbsp;  " " : 공백(스페이스 한 칸)을 의미한다. 띄어쓰기를 할 때 키보드의 스페이스키를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입한다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없다. 공백을 아무리 많이 삽입해도 공백 1개로 간주된다. 그래서 공백을 여러 개 사용해야 할 때는 빈 칸을 &nbsp; 이렇게 표현해 준다. 그러면 브라우저가 &nbsp; 기호를 빈 칸으로 표시해 준다. ＆amp;  앰퍼샌드(&) 기호는 특수한 용도로 사용되고 있다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를, &amp; 이렇게 표기해 주어야 한다. ＆lt;  부등호(<) 괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호이다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없다. 물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있다. 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문이다. 제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때, <h1>제목이 <여기에> 표시됩니다</h1> 라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버린다. <여기에> 라는 태그는 없기에 이것은 오류를 발생한다. 따라서 < 기호를, &lt; 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현된다. ＆gt;  부등호(>) 위의 경우와 같다. 닫는 괄호 또는, "무엇에 비해 크다(Greater...

QA와 QC에 대해 정확히 알아보려한다. 대략적으로는 알았지만 둘의 단어의 차이점을 알아봤다. QA 와 QC 란? 우선, QA 란 Quality Assurance 의 약자로 품질 보증을 말한다. 일정 수준의 품질을 가질 수 있도록 제품 출시 이전에 각종 테스트 및 검수 작업을 하는 업무를 말한다. 비슷한 용어로 QC가 있으며 Quality Control 의 약자로 품질 관리를 말한다. QA / QC 차이 그렇다면 QA 와 QC 둘은 비슷한것같은데 무엇이 다를까? 내가 찾아본바로는  QA (Quality Assurance) : 제품개발단계 품질보증 활동 (고품질 제품 확보가 주요 목적) QC (Quality Control) : 제품양산단계 품질관리 (불량품 제거가 주요 목적) 간단히 말하면 QC는 결함을 발견하는것이고 QA는 결함을 예방한다라고 할 수 있다. 그렇다면 우리가 코딩해서 만드는 소프트웨어에서 품질이란 무엇일까? 궁금했다. Qulity 품질 소프트웨어 품질은 '제품 품질 + '프로세스 품질' 이다. 여기서 말한 제품 품질은 사용자가 소프트웨어 제품을 사용하는데 있어 직접적인 영향을 미치는 즉 소프트웨어 제품 자체가 가지고 있는 품질을 말한다. 이러한 제품 품질 향상을 위해 기본적인 활동인 소프트웨어 테스팅을 통해 확인한다. 그리고 프로세스 품질이란 소프트웨어 제품의 최종 품질에 영향을 줄 수 있는 소프트웨어 개발 과정에서 수행되는 작업(프로세스)의 품질을 말한다. 이러한 프로세스 품질 향상을 위한 활동으로 CMMI, SPICE 등을 통해 확인 할 수 있다. # SPICE  (Software Process Improvement and Capability Determination) - SW 프로세스 개선, 평가에 관한 국제 표준인 SPICE(ISO/IEC15504) # CMMI (Capability Maturity Model Integration) - 미 카네기멜론대학 소프트웨어 공학연구소와 산업계가 공동으로 개발, 보급하고 있는 소...

JavaScript에서 많이 사용되는 기본적인 연산자들에 대해 알아보려고 한다. 연산자를 학습할때 알아둬야할 용어들이 있다. 알아둬야할 용어: '단항', '이항', '피연산자' - 피연산자는 연산자가 연산을 수행하는 대상이다. 1 + 2 라는 연산이 있으면 피연산자는 1과 2이다. 피연산자는 인수라는 용어로 사용되기도 한다. - 피연산자가 한개인경우 단항 연산자, 두개인 경우 이항 연산자라고 부른다. 위에 1 + 2는 이항 연산자이다. 자바스크립트에서 주로 사용되는 수학 연산자는 아래와 같다. +    덧셈 연산자 -    뺄셈 연산자 *    곱셈 연산자 /    나눗셈 연산자 %  나머지 연산자 **   거듭제곱 연산자 각 수학 연산자가 자바스크립트에서 어떻게 사용되는지 알아보자 + (덧셈 연산자) 덧셈 연산자의 경우 숫자+숫자 연산시 숫자 결과값을 반환한다.  반면에 숫자+문자열인경우 두 숫자를 계산하지않고 결과값으로 문자열을 반환한다. 숫자형이 아닌 피연산자에 +를 붙여주면 숫자형으로 변화한다. ex) 5 + 5 // 결과 값 10 숫자끼리 연산하여 결과 값은 10이다. ex) 5 + '5' //  결과 값  '55' 숫자와 문자열을 연산하면 결과값은 문자열이다. 숫자 5와 문자열 5를 연산하면 결과값은 55이다. 문자열 5가 앞으로 와도 동일하게 동작한다. ex)  5 + +'5' //  결과 값  10 숫자로 변환이 가능한 값들에 + 연산자를 붙여주면 숫자로 반환되어 연산이 가능해진다. 문자열 '5' 앞에 +가 붙으면 숫자 5로 형변환이 된다. ex) 1 + '2' + 3 + '4'  //  결과 값  '1234' 숫자 1과 문자열 '2' 가 더해지면서 문자열이 '12'와 같은 문자열이 되었고 문자열에 숫자를 더해도 문자열로 되기때문에 문자열 '1234'가 된다. e...

Mac Terminal Command (터미널 명령어) .. -> 상위 디텍터리로 이동 cd -> 다른 디렉터리로 경로 변경 ls -> 특정 디렉터리의 목록을 나열 mkdir -> 폴더 생성 sudo -> 추가적인 보안 권한을 얻기 위해 수퍼유저로 인증 (관리자 권한) rm -> 삭제 pwd -> 현재 폴더 경로 curl -> 커맨드라인 환경에서 REST API (HTTP) 요청 보내기  curl 요청주소 -v 와같이 뒤에 -v옵션을 주면 요청에대한 응답결과의 상세 정보를 확인 할 수 있다. ex) curl localhost:3000 -v

React Hooks는 리액트에서 새로 도입된 기능으로 class형 컴포넌트가 아닌 함수형 컴포넌트에서도 상태를 관리할 수 있도록 업데이트 되었다. 뿐만아니라 렌더링 직후 작업을 하는 componentDidMount와 같은 기능을 함수형 컴포넌트에서도 사용할 수 있게 해주었다. 즉 기존에  클래스형 컴포넌트에서만 가능하던  생명주기를 hooks를 이용하여 함수형 컴포넌트에서도 사용할 수 있게 되었다. # useState useState을 사용하여 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 지닐 수 있게 되었다. import React , { useState } from 'react' const Counter = () => { const [ value , setValue ] = useState ( 0 ); const onPlusHandler = () => { setValue ( value + 1 ); } const onMinusHandler = () => { setValue ( value - 1 ); } return ( < div > < p > 카운터 < b > { value } </ b ></ p > < button onClick = { onPlusHandler } > plus </ button > < button onClick = { onMinusHandler } > minus </ button > </ div > ) } export default Counter useState을 사용하기 위해서는 useState를 import 해야 한다. 그리고 state 역할을 대신하는 다음의 코드를 보자. const [ ...