mbti를 만들면서의 트러블슈팅 및 정리 App.tsx 기존 route에서 해당하는 유형의 타입을 뽑아 url에 넣는 형식으로 해야 깔끔할꺼라 생각하여, path 설정을 바꿔보았다. Quiz.tsx 코드의 해당 로직에 필요한 result쪽의 데이터를 Quiz Component에서 불러오는 형식으로 진행해야 얼추 맞을꺼란 생각이 들었다. 기존의 로직에서는 코드를 배열에 저장하여, 최종결과를 계산하기 위해 논리적인 결과를 하지 않고, Result Component에서 해당 부분을 전부 해, 맞는 유형을 찾는 짓거리를 했었다. (결과만 빨리 보기 위해서.) Result Page에선 이전 코드를 기반으로 조건부로 렌더링 된 함수내에서 호출하는 되었다. 이 조건부 함수 호출 조합은 함수가 필요할 때 항상 호출되도록 보장하지 못할수있었다. 코드를 전부 뜯어내고 나서야, 변경 사항을 수신해주는 Hooks를 사용하여 모든 질문에 답변했는지에 대해 확인하고, 상태를 true로 설정한 다음 3초 지…

콘솔 출력 함수에 대해 알아보자. Go언어에서 사용하는 fmt package의 Console output function은 매우 많은 방법이 있지만, 그중에서 제일 유용하게 쓰이는 3가지를 알아볼 것 예정입니다. 이 문서는 Print, Println, Printf 함수들이 어떤 특징이 있는지 차이점을 중점으로 설명하겠습니다. 코드 상단에 를 선언함으로써 package를 사용할 수 있는데, 이는 C언어의 입/출력 함수인 printf와 scanf 함수같은 유사한 함수들을 형식화된 입/출력 함수를 사용할 수 있다는 뜻입니다. 쉽게 말해, Console에 입력 함수와 콘솔 출력함수를 사용하기 위해서는 무조건 fmt package를 import해야합니다. Print Print 함수는 개행을 하지 않기 때문에 문자열 “” 혹은 Back Quote 내에서 escape sequence인 ‘\n’을 입력해 개행해야한다. 밑에 코드는 연산결과를 웹브라우저에 출력하는 코드이다. Println Pr…

JEST 페이스북 팀에서 Jasmine 기반으로 만든 테스팅 프레임 워크이다. C-R-A로 만든 리액트 프로젝트에는 자동으로 적용이 되어있다. react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행하며, 컴포넌트의 props나 state를 조회하는 일은 없다. (컴포넌트를 리팩토링 하게 될 때에는 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않는다. 이점을 중요시 여겨 컴포넌트의 기능이 똑같이 작동한다면 컴포넌트의 내부 구현 방식이 많이 바뀌어도 테스트가 실패하지 않도록 설계) 즉, react-testing-library는 구현 (Enzyme)에 중점을 둔 테스트보다는 사용자 행동 (react-testing-library)에 중점을 둔다. 2019.09.04일 기준 라이브러리가 바뀌었다. 아래의 명령어로 설치. 의 내용을 아래의 코드로 변경 해당 에 의구심이 있었는데, 보니까 벨로퍼트의 글에 잘 나와있더라. …

WebGL 이란? WebGL은 OpenGL을 기반으로 하는 JavaScript API / Library로 웹 브라우저가 추가 플러그인, 타사 플로그인 또는 브라우저 확장 프로그램을 설치할 필요 없이 브라우저에서 3D / 2D 그래픽을 렌더링을 도와준다. WebGL을 사용하면 브라우저를 통해 GPU를 사용하여 3D 그래픽을 HTML 페이지로 렌더링 할 수 있다. Three.js 아래 사이트는 다양한 개발 샘플이 있다. Three.js API 관련 사이트 Viewer API 참고 글 20 Open Source WebGL Frameworks WebGL 이란?

Destructuring 비구조화 할당 위의 객체에서 , , 를 각각 분리해서 사용하고자 할 때 을 사용한다. JavaScript에서의 Destructuring TypeScript에서의 Destructuring 잘못된 방법 단순히 생각해서 이런 식으로 타입을 지정해주면 되지 않을까 싶었음 이렇게 할 경우 name, age, gender를 각각 string,number,string으로 명명하라는 코드가 됨. 쉬운 방법 로 감싸진 전체에 대해서 타입을 지정해야 됨 권장하는 방법 interface로 미리 타입을 정의하고 해당 interface를 타입으로 지정하는 방식이 있다. JavaScript에서의 Destructuring TypeScript에서의 Destructuring 잘못된 방법 쉬운 방법 권장하는 방법

