implement /drag and drop html/ react 구현 구현기능 스택

검색 정확도 높히기

특정 문장 검색 정확도 높히기는 "" "be of the web"

stack 제외하기

store javascript date object in mysql -php

스택오버플로우에서 검색하기 (혹은 다른)

site:stackoverflow.com detect click outside element in

기간특정 (필터링)

before:2020 after:2020

출처 : 엘리의드림코딩 유튜브 채널

Block(database) + chain

feature

Only add or input Decentralization (don’t access) onewayfunction Prevhash + myhash

Nounce = hash 정보중에 일부를 miner가 유일하게 바꿀 수 있는 정보이며 해당 정보에 맞춰 블록을 추가하거나 추가하고자 하는 블록의 검수가 가능.

• 블록 추가는 어렵지만 검수는 금방 할 수 있음
• 비트코인의 경우 10분 간격으로 코인추가가 가능
• 비트코인의 경우 nounce가 19개의 0으로 hash가 구성되어 있다 (추가 어려운점)

Smart contract

위 시스템을 이용해서 결제 시스템이나, iot연결을 이용한 다양한 서비스 구축이 가능. 그리고 개발자의 코드를 컨트랙에 저장하는 경우 블록체인시스템에 의해서 모두 카피본을 공유하고 있어 서버 하나가 죽는다고 데이터가 전부 유실되는 경우가 거의 없음. 단점 Trustful기반으로 외부 소스를 사용할 수 있는데 외부기기를 사용할때 신뢰기반으로 작동되기 떄문에 외부기기가 외부에 노출되는 경우 보안에 취약한 것이 치명적 단점

NFT

Non fundableToken

Smart contract 에 1개의 토큰이 발행되는데 이 토큰대신 그림이미지를 넣게 된다. 그러니깐 어떤 작품이 들어간다고 하면 이미지 하나만 들어가는 꼴이 되는데 이 자체가 가치가 올라가는 이유는 블록체인에 1개당 1개의 인증서가 발행될 수 있기 떄문 이를테면 이미지가 하나 있는 경우 원작자의 사인이나 원작자가 원본임을 증명할 수 있는 어떤 것들을 넣을 수 있어 가치가 상승하는 것. 이를테면 유명인의 트위터 글 하나나 인스타그램 포스팅 사진 이미지를 nft로서 발행 가능하고 실제 발행하여 비싼 금액에 판매됨 최초의 온라인 자산으로 의미가 높기도 함

Encrypted wallet

Bitcoin sending Asymmetric encryption 총 4개의 키가 있다. A에게 private, public B에게 private, public 해서 각자 사용할 수 있도록 주고 받고 하면서 사용하는 방식 이것이 wallet이다.

그외 기타 용어 정리

DEFI

Decentralized Finance No third party (중간관리자나 감시자 ) 중간 역할은 sma Smart contract powered bank Stable coin (busd) Is one use is one coin that meaning is stable

AAVE (smart contract)

Something like bank

DEX

Decentralized Exchanges There is service kind of gamble for example who will be winner between somebody

Ex ) bithum is centralized Exchange Require pull

Busd eth is coin

현재 사용중인 대표적인 언어들

Ethurium Go lang

BTC have not bank bank is consumer No private

Proof stake Reducing consuming And safety

Cosmos (using go)

Interactive with blockchain each other

Polkadot (using Rust)

Similar to cosmos Not yet having a big project

Opensea - nftmarket

Class 형에서 함수형 프로그램을 요즘은 더 많이 쓰고 있다. 그이유는 코드상으로 좀더 간결하게 사용이 가능하고 hook이 도입되어 state를 통한 데이터 관리와 이전에는 클래스에서만 가능 하던 것들이
많은 hook의 등장으로 클래스와 동등하게 사용이 가능하게 되었다. 디자이너와 협업시기에도 코드를 이해하기 좋고, 개발자들끼리도 코드의 가독성이 좋아 각광받고 있는 추세이다.

사용이 간편한 대표적인 hook들

useState

클래스의 경우 state={count: 0}과 같이 이용하여 데이터를 관리한다고 했을 떄

useState 의 경우 const = [count, setCount] = useState(초기값)

과 같이 useState 내부에 데이터 관리가 이행된다. 하여 데이터를 수정할떄 class에 정의하는 아래의 정의방식을

this.setState=({count: this.state.count + 1})

setCount=({count}) 로 아주 간략히 설정하는 것만으로 데이터 관리가 가능해진다.

useRef

useState를 사용하여 컴퍼넌트를 관리하는 경우 불필요한 리랜더링이 발생하게 된다. 이부분을 보완하기 위해서 사용할 수 있는 훅으로 입력 받는 태그에 ref={spanRef} Const spanRef = useRef{} 를 각각 작성하여 useRef자체의 메모리에 저장하고 관리하여 리랙더링의 빈도수를 낮출 수 있다.

useCallback

위의 useRef 방법에서 추가적으로 불필요한 데이터 리랜더링을 줄이기 위한 방법으로 버튼에 연결되는 함수를 작동시키는 곳에 적용하여 함수를 누를떄마다 함수가 생성되서 작동되지 않고 useCallback 메모리 내에서 함수를 저장하고 관리하여 리랜더링 빈도수를 역시 줄여주게 된다.

UseEffect

useEffect의 경우 어플리케이션의 컴퍼넌트가 실행될때마다 작동되는 특징이 있는데 useEffect =(()=>{},[statedata]); 위에처럼 입력하는 경우 statedata 가 업데이트 될떄만 실행이되고, []단순 공란으로 두는 경우 처음에만 실행되고 이후에는 실행되지 않는 특징이 있다. 그래서 최초 기동시에 발생하는 로그인이나 어플리케이션의 로딩과 같은 경우 사용하는 경우들이 있다.

Spread Operator

• Spread Operator는 Shallow-cloning을 합니다. 🚨 배열안에 있는 모든 오브젝트 또 그 안에 들어 있을 수 있는 오브젝트들까지 모두 다 한땀 한땀씩 새로운 것으로 바꿔 주는것이 아니라, 단순히 제일 상위의 배열 껍데기만 새로운 껍데기로 바꿔주고 안의 오브젝트는 예전의 그 것을 참조값을 복사해 와요. Spread Operator를 이용하면 처음에는 안에 들어 있는 내용물들을 복사해 오지만 (값이 아니라 레퍼런스, 참조값만 복사해 오죠!)  배열 자체는 새로운 것을 만들기 때문에 배열에 아이템을 삭제 하거나, 추가 하면 배열의 내용은 달라질 수 있어요.

