프론트엔드✏️/코드캠프

220517 프론트엔드 부트캠프 9일차 : State, refetch, map

State의 원리 writer의 event.target.value를 찍어보면,,, 꼬부기의 'ㄲ'를 입력하는 순간 값이 들어간다. 그러나 if(writer && ... ) 여기서의 writer는 빈 문자열이다. 이는 setState를 했을 때, 바로 그 값으로 변경하는 것이 아니라, 함수가 끝날 때까지 임시메모리에 저장해뒀다가 함수가 종료되면 setState를 실행하기 때문이다! setState로 State가 변하면 렌더링 되는 페이지 전체가 다시 렌더링 되는데, 이를 리렌더링(rerender)이라고 한다. 즉 State가 바뀌면 State를 사용하고 있는 컴포넌트가 다시 만들어지고, 그럴 때마다 바로바로 페이지 전체를 렌더링 하는 것은 매우 비효율적이기 때문에 임시메모리에 저장해뒀다가 함수가 종료될 때..

알고리즘 - 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..

Template literals(템플릿 리터럴)

Template literals(템플릿 리터럴) 이전에는 "template strings"라고 불렸다. `text ${variables} text` 백틱(` `)을 사용한다. ${}로 표현식을 넣을 수 있다. { }안에 지정한 변수 등을 넣으면 단일 문자열로 연결시켜준다. 이를 태그가 지정된 템플릿이라고 한다. 백틱 안에서 백틱 문자를 사용하려면 백틱 앞에 \를 붙인다. let name = "osori"; let age = 99; console.log("내 이름은 " + name + "이고 나이는 " + age +"살이야."; // "내 이름은 osori이고 나이는 99살이야." console.log(`내이름은 ${name}이고 나이는 ${age}살이야.`); // "내 이름은 osori이고 나이는 99..

Git, GitHub

Git, GitHub 깃과 깃허브는 다르다. 깃은 항상 내 파일을 보면서 모든 파일의 변화를 기록한다. 같은 파일에 대해 각기 다른 시간대의 버전들을 저장할 수 있다. 또한 그 하나의 파일을 갖고 다른 사람과 같이 작업을 할 수 있다. 언제 누가 어디를 수정했는지도 알 수 있기 때문에 공동작업에 유리하다. 깃허브는 클라우드에 있는 깃 제공자, 깃 히스토리를 내 컴퓨터에서 깃허브 웹사이트에 push해준다. 지극히 주관적인 사용법 1. 깃허브 회원가입, 설치 2. 깃허브 repository 생성 3. vscode에서 터미널을 열고, 깃허브 repository와 연결할 위치로 이동한다. 4. git init 5. git remote add origin '주소' 6. git remote -v (연결됐는지 확인)..

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..

React : Component, Import & Export

React : Component 내용은 다르지만 그 구조는 같은 각 부분을 컴포넌트라고 부른다. 컴포넌트를 사용하면 다른 데이터 집합에 같은 DOM 구조를 재사용할 수 있다. 컴포넌트는 부품과 같다 ! 리액트 컴포넌트의 역사 1. createClass 2013년 리액트가 처음 등장했을 때 컴포넌트를 만드는 방법 어떻게 리액트 엘리먼트를 반환하고 렌더링 해야하는지 알려주는 render() 메서드가 들어있다. 지금은 공식적으로 사용 금지 되었고, 자체 패키지인 create-react-class로 옮겨졌다. 2. 클래스 컴포넌트 ES 2015에 클래스 문법이 도입되면서 리액트 컴포넌트를 만드는 새로운 방법이 도입됨 React.Component API 를 사용, class 구문을 이용해 컴포넌트 인스턴스를 만들..

React Router : 리액트 라우터

React Router SPA(Single Page Application) 단일 페이지 어플리케이션 단일 페이지에서 만 바꿔서 랜더링 해주는 것은 방문 기록, 책갈피, 이전 페이지, 다음 페이지, 새로고침 등에서 문제가 생긴다. 페이지 주소 자체가 바뀌는 것이 아니라 같은 페이지에서 랜더링만 바꿔서 해주는 것이기 때문에 다른 페이지 같아도 책갈피를 하면 같은 페이지, 새로 고침을 하면 원래 불러와졌던 화면만 뜨는 문제점이 생긴다. 그래서 라우팅은 이를 해결하기 위한, 클라이언트의 요청을 처리할 endpoint를 찾는 과정이라고 할 수 있다. 경로(route)는 브라우저의 주소창에 넣을 수 있는 종말점을 뜻한다. index.js 파일에서 App 컴포넌트를 랜더링하는 대신 Router 컴포넌트를 랜더링한다...