webpack-dev-server 사용하기 프론트에서 js모듈화를 진행하기 위해 과 을 적용하였다. ES6 문법을 브라우저에서도 사용하기 위해서 babel을 적용하고, 그걸 하나로 모듈화를 해주기 위해 webpack을 적용하였다. 그 결과는 html View에서 webpack으로 뭉쳐진 bundle.js하나만 로드해주면 모든 것이 한방에 해결되는 편리함을 맛 볼수 있었다! 에 대한 공부를 대충한 탓이 여태까지 그저 파일간의 의존성같은 부분을 해결해주는 정도로만 생각했지만 아주 많은 기능들이 있었다. 그중 하나가 바로 이다. 이걸 알기 전 까지 webpack을 돌린 후에 html파일을 따로 vscode extention liveserver로 따로 html을 서버에 띄워 테스트를 하였다. webpack-dev-server란? webpack-dev-server는 빠른 실시간 리로드 기능을 갖춘 개발 서버이다 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 속도가 빨라진다. …

useState를 이용하여 컴포넌트 상태값 관리하기. 컴포넌트를 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때에 어떻게 구현할 수 있는지에 대하여 알아보자. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할수있게 되었다. 라는 함수를 호출하여, 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 만들어볼것이다. Counter.jsx App컴포넌트에서 Counter.jsx를 렌더링을 해보자. img 이런 UI가 보여지면 성공적이다. 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 함수이다. 함수는 파라미터로 전달받은 값을 최신 상태로 설정해준다. h1태그에는 이제 0이 아닌 값을 보여줘야 한다. 코드를 다 수정 후, 버튼을 눌러보면 새로운 파라미터값을 받아오는…

Github waka-readme-stats 사용법 공식문서: repository 해당 저장소의 README를 그대로 따라하면 된다. 당연히 wakaTime이 본인이 사용하는 IDE에 추가되어야 한다. 본인 프로필의 저장소의 README.md에 두 줄을 추가한다. START와 END 사이에 stats가 그려지게 된다. 깃허브세어의 활동을 추적할 수 있도록 github access token을 발급받아 복사해둔다. 발급 경로 : Github - Settings - Developer settings - Personal access tokens - Generate new token 체크 항목 : repo, user wataTime의 data를 받아올 수 있도록 API_KEY를 복사해둔다. 발급 경로 : https://wakatime.com/settings/account 저장소 - Settings - Secrets에서 New repository secret를 눌러 다음 키 2개를 추가한…

Redux Redux로 상태 관리를 하는 이유와 이로 인해 얻어지는 이점은 다음 같다. 상태 관리는 사실 리액트의 관심사가 아니다. App은 상태가 어떻게 처리되는지 모르게 한다. App은 View가 어떻게 그려지는지만 관심을 갖게 한다. App은 상태 관리(store)와 View를 연결만 해준다. App은 상태 관리 로직이 어떻게 구현됐는지는 모른다. 상태 관리 로직 변경의 영향이 View로 전파되지 않는다. Redux 설치 Redux의 3가지 원칙 3가지의 원칙 - 리덕스 공식 문서에서는 리덕스를 사용할 때 따라야 할 3가지 원칙을 제시한다. 전체 상태값을 하나의 객체에 저장한다. 상태값은 불변 객체이다. 상태값은 순수 함수에 의해서만 변경되어야 한다 Action Action 상태값은 오직 액션 객체에 의해서만 변경되어야 한다. type: (string) payload(object): {taskTitle} 액션 객체에는 type,payload 속성으로 구성되는데 type은 어떤…