state를 직접 변경하면 안되는 이유

기본적으로 프로그래밍에서는 오브젝트를 직접적으로 수정하는 것 자체가 좋지 않다. 그곳에서 오류가 발생할 가는성이 있기때문에 오브젝트는 Immutability 를 유지시켜줘야하는 것이 원칙이다. 그런 원칙적인 부분과

첫번쨰로 setState는 비동기적으로 움직이는 메써드 이기때문에 직접적으로 수정되어 버리는 경우 업데이트되는 과정에 오류가 발생할 확률이 높아진다. 두번쨰는 Purecomponent 나 memo를 사용하는 경우 변경된 데이터로 레퍼런스를 참고하고 업데이트 하려는 과정에서 데이터값이 변경되지 않은 것으로 생각하여 업데이트를 안하게 된다.

*Prop 전달할떄 tip * 데이터 사용시 Props.video.가 반복되는경우 프롭을 (props)대신 ({video})로 사용하거나 ({video: items}) 비디오를 아이템스로 바꿔서 사용할 수 있도록 설정이 가능하다. 비디오 안에 있는 것을 쓰고자 한다고 할떄는 ({video: {snippet}})과 같이 정의할 수 있다.

Component 전체적인 것을 스타일링 할떄는 div태그로 감싸고 그 위에 해야한다.

Deleted && <component>

와 같은 구문을 쓸떄 스타일링이 꼬이지 않게 하려면

selected && <><component/><>

와 같은 형태로 해줘야한다. **위와 같은 오류는 컴퍼넌트를 사용하면서 의외로 많이 나타나는 현상으로 주의해야한다. (어짜피 오류뜨면 바로 수정하면 별일 없기는 하다.)

리엑트는 virtual dom 을 사용해서 redering을 사용할 떄 실제로 컴퍼넌트 내부 값이 변하지 않는 이상 모두 데이터를 새롭게 부르지 않는다. 하지만 특정 컴퍼넌트 값이 변경되는 경우에 렌더링시 자동으로 호출되는 componentdidUpdate() 가 불필요하게 자동실행되는데 이렇게 되면 크게 느리게 되지는 않으나 깜빰임과 같은 불편함으로 성능개선이 필요한 시점이 온게된다. 이런부분의 오류를 크롬 리액트 툴을 이용해서 컴퍼넌트 업데이트 상태창을 검색해서 확인할 수 있고 이 부분은 리엑트의 메모나 purecomponent 를 사용해서 개선할 수 있다. 퓨어 컴퍼넌트에 대한 공식 문서는 아래와 같다

https://reactjs.org/docs/react-api.html#reactpurecomponent

PureComponent

퓨어컴퍼넌트는 공식문서에 적혀있지만 간략히 요약설명하면 shallow comparison 으로 간단 설명이 가능할 거 같다. 구체적으로 설명하면 가장 자식이 되는 컴퍼넌트에서 이벤트가 발생할떄 해당 자식이 되는 state 값이나 혹은 prop 값의 오브젝트가 변경이 되었는지 깊히 체크 하는 것을 말하는데 component를 purecomponent로 이름을 바꿔주는 것만으로 오브젝트를 검사해서 빈번한 리랜더링이 발생되는 것을 막아준다. 하지만 퓨어 컴퍼넌트를 사용시 예를 들면

HandleReset () => {
const habits = this.state.habits.map( habit => {habit.count = 0; 
return habit})
setState({habits}) }

위의 코드로 되어 있는 경우 habit.count 값이 변경이 되는 경우 해당 오브젝트는 같은 값으로 취급하여 변경사항을 리랜더링 되지 않아 업데이트가 안되는 현상이 발생하는 경우가 있다. 위 부분을 해결 할 수 있는 방법은 스프레드오퍼레이터를 사용하여 클로닝 된 오브젝트로 변경된 값을 비교 업데이트 하는 경우 리엑트가 shallow comparison을 실행하여도 변경된 값을 식별하는 것이 가능하게 된다. 예시 코드는 아래와 같다. 포인트는 {…habit, count: 0} 다.

HandleReset () => {
const habits = this.state.habits.map( habit => 
 { if(habit.count !== 0){ return{…habit, count: 0}; }return habit;})
setState({habits}) }

Lifecycle 메써드

componentDidMount(){} componentWillMount(){} 위에 메써드가 리엑트에 내장이 되어있는데, 각각 컴퍼넌트 작동하는 상황에 따라 자동으로 호출시키는 라이프사이클 메써드이다. 상황에 따라 여러라이프 사이클 메써드가 있는데, 어플리케이션이 제대로 작동하는 지 여부를 아래 함수를 입력하고 console.log를 사용하여 디테일한 오류를 캐치하는데 사용이 가능하다.

postCss 공식문서 공식문서를 보면 설명되어 있지만, 포스트css는 리엑트에서 사용가능한 패키지로 상당히 다양한 플러그인을 보유하고 있으며, 점점 사용범위 사용량이 늘고 있는 아주 인기 있는 툴이다.

특장점

1.Less, Sass 를 기존 혹은 현재도 많이 사용하고 있으나, 위 도구들은 별도의 문법을 공부하고 사용해야 하는 단점이 있다. postcss는 기존 css 문법의 틀을 크게 벗어나지 않은채로 사용하게 되어 더욱 각광 받고 있는 점이 첫번쨰 2.autoprefixer 두번쨰로는 위에 내장된 오토프리픽서 덕분에 webkit과 같은 브라우저간의 호환성 비율을 별도로 정의하지 않고 자동으로 지정하게 되어 편리한 것이 두번쨰 3.Module 각 컴퍼넌트에 맞춰 모듈화된 것을 끌어다 사용하기 떄문에 naming으로 구분지어 정의하지 않아도 간편한 장점이 있다.

PostCSS Plugins: https://www.postcss.parts/ Plugins Github 페이지: https://github.com/postcss/postcss/blob/master/docs/plugins.md

how to use

