개발자꿈나무

서론기존 강의는 쇼핑몰 만들기 프로젝트인데 그저 강의를 보고 따라 치면서 똑같은 구조로 구성을 하기보다는 내 프로젝트를 진행하면서 강의를 함께 듣는게 낫다는 판단하에 쇼핑몰 프로젝트가 아닌 자판기 관리 프로젝트를 진행해보려고 한다. 예전에 포트폴리오 구상을 하면서 우연히 일본 자판기에 대해 생각을 하다가 친구가 제안해준 아이디어였는데 괜찮은 생각이었던 것 같아서 진행해보려고 한다. 디테일한 기능들은 추가하기 전에 기본적으로 자판기들의 재고 및 정보들, 그리고 재고가 떨어졌을 때 주문할 수 있는 큰 기능들부터 구현해보려고 한다. 이후에 추가적인 디테일을 넣을 생각이다.  본론일단 웹 페이지를 구상하려면 필수적인게 이미지 삽입인 것 같다. 오늘 중점적으로 배웠던 내용들은 이미지를 삽입하는 다양한 방법이다. ..

서론이제 리액트의 가장 기본이 되는 개념에 대한 설명은 끝났고 이제 본격적으로 쇼핑몰 프로젝트를 진행해볼 예정이다. 오늘은 프로젝트를 생성하고 리액트에서 부트스트랩을 사용하는 방법에 대해 배웠다.  본론 새로운 프로젝트 생성 리액트 폴더에서 터미널을 열고 리액트 프로젝트 생성 명령어를 입력해준다.npx create-react-app [프로젝트명] 이후 VScode를 통해 폴더를 열어주고 터미널을 열어 npm start를 눌러 제대로 프로젝트가 실행되는지 확인해본다. 깃허브에 새로운 레포지토리를 생성하여 프로젝트를 연결해주고 혼자 작업하지만 버전 관리를 더 효율적으로 하기위해 develop 브랜치를 하나 파서 develop 브랜치에서 작업을 진행할 것이다.  부트스트랩 이용하기 html, css를 하나하나..

서론컴포넌트를 만들 때 function 을 이용하면 되는데 예전 리액트에서는 class 문법을 사용했다고 한다. 예전 리액트 코드를 보거나 짜야하는 일도 생길 수 있으니 class 문법 사용법을 살펴볼 것이다.  본론class 구조 class를 사용해서 컴포넌트를 생성하려면 React.Component를 상속받고 클래스명을 지정해준다. 기본적으로 생성자를 생성하고 super() 함수를 이용해 부모 클래스의 생성자를 호출하여 부모 클래스가 가진 속성을 초기화할 수 있다. 또한 render 함수를 이용해 컴포넌트의 JSX 또는 UI 요소를 반환해준다. return 안에 축약할 html을 적어주면 된다. ** 요약- render() : 클래스 컴포넌트에서 필수이다. UI를 렌더링하는 함수이므로 반드시 필요하다..

서론Input 태그를 이용해서 사용자에 입력받은 값을 처리하는 방법에 대해 배웠다.이를 진행하기 전에 먼저 html Input 태그 기능에 대해 간략하게 정리해보았다.Input 태그는 유저의 입력을 받아올 수 있는 다양한 박스를 제공하는데 대표적으로 텍스트, 날짜, 범위 그리고 드롭다운 메뉴 등이 있다. 사용 방법은 type = "" 를 넣어주거나 textarea, select 태그를 사용해주면 된다.​  본론  Input 이벤트 핸들러 사용자가 input 태그에 뭔가를 입력했을 때 코드를 실행해주고 싶을 때 이벤트 핸들러를 이용해주면 된다. {실행코드}}/> 위 코드처럼 onChange(무언가 변화가 일어날때), onInput(Input태그에 뭔가 입력할 때) 이벤트 핸들러를 사용하면 해당 이벤트가 발..

서론모달창 안에 있는 제목을 글 제목으로 변경하려면 어떻게 해야할까?function Modal(props) { return ( {title[0]} 내용 상세내용 )} 간단하게 모달창 코드에 {title}이라고 입력해주면 될 것 같지만 실제로 그렇게 코드를 짜면 위처럼 에러가 뜬다. 현재 title 변수는 App() 함수 안에 입력되어 있는 지역변수이기 때문에 App()함수 밖에 작성되어 있는 Modal() 함수에서 사용할 수 없다. 그러면 이럴땐 어떻게 해야할까? 바로 props를 사용하면 된다.  props 사용하기 컴포넌트가 2개가 부모/자식 관계인 경우에는 props를 활용해서 변수, 함수 등 다양한 값들을 전송할 수 있다. 현재의 코드에서는 App이 부..

본론map 함수 사용법 코드를 짜다보면 똑같이 반복되는 부분들이 많이 생길 수 있는데 중복되는 부분들은 하나로 합쳐서 사용하게 되면 훨씬 코드 양도 줄어들고 깔끔하게 코드를 짤 수 있다. 보통 for를 이용해서 반복문을 짜는데 JSX 중괄호 안에서는 for를 사용할 수 없어서 map()을 사용해야 한다. 모든 array 자료 우측에는 map 함수를 붙일 수 있다.1. array에 들어있는 자료 갯수만큼 코드를 반복실해준다.let array = [1,2,3]array.map(function(){ console.log(1)});//1이 3번 찍힘 2. 콜백함수에 파라미터를 아무거나 넣게되면 array 안에 있던 모든 자료를 하나씩 출력해준다.let array = [1,2,3]array.map(function..