MVC 아키텍쳐의 한계 Flux 아키텍쳐에 대해 알아보기 전에 MVC 아키텍쳐에 대해 간단한 얘기를 해보자. Flux 아키텍쳐는 Facebook에서 개발한 단방향 데이터 흐름을 가지는 아키텍쳐 이다. MVC 아케텍쳐의 구조를 보면 이와 같은 구조를 가지는데 Controller는 Model의 데이터를 조회 하거나 업데이트하는 역할을 하고 Model은 이런 데이터를 View 통해 반영시키기도 하고. 또, View는 사용자로부터 데이터를 입력받기도 하기 때문에 사용자의 입력이 Model에 영향을 주기도 한다. 문제는 이러한 구조가 거대한 어플리케이션을 대상으로 한 프로젝트에 대해서는 너무 복잡하고 빨라진다는 것이다. 위 사진은 Facebook에서 얘기한 구조의 복잡성이다. 문제점 MVC의 근본적인 문제에 대해 설명하자면 사용자와의 상호작용이 View에서 일어났기 때문에 사용자의 입력에 따라 Model을 업데이트 해줘야 하는 경우가 있고 여기서 의존성의 이유로 하나의 모델만이 아닌 다…

Testing 이란 무엇인가 를 말한다. 제품이 예상하는 대로 동작 하는지 확인하는것. 테스트 피라미드 E2E Test = UI 테스트,사용자 테스트 Integration Test = 통합 테스트(모듈들,클래스들) Unit Test = 단위 테스트(함수,모듈,클래스) TDD TDD(Test-driven development ( 테스트 주도 개발 ) 개발(코드 작성)전 테스트 코드를 먼저 작성 TDD를 작성해야 하는 이유 구현 < 인터페이스 => 코드의 퀄리티 향상 사용자 입장에서 코드를 작성 모든 요구 사항(목표)에 대해 점검 시스템 전반적인 설계 향상 개발 집중력 향상 Jest 알아보기 JEST 공식문서 자바스크립트 환경에서 테스팅을 할수있는 프레임워크이다. 테스팅 라이브러리중에서 가장 간편하고 심플한 라이브러리라고 할수있음. 바벨을 이용하거나 타입스크립트,앵귤러,뷰 UI프레임워크에서도 사용이 가능. JEST 필요한 용어 expect : expect 기능은 값을 테스트할때 주로…

파이어베이스 사용기 파이어베이스 로그인 후 프로젝트를 하나 생성한다. 애널리틱스 사용하지 않으면 체크 안해도 됨. 밑에있는 모양 클릭한다. 파이어베이스 호스팅을 하지않아 체크를 안하고 넘어간다. 이 구문들을 복사해놓자 로 넘어가 추가할 부분들을 추가하자. 로그인 제공업체 추가시 코드로 넘어간다. 리액트 코드 작성 npm 사용시 yarn 사용시 src folder에 들어가 파일을 만든 후 전에 복사해놓은 내용들을 넣는다. 그 후엔 자신이 어떻게 사용할지 구현하며 로그인에 작성할 코드를 만들면 된다. 파이어베이스 사용기 이 구문들을 복사해놓자 로 넘어가 추가할 부분들을 추가하자. 로그인 제공업체 추가시 코드로 넘어간다. 리액트 코드 작성 npm 사용시 yarn 사용시 src folder에 들어가 파일을 만든 후 전에 복사해놓은 내용들을 넣는다.

함수형 컴포넌트의 차이점 함수형 컴포넌트의 차이점

3) 출력문 자바스크립트는 HTML 문서를 통해 웹브라우저에서 출력되므로 따로 출력문이 존재한다기 보다는 HTML 문서의 구성요소에 동적으로 출력하거나 웹브라우저의 경고창을 이용해 출력하는 형태가 출력문으로 볼 수 있다. HTML 문서에 출력 HTML 문서에 출력하는 형태로 페이지가 모두 로딩된 다음에 실행하면 원래 있던 HTML 화면내용은 지워지게 된다. 밑에 코드는 연산결과를 웹브라우저에 출력하는 코드이다. HTML 문서의 특정부분에 출력 HTML 문서의 특정요소를 찾아 해당 콘텐츠를 대체해 출력한다. 자바스크립트에서 가장 보편적으로 HTML 문서를 동적으로 핸들링하는 방법이다. 다음 예제는 앞의 예제와 비슷하지만 기존 HTML 소스를 유지하고 부분적으로 변경 된다. Alert 창을 이용한 출력 웹브라우저에서 오픈되는 조그만 경고창(alert)를 이용한 출력이다. 보통 프로그램에서 에러, 경고, 사용자 입력을 위해 많이 사용한다. 브라우저 콘솔창을 이용한 출력 자바스크립트 코드…