리엑트 패키지를 설치할떄 사용빈도가 높은 툴은 기본값으로 설치되게 되는데 포스트css는 보면 자동으로 설치가 되도록 정의되있다. 만약에 설치되지 않는 경우는 공식문서를 참조하도록 하자. 하지만 기본값으로 설정되어 있어 설치되는 것이 일반적이다.

컴퍼넌트 폴더 구축

components/componentnamefolder 위와같이 폴더를 생성하여 해당 폴더에 component.jsx component.module.css 두가지를 생성하여 컴퍼넌트에 정의시기에 상단에

import styles from './header.module.css';

위와 같이 임포트 해준다.

 <header className={styles.header}>

그리고 정의는 위와같이 하며, css파일에

.header {margin: 20px}

예문과 같이 하나씩 정의하면서 정리하면된다.

예문에서 볼 수 있듯 이렇게 정리하면 중복되는 이름에 있어 구애받을 필요가 없게되며 각 폴더별로 구분되어 있어 추 후 수정사항이 있을떄 가독성도 좋아 편리하다. 많은 개발자들이 사용하는데에는 다 이유가 있다. ^^

그외 기타사용

React에서 제일 상위 파일 즉 컨텐츠 전체를 가운데 정렬 하고자 할때는 Index.css 에서 #root{display: flex; justify-content: center;} 로 지정해주면 된다.

<pre>

위 태그의 경우 별도의 정의가 없다면 파라그래프가 줄바뀜 없이 쭉 아래로 내려가지는 것을 확인 할 수 있다. 위 내용을 해결하기 위해서는 {white-space: pre-wrap;} 을 정의해주면 해결된다.

rest api는 위키디피아 혹은 그외에 정리되어진 여러가지 칼럼들이 난무한데 길게 말할 필요없다고 생각한다. 간단히 요약하면 Representational state transfer ** 프론트와 백엔드 통신을 원할하게 하기위해 정의해놓은 규칙을 이야기 하는 것으로 **Get post put delete 와 같은 메써드들이 정해져 있다. (그외에도 여러가지가 있고, 그외 것들은 논란이 있는 것도 있으나 위의 것들이 대표적이면서 대명사로서 쓰이는 것들)

How to use at React

우선 컨텐츠를 보여주기 위해 서버에 있는 내용들을 다운받아 사용하는 것이 일반 적인 것으로 리엑트 에서는 보통 api 적용시 컴퍼넌트가 마운트 될때 한번만 통신 할 수 있도록

useEffect(()=>{api}, []) 

이렇게 정의한다. 그리고 아래의 예문은 fetch 적용했을 때 postman 으로부터 출력해준 코드 예문이다.

const requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=bts&key=AIzaSyA8HgKL9NHSUh2wAhoZyL2KwxjtvAFJoX8", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

** 위의 response.text는 json() 으로 변경하는 것이 개발툴로 데이터를 열람하기 좋다. Json 으로 변경하고 데이터를 보면서 사용하고자 하는 데이터 값을 리엑트로 생성한

const [videos, setVideos] = useState([]) 

이곳

Result => setVideos(result.item) 

usestate로 데이터를 관리하는 곳에 출력하도록 로직을 정리해주는 것이 일반적으로 사용되는 방법이다.

Fetch와 axios

axios가 일반적으로 많이 쓰이고 있는데 반환되는 response를 json()화 없이 바로 적용 가능하다. 그리고 주소부분의 가독성이 좋도록 정리하기 좋은 점으로 많이 사용되는 이유중에 하나이다.

중요하면서 기본(보안)

비즈니스 로직의 경우 최대한 로직을 숨기는것이 좋다. 비즈니스 로직이 담긴 구문을 각 하나의 기능으로 정의하고 index.js 에서 independency injection (url 정보와 키를 index.js에 정의하고 index에 서비스를 임포트하여 인자로 넘겨 로직을 정리함)으로 처리해주어 코드가 노출되지 않도록 하는 것이 좋다. 여기에 더 나아가 .env를 생성하여 키와 서버정보를 기록하고 gitignore로 로컬 외에 공간에서는 공유할 수 없도록 설정하는 것이 보안을 위해 꼭 해줘야하 하는 부분이다.

this is Multi core

우선 go의 환경은 설치 파일을 다운받아 설치를 해줘야한다. node 같은 경우 사용자가 임의로 설치장소를 지정하여 끌어다가 사용이 가능하지만 go 언어는 특별히 지정된 장소에서 설치되어있어야 정상 작동하게 되어있다. (mac 사용자는 처음 설치시기에 장소를 제대로 지정하지 않는 경우 admin 폴더 공간에 설치되는 경우 개발하면서 터미널에 sudo를 무조건 치면서 해야하는 곤혹을 치룰 수 있다...주의하길 바란다.)

Packages and Import

node와는 다르게 package json은 없고 컴파일 기준이 되는 main.go 파일을 생성해 아래와 같은 패키지 메인 함수를 정의 하거나 외부에 생성한 파일함수에서 import 해야한다.

Package main 

Func main() {}

함수의 이름을 정의할때 F 와 같은 대문자로 정의하는 경우 public으로 자동지정되어 어디서는 자동 import 된다. 하지만 소문자로 하면 private화 되서 자동 import되지 않는 특징이 있다.

Variables and Constants

const name string = “name”
var(사용가능)

위 변수를 아래와 같이 축약 가능

name := “name”

이렇게 작성하는 경우 해당 값이 string인지는 go가 판단해서 값을 지정해준다. 위와 같은 shorthand 문법은 함수 내부에서만 사용가능한 점을 주의할 것

Function 작성법

위에 변수를 정의할 떄 처럼 역시 argument 정의를 할떄 타입을 정의해야한다. 그리고 리턴값도 어떤 값으로 정의되는지도 정의해줘야한다.

Func multiply (a int, b int) int{return a + b}

리턴값 정의

Func lenAndUpper(name string)(int, string)
{return len(name), strings.toUpper(name)}

Func main() 
{totalLenght, uppperName := lenAndUpper(“sean”)
Fat.PrintIn(totalLenght, upperName)}

** 변수값과 리턴값을 정의하는 방식을 유심히 참고해보자.

Naked return

Return 값을 따로 정의하지 않아도 go 에서 알아서 리턴 가능한 기능.

Multiple return value

func name (arg type)(return){definition}
Func lenAndUpper(name string) (length int, uppercase string) {
Length = len(name)
Uppercase = strings.ToUpper(name)} return 

