궁금한게 많은 코린이의 Developer 노트

배열의 반복 메서드에는 3가지가 있습니다. forEach, map, reduce...! 등이 존재합니다. 반복 메서드: 배열의 모든 요소를 순회하며 특정한 작업을 수행하거나 특정 조건을 만족하는 요소를 가져올 때 사용합니다. 반복 메서드 대부분은 첫번째 인수로 함수의 참조를 받는 고차 함수 입니다. 고차함수?: 다른 함수를 매개변수로 사용하여 어떤 데이터를 처리하거나, 결과로 함수를 반환 하는 함수입니다. 반복적으로 수행되는 어떤 연산을 추상화하기 위 한 것입니다. 전형적인 예시로는 배열과 함수를 인수로 취하는 map 입니다. map은 고차 함수를 사용하여 배열의 각 항목을 변환하고, 변환된 데이터로 새로운 배열을 반환합니다. javascript에서 흔히 볼 수 있는 다른 예로, forEach, filt..

리액트에서는 컴포넌트라는 구성단위로 프론트 개발을 하게 됩니다. 컴포넌트는 구성요소라는 뜻으로, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식입니다. 컴포넌트는 작게 쪼개서 작은 부분을 합쳐 하나의 컴포넌트로 만들 수 있습니다. 하나의 컴포넌트 안에서 쪼개고 쪼개기를 반복하면 하나의 작은 tree 구조처럼 될 수 있습니다. 큰 요소 안에 작은 요소가 존재함으로서 부모와 자식 관계가 형성될 수 있습니다. Props: 부모에게서 받아온 데이터 props는 property의 약자로, 부모에게서 받아온 데이터입니다. 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없습니다. 따라서 Props에 있는 데이터들은 수정이 불가능..

React를 공부하면서 Web API를 접하게 되었는데...대체 API가 뭐지? API에 대해 간단히 정리해 보려합니다. API란? API는 Application Programming interface 의 약자입니다. 단어를 하나씩 뜯어봅시다. Application은 그 어플을 말하는 것이 아닌 컴퓨터 처리에 대상이 되는 것들을 총칭하여 말한는 것입니다. 우리가 하는 PC게임, 평소에 하는 프로그래밍도 Application이라 불릴 수 있습니다. interface는 어떠한 리소스를 토대로 결과물을 만들거나 도출할 때 쉽게 하기 위해 도움을 주는 존재를 말합니다. --> 즉, 컴퓨터 처리에 있어서 프로그래밍을 쉽게 하게 해주는 인터페이스 (도움을 주는 존재) 라고 할 수 있습니다. 응용 프로그램에서 사용할..

SVG란? (벡터) 확장 가능한 벡터 그래픽. XML 코드 기반의 2차원 그래픽. (계산에 의해서 그려진다.) 아이콘, 이미지, 그래프, 사용자 인터페이스 등에 널리 쓰임. (간단한 도형, 곡선) DOM의 일부로서 각 개체별로 HTMl 엘리먼트가 추가됨. 벡터이기 때문에 이미지의 크기에 상관없이 선명하게 유지되고 모양이 많이 복잡하지 않은 경우 파일 사이즈도 작다. CSS 와 자바스크립트를 이용해서 조작이 가능하다. 크기가 큰 이미지 표현에 유리하다. 모양이 복잡하고 개체수가 많을 수록 성능이 떨어집니다. Canvas란? (비트맵) 비트맵 기반 그래픽. 이미지나 비디오의 픽셀 조작, 게임, 퍼포먼스가 중요한 이미지 조작 등에 쓰입니다. 단일 태그 로 표현합니다. (svg와는 다르게 까루끔하게 표현되어집니..

보호되어 있는 글입니다.

State는 - 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. - 개발자가 의도한 동작에 의해 변할 수 있다. - 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. - State값이 변경되면 React가 자동으로 계산하여 변경된 부분을 랜더링 한다. State의 값을 변경하기 위해서는 반드시 setState함수를 이용해야 한다. --> 반드시 setState 함수를 이용해 값을 변경한다. import { useState } from "react"; const App = () => { const [ value, setValue ] = useState(초기값); return ... } ⁑ 직접 state 값을 변경하여서는 안된다! 직접 변경하면 안되는 이유 : State 값을..

SetInterval 과 SetInterval이 헷갈릴 경우가 많을 것 같아 복기할 겸, 그 둘의 차이를 기록해놓으려 합니다 :) SetTimeOut() : 일정한 시간 후에 실행 . 사용 방법 setTimeOut(function(){실행할 코드...}, 기다리는 시간); setTimeOut(function(){ console.log('햄스터는 사랑입니다.') }, 1000); 1초 후에 해당 문장을 출력합니다. SetInterval() : 일정한 시간을 반복하여 실행. 사용 방법 setInterval(function(){실행할 코드...}, 기다리는 시간); setInterval(function(){ console.log('햄스터는 귀엽다'); }, 1000); 1초 마다 콘솔 창에 해당 문장을 실행시..

문자를 검사하고 싶을 때 사용하는 식입니다. 정규식 표현 /abc/ hamburger 라는 문자에 bur 이라는 단어가 있는지 검사하는 방법 /bur/.test('hamburger') 들어 있으면 - true 없으면 - false 글자가 있는지 없는지 확인가능하다. 영어 or 한글 모두 가능. /[a-zA-Z]/.test('good job') //true /[a-zA-Z]/.test('잘했어 good') //true /[a-zA-Z]/.test('안녕') //false /[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('레몬나르고빚갚으리오') //true \S : 특수문자 포함 문자 아무거나 1개 /\S/.test('abcde') //true ^d : d로 시작하냐? d$ : d로 끝나냐? /^d/.test('abcde..

바로 includes() 문법. 문자 검사하는 쉬운 방법 중에 includes() 문법이 있다. 해당 문자가 있는 경우 true를 반환하여 줍니다. 없는 문자의 경우 false를 반환시켜줌.

void뜻? --> '아무것도 없다' , '비어 있는' 아무것도 반환하지 않을 때 사용합니다. 아무것도 반환하지 않는 함수는 void 타입을 가지고, 'undefined' 값으로 처리됩니다. 하지만 undefined 값 외에 다른 타입의 값도 반환할 수도 있다. (반환 값이 이럴수도 있고~ 저럴 수도 있습니다~) Void의 2가지 형태 1. 반환 값이 존재하면 X. (undefined만 반환 가능.) 결과 값 타입이 명시적으로 설정되지 않은 함수 결과 값을 남기고 싶지 않은 함수( console.log로 콘솔 창에 출력만 해보고 싶은 경우 )에 사용한다고 한다. 2. return 에 어떤 값이 와도 상관은 없지만, 사용하지는 않음. 기본 사용방법 매개 변수의 우측에 ~땡땡 (설정 타입) 이라고 작성해주면..