전체 글 (127) 썸네일형 리스트형 Object.fromEntries() fromEntries()는 배열을 객체로 묶어주는 메소드 입니다. const entries = new Map([ ['foo', 'bar'], ['baz', 42] ]); const obj = Object.fromEntries(entries); console.log(obj); // expected output: Object { foo: "bar", baz: 42 } 객체를 배열로 만들어주는 entries()의 반대입니다. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries Object.fromEntries() - JavaScript | MDN Object.fromEntries().. 추상화(abstraction) 추상화(abstraction)란? 복잡한 것들을 목적에 맞게 단순화 하는 것 추상화를 알아보기 전에, 추상이라는 단어의 뜻을 알아봅시다. 추상抽象(뽑을 추, 코끼리 상) 추상이란 여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용입니다. 복잡한 구체적인 정보들은 숨기고 꼭 필요한 핵심만 뽑아내서 표현하는 방식을 추상화라고 합니다. 생각해보면, 우리의 일상생활에 많은 것들이 추상화의 결과물입니다. 많은 글들을 함축적인 의미로 나타낸 책의 제목이나, 몇 시간 동안 펼쳐지는 내용을 짧게 요약한 영화의 줄거리도 결국에는 목적에 맞게 꼭 필요한 핵심만 표현하는 추상화라고 할 수 있습니다. 이런 의미에서 보면, 복잡한 것들을 목적에 맞게 단순화 하는 것도 추상화라고 할 수 있습니다. 어.. 코드스테이츠 소프트웨어 엔지니어링 1차 HA 후기 오늘은 대망의 HA였다. 몇일간 리액트를 배우느라 정신이 없어서 4주차 후기도 못썼는데 정신차려보니 HA였다. 리액트가 나온다는 말에 어제 3시까지 정말 비슷하게 예제 구현을 해서 시험 때 리액트를 빨리 끝내고 코플릿에 집중해야지 라고 생각했는데 내가 써놓은 코드가 아니기도 하고 코드를 짜는데에는 여러가지 방법이 있다보니 내가 생각했던 것보다 훨씬 어려웠고 다 구현해내지 못했다. 믿었던 리액트의 결과가 아쉽고 아무리 해도 나아지지않는 테스트 결과에 지치다보니 오후에 코플릿 문제에 집중하지 못했다. 평소대로 구글링을 하면서 열심히 풀면 좀 더 풀 수 있었을 수도 있지만, 리액트도 잘 못하는데 코플릿을 구글찬스로 이렇게 확실히 알지 못하면서 엉겹결에 섹션 2로 넘어갈까봐 더 의지가 생기지 않았다. 페어프로그.. 배열 내장 고차 함수 내장 고차함수란? 자바스크립트에는 기본적으로 내장된 고차함수가 있습니다. 그중에서 배열 메소드들 중 일부가 대표적인 고차함수에 해당합니다. arr.forEach() // 파라미터로 콜백 함수를 받아 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드 //! forEach는 map() 메서드와 비슷하지만 따로 return하는 값이 없다 //! 즉, callback 함수에 의해서 어떤 결과물을 내놓고 싶으면 함수 밖의 변수를 사용해야 한다 arr.find() // 만든 함수의 식이 트루이면 가장 '첫번째' 조건을 출력 arr.filter() // 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내 새로운 배열을 만들어주는 메소드 arr.map() // 배열안에 들어있는 모든 요소들을 내가 전달해준 함수.. 일급 객체(First-class citizen)와 고차함수(Higher-order function) 일급 객체(First-class citizen) 자바스크립트에는 특별한 대우를 받는 일급 객체가 있다. 대표적인 일급 객체 중 하나가 함수이다. 자바스크립트에서 함수는 아래와 같이 특별하게 취급된다. 변수에 할당(assignment) 할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다. 1. 변수에 변수를 할당하는 경우 /* 아래는 변수 square에 함수를 할당하는 함수 표현식이다. * 자바스크립트에서 함수는 일급 객체이기.. React Router SPA는 하나의 페이지를 가지고 있지만, 사실 한 종류의 화면만 사용하지 않습니다. 트위터와 같은 SPA를 예로 들자면, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지, 검색 페이지 등의 화면이 있습니다. 또한 이 화면에 따라 "주소"도 달라집니다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."는 의미로 라우팅(Routing) 이라고 합니다. 생활코딩에서는 라우팅, 라우터를 사용자가 어떤 주소로 들어왔을 때, 그 주소에 해당하는 적당한 페이지를 사용자에게 보내주는 것이라고 말했습니다. 하지만, React 자체에 이 기능이 내장되어 있지는 않기 때문에 라이브러리를 사용해야 합니다. 가장 많이 사용하는 라이브러리는 React Router입니다. React Route.. React SPA SPA란? Single-Page Application으로 즉 한 페이지에 담겨있는 앱입니다. SPA는 전통적인 웹사이트와 다르게 Menu와 Footer와 같이 페이지 전환 후에 중복되는 부분은 새로 불러오지 않습니다. SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 어플리케이션이나 웹 사이트를 말합니다. 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 .. 함수 선언식과 함수 표현식의 차이 // 함수 선언식 function funcDeclared() { return 'this is a function declaration'; } // 함수 표현식 let funcExpressed = function() { return 'this is a function expression'; } 함수 선언식은 function으로 시작한다. 선언식이 let으로 선언해야될 것 같은데 그게 아니다. 반대라고 생각하면 헷갈리지 않을 것 같다. // 함수 선언식 function thisIsDeclared(a, b) { let sum = a + b return sum } // 함수 표현식 let thisIsExpression(word1, word2) { let addWords = word1 + word2 return .. 이전 1 ··· 8 9 10 11 12 13 14 ··· 16 다음
