ETC :단위테스트 관련 참고하면 좋은링크 https://medium.com/@sryu99/%EB%8B%A8%EC%9C%84-%ED%85%8C%EC%8A%A4%ED%8A%B8-tdd-bdd%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-3d25fab5ccb2 중요내용 발췌 단위 테스트는 테스트의 대상이 무엇(what)인가를, TDD는 테스트코드의 작성 시점(when)을, BDD는 테스트코드를 작성하는 방법(how)을 알려준다. 단위테스트, TDD, BDD를 각각 개별적으로 활용할 수도 있지만, 최상의 결과를 위해 각각을 적절히 조합하여 서로를 보완하는 형태로 사용해야 한다.
React: React 컴포넌트의 상태 객체 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. | 시작하기에 앞서 리액트에서 컴포넌트의 상태는 매우매우 중요한 개념이다. 리액트의 장점이 되기도 하는 부분이 되기 때문이다. (책에서 한개 장 밖에읽을 수 있다면 이장을 읽기 바란다고 했을 정도이다.) React 컴포넌트의 상태 객체를 이용하면 가치있고 상호작용이 뛰어난 react 애플리케이션을 만들수 있다. 상태는 리액트 컴포넌트에 데이터를 저장하고, 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심개념이다. | 리액트 컴포넌트의 상태란? 리액트의 상태는 컴포넌트의 변경가능한 데이터 저장소다. 리액트팀에서는 컴포넌트는 상태머신입리다 라고 말하고 있다고도 한다. 속성과상태..
Front end:spread operator 웹팩설정에서 사용가능하게 하기 https://www.servicedenuages.fr/en/spread-operator-with-webpack 참고npm install --save-dev babel-loader babel-plugin-transform-object-rest-spread아래와 같이 query 속성에 plugin transform-obejct-rest-spread를 넣어주면 된다. module: { rules: [ { test: /\.(js|jsx)$/, loader: "babel-loader", exclude: /node_modules/, query: { plugins: ["transform-object-rest-spread"] } },
Javscript:자바스크립트의 선언방식, hoisting, 반환값,arguments 부스트코스 강의를 참고하여, 정리한 글입니다. | 시작하기에 앞서, 자바스크립트를 잘 이해하고 있다는것과 함수를 잘이해하고있다는것은 거의 같다고 한다. 따라서 이러한 자바스크립트 함수의 필수개념인 선언방식, hoisting, 반환값, arguments들에 대해서 알아보자. | 함수의 선언 아래와 같은 방식을 함수선언문이라고 부른다. // 함수의 호출. function printName(firstname) { var myname = "seungkyu"; return myname + " " + firstname; } | 함수표현식 아래와 같은 방식은 함수 표현식인데, 함수선언문과 달리 호출순서에 따라 정상적으로 함수가 실행..
ETC:prettier-eslint 사용시 충돌 안일어나게하는법 prettier 확장프로그램을 설치하고, eslint도 설치하고 아래와 같은 setting을 User setting에 넣어준다.(vscode기준입니다) "editor.formatOnSave": true, "prettier.eslintIntegration": true, 참고링크: https://github.com/prettier/prettier-eslint/issues/135
React:리액트 교과서 3장 (JSX) 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다.| 시작하기에 앞서 JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다. 템플릿 엔진이나 HTML처럼 보일 수도 있지만 그렇지 않다. JSX는 리액트 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다. | JSX의 장점 개발자 경험개선 - 표현력이 뛰어나 코드를 읽기 쉽다. xml 과 문법이 유사해 중첩된 선언형 구조를 더 잘 나타낸다.팀의 생산성 향상 - 전문 개발자 외에도 개발 지식의 있는 팀원이있다면 직접 코드 수정이 가능하다. jsx는 htm..
React:리액트 교과서 2장 (리액트 첫걸음) 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. | 시작하기에 앞서 엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 이러한 엘리먼트를 어떻게 그리고 왜 사용하는지 살펴보자. | 엘리먼트 중첩 계층적 방식으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다.ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다는 점이 중요하다. -> 이점때문에, 다양한 엘리먼트들을 보여주기위해 div 태그로 감싸주는 이유이다. 내 생각엔 이 부분이 제일 중요한 점인것 같다.동일한 DOM 계층에 h1요소 두개를 렌더링해여 하는 경우에 문제가 발생한다. 이경우 아래 그림처럼 시각적으로 영..