배열은 자료형이 같은 원소들이 차례대로 번호표를 부여받아 저장되어 있기 때문에, 내부를 탐색하여 가공하는 과정에서는 반복문이 활용되기 마련이다. JavaScript에서는 이러한 배열을 쉽게 요리할 수 있도록 다양한 레시피가 준비되어 있다. 예제를 통해 확인해보자. 아래와 같이 numbers라는 배열이 하나 있다. const numbers = [37, 96, 41, 9, 15, 26, 1, 72]; 1. 100씩 곱하는 가장 원시적인 방법 => for Loop for ( let i = 0; i forEach const newNumbers = ..

React는 한 페이지를 구성하는 요소들을 잘게 쪼개어 모듈화하기 때문에, 레고처럼 조립과 분해로 유지보수가 쉬운 장점이 있다. 그렇기 때문에, 나의 웹사이트에서 "자주" 쓰이는 디자인을 .jsx로 한데 모아 정의해놓고, props를 이용하여 그때그때 표시되는 정보만 갈아끼우면 정말 최고의 효율성을 가져다준다. 여기서 "자주" 쓴다는 것은, CSS의 .클래스마냥 를 여기저기서 끌어다쓸 수 있다는 것인데, 한번 생각해보자. 우리가 항상 접하는 웹페이지는 게시판 목록이나 피드를 보면 알 수 있듯이, 틀은 다 똑같고 안에 내용만 바뀌는 형태가 압도적으로 많다. 그렇다면 각 글이나 사진이 같은 형태로 무수히 반복된다는 뜻이다. 이 많은 태그들을 일일이 수작업하지 않고, 그 전체 수만큼 알아서 반복문 돌려주는 것..

props는 properties의 약자다. HTML에서 태그에는 src="", alt="" 같은 속성이 있었다. 지금 React를 사용하는 우리는 HTML 태그를 JavaScript에서 그대로 다루기를 원하고, 그래서 존재하는 것이 JSX 파일이다. 그렇다면 JSX에서도 HTML 태그 내 속성을 이용할 수 있어야 하는데, 방법은 간단하다. 나만의 커스텀 태그가 라고 가정하면, Profile의 정의는 다음과 같다. // Profile.jsx import React from "react"; function Profile (props) { return ( {props.name} {props.tel} ) } export default Profile; 인자로 props라는 키워드를 사용하며, 이는 다음과 같이 앞..

Import와 Export는 파일의 독립적 관리를 통해 유지보수를 돕고, VanillaJS에서 뿐만 아니라 이후 node.js의 패키지 모듈 사용이나 ReactJS에서 빛을 발하게 된다. 1. 다른 .js 파일에서 하나의 함수 또는 하나의 상수/변수 불러오기 => default 키워드 이용. // pi.js const PI = 3.141592 export default PI; // index.js import pieeeee from "./pi"; console.log(pieeeee); default 키워드를 이용할 때는 어차피 하나의 데이터만 전송하기 때문에, import하는 곳에서는 가져온 데이터의 이름을 원본처럼 PI가 아니라 임의로 변경설정이 가능하다. 실제 활용할 때 이름만 맞춰주면 그만이다. 2..

const city = ["New York", "Seoul", "Los Angeles", "Busan", "Shanghai", "Paris"] function findCity(arr) { for ( let i=0 ; i { arr.forEach(element => { if (element === "Busan") { console.log("Gotcha!") } }) } const findCity3 = arr => { for (let element of arr) { if (element === "Busan") { console...

프로그램이 동작할 때 메모리를 크게 Code, Stack, Heap 3가지 구역으로 나눌 수 있다. 1단계 : Code 우리가 짠 코드가 실행되기 위해서는 기계가 알아들을 수 있는 머신코드가 필요하며, 이 변환을 "컴파일"이라고 한다. 머신코드를 메모리에 올리는 곳을 Code 영역이라고 한다. 2단계 : Stack 머신코드이든 우리가 영어로 작성한 코드이든 실행순서는 동일하다. Stack 영역에서는 우리가 작성한 코드를 기초로 변수들에게 자료형에 따라 메모리를 할당해준다. 즉 Stack은 머신코드가 메모리에 직접 접근하는 것이다. 3단계 : Heap Heap은 머신코드가 메모리에 직접 접근할 수 없는 부분이다. 우리가 작성한 코드대로 변수에 메모리를 할당하고 나서 메모리가 더 필요한 경우, 로직에 따라 ..