리턴되는 값을 사전에 (length int, uppercase string) 와 같이 정의하면 별도로 리턴값을 정의하지 않아도 알아서 값을 출력할 수 있다.

defer

Func lenAndUpper(name string) (length int, uppercase string) {
Defer fmt.PrintIn(‘done’)
Length = len(name)
Uppercase = strings.ToUpper(name)} return 

위와같이 defer를 함수에 사용하게 되는 경우 해당 함수의 리턴이 완료 된 후에 defer로 정의된 부분을 마지막으로 실행하게 된다.

반복문

Func superAdd(numbers …int) int {
Total := 0
for _, number := range numbers {total += number}return total }

for _ 는 앞의 값을 무시하고 넘어간다. range는 index값을 만들어주면서 반복으로 사용한다.

조건문

func canIDrink(age int) bool {
If age < 18 {return false} return true}

여기서 else를 작성하면 굳이 필요없다는 안내문과 함께 삭제하게된다. *variable expression *

func canIDrink(age int) bool {
If koreaAge := age + 2;  koreaAge < 18 
{return false} return true}

여기서는 조건문 내부에 변수를 따로 정의해서 조건내 추가 조건을 설정할 수 있다. 다른 언어에는 없는 특징이라 사용하는데 더 요긴하게 쓰일 수 있는 부분이 되겠다.

Pointer    
Func main() {
a := 2
b := &a
*b = 2020
fmt.PrintIn(a)
}

&는 데이터의 메모리를 지칭할떄 사용하며 *는 메모리 내부를 흝어볼떄 사용되나 위와 같이 사용하는 경우 지칭하는 변수의 값을 overiding 할 수 있게 된다.

Array and slice

Func main(){
names:= [5]string{“nico”, “lynn”, “dal”}
names[3] = “plus”
fmt.PrintIn(names)}

배열을 정의할때 [index길이]string(“1”, “2”) 와 같이 정의할 수 있으며, 출력하면 출력을 해주나, 빈 인덱스에 names[3] = “plus” 이와 같이 추가가 가능하다. *인덱스를 초과해서 입력하는 경우는 당연히 추가할 수 없다.

Func main(){
names:= []string{“nico”, “lynn”, “dal”}
names = append(names, “plus”)
fmt.PrintIn(names)}

배열 정의시 아래오 같이 하면, 정의된 내용에 맞게 index가 부여되며

names:= []string{“nico”, “lynn”, “dal”}

꽉찬 배열에 내용을 첨부할 때에는 위와 같이 append를 사용해서 추가할 수 있다.

Public private 
package main

import "std/github.com/sean/learngo/banking"

func main() {
    account := banking.Account{Owner: sean, Balance: 00}

}

package banking

// Account struct
type Account struct {
    Owner   string
    Balance int
}

** 위와 같이 정의된 변수의 이름의 앞에 대문자로 되어있으면, public 소문자로 되어 있는 경우 private이다. ** 위에 구성한 스트럭쳐를 불러서 사용할 수 있게 하려면 public으로 정의하고 사용해야 해당 스트럭쳐를 임포트 할 수 있는데 이렇게 사용하는 경우 account의 사용자 이름을 임의로 변경하거나 그외의 값을 제3자가 임의로 변경 할 수 있다.

func NewAccount(owner string) *Account {
    account := Account{owner: owner, balance: 0}
    return &account
}

*위의 내용을 해결하기 위해 데이터를 새롭게 복사하여 생성 할 수 있도록 포인터를 활용하여 코드를 구성하면 새롭게 생성된 인스턴스에 접근하여 private으로 안전하게 데이터를 임의로 수정할 수 없도록 하게 할 수 있다.

Have you heard about Collection rich? api 부자라고 표현 할 수 있는 표현으로 포스트맨은 각종 퍼블릭 api 나 그 외 다양한 api를 보관하고 관리하면서 필요할떄마다 호출해서 사용하기 편리한 도구이다. api 기능별로 설정을 정의하고 호출하는 api를 다운받아 그대로 내 서비스에 적용하여 사능이 가능하여 엄청 편리한 툴로 많이들 사용하고 있다.

추가 방법 Authentication tab

Key = key Value = 생성된 값 입력 저장 위치 = 헤더 혹은 바디 (각 api별 가이드에 따라 다르므로 참조하고 입력)

Variable tab (공통으로 적용된 처음부분의 url 을 변수 정의)

Name : 식별가능한 이름 Initial value: http 다음으로 공통으로 적용되는 url주소를 입력한다. 그다음 생성이 된경우 api 기능별 request를 추가하면 된다.

기능별 설정 방법

상단 url 에 사전에 생성한 url을 불러오기 위해 {{base}} 로 입력한다. Ex ) {{base}}/Search**

Url 생성후 아래 쿼리 작성단에 차례대로 작성하여 준다. Ex) part(key) snippet(value) maxresult(key) 25(value)

Api 가이드에 적힌대로 모든 주소를 입력한 후에 send를 눌러주면 데이터의 전송여부 상태를 확인할 수 있다. ** 정보가 정상적으로 기재되면 데이터가 다운되고 안되면 오류가 나올 것이다.

**TIP 오른쪽 상단에 보면 code라는 버튼을 눌렀을 때, 각 언어에 따라 해당 리퀘스트를 실행할 수 있는 방법이 코드와 기능별로 친절하게 가이드가 펼쳐진다.

여기에 추가적으로 알아두면 좋은 환경 설정의 방법이 있는데 package.json 에서

Scripts: {test: jest —watch}

여기에 watch all 을 붙혀주면 실시간으로 결과를 실행하게 되는데 이 상태에서 git ignore 파일을 만들어

