본문 바로가기

WEB

(65)
[React] 컴포넌트 나누기 보호되어 있는 글입니다.
[React] 조건부 렌더링 보호되어 있는 글입니다.
[React] props 사용법 보호되어 있는 글입니다.
[JavaScript] Array.map() 메소드 어떤 배열에 있는 모든 element들의 값은 변경해서 새로운 배열을 만들어야 할 때가 있다. 이때 반복문을 사용해서 수동으로 처리해도 되지만, 간단히 Array.map() 메소드를 사용하면 편리하다. 다음의 코드를 비교해보자! let arr = [3, 4, 5, 6]; for (let i = 0; i < arr.length; i++){ arr[i] = arr[i] * 3; } console.log(arr); // [9, 12, 15, 18] 위 코드는 for문을 이용하여 배열의 요소값을 변경시킨 것이다. let arr = [3, 4, 5, 6]; let modifiedArr = arr.map(function(element){ return element *3; }); console.log(modified..
[React] HTML과 JSX 문법 차이 리액트에서 함수형 컴포넌트의 함수 이름은 무조건 대문자로 시작한다. 그리고 여기서 jsx코드를 반환하는데 이 jsx는 문법이 html과 거의 비슷하다. 다만 다음의 3가지만 주의하면 된다! 1. 컴포넌트는 jsx를 반환할 때 반드시 하나의 태그만 반환해야 한다. 다수의 태그를 반환하고 싶다면 텅텅 빈 태그를 반환하거나 태그를 이용하면 된다! function App() { return ( Hello! ); } 2. html에서는 class라는 태그를 사용하지만 jsx에서는 className이라는 태그를 사용한다. function App() { return ( Hello! ); } 3. html처럼 작성하지만 js코드도 작성이 가능하다. js코드를 넣기 위해서는 중괄호를 사용해야 한다. function Ap..
[React] yarn 사용시 create-react-app과의 충돌 해결법 App.js 파일에서 코드를 수정하고 저장하면 다음과 같은 오류가 나온다. [eslint] Failed to load config "react-app" to extend from. Referenced from: C:\Users\*\Desktop\Programming\React\basic\package.json ERROR in [eslint] Failed to load config "react-app" to extend from. Referenced from: C:\Users\*\Desktop\Programming\React\basic\package.json 이는 yarn 사용시 create-react-app과의 충돌때문에 일어나는 것이다. 이에 대한 해결책은 다음과 같이 따라해보자. $ yarn add ..
[React] 클라이언트 사이드 렌더링(CSR) 클라이언트 사이드 렌더링은 서버에서 전체 페이지를 한 번 렌더링해서 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식이다. (렌더링 - 서버로부터 HTML파일을 받아 브라우저에 뿌려주는 과정) 직접 확인을 해보자! 터미널에 yarn start를 입력하면 이런 페이지가 뜬다. 개발자 도구 -> network 탭에 들어간 후, 새로고침을 해보자. 그럼 위와 같은 파일들을 볼 수 있을텐데, 여기서 어떤 순서로 어떤 파일들이 다운로드 되어서 브라우저에 표기되는지 확인할 수 있다. localhost 에서는 우리가 보고있는 페이지의 html 코드를 확인할 수 있다. bundle.js 에서는 어플리케이션에 관한 코드, 즉 리액트 동작에 필요한 코드가 들어있다. react..
[JavaScript] 객체 객체의 생성 객체를 생성하는 방법을 알아보자. 1. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; 2. var grades = {}; grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80;​ 3. var grades = new Object(); grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80; 이번엔 객체를 가져오는 방법을 알아보자. 결과는 80이다. 1. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; alert(grades['sorialgi']); 2. ..