프론트엔드 (50) 썸네일형 리스트형 CRA_리액트 프로젝트 만들기 CRA = create react app = 리액트 보일러플레이트 = 편하게 리액트 프로젝트를 만들어주는 도구 보일러플레이트? 컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. 개발자들에게 불필요하고 복잡하고 도움이 안 되는 반복적인 일들을 하지 않도록 도와주는 것이 보일러 플레이트 반복적으로 사용되는 부분을 재사용 최소한의 수정으로 재사용 개발자를 단순 작업으로부터 해방 CRA가 이 ‘보일러플레이트’의 역할을 해주기 때문에 ‘리액트 보일러플레이트’라고 한다. 요약하자면, 보일러플레이트의 장점 : 반복적으로 사용되는 부분을 재사용 최소한의 수정으로 재사용 개발자를 단순 작업으로부터 해방 C.. class vs interface 인터페이스 ES6가 지원하지 않는 타입스크립트만의 특징 인터페이스는 타입이며 컴파일 후에 사라진다. 추상 클래스는 선언과 구현이 모두 존재하지만 인터페이스는 선언만 존재하며, 멤버 변수와 멤버 메서드를 선언할 수 있지만 접근 제한자는 설정할 수 없다. 클래스와 달리 interface는 TypeScript의 컨텍스트 내에서만 존재하는 가상 구조 TypeScript 컴파일러는 타입 체크 목적으로만 인터페이스를 사용한다. 코드가 JavaScript 언어로 트랜스 파일되면 인터페이스에서 제거된다. 인터페이스 예시 let person = { name: 'Capt', age: 28}; function logAge(obj: { age: number }) { console.log(obj.age); // 28 } log.. Linux Git : 기초 CLI(Command-Line Interface) 입력하는 글자와 출력되는 글자로 컴퓨터와 소통할 수 있다. GUI(Graphical User Interface) 대표적인 예시 : Windows JavaScript가 돌아가는 환경 = 런타임 = 브라우저와 Node.js NVM nvm은 Node.js의 다양한 버전을 관리하는 프로그램 nvm을 사용하면 Node.js의 다양한 버전을 쉽게 설치하고, 사용할 수 있습니다. nvm으로 Node.js의 버전을 관리하면, Node.js를 설치하고 version을 바꾸는 일이 편리합니다. 정리하면 nvm은 다양한 Node.js version를 설치하고 관리할 수 있는 프로그램입니다. 모듈 모듈 = 쪼개 놓은 것 (기능 별로) 모듈 여러개를 합치면 ⇒ 하나의 프로그램 .. 에러 해결 : Plugin "react" was conflicted between "package.json » eslint-config-react-app [React.js] Yarn berry 적용하며 발생한 에러 정리 [React.js] Yarn berry 적용하며 발생한 에러 정리 Failed to load config "react-app" to extend from. .yarnrc.yml에 nodeLinker: node-modules를 제외하여 Plug'n'Play 기능을 활성화하려고 할 때 생기는 오류로 아래와 같이 Create React App에서 사용하는 ESLint 구성 패키지를 doqtqu.tistory.com 위의 티스토리에 정리가 잘 되어 있어서 참고했습니다. 에러 해결법을 한 줄로 요약하자면, package-lock.json, node_modules 삭제 후 다시 npm install 해보기 에러 해결 : Cannot read properties of null (reading 'pickAlgorithm') npm ERR! Cannot read properties of null (reading 'pickAlgorithm') npm ERR! A complete log of this run can be found in: npm ERR! npm-cache\\_logs\\2022-11-23T09_02_41_216Z-debug.log 위의 에러가 발생했을 땐 아래의 코드로 쉽게 해결하면 된다. npm cache clear --force npm update REACT 에러 해결 : Uncaught TypeError_ReactDOM 에러_npm run start 에러 Uncaught TypeError: Cannot read properties of undefined (reading 'map')React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 articles.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다. https://devbirdfeet.tistory.com/47 React 실행오류 Cannot read property 'map' of undefinedUpdated 2022/10/07 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터를 화면에 뿌려주려 하다가 이런 에러메시지가 나왔다... 종합 정리_조건부 연산자_spread_구조분해_에러_try catch 조건부 연산자 (Conditional operator) 삼항 연산자 (Ternary operator)라고도 불리는 이 연산자는 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자 입니다. if문과 같은 원리로 조건에 따라 값을 결정할 때 활용되는데요. const cutOff = 80; const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!'; console.log(passChecker(75)); 간단한 조건식의 경우에는 if문 보다 훨씬 더 간결하게 표현할 수 있는 장점이 있지만 내부에 변수나 함수를 선언한다거나 반복문 같은 표현식이 아닌 문장은 작성할 수 없다는 한계가 있기 때문에 if문을 완벽하게 대체할 수는 없다는 점. 꼭 기억.. finally문 finally문은 try catch문이 끝난 다음에 최종적으로 실행될 코드를 다룰 때 활용하는데요. finally문 try { // 실행할 코드 } catch (err) { // 에러가 발상했을 때 실행할 코드 } finally { // 항상 실행할 코드 } try문에서 에러가 발생하지 않는다면 try문의 코드가 모두 실행된 다음에, try문에서 에러가 발생한다면 catch문의 코드가 모두 실행된 다음 실행할 코드를 finally문에 작성하면 됩니다. 다시 말해 try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성하는 것이죠! function printMembers(...members) { for (const member of members) { console.log(mem.. 이전 1 2 3 4 ··· 7 다음
