문제 설명 "*"의 높이와 너비를 1이라고 했을 때, "*"을 이용해 직각 이등변 삼각형을 그리려고합니다. 정수 n 이 주어지면 높이와 너비가 n 인 직각 이등변 삼각형을 출력하도록 코드를 작성해보세요. 제한사항 1 ≤ n ≤ 10 입출력 예 입력 #1 3 출력 #1 * ** *** 입출력 예 설명 입출력 예 #1 n이 3이므로 첫째 줄에 * 1개, 둘째 줄에 * 2개, 셋째 줄에 * 3개를 출력합니다. 나의 코드 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = []; rl.on('line', function ..
분류 전체보기
Fragment는 별도의 노드를 추가하지 않고 여러 태그를 그룹화 할 수 있는 요소이다. React는 JSX 문법을 사용하고, 두가지 이상의 태그는 무조건 하나의 태그로 감싸져야한다는 규칙이 있다. 아래 예시처럼 두가지 이상의 태그가 들어가게 되면 에러가 발생하게 된다. ❌ 잘못된 예 import React from 'react'; import Hello from './Hello'; import Bye from './Bye'; function App() { return ( ); } export default App; 그래서 이렇게 하나의 태그로 감싸줘야 한다. ⭕ 바른 예 import React from 'react'; import Hello from './Hello'; import Bye from '...
React 공식문서 value value 어트리뷰트는 , 와 컴포넌트에 의해 지원됩니다. 이를 이용해 컴포넌트의 값을 설정할 수 있습니다. 이는 제어 컴포넌트를 만드는 데 유용합니다. defaultValue는 비제어 컴포넌트에서 사용되는 동등한 의미를 가지는 어트리뷰트이며, 처음 마운트될 때 컴포넌트의 값을 설정합니다. https://reactjs-org-ko.netlify.app/docs/uncontrolled-components.html#%EA%B8%B0%EB%B3%B8%EA%B0%92-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0 React의 렌더링 라이프사이클에서는, 폼 엘리먼트에 지정된 value 어트리뷰트가 DOM의 값을 덮어쓸 것입니다. 반면 제어되지 않는 컴포넌트를 사용..
보호되어 있는 글입니다.
1. Props 컴포넌트의 속성(property)를 의미한다. 변하지 않는 외부로부터 전달받은 값이며 웹 애플리케이션에서 해당 컴포넌트가 가진 속성들의 객체이다. 1) 특징 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. props를 함수의 전달인자처럼 전달받아서 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다. 컴포넌트가 최초로 렌더링 될때 화면에 출력하려는 데이터를 담은 초기값으로도 사용할 수 있다. 객체 형태이며, 어떠한 타입의 값도 전달할 수 있다. 읽기 전용이다. 외부로부터 전달받는 변하지 않는 값이어야 함으로 함부로 변경되지 않도록 읽기 전용(read-only) 객체이다. 만약 읽기 전용 객체가 아닐경우 props가 의도치 않게 수정되면서 상위 컴포넌트들에 영..
보호되어 있는 글입니다.
export default 해당 모듈(파일)에 개체(변수, 클래스, 함수 등)가 하나만 있다는 사실을 나타냄 => 해당 모듈의 전체 개체를 export 한다는 의미 export한 이름과 상관없이 임의의 이름으로 import가 가능함 중괄호 없이 모듈을 가져올 수 있음 export 복수의 개체가 있는 라이브러리 형태의 모듈에서 가져오기 할때 사용됨 => 특정 개체만 가져오기 가능 반드시 export한 이름으로만 import 할 수 있음 import 할때 중괄호로 가져와야 함
1. React SPA 1) MPA vs SPA MPA(Multiple Page Application) 페이지마다 새로운 html을 받아와 보여주는 양식이다. 누를때마다 깜빡이고 서버에서 html을 받아오는 시간이 소요된다. SPA(Single Page Application) 서버로부터 완전한 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하여 사용자와 소통하는 웹 애플리케이션이나 사이트. 사용자가 다른 페이지로 이동할 때 MPA : html로 된 페이지 전체를 불러옴으로 페이지 전체가 새로 로딩되며 깜빡이게 된다. SPA : 메뉴나 푸터 등 페이지 전환 전후에 중복되는 부분은 제외하고 변경해야 하는 부분만 새로 불러오게 된다. 웹사이트가 복잡해지고..
useNavigate는 양식이 제출되거나 특정 이벤트가 발생할때 url을 조작할 수 있는 인터페이스를 제공한다. import { useNavigate } from 'react-router-dom'; function Func() { const navigate = useNavigate(); const onClickImg = () => { navigate("../success", {replace: (true or false) / state : (any)}); }; return ( ); } export default Func; useNavigate의 첫번째 인자는 주소를 받으며 두번째 인자로는 replace와 state 인수를 사용한다. replace (true or false) : true일 경우 naviga..
보호되어 있는 글입니다.
