sy의 코딩 개발일지

const authrUnique = blogs && (blogs.filter((character, idx, arr) => { return arr.findIndex(item => item.author === character.author) === idx })); 이 코드가 어찌나 어렵던지 끝까지 이해할려고 노력했다. 이해한게 아까우니 기록! 이 배열을 filter 메소드를 이용하여 중복된 작성자 이름을 걸러내는 작업을 진행한다. filter 메소드는 배열 내의 모든 요소에 대해 주어진 함수를 실행하고, 함수의 결과값이 true인 요소만을 새로운 배열로 반환한다. 이 때, filter 메소드에 전달되는 함수의 매개변수로는 세 가지가 있다. 첫 번째 매개변수는 배열의 각 요소이며, 두 번째 매개변수는 현재 요..

Cloud Computing & Deployment 배포를 위한 클라우드 서비스 Amazon Web Service(이하 AWS)를 이용해서 웹 애플리케이션을 배포 신속한 인프라 구축 유연한 인프라 관리 예상치 못한 트래픽 폭주 대응 손쉬운 글로벌 서비스 강력한 보안과 장애 없는 서비스 합리적인 요금제 기존 서버의 방식 서버실과 같은 곳에 컴퓨터 배치 => 서버가 요청에 대한 수용 능력 한계 같은 공간에 더 많은 컴퓨터를 추가 혹은 성능을 높임 문제점 첫번째 주기적인 관리 필요 두번째 공간 한계 => 데이터 센터 등작 물리적인 컴퓨터 대여 즉 서버의 자원과 공간, 및 네트워크 환경을 제공(온프레미스)을 빌려 사용하는 클라우드 컴퓨팅이 시작 현대의 클라우드 컴퓨팅(데이터 센터와 비슷한 역활) 가상 컴퓨터를 ..

https://section.cafe.naver.com/ca-fe/ 네이버 카페 section.cafe.naver.com 1 . Reduce unused JavaScript(사용하지 않는 JavaScript 코드를 줄이는 것) 웹 성능 개선을 위해 가장 일반적으로 권장되는 방법 중 하나 Code splitting(코드분할) 웹 애플리케이션의 JavaScript를 분할하여 페이지의 초기 로드 시간을 줄인다. 페이지가 렌더링될 때 필요하지 않은 JavaScript는 불러오지 않기 때문에 불필요한 리소스 사용을 방지할 수 있다. Tree shaking: 트리 쉐이킹은 웹 애플리케이션에서 사용하지 않는 코드를 자동으로 제거한다. 이를 통해 불필요한 코드가 번들되지 않도록 하여, JavaScript 파일의 크기를..

최적화 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정. 주어진 조건으로 최대 효율을 낼 수 있다. 컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미 웹 개발에서의 최적화는 바로 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것 최적화의 필요성 및 효과 이탈률 감소 로딩이 오래 걸리면 이탈을 하게 된다. 전환율 증가 이탈률 감소 -> 전환율 증가 전환율이란, 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미 수익 증대 이탈률 감소, 전환율 증가 -> 수익 증대 사용자 경험(UX) 향상 페이지 로딩이 빠를수록 UX는 향상 HTML,..

describe("Discover", function() { let expect = chai.expect; // 함수가 없는 테스트는 "pending"이라는 표시가 뜨며 실행되지 않습니다. // 아래 테스트를 작성하고 테스트가 통과하도록 만드십시오. it("has a prefix of 6011 and a length of 16", function(){ expect(detectNetwork("6011123456789012")).to.equal("Discover"); }); it("has a prefix of 6011 and a length of 19", function(){ expect(detectNetwork("6011123456789012345")).to.equal("Discover"); }); it(..

TDD란? 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미 TDD의 개발 주기 Write Failing Test: 실패하는 테스트 코드를 먼저 작성 Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성 Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행 TDD를 사용하는 이유 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있기 때문 테스트 코드를 작성 describe, it, assert, expect 프레임 워크에서 제공하는 테스트 작성을 위한 도구 ex) mocha라는 테스트 프레임워크와 chai라는 라이브러리를 사용 React 환경에서 테스트 React에..

Rest API vs GraphQL API Rest API 캐시가 지원 HTTP 캐싱을 사용하여 응답을 저장,캐시를 지울땐 수동적으로 해야한다. 이미 정보가 정해져 있어서 추가적으로 정보가 필요하면 서버쪽에서 만들어줘야한다. GraphQL 캐시 지원 X ,아폴로와 같은 라이브러리를 사용 클라이언트단에서 추가적으로 정보 수정을 하면 된다. github에서 토큰을 받아오기 보안을 위해서 env를 전역파일로 저장한다. REACT_APP_GITHUB_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx App.js import "./App.css"; import { graphql } from "@octokit/graphql"; import { useEffect, useState } from..

GraphQL(Graph + Query Language) Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어 API를 위한 쿼리 언어 GraphQL은 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점 그래프에서 트리 추출하는 방법 쿼리 실행 이방식으로 서버에 요청을 보낸다. query { 책(ISBN이 "9780674430006") { 책 이름 저자 { 이름 } } } 요청 해결 후 돌아온 쿼리 { 책 : { 책 이름 : "GraphQL", 저자 : [ { 이름 : "김코딩"}, { 이름 : "박해커"}, ] } } GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다. 응답을 ..