프로그래밍 공부 노트

  HTML에서 몇몇 특수문자를 사용하려고하면 아래와 같이 오류가 발생한다. html은 "< " 와 같은 특수문자를 사용하면 태그를 작성하려고 한다고 생각해서 이와 같이 오류가 발생된다. 나는 태그를 작성하려는게 아니라 단지 방향을 표시하고 싶은건데 말이다. 위와 같은 특수문자를 화면에 동일하게 출력하면서 위 처럼 오류가 발생하지 않게 해주는것이 HTML 엔티티(entity)이다. HTMl entity를 사용해서 아래와 같이 작성하면 우리가 위에서 작성한것과 같이 "<- 이쪽 방향을 봐주세요"가 화면에 동일하게 출력되는것을 확인할 수 있다. < p > &lt; - 이쪽 방향을 봐주세요. </ p > ; 특수문자 뿐만아니라 공백(띄어쓰기)과 같은 문제도 HTMl entity를 사용해서 해결 할 수 있다.  < p > &lt; - 이쪽 방향을 봐주세요. </ p > ; 위와같이 html을 작성해도 우리 화면에는 "<- 이쪽 방향을 봐주세요" 이렇게 텍스트가 붙어서 출력된다. 이런 공백(띄어쓰기)를 표현하기 위해서는  &nbsp; 엔티티를 사용하면 된다. < p > &lt; - &nbsp;&nbsp;&nbsp;&nbsp; 이쪽 &nbsp;&nbsp;&nbsp;&nbsp; 방향을 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 봐주세요. </ p > ; 이렇게 작성해주면 우리가 원하던대로 "<-             이쪽          방향을        봐주세요" 이렇게 공백(띄어쓰기)을 제대로 화면에 출력하게 된다. 이외에도 다양한 문자들을 아래 문법을 사용해서 표현할 수 있다. &엔티티이름; 또는 &#엔티티숫자; 대표적으로 많이

  예전에 프로젝트하면서 해쉬태그 관련 컴포넌트를 만들었던적이 있어서 그대로 가져와서 이번 프로젝트에서 사용하려했는데 onKeyPress 이벤트가 Deprecated 되었다고 나와서 MDN 가이드대로 keydown 으로 수정해보았다. 여기서 문제가 발생했는데 onKeyPress 이벤트에서는 아무 문제가 없는데 onKeyDown 이벤트를 사용했을때 동영상에서 처럼 마지막 글자가 한번더 출력되는 문제가 발생했다. 내가 작성한 setState와 관련한 비동기적인 동작 순서를 내가 잘못생각해서 발생되는 문제인줄 알았는데 찾아보니 해당 문제는 크롬 브라우저에서 한글을 입력하는 경우만 해당 문제가 발생하는것을 알게됐다. 키보드 이벤트 발생시 이벤트 핸들러가 두번 호출되는 문제였다. 한글의 경우 자음과 모음의 조합으로 한 음절이 만들어지는 조합 문자이기 때문에 글자가 조합중인지, 조합이 끝난 상태인지를 알 수 없기 때문에 발생하는 문제였다. 해당 문제는 isComposing 이라는 값을 체크해 해결할 수 있었다. 그런데 여기서 또 하나의 문제 event.isComposing 또는 event.target.isComposing을 사용하려고해도 해당 메소드가 없다고 나왔다. 예전에 React 공식 문서에서 브라우저 고유 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조하라는 글을 본적이 있었다. 아래 링크를 첨부했다. 아래처럼 코드를 작성하면 아래 동영상처럼 해결이 된다. 문제 해결 완료! 참고하면 좋을만한 링크 https://levelup.gitconnected.com/javascript-events-handlers-keyboard-and-load-events-1b3e46a6b0c3 https://ko.reactjs.org/docs/events.html#overview

태그와 문자열이 함께 저장되어있는 JSON 데이터를 받아와 화면에 출력하려고 했다. HTML 태그와 문자열을 포함하는 json 데이터 컴포넌트에 json 데이터 출력 json 데이터 출력 결과 우리가 상상하는것과 다르게 태그가 문자열 그대로 출력된다. React 공식 문서에 따르면 일반적인 코드에 HTML 코드를 삽입하는것은 Cross-Site Scripting(XSS)에 취약하다고 한다. 사용자가 임의로 웹페이지에 스크립트를 적용할 수 있어 이러한 문제점을 차단하기위해 무조건 텍스트로만 출력되게 설정되어있다고 한다. 그래서 우리가 상상하던데로 출력되지않고 문자열 그대로 태그가 출력 되는것이었다. React 공식 문서에 따르면 DOM에 innerHTML을 사용하려면 즉, 태그를 포함한 문자열 데이터를 태그가 적용되어 출력되게 하기위해서는 대체 방법인 dangerouslySetInnerHTML 을 사용하라고 나와있다. dangerouslySetInnerHTML 속성명을 보면 알 수 있듯이 개발자에게 위험하다는것을 한번더 상기시키기 위해서  dangerously라는 단어가 포함되어있는  dangerouslySetInnerHTML을 사용해서 출력하게 한다는것이다. 사진과 같이 __html을 객체의 키로 전달하고 value값으로 태그가 포함된 문자열 데이터를 전달하면 우리가 상상하던것과 같이 출력된다. dangerouslySetInnerHTML  출력 결과  

