문제

​ ​

백트레킹

💡 백트레킹

해를 찾는 도중 해가 아니어서 막히면 되돌아가서 다시 해를 찾아가는 기법 (모든 경우의 수를 탐색하는 대신, 조건을 걸어 유망한 경우로 탐색하기)

불필요한 부분을 줄이고 최대한 올바른 쪽으로 간다! → 특정한 조건을 만족하는 경우만 살펴보는 것

​

깊이 우선 탐색(DFS) 과의 차이점

DFS는 가능한 모든 경로를 탐색하므로 경우의 수를 줄이지 못한다. N! 가지의 경우의 수를 가진 문제는 DFS로 풀지 못함!

​

문제풀이 팁

조건문 등을 걸어서 답이 절대 될 수 없는 상황을 정의 → 그러한 상황일 때 탐색 중지, 그 이전으로 돌아가 다른 경우 탐색하게끔

​ ​

코드

def backTracking () :
    if len(s) == m : # m개가 쌓이면 출력
        print(' '.join(map(str, s)))
        return

    for i in range(1, n+1) :
        if visited[i] :
            continue
        visited[i] = True
        s.append(i)
        backTracking()
        s.pop()
        visited[i] = False


n, m = map(int, input().split())
s = []
visited = [False] * (n+1)

backTracking()

​ ​

풀이

1. 문제 조건인 '1부터 N까지 자연수 중에서 중복 없이 M개를 고른 수열'을 위해 if문을 걸어주었다.
2. 이후에는 첫번째에 쓰인 수를 피해 중복 없이 수열을 만들어야하므로 visited 배열을 사용했다. 이미 방문한 수일 경우 if문을 통해 continue되고, 방문하지 않은 경우 s배열에 해당 수(i)를 추가해준다.
3. 다음 줄에서 재귀방식으로 다시 backTracking 함수를 부르고 위 내용을 반복한다.
4. 첫번째 if문에서 s배열에 m개만큼 숫자가 쌓이면 이를 출력한 후 return하여 함수를 빠져나온다.
5. 이를 반복한다.

​

상세 풀이

n = 4, m = 2일 경우 실행될 코드를 한 줄씩 풀어본다면 아래와 같다.

n = 4
m = 2
visited = [False, False, False, False, False]

backtracking() ->
    len(s) => 0. if문 넘어감
    i = 1
        visited => False이므로 if조건 해당 안됨
        visited[1] = True
        s.append(1)
        backTracking()
            len(s) => 1. if문 넘어감
            i = 1
                visited[1] => True이므로 if조건 해당됨
            i = 2
                visited => False이므로 if조건 해당 안됨
                visited[2] = True
                s.append(2)
                backTracking()
                    len(s) => 2. if문 들어감
                        print -> “1 2”
                        return
                s.pop() =====> 1
                visited[2] = False
            i = 3
                visited[3] => False이므로 if조건 해당 안됨
                visited[3] => True
                s.append(3) ========> 1 3
                backTracking()
                    len(s) => 2. if문 들어감
                        print -> “1 3”
                        return
                s.pop() ======> 1
                visited[3] = False =====> [False, true, false, false, false]
            i = 4
                visited[4] => False이므로 if조건 해당 안됨
                visited[4] => True
                s.append(4) ========> 1 4
                backTracking()
                    len(s) => 2. if문 들어감
                        print -> “1 4”
                        return
                s.pop() ======> 1
                visited[4] = False =====> [False, True, False, False, False]
        s.pop() ======> []
        visited[1] = False ========> [False, False, False, False, False]
    i = 2
        visited => False이므로 if조건 해당 안됨
        visited[2] = True
        s.append(2) ========> [2]
        backTracking()
            len(s) => 1. if문 넘어감
            i = 1
                visited[1] => False이므로 if조건 해당안됨
                visited[1] = True
                s.append(1) ========> [2, 1]
                backTracking()
                    len(s) => 2. if문 들어감
                        print -> “2 1”
                        return
                s.pop() =====> 2
                visited[1] = False
            i = 2
                visited => True이므로 if조건 해당 됨
            i = 3
                .
                .
                .

​ ​

결과

웹개발자라면 피해갈 수 없다는 CORS 에러.. 드디어 나도 맞닥뜨리고 말았다. 네이버 영화검색 API를 적용하며 에러를 발견했고, 삽질했던 기록을 남겨두려한다. ​ ​ ​

