본문 바로가기

JS

(44)
5. React? React(React.js) 클라이언트 사이드의 JS코드의 작성을 도와 최신 반응형 사용자 인터페이스를 쉽게 구현할 수 있다. * 왜 React가 추가적으로 더 필요할까? JS는 모든 단계를 작성해야 한다.(명령형 접근 방식) React는 응용 프로그램을 작은 빌딩 블록과 작은 컴포턴트로 분할하는 것으로 모든 빌딩블록과 컴포넌트는 정확한 테스크를 가진다.(선언형 프로그래밍) 즉, 유지보수나 관리가 용이하고 재사용이 가능하여 반복을 피할 수 있으며, 우려사항을 분리할 수 있어 작고 관리 가능한 단위로 유지할 수 있다. 그러나, React도 많은 JavaScript의 라이브러리 중 하나일 뿐이다. React는 컴포넌트 기반의 UI라이브러리로 컴포넌트에 집중하고 다른 기능은 많지 않다. 즉, third par..
4. Node.js Node.js JavaScript를 실행할 수 있는 환경(runtime) JavaScript는 주로 브라우저(클라이언트) 측에서 실행되는 스크립트 언어로 사용되었으며 이는 브라우저의 JavaScript 엔진에 의해 해석되고 실행되었다. 그렇기 때문에 서버 측에서는 JavaScript를 사용하기 위해선 JavaScript 엔진을 내장한 소프트웨어나 플러그인을 필요로 했다.(ex: Chrome-V8, Firefox-SpiderMonkey, Safari-Nitro ...) 하지만, 이러한 방식은 제한적이기 때문에 JavaScript 엔진이 서버 측에서 동작하는 독립적인 런타임 환경이 필요하였고 이를 실현한 것이 Node.js이다. Node.js는 Chrome의 V8 엔진을 기반으로 개발된 것으로 JavaScr..
20. 동기와 비동기, Promise, async&await 동기와 비동기? (Thread) 작업1 → 작업2 → 작업3 위와 같은 작업이 있을 때 순서대로 작업이 처리되는 것을 동기라고 하며 앞의 작업이 진행 중일 때는 뒤의 작업을 수행할 수 없다. JavaScript에서 기본적으로 동작하는 것은 동기이다. 이는 직관적이고 순차적이기 때문에 코드의 이해와 디버깅이 상대적으로 쉽다. 하지만, 앞 작업이 길어질 경우 뒷 작업도 늦어지기 때문에 브라우저나 앱의 응답 시간이 길어지는 단점이 있다. 이를 해결하기 위해 JavaScript에는 비동기 패턴을 제공한다. 비동기 패턴은 콜백함수, Promise, async/await 등을 사용하여 처리하며 작업이 완료되면 특정 콜백함수를 전달한다면 해당 작업이 끝났음을 알 수 있다. 비동기 패턴을 이용하면 시간이 오래 걸리는 ..
19. Truthy와 Falsy, 삼항연산자, 단락회로 평가, 조건문 응용 1. Truthy와 Falsy let a = ""; if (a) { console.log("TRUE"); } else { console.log("FALSE"); } // 결과: FALSE //--------------------- let a = "string"; if (a) { console.log("TRUE"); } else { console.log("FALSE"); } // 결과: TRUE 변수 a에 문자열 말고 객체, 빈 배열, 빈객체, 숫자형, infity 등이 들어가도 true로 반환이 된다. 이처럼 JS에서는 조건식에서 실제로 true가 아님에도 '참(ture)'같은 값으로 분류하는 truty가 있다. 반면 null, undefined, 0, -0, NaN, ""(빈문자열)의 경우에는 fals..
18. 콜백함수 콜백함수(Callback function) 다른 함수에 인자로 전달되는 함수로서 특정 이벤트나 조건이 발생했을 때 호출되는 함수. JS에서 함수는 객체 자료형 중 하나로서 다른 변수에 할당하거나 다른 함수의 인자로 전달할 수 있다.(일급 객체) 콜백함수의 사용 예시로는 비동기처리가 가장 흔한 경우이다. * 일급 객체 더보기 일급 객체(First-class object)는 프로그래밍 언어에서 다음과 같은 특성을 가진 객체이다. 변수에 할당할 수 있다: 함수를 변수에 할당하여 저장할 수 있다. 함수의 인자로 전달할 수 있다: 함수를 다른 함수의 인자로 전달할 수 있다. 함수의 반환값으로 사용할 수 있다: 함수가 다른 함수의 반환값으로 사용될 수 있다. 동적으로 프로퍼티를 할당할 수 있다: 함수에 동적으로 프..
17. 배열 내장 함수 1. forEach const arr = [1,2,3,4]; arr.forEach((elm) => console.log(elm)); // 결과 : 1, 2, 3, 4 2. map 원본 배열의 모든 요소를 순회하며 리턴된 값들 만을 따로 반환 const arr = [1,2,3,4]; const newArr = arr.map((elm)=>{ return elm * 2 }); console.log(newArr); // 결과: 2, 4, 6, 8 3. includes 배열에서 전달받은 인자와 값이 일치하는지 확인(===과 동일) const arr = [1,2,3,4]; let number = 3; let number2 = "3"; console.log(arr.includes(number)); // 결과: tru..
3. React dev - Tic Tac Toe 게임 만들기 목차 1. Setup: 튜토리얼을 따라가기 위한 시작점 제공 2. Overview: React 기초인 컴포넌트, props, 상태(state)를 가르쳐 줌 3. Completing: React 개발에서 가장 일반적인 기술을 가르쳐 줌 4. Adding Time Travel: React만의 독특한 강점을 깊이 이해할 수 있도록 도와줌 1. Setup https://codesandbox.io/s/ljg0t8?file=/App.js&utm_medium=sandpack loving-fast-ljg0t8 - CodeSandbox loving-fast-ljg0t8 using react, react-dom, react-scripts codesandbox.io 2. Overview CodeSandBox에서는 주요 세 ..
2. React Quick Start - React.dev 정리2 5-1. 이벤트에 반응하기 컴포넌트 안에 EventHandler 함수를 선언하여 이벤트에 대하여 응답할 수 있다. export default function MyButton(){ function handleClick() { alert('클릭되었음..!'); } return ( 클릭하세요 ); } 이 부분을 본다면, HTML에서 onClick 이벤트를 줄 때와 같이 onClick={handleClick()} 괄호를 사용하지 않고 EventHandler 함수 자체를 전달하였다. 만약, onClick={handleClick()} 과 같이 괄호()를 사용하게 된다면, 버튼을 클릭을 했을 때가 아니라, 화면이 로드되었을 때 바로 alert창이 즉시실행되어 버린다. 5-2. 화면을 업데이트하기 버튼을 클릭한 횟수를..