node_modules/*

을 작성하면 커밋되고 난뒤의 경우 코드들은 자동으로 실행이 되지 않게된다. 그리고 커밋 전에는 스타트 된 이후 실시간으로 결과값을 송출한다. (커밋이 됬다는 것은 이미 테스트가 완료되어 커밋되었다는 것이므로)

overview

const add = require('../add.js');

test('functionName', ()=>{
    //write a testcode
    expect(add(1,2)).toBe(3);
})

add.test.js 라는 파일로 테스트하고자 하는 작동함수 이름을 작성하고 expect 나 toBe 와 같은 테스트를 위해 내장된 메써드를 호출하여 기대되는 값과 실제로 나오는 값을 작성하여 준다.

Class 기능테스트 할떄 아래처럼 기능별로 작성이 가능하지만

Const classname = require(‘../play.js);
test(‘a’, ()=>{})
test(‘b’ ()=>{})

아래와 같이 describe 클래스로 묶어서 일괄 실행이 가능하다.

describe('Calculator', ()=>{
    it('inits with 0', ()=>{
        const cal = new Calculator();
        expect(cal, value).toBe(0);
    });
});

초기화값을 명시하고 it을 통해 클래스에 있는 내용 정의하기

** 클래스 내 함수를 실행할떄

const cal = new Calculator(); 

이런 오브젝트를 각각 넣어주게 되는데 이렇게 넣게되면 코드중복이 심하다 그렇다고 해서 이것을 일반 자바스크립트 쓰는것과 같이 변수로 정의해서 꺼내서 쓰는 것은 테스트에서 정확성을 기대하는 취지에는 맞지 않으므로 이 부분은 jest에서 제공하는 함수를 사용하도록 한다.

let = cal;
    beforeEach(()=>{
        cal = new Calculator();
    })

변수를 처음에 정의하고 해당 오브젝트를 콜백 형태로 넣어줌으로서 이후 오브젝트를 별도로 생성하지 않아도 자동으로 불러와서 실행한다.

클래스 내 한가지 기능에서 여러가지 값을 산출해보고자 할떄는 describe을활용하는 예제문

describe('divides',()=>{
        it('0/0 = NaN', ()=>{
            cal.divide(0);
            expect(cal.value).toBe(NaN);
        });
        it('1/0 = Infinity', ()=>{
            cal.set(1)
            cal.divide(0);
            expect(cal.value).toBe(Infinity);
        })
    })

jest —coverage 위 명령어를 사용하면 jest가 검토가능한 함수들을 전부 확인한다. 에러를 잡는데에는 그에 맞춰 에러 테스트를 별도로 정의하지 않으면 커버할 수 없는 함수라는 적색의 경고점이 뜨게 된다.(오른쪽이 에러가 정의되지 않았을떄 해당 테스트를 커버할 수 없다는 적색 경고문) 왼쪽은 오류 로직이 정의되어서 오류 여부까지 테스트하여 모든 것을 커버할 수 있다는 올 그린 표시

What is testing

Software testing

Quality, bug

함수, 기능, ui, 성능, api스펙 을 test 하여 작동여부를 확인 후 패스하거나 다시 만드는 것을 말합니다.

** 일부회사에서는 검증팀이 따로 있어 코드를 검토했지만, 비효율적인 문제로 자동화 된 추세로 변화되었다. 하지만 이 문제도 개선은 되어도 비효율적인 문제가 있어 개발과 동시에 테스트를 할 수 있도록 시스템이 변모되었다. 위 개선점에도 불구하고 규모가 있는회사는 qa팀을 별도로 운영하고 있다.

Why software test(reason)

기능 정상 작동 요구사항 적용 이슈 예측 빠른 버그 수정 리팩토링의 효율성 상승 모듈간 독립적인 코드사용(재사용가능) 코드품질 향상 문서화 가능 시간절약가능

Test pyramid(필수테스트)

Unit (함수, 모듈, 클래스) ** 회사마다 쪼개는 단위는 다를 수 있음. Integration(위의 요소의 상호작용) End to end (ui, 사용자입장의 테스트)

why named pyramid 비용, 시간, 측면(위로 올라갈수록 비용이 올라감)

Why TDD

TDD는 사전에 기능단위를 최소한으로 작성하는 것을 말하는데 기능단위로 분리해 작성을 하는데 있어 필요한 것들 예를들어 사용자의 입장에 있어서 필요한 사항들, 목표점검, 시스템 전반 에 대하여 정리 점검 후 코드를 작성하기 떄문에 더더욱 각광 받고 있다. 개발자 개인 역량에 따라 하는사람과 않하는 사람이 고 사내 문화적으로도 다르지만 습관적으로 테스트를 하고 협업하는 사람이 아무래도 좋은평가를 받기 좋고, 협업시 불필요한 불협화음 피할 수 있다.

Process

테스트 통과용의 최소한의 코드를 작성 -> 검수 -> 재작성 -> 검수 후 통과 통과된 코드를 리팩토링 -> 검수 -> 재작성 -> 검수 통과되면 완성

CI/CD

(Code build test release deploy) the time when I merge deposit에 변경사항을 주기적으로(테스트코드 포함)확인하고 통합을 하기위한 단계 (통합시 정상적으로 작동이 되는지, 지금까지 테스트가 이상없는지 )

*위 두가지를 계속 확인하면서 지속적인 배포를 위해 TDD는 중요하다! *

Assertion - 조건 비교를 통한 테스트 로직 Test runner - 테스트 실행후 결과 생성

TEST 종류

Unit Functional
Component
Unit
Contract Integration

위와 같은 사용방법이 일반적으로 setState를 사용할떄 방법이다. 그런데 간혹 새로운 값을 업데이트 하는 과정에서 새로운 데이터가 업데이트 되지 않는 경우가 있다고 한다. 그것을 대비하기 위해 setCards(callbackFuc) 을 활용하여 사용이 가능하다고 한다. 예제로 보면

setCards((cards) => {
      const updated = { ...cards };
      updated[card.id] = card;
      return;
    });

위와 같이 활용하는 경우 새로운 데이터가 업데이트 되지 않는 사태는 발생하지 않을것이다.

하지만 이부분을 자바스크립트에 포함된 오브젝트화 특성 (배열의 일부 데이터만 변경해주는 특성) 을 활용하여 프로그래밍 알고리즘을 조금 바꿔준다면 데이터 사용효율이 향상될 수 있는 예제 코드는 아래와 같다.

const [cards, setCards] = useState([{
    id: '1',
    name: 'sean',
    company: 'no',
    title: 'Fengineer',
    email: 'deathsizes@hotmail.com',
    message: 'go got it',
    fileName: 'nothing',
    fileUrl: 'sean.png',
    theme: 'dark'
  }

  //data 받는곳 (혹은 컴퍼넌트)
  {cards.map(card => (
      <CardEditForm 
      key={card.id} 
      card={card} 
      updateCard={updateCard} 
      deleteCard={deleteCard}/>
    ))}

를 1키 와 밸류로 변경

const [cards, setCards] = useState({'1' : data}, )

//data 받는곳 
{Object.keys(cards).map(key => (
      <CardEditForm
        key={key}
        card={cards[key]}
        updateCard={updateCard}
        deleteCard={deleteCard}
      />
    ))}

오브젝트 화 하는 것으로 해당하는 키와 벨류값만 변경되는지 조회하여 변경하므로 프로그래밍 작동 효율이 좋아져 성능이 좋아지게 된다.

package.json

npm 버전관리에 대한 정보 (라이브러리포함) postcss 같은 유용한 패키지들이 자동으로 생성되어 있어 바로 사용가능.

**readme에 프로젝트에 대한 설명을 적기를 권장

node_modules

외부라이브러리 추가했을떄 폴더나 파일들이 구조로 생성및 관리되있음 (라이브러리의 이상함을 감지해 내부 구조를 확인할 수 있음)

manifest.json

pwa 사용과 관련된 파일

**프로젝트 생성시 깃이 자동으로 생성되게 되있음 (.git)

BAbel이란?

Js,TS ->old JS ver (compiling)

Webpack이란?

bundling

Eslint

Check code

Jest

unittesting framework

postCss

expandable libraries

그외 크롬 툴

react developer tool 리액트로 만든 품목들의 콤퍼넌트를 확인할 수 있다.

그외 vs코드 툴

reactjs code snippets rcc ris 같은 단축키만으로, 간단한 스켈레톤 프레임을 생성하는 툴 auto import 모듈경로 자동 완성기능

리액트의 virtual dom tree 와 dom tree의 차이 리엑트의 경우 데이터 일부가 변경된 경우 이전 데이터와 비교하여 수정된 내용만 업데이트 한다.

컴퍼넌트 class형 라이프사이클 메써드(state) 함수형(React Hook)

class 형 컴퍼넌트를 기피할때의 이유

binding issue 디자이너들이 보기 어려운 구조 but binding의 경우 여러가지 기능을 넣었을떄 복잡하게 되지만 api같은 하나의 기능으로서 일부부분을 제한적으로 분산시켜 binding하는 경우 가독성도 좋은 점이 있어 class형과 함수형을 적재적소에 사용하는 것이 제일 이상적이다.

app.jsx, app.js 로 구분해서 사용하는 이유는 리액트 문법으로 사용되는 것인지 자바스크립트로 작성된 것인지 확인하기 위함

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import '@fortawesome/fontawesome-free/js/all.js';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reactDom을 호출하고 index.html에 있는 root에 연결되면서 App컴퍼넌트를 그려줌

위 코드를 통해 봤을떄 일반적인경우라면 상단 setClickListener 함수에 전달된 onItemClick에 onClick의 클래스가 상속되야 하는 것이 일반적이나, 자바스크립트에서는 상속되지 못해 callback함수가 실행되지 못하는 문제가 발생한다. 그런때에 이문제를 해결하기 위해 this binding을 한다. 그 반인딩에는 3가지 방법이 있는데 1. this정의 this.onClick = this.onClick.bind(this)

2. 전달받는 쪽의 바인딩 하지만 위 방법은 사용할떄마다 작성해야하는 불편함이 있어 화살표 함수를 사용하여 바인딩된 값을 전달 할 수있다. this.field.addEventListener("click", (event) => this.onClick(event));

3. 전달하는 쪽의 바인딩 위 방법을 활용하여 전달하는 쪽을 수정하는 방법으로도 많이 사용한다.

onClick = event => {
    const target = event.target;
    if (target.matches(".carrot")) {
      target.remove();
      sound.playCarrot()
      this.onItemClick && this.onItemClick("carrot");
    } else if (target.matches(".bug")) {
      this.onItemClick && this.onItemClick("bug");
    }
  }

내용 : 순수한 자바스크립트를 이용하여 dom요소를 조작하여 만드는 프로젝트

프로젝트 내용

플레이버튼을 눌르게 되면 카운트가 시작되면서 시간내에 벌레와 당근을 잡는 게임

기능구현 내용

플레이버튼을 누르게 될때 벌레와 당근 생성 카운트 시작 벌레나 당근 잡는 갯수 카운트 다시시작 버튼

프로젝트에서 처음 사용한 함수

querySelector(.cssclass) - class를 찾아 선택한다.
element.getBoundingClientRect() - 위 셀렉터로 정의된 범위의 창 크기정보를 불러온다. createElement('htmltag') - html태그요소를 생성 setAttribute('class', className) - 생성된 엘리먼트의 추가요소를 생성 ex- radomNumber - 내장함수 random()을 이용한 랜덤함수 setInterval - 설정한 시간동안 지정된 함수를 반복 실행 element.innerText - htmltag사이 텍스트 삽입 element.style.type - style 타입과 값 삽입 element.appendChild() - element 하위 생성된child값 붙혀넣기

function radomNumber(min, max){
    return Math.random() * (max - min) + min;
}

오브젝트 좌표구현

function initGame() {
    console.log(fieldRect)
    addItem('carrot', 5, 'img/carrot.png')
    addItem('bug', 5, 'img/bug.png')


}
function addItem(className, count, imgPath){
    const x1 = 0;
    const y1 = 0;
    const x2 = fieldRect.width - CARROT_SIZE;
    const y2 = fieldRect.height- CARROT_SIZE;
    for(let i = 0; i < count; i++){
        const item = document.createElement('img')
        item.setAttribute('class', className);
        item.setAttribute('src', imgPath);
        item.style.position = 'absolute';
        const x = radomNumber(x1, x2);
        const y = radomNumber(y1, y2);
        item.style.left = `${x}px`;
        item.style.top = `${y}px`;
        field.appendChild(item);
    }
}

함수 클래스이름, 오브젝트갯수, 이미지경로를 인자값에 할당시켜 위에 지정한 갯수만큼 html, style값을 생성하는 함수를 만들어 설정. 랜덤함수를 사용하여 x y값을 각 오브젝트에 스타일값이 할당되도록 하여 벌레와 당근이 윈도우 내에 임의의 좌표로 출력되도록 구현

타이머구현

const GAME_DURATION_SEC = 5;

function startGameTimer(){
    let remainingTimeSec = GAME_DURATION_SEC;
    upadteTimerText(remainingTimeSec);
    timer = setInterval(()=>{
        if(remainingTimeSec <= 0){
            clearInterval(timer);
            return;
        }
        upadteTimerText(--remainingTimeSec);
    }, 1000)
}

function upadteTimerText(time){
    const minutes = Math.floor(time / 60);
    const seconds = time % 60
    gameTimer.innerText = `${minutes}:${seconds}`
}

코드 내용. setInterval를 사용해 반복되면서 remainingTimeSec로 할당된 5초를 줄여나가면서 upadteTimerText()함수 실행 카운트가 0이 되면 타이머 종료 api를 호출하고clearInterval(timer) return을 이용해서 조건문 탈출

gameStop

function stopGame(){
    stopGameTimer();
    hideGameButton();
    showPopupWithText('REPLAY');
}

function stopGameTimer(){
    clearInterval(timer);
}
function hideGameButton(){
    gameBtn.style.visibility = 'hidden';
}
function showPopupWithText(text){
    popUpText.innerHTML = text;
    popUp.classList.remove('pop-up--hide')
}

스톱타이머의 경우 앞서 셋타이머에서 생성된 clearInterval api를 다시 호출, 게임버튼을 숨기기 위해 css visibility 값 지정했던 것을 변경 위의 텍스트값을 전달받아 해당값이 태그에 쒸어지면서 보여지고 기본값으로 hide 처리 되어있던 class지정값을 삭제(삭제되면서 css지정되있던 display: none이 삭제).

click field

field.addEventListener('click', (event) =>onFieldClick(event))

function onFieldClick(event){
    if(!started){
        return;
    }const target = event.target;
    if(target.matches('.carrot')){
        target.remove();
        score++;
        updateScoreBoard()}
        if(score === CARROT_COUNT){
            finishGame(true)
        }
        else if (target.matches('.bug')){
            stopGameTimer();
            finishGame(false)
        }
    };
    function updateScoreBoard(){
    gameScore.innerText = CARROT_COUNT - score;
}

function finishGame(win) {
    started = false;
    hideGameButton();
    showPopupWithText(win ? 'WIN💯' : 'LOSE🖕')
}
function hideGameButton(){
    gameBtn.style.visibility = 'hidden';
}

요즘 개발관련된 흥미를 잊어버린 상태고 집중이 끊기 있게 되지 못해서 고민이 많던 차였다. 그러던중 강경원이라는 유명한 바디빌딩의 영상을 보면서 영감을 느꼈는데 영감받은 내용은 위 주제와 같이 backtobasic 기본으로 돌아가라는 것이다. 이 말을 듣고 내자신에 대해서 곰곰히 생각해본 결과 모든게 리셋된 상태에서 했던 부분에서 이어 가려니 집중도 안되고 되던것도 안되는 것이란 판단이 됬다. 그래서 다시 기본부터 다시 차근차근 wil까지 작성해보려 한다. 한번 해보자 도전!

API

이번 프로젝트에서 핵심적으로 많이 느낀 점은 api 통신 방식이다. 기존 교육때 배운내용은 서버리스 (파이어베이스) 와 같은 것으로 통신하고 서버를 관리하는 것 까지 배웠는데, 백엔드 파트에서 작업해주는 것을 CRUD하는 부분을 많이 배우고 느꼈다. 제일 명확하게 개념 정리가 된부분의 로그인의 토큰 부분인데, 일반 홈페이지의 경우 header 부분에서 토큰을 관리하지만, 앱같은 경우 asyncstorage를 통해 관리하는 부분이 흥미로웠던 점이다. 하나 예시 코드를 작성하면

export async function login(id, password, navigation) {
  try {
    const result = await axios({
      method: 'post',
      url: host + '/auth',
      data: {
        id: id,
        password: password,
      },
    });

    if(result.data.msg == "success") {
      Alert.alert('로그인 성공!');
      console.log(result.data.token)
      await AsyncStorage.setItem('session', "Bearer" + result.data.token);
      navigation.push('TabNavigator');
    } else if (result.data.msg == "fail") {
      Alert.alert('로그인에 실패했습니다.');
    }
  } catch (err) {
    Alert.alert('무슨 문제가 있는 것 같아요! => ', err.message);
  }
}

위 코드는 데이터를 서버에 전송하는 함수로 여기서 구체적으로 눈여겨 보게 된 점이 함수를 사용하는 여러 과정 (지역변수, 매게변수, 호출 과정, 비동기처리) 등등인데 자바스크립트 언어에 대한 사전 교육이 많이 부족한 상태라 코드를 짜기 많이 힘들어 부끄럽지만 백엔드에 자바스크립트 개념을 잘 알고 있는 개발자에게 조언을 구해가며 겨우겨우 짜내었다. (일부는 아예 다 해준 것도 있다.) 이 과정을 통해 자바스크립트를 명확하게 공부할 필요성을 느껴 주말에 드림코딩 강좌를 통해 쭉 정리 해봤다. 차 후 자바스크립트 개념도 정리해서 올려야 겠다는 생각이 든다. 조금 이야기가 한쪽으로 샌 부분이 있으나, 내용을 보면 await AsyncStorage.setItem('session', "Bearer" + result.data.token); 이부분이 보일 것이다. 이 것이 토큰값을 session이라는 통에 넣어 관리 하는 것이고 그외에 통값의 변수를 달리하여 여러가지 정보를 휴대전화에 보관이 가능한 것을 알게되었다. 위 기능을 통해 다양한 기능을 구현해 볼 수 있도록 노력해야겠다. (그리고 자바스크립트 언어도 하나씩 꾸준히)

리액트 네이티브 심화과정 실습 (Navigator/Components)

심화강의 그리고 기본강의에 아직도 정리되지 않은 개념과 기본기가 너무 많지만, 시간관계상 바로 들어갔다. 우선 StackNavigator, TabNavigator 개념과 Components 요소들을 더욱 활용하게 되면서 이해도가 많이 올라갔다. 헷갈렸던 부분이 스택네비게이터와 탭네비게이터를 연결해서 연동하는 과정이 어려웠는데, 결국 쉽게 정리하면 스택네비게이터에는 맨처음보이게 되는 부분과, 꺼내서 쓸 수 있는 페이지를 넣어두는 것. 그리고 기존에 있는 내용들을 state관리를 통해 초기화해서 새로운 스택으로 활용이 가능한 점을 알았다. 아직 초기화 되는 부분을 명확히 구현을 못해보았지만 그 외의 부분은 명확하게 구현하는 것으로 많은 이해를 얻었다. 그다음 TabNav 같은 경우 하단에 고정으로 픽스시킬 메뉴들을 구현하는 것인데, Icon을 적용하는 과정 중 Ionicons 아이콘 카테고리(애플과 안드로이드 모두 사용가능한 아이콘 모음)중 사용가능한 아이콘이 많지 않아서 (혹은 못하거나) 불편 혹은 어려움을 겪었다.

클론코딩 (당근마켓) 스타트

우선 인원은 RN맴버 두명, NODE맴버 3명으로 총인원 5명으로 구성되어 팀 작업을 시작했다. 아래 노션링크를 통하여 업무를 분배하고 나는 구현해 본 적이 없던 로그인 기능을

(https://www.notion.so/_clone-831e9dc759714a06867d6cb349c7540a)

구현해보기로 했다. 일단 튜토리얼 가이드대로 차근차근 정리하면서 붙혀넣었기 때문에 시작은 어려움이 없었고, 잘풀려서 재미있었다.(하라는대로 적용하면 되니깐) 그리고 api를 연결하는 과정에서 막다른길에 다다랐다. 아래는 파이어 베이스를 활용했던 코드인데, 아직 자바스크립트도 미숙한 상태에서 외부 링크를 연결하는 로직을 짜는 것은 내게 너무나도 어려운 과업이었다. 결국 튜터님께 부탁해서

export async function registration(nickName, email, password) {
    try {
        console.log(nickName, email, password)
        await firebase.auth().createUserWithEmailAndPassword(email, password);
        const currentUser = firebase.auth().currentUser;
        console.log(currentUser)
        Alert.alert("회원가입 성공!")
    } catch (err) {
        Alert.alert("무슨 문제가 있는 것 같아요! => ", err.message);
    }
}

튜터님으로부터 받은 api call 예시

const fetchFollowRequestListApi = () =>
  axios.get(HOST + `/api/follows/requested-list/`,
    {
      headers: { Authorization: `Bearer ${token}` },
    }
  );


const approveAllFollowsApi = (payload) =>
  axios.post(HOST + `/api/follows/approve-all/`,
    payload,
    {
      headers: { Authorization: `Bearer ${token}` },
    }
  );

문제는 봐도 이해가 잘 가지 않았던 부분이다. 경로 설정을 하는 것은 이해가 갔으나, 변수를 어떻게 설정해서 출력하고 뽑아내고 해줘야할 지 앞이 깜깜했다. 그래서 튜터님이 다시 정리해서 보내주셨는데

axios.get(someUrl).then((res) => {
  console.log(res);
  const data = res.data; 
});

아래와 같이 보내주셔서 우선

export async function registration(nickName, email, password) {
    try {
        axios.get(url).then(nickName, email, password)
        console.log(nickName, email, password)
        const currentUser = nickName.currentUser;
        const currentUser = email.currentUser;
        const currentUser = password.currentUser;

        console.log(currentUser)
        Alert.alert("회원가입 성공!")
    } catch (err) {
        Alert.alert("무슨 문제가 있는 것 같아요! => ", err.message);
    }
}

위와 같이 정리해보았다. 하지만 currentUser값에 내가 원하는대로 변수가 다 포함이 되었는지가 불명확한 점이 있어서 좀더 알아보고 보완해봐야 할 거 같다. 이번 api를 주고 받는 과정에 대하여 이해도가 높아지다면 큰 성장을 이룰 것 같다. (내피셜)

1주차 이야기

목금에 기본 강의를 듣고 리액트 네이티브를 이용한 강의를 듣고, 1차 과제인 todolist를 했다. native 프레임 워크에서 사용되는 특징으로 아래 공식에 대해서 배웠는데, 처음에 무슨말인지 몰라서 강의보고 보고나서 자료를 보고 여러번 돌려보면서 3일만에 겨우 이해할 수 있었다. (지금도 제대로 이해한건지 얼떨떨하다) component(state)=UI

위 내용은 state라는 데이터관리를 통하여 콤포넌트요소들을 정리하여 유저인터페이스를 출력한다는 요약식이다. 어떤분이 정리한 건지 모르겠으나 짧고 명료하고 강력하게 정리한거 같았다. 그리고 각각 요소를 만들어내기 위해서 빨간색 바탕의 많은 오류를 겪어왔는데 정말 너무 힘들었다. (오류가 너무 자주 발생되었기 떄문) 이제 이 빨간화면이 하는말을 잘 알아보고 바로바로 대처할 수 있는 능력일 키워야할텐데 두려움 반 기대반이다. 열심히 해보자 앞으로도 가야할길이 너무 멀다.

진행내용 알고리즘 1 2 주차에서 파이썬 기본문법 개념과 문제를 푸는 요령도 잘 몰라서 팀 스케쥴을 따라가지 못했었다. 하면서 크게 느꼈던 점은 기본문법과 알고리즘 개념, 그리고 문제접근 방법에대한 배경지식이 없을때 문제를 접하는 것은 시간낭비임을 크게 느꼈다. 그부분을 느꼈던 것이 2주차에서부터였었고 나는 기본기가 적힌 서적을 통해 1회독을 실습해보았으나, 그것만으로 머리속에 개념이 확고하게 잡히지 않은 것을 느낄 수 있었다. 그래서 다시 시도한 것이 백준 수준 개념별 문제를 풀어가면서 개념을 정리해보았다. 쉬운 문제를 풀면서 예전에는 보이지 않았던 문제의 길이 보이기 시작했다. 하지만 배열과 반복문 개념에서 다시 막히게 되었다. 확실하게 개념이 잡히지 않은 부분일 수록에 쉽게 무너지는 것을 깨달았다. 우선 항해 스케쥴에는 맞출 수 없더라도 기본 개념을 다시 차근차근 밟아가야했다. 스케쥴에는 동적계획법, 백트래킹을 개념을 익히기를 권장했으나, 거기까지 가지는 못했다. 하지만 이후 주특기 과정을 보면서 코드들을 보고나니 이전보다는 코드를 보는 눈이 조금은 더 생긴 것을 꺠달았다. 조금 버벅이고 있고 남들보다는 느리지만 꾸준히 앞으로 가고 있다. 전진...