CORS

CORS는 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)이며, 다른 출처의 자원에 접근할 수 있는지 권한을 검사하는 관문이기도 하다.

~~ has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

^^.. 많이들 보셨을 에러메시지. 당신은 CORS 정책에 의해 차단되었으며 요청한 리소스에 ACAO 헤더가 없다. 돌아가시오~!

메시지를 보면 Access-Control-Allow-Origin 헤더를 넣으면 될 것 같은데, 나는 네이버의 API를 사용하려고 했으므로 직접 서버 코드를 수정할 수 없었다. 해결을 위해 구글링을 해보니 package.json에 프록시 관련 코드를 넣거나 라이브러리를 통해 프록시를 구축하는 등의 방법이 있었다. ​ ​

프록시 설정하기

package.json에 proxy 추가하기?

package.json에 API 주소를 써넣는 방법으로 우회할 수 있다고 했지만 에러는 해결되지 않았다. 게다가 이는 개발 단계에서만 유효하여 배포 후에는 먹히지 않는다고 하며, 하나의 주소만 쓸 수 있어 다양한 처리가 불가능한 단점이 있었다. ​

라이브러리를 사용해 proxy 설정 완료하기!

그래서 라이브러리를 사용해 설정하기로 했다. npm i http-proxy-middleware

설치 후 ./src 폴더에 setupProxy.js 파일을 만든 후 아래 내용을 작성해주었다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/naver_api",
    createProxyMiddleware({
       target: "https://openapi.naver.com",
       pathRewrite: {
       //naver_api로 시작되는 url을 자동 인식 -> 프록시 처리, /naver_api는 ""로 대체됨
         "^/naver_api": "",
       },
      changeOrigin: true,
    })
  );
};

이렇게 코드를 작성해두면 브라우저에서 naver_api로 시작되는 요청을 보낼 때 설정된 proxy에 의해 변환되어 타겟 url로 보내진다. 다만.. 문제가 생겼다. 이 코드는 대거 수정되게 된다.. ​ ​

프록시 설정 완료! 그런데..

값 리턴이 왜 안돼?!

모두 잘 설정했다고 생각했고, CORS 에러도 해결되었다. 그런데.. API서버에 요청한 값이 리턴되지 않았다.

개발자 도구 - 네트워크에서 나의 요청을 확인해봤다. 이상하다? 상태코드 200으로 잘 뜨는데 왜 로그를 찍어보면 데이터가 계속 undefined로 나오는 거지? 😱

error_code: "052", message: "naver_api : partner does not exists. (등록된 파트너가 없습니다.)"

여기서 미리보기를 확인한 결과.. 에러를 자세히보니 메시지에 "naver_api"가 눈에 띄었다. 부랴부랴 헤더로 돌아가 요청 URL을 확인하니, http://localhost:3000/naver_api/v1/search/movie.json?query=~~ 구분하겠다고 썼던 naver_api가 rewrite처리 되지 않고 그대로 살아서 네이버 API의 요청 URL(https://openapi.naver.com/v1/search/movie.json) 과 다른 주소가 되어 버렸던 거였다. ​

해결

setupProxy.js를 아래처럼 수정하였다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/v1",
    createProxyMiddleware({
       target: "https://openapi.naver.com",
      changeOrigin: true,
    })
  );
};

수정 후 axios.get 부분의 url도

const naverMovieSearch = axios.create({
  headers: {
    "X-Naver-Client-Id": `${keys.NAVER_CLIENT_ID}`,
    "X-Naver-Client-Secret": `${keys.NAVER_CLIENT_SECRET}`,
  },
});

export const movieSearch = (params) => {
  return naverMovieSearch.get("/v1/search/movie.json", { params });
};

이렇게 변경해주어 성공적으로 값을 받아올 수 있었다.

​ ​

정리

1. CORS 해결 위해 http-proxy-middleware 라이브러리 설치
2. setupProxy.js 설정
3. /v1으로 시작하는 url 요청이 프록시를 통과하여 자원에 접근 성공

라이브러리 설치 후 셋업 파일을 설정할 때 구글링으로 알아낸 코드를 그대로 복사 붙여넣기 해서 사용했었던 게 문제인 것 같다. 아무리 기본 틀이라고 해도 내 코드와 완벽히 맞아떨어지지 않을 수 있다는 걸 잊었다..😢 문서나 사용법을 숙지하는 것이 느닷없는 에러를 줄이는 길인 것 같다.

