JS

구조 분해 할당(Destructuring Assignment)

구조 분해 할당 배열의 값이나 객체의 속성을 별개의 변수로 풀 수 있게 해주는 자바스크립트 표현식 let a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: Array [30,40,50] // 출처 : developer.mozilla.org - destructuring assignment 😶rest? rest 엘리먼트는 배열의 맨 뒤에 쓸 수 있는데, ...rest 라고 쓰면 그 나머지 값이 rest에 담기게 된다. cons..

React Component, State, Props

React - Component, Props, State 😎 Component 재사용성 클래스형 컴포넌트, 함수형 컴포넌트 element를 반환한다. 다른 컴포넌트에 있으면 변수 이름이 같아도 다른 변수 Props Properties를 줄인 말, 컴포넌트 속성을 설정할 때 사용하는 요소 Component에서 component로 전달하는 데이터 부모 컴포넌트에서 자식 컴포넌트로 전달된다. (부모 컴포넌트에서 설정) 리액트에선 단방향성(부모→자식) 실무에선 키값과 밸류를 같게 쓴다. ex. props = {handleChangeWriter: handleChangeWriter} defaultProps로 props값을 따로 지정하지 않았을 때의 기본값을 설정할 수 있다. State 컴포넌트 내부의 동적인 데이터..

Static Routing vs Dynamic Routing (정적 라우팅 vs 동적 라우팅)

Routing, route Routing - 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정. Route - 라우트는 그 경로를 뜻한다. Static Routing vs Dynamic Routing Static Routing(정적 라우팅) Dynamic Routing(동적 라우팅) 경로 선택 미리 구성된 단일 경로 사용 여러 개의 경로 제공, RIP, IGRP 같은 벡터 프로토콜 or OSFP, IS-IS 같은 링크 상태 프로토콜 알고리즘을 사용하여 경로 설정 경로 업데이트 수동으로 경로 재구성해줘야 갱신됨 알고리즘을 사용, 자동으로 업데이트 라우팅 테이블 각 대상에 대해 하나의 항목만 포함하는 작은 라우팅 테이블 전체 라우팅 테이블을 전송해야 함 네트워크 부하 컴퓨팅 성능, 대..

알고리즘 - filter, indexOf, isNaN

filter filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. (MDN) f arr.filter(callback,(element[, index[, array]])[, thisArg]) //배열 시험할 함수, 현재 요소, 현재 요소 인덱스, 호출한 배열, callback실행시 this로 사용하는 값 thisArg가 이해가 안됨 만약 테스트를 통과한 요소가 없으면 빈 배열을 반환한다. 호출되는 배열을 변화시키지 않고, 테스트를 통과하는 요소만 모아 새로운 배열로 반환한다. //잘못된 코드 function solution(seoul) { var answer = ''; let kim = seoul.filter(word => word.includes("김서방")..

알고리즘 - reduce, 삼항연산자

짝수와 홀수 //내가 한 방법 if(num%2 === 0) return "Even"; else return "Odd"; //다른 방법 return num % 2 ? "Odd" : "Even"; reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. const array = [1, 2, 3, 4]; const init = 0; const sum = array.reduce(previous, current) => previous + current, init); console.log(sum);// 0 + 1 + 2 + 3 + 4 = 10​ MDN 예제코드 curr이 뭔가 했는데 currentValue였다. arr.reduce(..

ColorHighlight, emotion 폰트 추가

ColorHighlight, 색이 연할수록 구분하기도 어렵고 뽑기도 어려운데 없는 것보단 훨씬 편하다~!!! 그리고 텍스트 배경색으로 보여주는게 직관적이라 좋음 npm install --save @emotion/css styles.js 에 import하고, injectGlobal 안에 작성하니 폰트 적용됨!!!!!! 🍎 나중에 알려준다고 다른 거 먼저 하라고 하셨지만 폰트를 너무 적용시켜보고 싶었어욧,,, 🥳

220516 프론트엔드 부트캠프 8일차 : container, presenter