1)자료형 내부적으로는 Primitive(기본형)과 Object(객체형)이 있으며 각각 다음과 같다. Primitive Reference 타입 클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스도 모두 Object. JSON(Java Script Object Notation)의 기본 구조. 2)변수 선언 변수이름은 대소문자를 구별한다. 여러 변수를 한번에 선언할 수 있음. 지역변수와 전역변수가 있음. 기본적으로 소문자로 시작되는 Camel Case 를 사용. var, let, const ES6 이전에는 만 존재했으며 function-scoped 로 인해 다른 언들과 다른 문제가 있었음. 는 지역변수 개념으로 함수 범위에서 유효함. 를 선언하지 않으면 자동으로 전역변수가 됨. 과 는 ES6 에서 등장한 block-sceoped 변수 선언. 은 값의 재할당이 가능하고 는 불가능(immutable). 로 선언된 배열이나 객체의 경우 새로운 객체로 재할당하는 것은 안되고, 배열값의…

소스코드 위치 자바스크립트는 기본적으로 HTML 문서의 사이에 위치 한다. 그러나 그 외 위치에 둘수도 있고 외부파일이나 다른 서버를 통해 참조하는 방식으로도 사용할 수 있다. 자바스크립트의 소스가 위치하는 몇몇 유형에 대해 살펴 보자. 1) 내부 자바스크립트 HTML 문서 내부에 자바스크립트 소스코드를 두는 유형 입니다. 혹은 에 둘 수 있으며 양쪽에 모두 있어도 상관 없다. 현재 HTMl 파일의 문서구조(DOM)에 쉽게 접근이 가능. 현재 화면에 동적인 요소를 부여하는 자바스크립트가 같은 소스파일에 위치하기 때문에 코드 관리와 이해가 쉬움. 자바스크립트 소스가 복잡해지는 경우 관리가 어려움. 공통된 기능을 만들기 어렵고 코드의 재활용이 어려움. 2) 외부 자바스크립트 HTML 문서 외부에 별도의 파일을 생성하고 HTML 에서 불러와 사용하는 방식이다. 이때 자바스크립트의 파일의 위치는 HTML과 동일한 서버 혹은 외부 서버일수도 있다. 웹의 HTML코드로부터 웹의 동작을 …

조건부 렌더링 (Conditional Rendering) => 조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 isLoggedin이라는 Props를 설정해 보겠다. => 여기서 true는 JavaScript 값이기에 중괄호로 감싸준다. 간단하게 Props를 destructuring 하여 name을 사용한다면 아래와 같이 사용이 가능하다. 삼항연산자를 사용해보자. 로그인이 되었을때 즉 {isLoggedIn=true}일 경우, “로그인 완료” 라는 문구를 추가적으로 보여주고, false일 경우엔 null이 되어 아무런 문구도 추가적으로 띄우지 않게 해보자. 현재는 {isLoggedIn = true} 이기 때문에 문구가 추가된것을 확인할 수 있다. 하지만 위와같이 내용이 달라지는게 아니라 보여주거나,안보여거나 하는 상황에서는 연산자를 사용하는것이 더 간편하다. 추가적으로 name에 대해 조건…

배열의 복제 배열을 복제하려 할때 기준 ES5 문법에서는 아래와 같이 반복문을 통해 일일이 값을 넣어줘야 한다. 위의 코드랑 로직을 ES6의 Spread Operator를 통해 간편하게 배열을 복제 할 수 있다. ※ 이 배열 복제는 Reference 복사가 아니라, 값 복사로 newArray에서 변경을 해도 기존 array는 변경이 없다. 배열 병합 객체에서도 동일 특정값만 변경하기 위에 코드는 React에서 state 관리할때 불변성을 유지하며, 객체중 일부만 Update를 해야할때 쓰인다.

Window Key 변경하기 윈도우 키 + R 실행창 (Run dialog box)를 눌러 를 검색 한다. control + f 를 눌러 // 경로를 찾아준다. Keyboard Layout → 2진수 파일을 생성해주고, FileName = “ Scancode Map “ 으로 저장한다. https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa636d38c-352a-482d-b571-24263acae6a7%2FUntitled.png?table=block&id=13c10a06-a8de-491e-86d7-82097fd6730d&spaceId=f08f49e0-d5e2-4c6e-9785-524d05da8a03&width=1450&userId=00f35be7-f598-4c28-bec1-5ca4b2e59847&cache=v2 Scancode Map 2진수 표현은 보는거와 같…

