분류 전체보기 (70) 썸네일형 리스트형 [JavaScript] foreach, for in, for of 반복문 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 1. Array.prototype.forEach() forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 오직 Array 타입에서만 사용 가능하지만 ES6부터는 Map, Set 같은 Collection에서도 사용이 가능하다. var ar = [52, 273, 103, 32]; ar.forEach((value) => { console.log(value); }) //결과 : 52, 273, 103, 32 2. for...in for in은 모든 객체를 반복하여 사용가능하다. Object에 있는 항목들.. [JavaScript] sort 메서드 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] JavaScript의 내장 함수 중 sort() 메서드가 존재한다. 해당 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 새로운 배열이 생성되는 것이 아니라, 기존의 배열에 정렬되는 것이다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트에 따르기 때문에 숫자를 정렬한다고 해서 숫자가 오름차순으로 정렬되는것이 아니라는 것에 주목하자. 다음의 예제는 문자열 배열을 sort()를 통해 정렬했을 때 결과다. var ar = ['Orange', 'Banana', 'Apple']; ar.sort(); console.log(ar); //.. [React] Redux 개념 이해 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] - Redux? Redux는 state를 효율적으로 관리해주는 React의 Library로, 각 Component별 state를 분리시켜 효율적으로 작업 및 관리할 수 있다. 이전 Project까진 Main Component에 state를 생성하여 자식 Component와 연결한 후, Component별로 전달하고 전달하여 사용하였다. 그러나 Redux를 사용하면 연결된 Component사이에서 옮길필요없이 state를 전달 할 수 있다. 아래는 Redux를 사용하지 않고 state를 이용하는 그림이다. 위의 방식은 처음 사용했던 state를 통해.. [JavaScript] Promise - 비동기처리를 동기방식으로 처리 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] JavaScript는 대부분 비동기 방식으로, 처리 요청을 받으면 알려만 주고 바로 다음으로 넘어간다. 주로 통신 쪽 처리할 때 많이 겪는 문제가 있는데, 서버 쪽으로 요청을 보내고 결과 값을 받아온 후 화면에 출력을 해야 하는 작업이 있다. 하지만, 비동기 처리방식 때문에 처리 결과가 오기도 전에 화면에 출력을 해버리기 때문에 빈 화면을 보게 되는 경우가 발생한다. 때문에 Callback 방식으로 어떤 작업을 요청하면 함수에 등록하고, 작업이 수행된 결과를 나중에 Callback 함수를 통해 알려주는 구조가 흔하다. 문제는 Callback 함수가.. [React] Route를 이용한 Component 전환 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번엔 react-router-dom Module를 이용하여 Component를 전환하는 방식에 대해서 알아보자. 시작에 앞서 다음의 Module을 설치해주자. react-router-dom query-string react-router-dom에서 실습할 함수는 3가지가 존재한다. BrowserRouter Route Link BrowserRouter 지정한 Component를 Main Router로 지정해준다. 해당 Component에서 다른 Component들을 전환시켜줄 수 있게 된다. 우선 Root.js를 생성해서 다음과 같이 입력한다. im.. [React] Sass[scss] 디자인 적용시키기 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 지금까지 React 프로젝트를 보면 ~.css를 통해서 디자인을 적용하였다. 이번엔 Sass 방식을 이용한 CSS인 ~.scss를 적용시켜보도록 하자. Sass[scss] Sass는 CSS의 복잡한 구조를, 좀 더 효율적으로 작성할 수 있게 도와준다. 변수를 사용한다거나 제어문을 사용한다거나 등등... 함수를 이용함으로써 반복되는 코드를 재사용할 수 있을 뿐만 아니라, 필요한 부분은 변수를 통해 별도로 호출하여 사용할 수 있다. 일단 중요한 건 scss를 직접 만드는 것이 아니라, 어떻게 사용되고 React에선 어떻게 적용시키는지에 대해 초점을 맞.. [React] JSX에 map을 이용하여 값 반복 출력 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] React의 JSX 내부에선 for 구문을 이용할 수 없었다. 그렇다면 반복적으로 처리해야 하는 태그는 일일이 다 쳐줘야 하는 것일까? 여기서 사용하는 함수인 map이 존재한다. 문제 동물 3마리를 담는 배열 arr이 존재한다고 하자. 이 동물들을 웹에서 항목 표시()로 출력하고자 한다. 단, 태그를 여러 번 입력하는 것이 아닌 반복 처리를 하여 출력시켜야 한다. 사용하는 방법은 간단하다. 배열.map( (value, key) => 처리문 ) let arr = ['호랑이', '코끼리', '독수리'] let brr = arr.map((value, k.. [React] props와 state를 활용한 예제 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 저번 포스팅에서 설명한 props와 state를 활용해 간단한 예제를 만들어보도록 하자. 문제 App Component엔 동물 3마리를 담을 수 있는 배열이 존재하며, 랜덤으로 값을 저장할 수 있는 변수가 존재한다고 하자. Bpp Component는 App로부터 동물 배열을 받고, 버튼을 생성하여 누르면 랜덤 값을 App로부터 지속적으로 받아 동물 배열의 Index를 바꿔가며 실시간으로 View에 동물 이름을 출력한다. 그러면 설계를 다음과 같이 할 수 있을것이다. 동물을 담을 수 있는 배열은 변동이 없으므로 고정으로 놓고 사용해도 문제가 없다. .. 이전 1 ··· 3 4 5 6 7 8 9 다음