useEffect와 useLayoutEffect 둘의 사용법은 아래와 같다. useLayoutEffect 1 2 3 4 5 6 useLayoutEffect(()  = >  {   effect    return  ()  = >  {     cleanup   }; }, [input]) cs useEffect 1 2 3 4 5 6 useEffect(()  = >  {   effect    return  ()  = >  {     cleanup   } }, [input]) cs useEffect 와 useLayoutEffect을 확인해보면 동일한 형태로 사용된다. 하지만 둘의 차이점은 바로 실행 시점의 차이이다. useEffect 동작 순서 1. DOM 렌더링(레이아웃 배치 등) 2. useEffect 내부 로직 수행 및 state 값 업데이트 3. 업데이트 된 state 값으로 DOM 리렌더링 useEffect는 비동기적으로 실행된다. useLayoutEffect 동작 순서 1. useLayoutEffect 내부 로직 수행 및 state 값 업데이트 2. 업데이트 된 state 값으로 DOM 렌더링 useLayoutEffect는 동기적으로 실행된다.

useCallback React에서 이벤트 핸들링을 해야할 때 보통 컴포넌트 내부에 함수를 선언하게 된다. React 컴포넌트는 컴포넌트 내부의 상태값이 변경될 때 리렌더링이 발생된다. 상태값이 변경되면서 리렌더링이 발생될 때 컴포넌트 내부에 선언한 함수 또한 새로 호출되게 된다. 이렇게 되면 불필요하게 메모리가 낭비되어 최적화에 좋지 못하다. 왜냐하면 특정 상태의 변경과 아무 상관도없는 함수도 계속해서 새로이 만들어지기 때문이다. 이러한 문제점을 방지할 수 있는것이 useCallback 이다. useCallback을 사용하면 지정한 특정 상태값(의존성)이 변경되지 않는한 컴포넌트 내부에 선언한 함수가 리렌더링시 새로이 생성되는것을 방지할 수 있다. const memoizedCallback = useCallback ( () => { doSomething ( a , b ) ; }, [a , b] , ) ; 공식 문서를 보면 메모이제이션된 콜백을 반환하며 그러한 콜백은 의존성이 변경되었을 때에만 변경된다고 나와있다. 즉 메모이제이션된 콜백을 반환한다는 말은 이전에 생성한 함수를 캐싱해둿다가(기억해 뒀다가) 재사용할 수 있는 콜백함수를 반환한다는 말이고 두번째 인자인 deps 배열 내부에 작성한 상태값(의존성)이 변경되지 않으면 리렌더링시 함수가 새로이 생성되는것을 방지한다는것이다. useCallback을 사용하면서 주의할 점은 useCallback 내부에서 사용되는 상태값(의존성)은 모두 useCallback의 두번째 인자에 의존성으로 모두 작성해 주어야한다. 그러지 않으면 초기의 상태값을 기억해 기존 상태값을 계속해서 반환하게 된다. 마지막으로 useCallback을 꼭 사용해야하는 때는 부모 컴포넌트에서 자식 컴포넌트에 props로 함수를 전달할 때 이다.  그 이유는 함수가 객체로 취급될 수 있기 때문에 자식 컴포넌트에서는 이전에 props로 전달된 함수와 다른 함수라고 인식하여 리렌더링이 발생할 수 있기

프로젝트를 진행하다보면 공개하기 민감한 정보들이 프로젝트내에서 코드들과 함께 작성되어있게 된다. 이럴때 공개되면 안될만한 정보들을 관리할 수 있는것이 환경변수이다. 이러한 환경변수를 사용하기 위해서는 라이브러리가 필요하다. $ npm install dotenv https://www.npmjs.com/package/dotenv 사용법은 간단하다. import dotenv from " dotenv "; dotenv . config () ; 다운받은 라이브러리를 이렇게 프로젝트 상단에 import 해오고 프로젝트 최상단 디렉토리에 .env 파일을 생성한다. src 디렉토리가 아닌 package.json과 동일한 깊이의? 디렉토리에 놔두어야 한다. 일반적으로 환경변수를 작성할때에는 아래와 같이 작성한다. KAKAO_MAP_API=abcabcabcabcabc GOOGLE_MAP_API=1a2a3a4a5a6a7a8a9a 🌟주의 :  " " 쌍따옴표나 ' ' 작은 따옴표등으로 감싸면 동작하지 못하니 주의해야 한다. 띄어쓰기 등도 하면 안된다. 이렇게 선언한  환경변수는 process.env.변수명 으로 사용할 수 있다. 하지만 React(리액트)에서는 조금 다른 방식으로 환경변수를 사용할 수 있다. React 의 경우는 환경변수 앞에 필수적으로 아래의 키워드 REACT_APP_ 키워드를 붙여줘야 한다. REACT_APP_ react 에서도 똑같이 process.env.변수명으로 접근하여 환경변수를 사용할 수 있다. ex) 마지막으로 제일 중요한 부분!!! .gitignore 파일에 .env 작성하기!!!