Props 와 State 란? Props와 State를 요약해서 설명하자면, 는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터이고 해당 데이터는 직접적으로 수정할 수 없는 값. 는 컴포넌트 내부에서 가지고 있는 값으로써 변경할 수 있는 값. 아래 그림은 props와 state를 잘 보여주는 그림이다. props 와 state 로 간단한 예시를 해보자. Todo.js Title.js Todo 컴포넌트와 Title 컴포넌트는 서로 부모 자식 관계이다. todo가 부모이고, title이 자식 관계 이다. ⛱️ Props Title이라는 컴포넌트는 Todo 컴포넌트로부터 title 이라는 props를 받는다. 이는 부모 컴포넌트로부터 일방향적으로 전달받은 것이고, Title Component 에서 수정할 수 없다. ⛱️ State props 와 동일하게 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이지만 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리하며, 값의 변경이 가능하다.…

리액트는 MVC 패턴 중 View에 해당하는 라이브러리다. 그러다 보니 각각의 컴포넌트는 컴포넌트의 수명주기, 라이프 사이클이 존재한다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이난다. 아래의 이미지는 리액트 라이프 사이클을 나타낸다. 라이프 사이클의 유형 라이프 사이클은 크게 3가지 유형으로 나눌 수 있는데 생성이 될 때, 업데이트할 때, 제거할 때이다. 리액트에서는 이러한 작업을 Mount, Update, Unmount 라고 한다. Mount는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. Update는 다음과 같은 4가지 상황에서 발생한다. prop가 바뀔 때 state가 바귈 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 할 때 Unmmount는 DOM에서 제거되는 것을 뜻한다. React Lify Cycle constructor 컴포넌트가 처음 만들어질 …

제 블로그의 테마나 Gatsby의 다른 테마를 활용해서 Github Blog를 만들고 싶은 분들이 계실텐데요! 이런 분들에게 도움을 드리고자 이 글을 쓰게 되었습니다. 잘 안되는 부분이나 궁금한 점을 댓글로 남겨주면 확인해보고 답변 드리도록 하겠습니다! 1. Repository 생성하기 GitHub Blog를 만들려면 Github에 Repository를 생성해야 합니다. GitHub에 로그인 한 뒤에 우측 상단에 있는 New Repository 버튼을 클릭하면 repository 생성 페이지로 이동하게 됩니다. 이 때 Import a repository 버튼을 클릭합니다. 아래 페이지에 도달하시면 두 가지 정보를 넣어주셔야 하는데, Your old repository’s clone URL에는 사용하고자 하는 gatsby 테마가 있는 repository의 주소를 넣어주시면 됩니다. 제 블로그 테마를 쓰고 싶으신 분들은 여기에 https://github.com/zoomKoding/…

👋 소개 블로그를 직접 운영하면서 조금씩 그려봤던 이상적인 개발 블로그 테마를 Gatsby를 통해 만들어보게 되었습니다. 이 테마가 블로그를 운영하고자 하시는 분들에게 자신의 이야기를 잘 담을 수 있는 공간이 되었으면 좋겠습니다.🙌 블로그 테마가 맘에 드셨다면 아래 과정을 통해 자신의 블로그를 만들어보시길 바랍니다! 혹시 만드시는 과정에서 궁금하신 점이나 어려움이 있으시다면 이슈를 통해 문의 남겨주세요! 스타는 블로그 테마를 지속적으로 발전시키는데 큰 힘이 됩니다!⭐️ 🚀 시작하기 Github Page나 Netlify 중 원하시는 배포 환경에 따라 다음 과정을 진행하시면 빠르게 블로그를 만드실 수 있습니다. 🦖 GitHub Page로 만들기 깃헙 페이지를 통해 블로그를 만드시다면 아래 글을 참고해주세요! Gatsby 테마로 GitHub Blog 만들기 🔧 Netlify로 만들기 아래 버튼을 활용하면 개인 계정에 를 사용하고 있는 Repository 생성과 Netlify에 배포를 동시…