더보기 부트캠프로만 따지면 6일째~ 자리가 바꼈다! PF 중 왼쪽에 계시던 분은 가셨다... 🥲 오늘은 실무에서 파일을 어떻게 나누는지에 대해 배웠다. 보통 코드는 100줄 안 넘게 작성하고, 70줄 정도가 적당하다고 한다. 2주차 커리큘럼 1. 실무적인 폴더구조 -> container, presenter 2. 컴포넌트 분리 및 데이터 전달 -> props 3. 목록 형태의 데이터 -> Map, Filter 4. 안전한 코드 -> Typescript 5. 규칙을 정하고 협업하기 -> Eslint, Prettier, Husky Eslint가 맞는지 모르겠다...? 오타난 건지 원래 이름이 저건지?! 오타 아니군. 린트라고 부른답니다. 이름은 허스키가 마음에 든다 😙 freeboard 리뷰 - 동적 라우팅,..

알고리즘 - 배열, 문자열

입력받은 문자열을 숫자로 바꾸기 function strToInt(str) { let answer = Number(str); retrun answer; } 라고 풀었는데, (사실 다른 건 생각도 안 났어...) function strToInt(str){ return str/1 } // 아래는 테스트로 출력해 보기 위한 코드입니다. console.log(strToInt("-1234")); 다른 사람이 이렇게 푼 게 있었다. 이게 대체 뭘까...? str을 1로 나누면 자동으로 형변환이 되는 건가? 동적 언어의 핵심을 찌른다는 댓글이랑 사칙연산되면서 문자가 자동으로 파싱된다는 댓글이 있다. #동적언어 #파싱 배열에서 원소 제거하기 1. 배열 전체 길이 0으로 주기 -> 길이 0의 빈 배열이 된다. array...

try ... catch (트라이 캐치)

try … catch 예외처리 구문 예외가 발생했을 때 응답을 지정한다. try { //실행할 구문// } catch (//예외 발생 경우//) { //예외 발생시 실행할 구문// } 뒤에 finally { }를 붙일 수 있는데, 이 경우엔 예외 발생여부 상관없이 항상 실행된다. try 문은 중첩이 가능하다. try { //실행// } catch(error) { alert(error) } 이런식으로 쓰고 있습니다... c++ 배울 때는 거의 안 쓰던 문법이었던 것 같은데, 여기서는 또 다른가보다. 아니면 썼는데 나만 안 썼던 건지..?! 내 경우엔 c++ 배울 때 에러가 정말 error의 이름을 달고 나온다기보단 컴파일 단계에서 삑나거나 런타임 오류(^_T)가 났는데, 보통 원하는 값을 찾을 수 없을 때..

async/await. 동기함수 비동기함수

동기식 처리 모델(Synchronous processing model) 직렬방식. 받고 보내주고 쓰는 일을 요청했다면, 그 순서에 따라서 작업이 수행된다. 그 작업이 수행되는 도중엔 다른 작업이 실행되지 않고, 한 작업이 끝나면 그 다음 작업이 시작된다. 예를 들어 페이지를 로드할 때, 서버에서 데이터를 가져오기 전까진 다른 작업은 하지 않는다. 비동기식 처리 모델(Asynchronous processing model) 병렬방식. 위와 같은 작업을 한다면 데이터를 가져오는 것을 기다리지 않고 즉시 다음 작업을 수행한다. 그래서 데이터를 불러오지 못하는 일이 발생하기도 한다. 자바스크립트의 많은 함수가 비동기식으로 처리되기 때문에 동기적으로 해결하기 위해 async/await 를 쓴다. async func..

Rest-API & Graphql-API

 Rest-API & Graphql-API API : 각각의 요청마다 요청을 처리해주는 담당자 (함수) ex. 게시글 저장하는 API, 게시글 조회하는 API 등 Rest, Graphql은 담당자의 한 종류다. rest-API graphql-API 생김새 http://....../../.. 주소처럼 생김 board("꼬부기") 일반 함수 같이 생김 받아오는 정보 전부 다 받아와야함 원하는 정보만 받아올 수 있음 네트워크 비용 상대적으로 높음 상대적으로 낮음 HTTP 라이브러리 axios ( Post, Put, Delete, Get ) apollo-client(Mutation, Query) API 테스터 postman, swagger playground 특징 다수의 서비스가 사용, 오픈 API, publ..