구글 폰트 (Google Fonts) https://fonts.google.com/  방법은 간단하다. 구글 폰트에 들어가서 원하는 폰트를 선택한 후 CSS 파일을 생성해서  해당 폰트에 대한 코드를 붙여 넣기 한 후 적용하고자 하는 Component 에서 import "./LeftMenu.css" 를 아래와 같이 입력하여 적용하면 된다. 작성한 .Logo-Font 를 아래와 같이 className 으로 적용한다. 적용 성공!

자바스크립트를 공부하다가 어떤 블로그는 target을 사용해서 이벤트를 처리하고 다른 블로그는 currentTarget을 사용해서 이벤트를 처리하고있었다. 찾아보니 이벤트 버블링으로 인해 둘을 구분해서 사용한다고 한다. 예제를 통해 둘을 비교해보면 import React , { useEffect } from "react" ; function LangingPage () { const clickTest = ( e ) => { console . log ( e . target ); console . log ( e . currentTarget ); }; return ( < div > < h1 > 시작 페이지 </ h1 > < li > < button onClick = { clickTest } > < span > 제출 </ span > </ button > </ li > </ div > ); } export default LangingPage ; 위 예제는 리액트로 작성했다. 버튼을 클릭해보면 아래와 같이 다르게 결과물이 출력되는것을 확인할 수 있다. 출력 순서는 target, currentTarget 순이다. target은 실제로 내가 클릭한 태그를 반환하고 currentTarget은  onClick 이벤트가 작성되어있는  태그를 반환한다. 여기서 이벤트 버블링이라는 개념이 적용되는데 span 태그를 클릭했어도 이벤트 버블링으로 인해 이벤트가 button 태그까지 전달되어 button 태그에 작성된 onClick 이벤트가 동작하게된다. 이벤트 버블링으로인해 onClick 이벤트에서는 어느 태그가 클릭되었는지 target event로 알 수 있다. 자세한 설명이 적혀있는 참고 링크를 아래에 첨부해 두었다

 오늘은 국비학원에서 프로젝트하면서 사용 될 드래그 앤 드롭 컴포넌트를 작성했다. 아래 라이브러리를 다운받아서 만들어봤다. react-dnd  react-dnd-html5-backend 아직 미완성이고 드래그엔 드롭한 데이터를 받아와 백엔드에 요청하고 해당 관련 데이터를 받아오는 작업을 해야한다. 소스코드: https://github.com/seungwonleee/Drag-and-Drop

[React] CORS 이슈 , Proxy 설정하기 client 와 server 가 사용하는 포트가 다를때 Cross-Origin Resource Sharing 즉, CORS 이슈가 발생한다. Cross-Origin Resource Sharing (CORS) Cross 는 정보의 이동을 뜻하고 Origin 은 client와 server 각각을 의미한다. Resource 는 말그대로 자원 즉, 데이터를 말하며 Sharing 은 공유를 말한다. 즉, client와  server 간의 데이터 공유에 있어서 발생하는 보안 문제점에 관한 정책이다. 한국어로 교차 출처 리소스 공유라고 하며 교차 출처 자원 공유는 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 특정한 도메인간의 요청 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다. 예시를 들어보면  1) Web Docment    -------------------------> Web Server (domain-a.com)                                                 (domain-a.com) 둘은 Same-origin requests이기 때문에 항상 허용되지만 2) Web Docment    -------------------------> Web Server (domain-a.com)                                                 (domain-b.com) 둘은 Cross-origin requests이기 때문에 CORS 정책에 의해 컨트롤 된다. 나의 경우 프로젝트를 할때  client 쪽은 리액트를 사용하여 3000번 포트를 사용하고 있었고 server 쪽은 nodejs 를 사용하여 구성했는데 5000번 포트를 사용하고 있어서 client 쪽에서 요청을 보내더라도 server와의 포트가 다르기 때문에 요청에 대한 응답을 제대로 받을 수 없었다. 해결방법으로 http