22년 04월 26일 ~ 05월 11일 까지 진행한 프밍 챌린지! 기간동안 다양한 개발 컨텐츠를 소비하고 3일에 한 번씩 가장 의미있었던 컨텐츠를 깃헙에 기고하는 방식으로 진행되었다. 총 5회의 기고를 남기게 되는 셈! 5회 기고를 완료해 챌린지를 성공했고, 그 후기를 남겨보려한다.

​

이전에도 블로그, 유튜브 등을 돌아다니며 개발 컨텐츠들을 접하곤 했지만 읽고나서 스르르 까먹거나 다음에 읽어야지~하고 잊혀지는 것들이 종종 있었기에..😌 이 챌린지를 진행하면서 기록에 대한 중요성을 다시 깨닫게 되었다. 또, 기고할 때 컨텐츠의 TL;DR을 남기도록 되어있던 점 때문에 중요한 부분을 어떻게 정리할지, 어떻게 전달해야할지 고민하면서 읽었던 것 같다. 글쓰기 실력을 높이고 싶다는 생각도 덤으로 따라왔고.

좋은 컨텐츠들을 쉽게 접하게 되고, 읽고 나눌 기회가 주어진다는 점에서 굉장히 유익했던 챌린지였다. 다만 3일동안 괜찮은 컨텐츠를 발견하지 못 했을 때..는 내 마음가짐이 '기고를 위한 글 찾기'가 되어버려서 조금 조급해지기도 했다. 심금을 울리는 글을 찾아야한다는 어떤.. 아주 약간의 부담..?(ㅎㅎ)

​

아무튼, 챌린저분들이 올려주시는 정제된 컨텐츠들이 좋아서 글이 올라올 때마다 최대한 읽게 됐던 것 같다. 그 중에 마음에 박히는 글이 있어 TIL 기록도 시작하게 되었고, 더 다양한 분야의 컨텐츠를 소비해야겠다는 생각도 들었다 :) 이번 챌린지는 끝났지만 괜찮은 컨텐츠를 발견하면 프밍에도 계속 기고해보려한다!

#프밍챌린지_1기 후기 끝😋

✅ 프밍 깃허브 ✅ 프밍 챌린지 노션 ⬆️ 관심있는 분들은 링크들 확인하세요!

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. eslintjsx-a11y/alt-text

<img src={location.state.thumbnail} />

리액트에서 이렇게 작성했을때, 위와 같은 에러가 뜬다면

<img src={location.state.thumbnail} alt={location.state.thumbnail} />

이렇게, alt 부분을 추가해주면 된다.

alt속성은 이미지를 보여줄 수 없는 경우, 또는 스크린리더 사용 시 등에 보이는 대체텍스트를 정의해주는 것이다. ESLint extention에서 웹 접근성을 충족하기 위해 강제 아닌 강제(?)를 시켜주어 알게 된 내용이라 정리한다.

프로젝트에 WYSIWYG 에디터를 삽입하고자 찾아본 결과 CKEditor가 나온지 오래되기도 했고 많이들 사용한다는 말에 설치하게 되었다. 적용 결과 사용도 쉽고 UI도 깔끔해서, 추후에도 사용해보고자 그 과정을 정리한다.

1. 설치

npm이나 yarn을 이용하여 라이브러리를 설치한다. ClassicEditor를 구현하므로 두번째 라이브러리도 함께 설치해준다. npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

​ ​​ ​

2. 코드 구현

1) 기본 구현

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default App;

|| 출처 : ckeditor 공식 문서 기본 구현은 이렇게 하고, 기타 필요한 옵션이나 기능이 있다면 직접 커스텀하면 된다! 아직은 크게 커스텀할 부분은 없었어서 내가 적용한 아~주 작은 부분만 정리했다. 추후 코드 수정 시 이 글도 수정하려한다. ​

(1) placeholder 적용

기본 구현을 마치면 화면 로드 시 data 부분에 써있는 내용이 보여진다. 이건 사용자가 직접 지우고 사용을 해야하기 때문에 placeholder가 필요했다. 하단 내용처럼 수정해주었다.

