ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구 Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구 ESLint 설치 ‘npm install -D eslint 명령어 입력 -D를 입력하는 이유는 devDependencies에 설치하기 위함 → 실제 프로덕션에는 필요없기 때문 ‘npx eslint —init’ 명령어 입력 각 프로젝트마다 eslint 설정 ctrl+shift+p 입력해서 settings.json(User settings)에 들어가서 밑의 코드 입력 "editor.fontFamily": "D2Coding ligature", "editor.line..
useEffect()는 코드의 실행 시점을 관리할 수 있는 함수이다. useEffect()는 두 개의 argument를 가지고 있는데, 첫 번째 argument는 우리가 실행하고 싶은 코드가, 두 번째 argument에는 [] 배열(dependency)이 있다. 두 번째 argument에 무엇이 들어가느냐에 따라 실행 결과가 달라지는데, 1. 빈 배열을 넣는 경우 -> 최초 1회 랜더링 될 때만 실행한다. 2. [a] -> a가 변경될 경우만 랜더링한다. 3. [a, b] -> a나 b중 하나가 값이 변경 될 때 랜더링한다. useEffect()를 사용하여 불필요한 렌더링과 작업을 방지할 수 있다. 예시 코드 const onChange = (event) => setKeyword(event.target.v..
React에서 Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매커니즘이다. 요소를 만들 때마다 스타일들을 작성해주는 것은 너무 시간이 오래 걸린다. 그 대신 스타일들을 모두 갖는 단 한가지의 컴포넌트를 만들어서 사용할 수 있다. Props 코드 예시 내가 만들고 사용하는 모든 컴포넌트들은 function Btn() -> 괄호로 argument(인자)를 받는데, 이 때 argument의 이름은 마음대로 지어줄 수 있다. 리액트가 실제로 하는 작업은 함수(Btn())를 호출해서 우리가 넣어둔 모든 것들을 첫 번째 인자로 넣어주는 것이다. Btn 컴포넌트의 prop들에게 접근하려면 prop.text 등으로 적어준다. React.memo() props에 function도 보낼 수..
어떻게 하면 React.js에서 값이 바뀔 데이터를 담아줄 수 있을까? useState()를 활용하면 React.JS에서 데이터를 저장시켜 자동으로 리렌더링을 일으킬 수 있다. useState() 코드 예시 const data = React.useState();를 console.log 시키면 [undefined, f ] -> undefined와 함수가 적힌 배열이 나타난다. undefined는 data이고 f는 data를 바꿀 때 사용하는 함수이다. React.useState() 함수는 초기값을 설정할 수 있다. 즉, undefined -> 초기값 , f -> 그 값을 바꾸는 함수이다. React.useState() 배열에서 보통 데이터에는 counter처럼 원하는대로 붙이고 f는 set 뒤에 데이터 이..
createElement React에서는 createElement 함수를 통해 React 요소를 생성할 수 있다. 하지만 실제로 createElement를 쓰는 경우는 많지 않기에, 이해만 하고 넘어가자. createElement를 쓸 때 첫 번째 argument는 root에 들어갈 HTML 태그이며, 두 번째 argument는 props가 포함된 object, 세 번째 argument는 content이다. ※ chatGPT의 createElement에 대한 설명도 첨부한다. React.createElement(type, [props], [...children]) type: React 요소의 타입을 나타냅니다. 예를 들어, HTML 요소라면 문자열로 "div", "span" 등을 사용하며, 사용자 정의 ..
현재 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의를 듣고 있습니다. https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 강의를 따라가면서 create-react-app을 사용하기 위하여 Node.js를 설치하고 명령 프롬프트에서 원하는 폴더로 이동해서 'npx create-react-app .'을 입력했지만, 자꾸 오류가 떴다. 그래서 처음에는 Node.js 버전이 문제인가 싶어서 버전 16으로 다운그레이드도 해보고, 학교 와이파이라서 그런가 싶어서 집으로 이동해서 다시 설치도 해보았다. 하지만 오류는 고쳐지지 않았다. np..
밑 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의 중 일부 내용을 포함하고 있습니다. React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다. (밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 이 강의을 듣다보면 Super Converter를 만들게 되는데, Super Converter는 React의 State를 활용해서 시간/분 , 킬로미터/마일 중 변환하고 싶은 것을 골라 데이터를 입력하면 변환을 시켜주는 프로그램이다. 코드 실행..
저번 시간에는 CSS 강의를 듣고 퀴즈도 풀어봤다. 2023.07.04 - [프로그래밍/프론트엔드] - [CSS] 얄코의 CSS 강의를 듣고 [CSS] 얄코의 CSS 강의를 듣고 지난 번 스터디에서는 HTML 강의로 생활코딩님의 유튜브를 들었다. 2023.07.01 - [프로그래밍/프론트엔드] - [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 오랜만에 quickchabun.tistory.com 2023.07.05 - [분류 전체보기] - [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자 [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자 저번에는 HTMl 퀴즈를 풀어보았다. 2023.07.02 - [프로..
