본문 바로가기

분류 전체보기

 (894)
[코드잇] 리액트 웹 개발 시작하기 (5) 1. 컴포넌트 재사용 app.js import { useState } from 'react'; import Board from './Board'; import Button from './Button'; function random(n) { return Math.ceil(Math.random()*n); } function App () { const [myHistory, setMyHistory] = useState([]); const [otherHistory, setOtherHistory] = useState([]); const handleRollClick = () => { const nextMyNum = random(6); const nextOtherNum = random(6); setMyHistory([..
[코드잇] 리액트 웹 개발 시작하기(4) 1. state - 리액트에서 state란 상태가 바뀔 때마다 화면에 새롭게 그려내는 방식으로 동작하는 것 - 리액트에서 state를 만들고, state를 바꾸기 위해서는 useState라는 함수를 활용 import { useState } from 'react'; // ... const [num, setNum] = useState(1); // ... - 디스트럭처링 문법으로 작성 - useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과를 요소 2개를 가진 배열의 형태로 리턴 - 첫번째 변수는 원하는 state의 이름을 지어줌 - 두번째 변수는 state 이름앞에 set을 붙인 다음 카멜케이스로 이름을 지어주는 것이 일반적 - state는 변수에 새로운 값을 할당하는 방식으로 변경하는 것이..
[코드잇] 리액트 웹 개발 시작하기(3) 1. 컴포넌트 리액트 엘리먼트 - JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨 import ReactDOM from 'react-dom'; const element = 안녕 리액트!; console.log(element); ReactDOM.render(element, document.getElementById('root')); - 이런 객체를 리액트 엘리먼트라 부름 - 리액트 엘리먼트를 ReactDOM.render 함수의 인수로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄어줌 리액트 컴포넌트 - 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법 - 리액트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성해야 함 mport ReactDOM..
[코드잇] 리액트 웹 개발 시작하기 (2) 1. 가위바위보 간단버전(1) import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 가위 바위보 가위 바위 보 , document.getElementById('root')); 2. JSX에서 자바스크립트 사용하기 import ReactDOM from 'react-dom/client'; const product = 'MacBook'; const model = 'Air'; const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Dis..
[코드잇] 리액트 웹 개발 시작하기 (1) - 리액트로 웹 사이트를 개발할 때에는 주로 create-react-app이라는 것을 사용 - create-react-app은 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구 - Vs Code의 터미널에서 crete-react-app 명령어를 실행 -> 새로운 리액트 기반 웹 애플리케이션을 생성하는 명령어 - npx 명령어는 npm 패키지를 설치하고 곧바로 실행시켜줌 npx create-react-app 개발 모드 실행 - cd는 change directory의 약자로, 현재 커맨드 라인 도구가 위치한 경로를 변경하는 역할 - 먼저 생성한 프로젝트 폴더 안으로 들어가고 이후에 npm start 명령어를 통해 애플리케이션을 실행 cd 프로젝트 폴더명..
[프로그래머스] 조건에 맞는 도서 리스트 출력하기 SELECT BOOK_ID, DATE_FORMAT(PUBLISHED_DATE, '%Y-%m-%d') AS PUBLISHED_DATE FROM BOOK WHERE YEAR(PUBLISHED_DATE)=2021 AND CATEGORY ='인문' ORDER BY PUBLISHED_DATE ASC;
[프로그래머스] 강원도에 위치한 생산공장 목록 출력하기 SELECT FACTORY_ID, FACTORY_NAME, ADDRESS FROM FOOD_FACTORY WHERE ADDRESS LIKE '%강원도%' ORDER BY FACTORY_ID ASC;
[c언어] 두 수의 연산값 비교하기 1. 정수 a,b 문자열 반환(sprintf) 2. a+b 정의 (strcpy, strcat 함수) 3. a+b를 정수로 변환한 값과 2*a*b 대소 비교 #include #include #include int solution(int a, int b) { int answer = 0; char stra[10], strb[10]; sprintf(stra, "%d", a); sprintf(strb, "%d", b); char* sa = (char*)malloc(sizeof(char)*10); char* sb = (char*)malloc(sizeof(char)*10); strcpy(sa,&stra); strcat(sa,strb); int ia = atoi(sa); if((a10000)) return -1; if..

티스토리툴바