<CKEditor
    editor={ClassicEditor}
        config={{
            placeholder: "내용을 입력하세요.",
        }}
    onReady={(editor) => {
      ~
         ~

이 config에서 에디터 기본 기능을 넣고 뺄 수도 있지만 나는 기본 그대로 사용했다.

(2) 에디터 css 적용

에디터 자체에 들어가는 스타일인 것 같다.

.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  min-height: 400px;
  margin-bottom: 20px;
}

​ ​ 결과는 아래와 같다!

2) 데이터 HTML 파싱

npm i react-html-parser CKEditor로 작성한 data는 html 형태(ex. < p>안녕하세요</ p>)로 저장된다. html parser를 다운 받아 저장된 데이터를 '태그가 적용된' 형태로 보여지게끔 했다.

import ReactHtmlParser from "react-html-parser";

~

//viewContent는 저장된 글 내용을 보여주는 state이며,
//별도의 버튼에 onClick 이벤트로 글 내용을 state에 저장하게 했다.
{viewContent.map((ele) => (
      <div className="temp_postTest">
         <h3>{ele.title}</h3>
      <div>{ReactHtmlParser(ele.content)}</div>
   </div>
))}

글을 state에 저장하고 파싱한 후 보여준 모습이다. ​ ​​ ​

3. 구현 중 맞닥뜨린 에러

1) react-html-parser -> buffer 모듈을 찾지 못 함

Module not found: Error: Can't resolve 'buffer' in '/Users/~~~/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

버퍼 모듈을 찾을 수 없고, 폴리필 어쩌구~ 하던 에러 내용. CKEditor를 사용하기 위해 검색하면서 웹팩을 직접 갈아야 한다는 글들을 봐서 그런지 괜히 어렵게 생각했었다.. 🤔 굳이 그럴 필요는 없는 것 같고, 일단 지금까지 구현한 내용을 보면 저 buffer라는 모듈을 다운받아주면 되었다!

npm install buffer

싹~ 해결됩니다.

​ ​​ ​

마무리

조금 헤맨 부분도 있지만 잘 커스텀하면 글쓰기 기능을 가진 웹페이지에서 유용하게 쓰일 것 같다. 굿!

SASS(Syntactically Awesome Style Sheets)

#문법적으로 대박 멋진 스타일시트!

웹페이지에 필수적이지만 사용하기에 어려움&헷갈림이 많은 css를 유지보수 하기 쉽게 만들어준다. SASS는 CSS 전처리기로, CSS가 만들어지기 전에 변수, 조건문, 내장함수 등의 다양한 문법을 사용할 수 있다.

비슷한 전처리기로는 SCSS, Less, Stylus 등이 있다. 이들은 문법이나 작동 방식이 조금 다르지만 모두 비슷한 일을 한다.

특징

• 들여쓰기 문법을 사용한다 (+ 줄바꿈) ​ ​ ​

  SCSS(Sassy CSS)

#멋진 CSSㅋ

SCSS는 기존의 CSS 작성 방식과 유사하고, CSS에 좀 더 호환될 수 있도록 도입되었다. 대괄호와 세미콜론을 사용해서 좀 더 친숙하게 사용 가능하다. SASS가 2010년 5월에 버전3로 업그레이드 되며 갖춰진 새로운 문법 체계이며, 공식 문서도 SCSS로 작성되어있다.

특징

• CSS를 구조화하여 사용할 수 있다

• SASS보다 더 넓은 범용성, 호환성을 가진다

• 대괄호와 세미콜론을 사용한다. ​ ​ ​

  공통점

• 두 문법 모두 스타일에 변수를 만들어서 적용할 수 있다.

• @mixin을 선언하여 사이트 전체에서 재사용 가능한 css 속성 그룹을 만들 수 있다.

  출처 : https://sass-lang.com/guide

• @extend로 css 속성 집합 공유가 가능하다.
• 컴파일 후 일반 css 문법으로 바꾸어 적용한다

​

SassMeister | The Sass Playground! ** 설치 없이 컴파일을 테스트할 수 있는 사이트**

리액트 템플릿을 찾아보다가 발견한 SCSS. 평생 헷갈리고 헤멜 줄 알았던 css도 뭔가 가능성이 보이는 것 같다 😄 특히 @mixin이 정말 자주 쓰일 것 같다! 지금 하는 프로젝트에도 적용해봐야겠다.

​ ​ 참고 링크 https://nykim.work/97 https://sass-lang.com/

만들고있는 프로젝트에서 라이브러리를 바꾸면서 서버 연결 방식이 axios에서 ajax로 바뀌었다. (라이브러리가 ajax 방식의 서버 업로드를 기본 지원함)

