수빈이의 개발새발

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(2)] DOM 조작하기 - useRef 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 배열을 사용해서 데이터를 조작해볼 것이다 목차는 아래와 같다 ..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(1)] React 사용자 입력 처리 (+ useState 활용) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 전 포스팅에서 이어서 시작한다. 마지..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 완성본 간단한 일기장 만들기를 해볼 것이다 UI는 간단하다 1. 작성자를 입력받을 input 2. 일기 본문을 입력받을 textarea 3. 감정점수를 매길 select 바로 만들어보자 우선 일기를 관리할 DiaryEditor 컴포넌트를 하나 만들어 줄 것이다 DiaryEditor 컴포넌트 깡통 하나 만들어주고 루트 컴포넌트에 자식 컴포넌트로 추가해준다 1.input 만들기 작성자를 입력할 i..

[React] 리액트 State? (+예제코드) State? state란 계속해서 변화하는 특정 상태를 말한고 상태에 따라 각각 다른 동작을 한다 보통 리액트에서 동적인 데이터는 변수에 담아 사용하지 않고 useState라는 react hook 중 하나인 리액트 메서 su-vin25.tistory.com 이어서... Props? properties 프로퍼티의 줄임말이다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름) props는 간단하게 함수의 매개변수처럼 컴포넌트에 전달되는 값이라고 보면 쉽다 바로 예제로 들어가 보자 Props 예제 젤 상위 루트 컴포넌트인 App.js 에서 자식 컴포넌트인 Counter.js에게 prop이란 이름을 붙여 5를 전달해 보자 counte..

State? state란 계속해서 변화하는 특정 상태를 말한고 상태에 따라 각각 다른 동작을 한다 보통 리액트에서 동적인 데이터는 변수에 담아 사용하지 않고 useState라는 react hook 중 하나인 리액트 메서드를 사용한다 이론적인 설명보다 코드로 보는게 이해가 빠르니 바로 예제로 들어가 보자 State 예제 1. useState 세팅 state를 실습해 보기 위해 +버튼을 누르면 1씩 증가되고 -버튼을 누르면 1씩 감소되는 Couter 컴포넌트를 만들어보자 루트 컴포넌트에 임포트 하면 이렇게 렌더링 된다! 일단은 아무 기능 없는 깡통인 상태 여기서 상태가 변화해야 할 부분은 무엇일까? 바로 h2태그로 감싸져 있는 0으로 초기화되어있는 숫자 부분이다 React의 state 기능을 사용하기 위해선..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다. 이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같..

[React] React.js란 무엇일까? 기초부터 간단정리 들어가기 전에.. 프레임워크? -frame은 "틀" work은 "일하다"라는 뜻이다 이 뜻대로 틀대로 일하는 것이라고 볼 수 있다 즉 제공되는 일정한 요소와 툴, 규약을 가지고 무언가를 만드는 것이 프레임 su-vin25.tistory.com 이전 포스팅에서 리액트에 대해 이해했다면 바로 실전으로 들어가보자! chap 1 : 새로운 폴더 만들기 자기가 만들고 싶은 위치에 새로운 폴더를 만들어 준다 chap 2 : create-react-app vscode 터미널을 이용해 만든 폴더로 이동해주고 npx create-react-app 폴더이름을 입력해 준다 여기서 npx는 설치하지 않은 패키지를 한 번만 쓰고 싶을 때 사용하는데 이를 쓰기 위해선 ..

들어가기 전에.. 프레임워크? -frame은 "틀" work은 "일하다"라는 뜻이다 이 뜻대로 틀대로 일하는 것이라고 볼 수 있다 즉 제공되는 일정한 요소와 툴, 규약을 가지고 무언가를 만드는 것이 프레임워크이다 웹프레임워크는 웹프로그램을 개발하기 위해 사용되는 툴을 제공하는 프로그램이라고 보면 된다 Node.js 란? Node를 React를 배우기 전에 알아둬야 하는 이유는 간단하다 React가 JS의 라이브러리이기 때문이다그렇기 때문에 JS가 어디서 어떻게 동작하는지를 알아야 한다 본래 JS는 웹브라우저에만 실행되어야 했다. 그러나 chorm의 JS의 실행하는 엔진인 V8엔진이 C++로 만들어졌기 때문에 톡 떼와서 브라우저가 아닌아무 곳에서나 사용가능하게 만들 수 있었다 이것이 Node이다. 즉 No..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번..