주니어개발자성공하자

1. [ ] . reduce(( 누적값, 현잿값, 인덱스, 요소 ) => { return 결과 }, 초깃값 ) reduce는 이전값이 아닌 누적값을 사용하는 것을 주의해야합니다. 기본적인 사용법은 아래와 같습니다. oneTwoThree=[1,2,3] result = oneTwoThree.reduce((acc, cur, i) => { console.log(acc, cur, i); return acc + cur; }, 0); // 0 1 0 // 1 2 1 // 3 3 2 result; // 6 acc(누적값) 이 초기값인 0부터 시작해서 return 하는대로 누적되는 것을 볼 수 있습니다. 초깃값을 적어주지 않으면 자동으로 초기값이 0번째 인덱스의 값이 됩니다. oneTwoThree=[1,2,3] resu..

map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만 callback에서 return 되는 값을 배열로 만들어냅니다. 1. [ ] . map ( callback ) const arr = [0,1,2,3]; let squaredArr = arr.map(function(element){ return element * element; }); // 혹은 arrow 함수 가능 squaredArr = arr.map(element => element * element); console.log(squaredArr); // [ 0, 1, 4, 9 ] 위 코드를 보면 배열속 요소들이 제곱되어 새로운 배열이 생성되는 모습입니다. 2. callback 함수 인자 cons..

forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, 증감을 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다. 1. forEach(callback) 기본적인 사용법은 아래와 같습니다. const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){ console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => console.log(element)); arr 객체의 요소들이 callback 함수를 통해 순서대로 호출되는 모습입니다. 2. callback 함수 ..

클로저란? 클로저는 내부 함수가 정의 될 때 외부 함수의 환경을 기억하고 있는 내부 함수를 말합니다. 외부 함수안에서 선언된 내부함수는 그 외부 함수의 지역변수나 함수에 접근하여 사용 할 수 있습니다. 클로저 예시 function outter() { // 외부 함수 var data = 1; function inner() { // 내부 함수 return data; } return inner(); } outter 함수 안에는 지역변수 data와 내부 함수 inner가 선언 되어있고 inner 함수는 지역변수 data를 반환하고 있습니다. 클로저 함수 호출 var func = outter(); console.log(func); outter 함수의 반환 값은 inner 함수입니다. inner 함수를 호출해 보았..

의미 javascript에서 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 하지만 모두 할당하는 것이 아닌 var로 선언한 변수만 호이스팅시 undefined로 초기화합니다 예제 함수의 코드를 실행하기전에 함수 선언에 대한 메모리부터 할당합니다 덕분에 함수를 호출하는 코드를 함수선언보다 앞서 배치할수있습니다. 예를 들어 function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); /* 결과: "제 고양이의 이름은 호랑이입니다" */ 위의 코드 조각이 일반적이라면 함수 호출을 먼저했을때를 보겠습니다. catName("클로이"); function catName(nam..

정적인 페이지는 웹서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순히 기업을 소개하는 페이지라면, 유저와 상호작용은 중요하지 않습니다. 이런 경우 HTML과 CSS의 구성만으로도 충분히 웹 페이지를 작성할 수 있습니다. 반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리 해주어야 하는 페이지입니다. 즉 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 받게 됩니다. 리액트의 특징 Component 단위 작성 컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 하나의 블록으로 만들어 블록들을 조립하여 하나의 완성품으로 만드는 것과 같습니다. 여러 곳의 같은 디자인의 버튼이 필요하다면 하나의 버튼 컴포넌트를 만들어 여러 곳에서 가져다 사..

전 게시물인 useMemo와 비슷한 Hook입니다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 재사용 하고 싶을 때 사용합니다. 메모이제이션 const memoizedCallback = useCallback(함수, 배열); 첫번째 인자는 함수를 두번째 인자는 넘어온 배열의 값이 변경 될 때까지 저장하여 재사용 할 수 있다. 예를 들어 컴포넌트 함수안에 함수가 선언되어 있다면 이 함수는 컴포넌트가 랜더링 될 때 마다 새로운 함수가 생성된다. const add = () => x + y; 하지만 useCallback을 사용하면 해당 컴포넌트가 랜더링 되더라도 의존 배열이 바뀌지 않는한 기존 함수를 계속 반환합니다. x와 y 값이 바뀌면 새로운 함수가 생성되어..

성능 최적화를 하는 방법은 여러개가 있다 그 중에서 useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자. Memoization 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다 적절히 사용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. 아래 컴포넌트는 인자로 넘어온 x와 y값을 compute함수에 넘겨서 z값을 구한 다음 z를 출력해준다. function MyComponent({ x, y }) { const z = compute(x, y); return {z}; } 만약에, compute 함수가 매우 복잡한 연산을 수행하기 때문에 결과값을 리턴하는데 시간이 오래걸리게 된다면 어떻게..

useEffect라는 Hook을 사용하여 컴포넌트가 마운트되거나 언마운트 됐을때, 또 업데이트가 되었을때 특정 작업을 처리하는 방법에 대해 알아보자 마운트 / 언마운트 useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps를 넣는다. 만약 deps를 위와같이 비워두게 되면 처음 마운트 됐을때만 호출된다. useEffect에서는 함수를 반환 할 수 있는데 이름 cleanup 함수라고 부른다. 후처리라고 생각하면 편하다. deps 에 특정 값 넣기 useEffect(() => { cons..