새로 사용하는 라이브러리는 FilePond(https://github.com/pqina/react-filepond)라는 건데, css 디자인과 애니메이션을 모두 제공하여 예쁘고 사용성이 좋다. 각종 props도 잘 정의되어 있어서 그대로 쓰기 좋았다. 더 잘 사용하기 위해 업로드 방식을 알아봤다.

FilePond 라이브러리 업로드 방식

• POST 방식으로 URL에 config와 form data를 담아서 보냈음
  • 헤더 타입 : multipart/form-data
• 공식 Docs에서 제공하는 업로드 프로세스
  1. FilePond는 POST 요청을 사용하여 my-file.jpg 파일을 multipart/form-data로 업로드합니다.
  2. 서버는 파일을 고유한 위치에 저장합니다. tmp/12345/my-file.jpg
  3. 서버는 text/plain 응답에서 고유한 위치 ID12345를 반환합니다.
  4. FilePond는 숨겨진 입력 필드에 고유 ID 12345를 저장 합니다.
  5. 클라이언트는 고유 ID를 가진 숨겨진 입력 필드가 포함된 FilePond 상위 양식을 제출합니다.
  6. 서버는 고유 ID를 사용하여 tmp/12345/my-file.jpg를 최종 위치 로 이동 하고 tmp/12345 폴더를 제거 합니다.

​ ​ ajax와 Flask의 연결성도 괜찮은 것 같아 더 조사해보려고 한다. 이에따라 ajax, axios의 특징, 차이를 정리해보았다.

그전에.. 기존에 사용했던 코드도 같이 기록해둔다. axios도 모듈만 설치하면 아주 간단하게 사용할 수 있어서, 다른 프로젝트에서도 사용해보려고 한다.

기존에 사용했던 코드 - axios 방식

const [selectedFiles, setSelectedFiles] = useState(null);

//파일 전송 핸들러
  function submitFileHandler() {
    const formData = new FormData();

    formData.append(
      //"uploadFile", //name값으로 string 메시지
      selectedFiles, //value값은 파일 정보
      selectedFiles.name // filename값은 파일명
    );

    const config = {
      headers: {
        "content-type": 'multipart/form-data'
      }
    };

    axios.post(UPLOAD_URL, formData, config)
     .then(res => {console.log('send ok', res)})
     .catch(err => {console.log('send fail', err)})
  }

• 이런식으로, POST 방식으로 URL에 config와 form data를 담아서 보냈었다.
  • 헤더 타입 : multipart/form-data

​ ​

AJAX, AXIOS

AJAX

• Asynchronous Javascript And XML. 비동기식 자바스크립트 XML
• 자바스크립트를 사용해 웹서버와 클라이언트간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술
• 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
• 백그라운드에서 데이터 주고받기 가능
  • JSON
  • XML
  • HTML
  • 텍스트 파일 등
• jQuery의 AJAX가 통상적임! (순수 ajax는 잘 안 씀) ​

AXIOS

• 브라우저, node.js를 위한 promise를 기반한 HTTP 통신 라이브러리
• promise 객체로 return 해주기 때문에 response 데이터를 다루기 쉬움
• es6 문법을 사용함
• 비동기 방식으로 HTTP 데이터 통신 가능
• 자동으로 JSON 데이터로 변형시켜줌
• 크로스브라우징에 특화되어 있어 브라우저 호환성이 뛰어남

​ ​

AJAX, AXIOS 차이

AJAX

• promise 기반이 아님
• jQuery를 사용해야함(?)
• error, success, complete 상태가 있어 실행 흐름 조절 가능

AXIOS

• 라이브러리 설치가 필요함
• 응답 시간 초과 설정 가능
• 요청 중단, 취소 가능
• js의 내장 라이브러리인 fetch보다 더 많은 기능을 제공함

​ 둘 다 비동기식 통신에서 많이쓰이는 방법이므로, 자기에게 편한 것을 쓰면 될 것 같다!

GitHub에서 기존 터미널 상에서 아이디와 비밀번호만으로 push를 사용할 수 있었던 방법을 보안상의 이유로 막아버렸다.

Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.

한참 전부터 메일 등으로 안내했던 터라 Personal Access Token은 만들어놨었는데, 이를 내 맥북에 등록해두지 않아 위와 같은 에러 메시지가 출력되었다.

토큰을 만든 후 맥북에 적용하는 방법을 기록한다.

1. 키체인 접근 앱을 실행한다. 2. 검색창에 github.com 을 검색 3. '인터넷 암호' 종류로 표시되는 github.com을 더블 클릭해 암호 보기 체크박스를 선택한다.

4, Mac 암호를 입력해 잠겨있던 박스를 열고 발급받은 토큰을 넣은 후 변경 사항 저장 버튼을 클릭한다.

React 버전 16.8부터 React 요소로 새로 추가된 기능이다. 기존 Class 기반의 코드가 아니어도 상태값 등을 사용해 함수형 방식의 프로그래밍을 할 수 있다.

또한, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있게 된다. 또한 이러한 로직의 추적을 쉽게 할 수 있도록 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다.

(https://ko.reactjs.org/docs/hooks-intro.html 참고)

​ ​

Hooks의 장점

• 코드가 예뻐진다! 😝 간결하며 직관적이다.
• class를 사용하지 않고 함수형 프로그래밍이 가능하다.
• 보다 짧은 코드로 state를 사용할 수 있다.
  • 원래 state를 사용하려면 this같은 문장 규칙, render를 사용하는 방법을 생각했어야 했음
    • state 선언
    • render() 내에 이벤트 작성할 경우 함수로 풀어내어 this.setState(state ⇒ { return (item: state.item + 1) }) 이런식으로 굉장히 길어짐

​ ​

Hooks의 종류

이 글에선 Nomad Coder 강의로 배운 종류만 기록한다.

useState

const [ item, setItem ] = useState();

- state값을 초기화 시켜준다.
- 초기에 initialState를 세팅할 수 있는 옵션을 제공한다.
→ ()에 값 지정 가능
- array를 return 해야 한다. 여기서는 item, setItem 요소를 가진다.
- **항상 2개의 value를 return**
  - value = item, 값
  - 만약 item만 사용한다면
```const item = useState(1)[0]```
- 사용 예시
  - 출력 :: `<h1> { item } </h1>` 
  - 카운터 하나 올리기 :: `const plusItem = () ⇒ setItem(item + 1);`

​
​


### useEffect
>```javascript
useEffect(function, [dependency]);

• component가 mount 되자마자, 또는 화면이 새로고침되면 실행된다.

  • 컴포넌트가 렌더링 되면 특정 작업을 실행하도록 할 수 있다.
  • 모든 변화를 감시하며, 화면이 새로고침되면(state의 갱신...) useEffect를 실행한다.

• 두 개의 인자는 function으로써의 effect, dependency를 가진다.

  • 첫번째 인자는 useEffect로부터 function이 리턴되는 것이며, 이는 componentWillUnmount와 같다.
  • 만약 dependency(deps)가 있다면 effect는 deps 리스트에 있는 값일 때만 값이 변하도록 활성화된다.
  • 두번째 인자에 어떠한 값이 존재하고, 그 값의 state가 변하면 useEffect를 실행시킨다.

• 만약 dependency에 빈배열( [] )이 들어있다면 component가 mount되었을 때 한 번만 실행되고 더이상 실행되지 않을 것이다.

• componentWillUnmount, componentDidMount, componentWillUpdate와 비슷함

• dependency에 빈배열이 들어가 있는 상태에서 useEffect안에 function을 넣으면 componentDidMount, componentDidUpdate때 호출될 것임

  • 만약 deps가 존재한다면 function은 componentDidMount일 때만 호출됨
    • componentWillUnmount 로부터 function 리턴 받음. 이를 Clean Up Function이라 부른다!

​ ​

useRef

const refContainer = useRef (initialValue);

- DOM 노드나 React 엘리먼트에 직접 접근하기 위해서 사용하기도 함
- 기존 함수형 컴포넌트 내부에 선언된 변수와 그것이 감싸는 데이터는 해당 컴포넌트가 호출될 때마다 **초기화됨**. (리렌더링)
  - 반면 useRef로 관리되는 변수는 값이 바뀌어도 리렌더링 되지 않음. 
  → <span style='color:purple'>**리렌더링 없이 값을 변화시킬 수 있음!!!**</span>
  - current가 가리키는 값은 React에 의해 기억되기에 직접 변경하기 전까지는 해당 컴포넌트가 호출될 때마다 동일함

라라랜드 픽셀아트 제작

Tool :: Illustrator 181003

친구네 강아지 도니 일러스트 배경화면.

원본 사진은 이것!

Tool :: Illustrator 181003

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

이러한 warning이 발생한다. ​

이는 ActionButton 코드 상에 사용되었던 componentWillReceiveProps이 UNSAFE_componentWillReceiveProps으로 이름이 변경되었으며, 17버전부터는 사용이 중단되고 새로운 이름만 작동하도록 변경되었기 때문이다.

​

​

워닝이 났을 경우 터미널에 위 같은 안내문구가 나오는데, 안내된 대로

npx react-codemod rename-unsafe-lifecycles

를 실행하면 해결될... 줄 알았으나, 나같은 경우 죄다 skipped만 됐다.

​ ​

docs를 찾아본 결과,

이제는 componentWillReceiveProps 자체를 사용해선 안된다고 하여,

문제가 된 컴포넌트를 제시된 방법으로 'componentDidUpdate'로 바꿔주니 워닝이 사라졌다.

​

​

​

내가 사용했던 react-native-action-button의 경우

ActionButtons.js 에서 42번째 라인의

componentWillReceiveProps => componentDidUpdate 로 변경하면 해결된다.

​

​

​

출처 :

https://ko.reactjs.org/docs/react-component.html#updating

https://github.com/mastermoo/react-native-action-button/issues/365#issuecomment-797476260

​

1. 프로젝트의 홈으로 진입

2. Mac의 경우 터미널에 ls -a 명령 입력

   Windows의 경우 dir /a 명령 입력 시 모든 파일, 폴더 출력됨

3. 여기서 .gitignore 파일을 찾아 *vi .gitignore *

4. i를 눌러 편집모드로 변경, 하단에 필요한 내용 삽입 후 esc를 눌러 빠져나옴

5. 확인 후 :wq! 해 저장

remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.

remote: error: File android/java_pid~.hprof is 407.24 MB; this exceeds GitHub's file size limit of 100.00 MB

​

리액트네이티브 개발을 하면서, 라이브러리 패키지 업데이트나 gradle 업그레이드를 했을 경우 가끔씩 hprof 파일이 생성됐다. 이는 자바 heap 덤프 파일이라고 하며 꽤 큰 용량을 가지고 있었다.

그래서 이것을 자칫 삭제하지 않고 커밋하면 push가 되지 않는 난감한 상황이 발생되었다.

그럴 때 쓸 수 있는 해결 방법이다.

​

​

$ git filter-branch --tree-filter 'rm -rf android/java_pid~~~.hprof**' HEAD

위 명령으로 Git이 해당 파일을 추적해 커밋되지 않도록 설정할 수 있다.

​

​

​

그러나 내 경우엔.. hprof 파일이 포함된 채로 커밋한 후 푸시가 안 돼 당황하다가 파일을 지워버리고.. 지운 기록까지 커밋해버렸다.. ^^;

​ ​

그럴 땐 이 방법을 쓰면 된다.

Git 기록에서 파일을 영구적으로 삭제하는 방법이다.

$ git filter-branch -f --index-filter 'git rm --cached --ignore-unmatch android/java_pid~~~.hprof' --prune-empty -- --all

실행하면 이렇게 Rewrite를 주루룩 한다.

​

$ git push --force --all

그다음 강제 푸시 해버리면 된다.

History를 확인해보면 골치였던 hprof 파일 기록이 싹 삭제되었을 것이다.

​

​

터미널에 아래 명령을 작성하면 된다.

react-native start --reset-cache
react-native run-ios

​

​

npm install hermesvm
npm install jsc-android

npm 또는 yarn으로 패키지를 설치한 후 하단 코드 존재 여부 확인 및 추가

​ ​

build.gradle (Project)

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
   }
}

​ ​

build.gradle (app)

project.ext.react = [
    entryFile: "index.js", ///해당 라인 추가...
    enableHermes: false,  // clean and rebuild if changing
]

dependencies {
    if (enableHermes) {
        //def hermesPath = "../../node_modules/hermes-engine/android/";
        def hermesPath = "../../node_modules/hermesvm/android/"; ///해당 라인 추가...
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

추가로 minSdkVersion도 문제일까 싶어 20이상으로 수정해주었다.

그리고 해결!

​

​

​

​

참고한 링크

https://github.com/facebook/react-native/issues/25537

​