반응형 Dev. Yelee ˗ˋˏϟˎˊ˗99 [React.js/리액트] ReactDOM.render() , ReactDOM.hydrate()의 차이점 회사에서 시니어분들이 구축해놓은 프로젝트에 로직에 관련된 코드를 얹기만 하는 수준이라 정확히 리액트의 원리에 대해 깊게 이해할 시간을 가지지 못했다. 개인 프로젝트를 진행하면서 하나씩 차근차근 살펴보려 한다. 1. ReactDOM.render() 먼저 react 프로젝트를 생성하면 아래와 같은 index.js 페이지를 볼 수 있다. ReactDOM.render(element, container[, callback]) 여기서 주목해야 될 코드는 ReactDOM.redner()이다 ReactDOM은 브라우저에 UI를 렌더링 할 때 사용하는 라이브러리이다. 프로젝트를 실행하면 App이라는 React 컴포넌트를 document.getElementById('root')로 불러와진 Dom Element에 렌더링 하.. 2022. 2. 14. [React/리액트] react-scripts: command not found / Command failed with exit code 127. 에러 발생 리액트 프로젝트를 열어서 start를 했더니 아래와 같은 상황이 발생했다 $ portfolio % yarn start yarn run v1.22.10 warning ../../../package.json: No license field $ react-scripts start /bin/sh: react-scripts: command not found error Command failed with exit code 127. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 에러의 원인 정확하진 않지만 git에 있는 리액트 프로젝트를 내 로컬에 다른 이름으로 clone 받았는데 그러면서 경로가 꼬인.. 2022. 2. 13. [ VSCode/MacOS] 터미널에서 VSCode 열기 터미널에서 프로젝트를 clone 받은 후 VSCode를 찾아서 열고 또 거기서 프로젝트가 있는 경로를 찾아 불러오는 번거로움을 피하기 위해.. 터미널에서 간단한 명령어로 바로 VSCode를 열 수 있도록 설정했다 1. VSCode를 먼저 열어주세요 2. Command + Shift + P -> shell 검색 -> Install 'code' command in PATH 클릭! 3. 설치 완료 표시 확인 4. 터미널에서 열기 cd 폴더위치 // code . // VSCode를 여는 명령어 이제 터미널에서 code . 명령어로 간단하게 VSCode를 열수 있다. 2022. 2. 12. [React/리액트] 리액트로 .txt 파일 다운로드 예제 다운로드 버튼 클릭 시 사용자의 정보를 .txt 파일로 다운로드되게 해 달라는 요청을 받았다. 거두절미하고 바로 예제로 들어가보겠습니다 1) 컴포넌트 예제를 위해 간단한 버튼을 하나 생성하여 click 하면 exportTXT() 함수가 실행되게 작성했습니다 return exportTxt()}>export 2) 함수 const exportTxt = useCallback(() => { let fileName = '파일이름.txt'; let output = "string 타입의 데이터"; const element = document.createElement('a'); const file = new Blob([output], { type: 'text/plain', }); element.href = URL.cre.. 2022. 2. 10. 이전 1 ··· 12 13 14 15 16 17 18 ··· 25 다음 반응형
