개발자꿈나무

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

해당 글은 '컴퓨터 네트워킹 하향식 접근' 책을 읽고 공부한 내용을 정리한 것으로 틀린 내용이 있을 수 있습니다. 부정확한 내용이 있으면 댓글로 알려주세요 🙂   Q1. 호스트와 종단 시스템의 차이는 무엇인가? 여러 종단 시스템의 유형을 나열하고, 웹 서버는 종단 시스템인가? => 종단 시스템은 웹 브라우저 프로그램, 웹 서버 프로그램, 전자메일 클라이언트 / 서버 프로그램 같은 애플리케이션을 수행하므로 호스트라고도 부른다(즉, 호스트 = 종단 시스템)종단시스템은 전통적인 데스크톱 PC, 리눅스 워크스테이션, 그리고 웹 서버들을 포함하며 오늘날은 스마트폰, 태블릿, IoT 등을 포함하고 있다. Q2. 전화로 대화를 하는 두 사람이 대화를 시작하고 마치기 위해 사용할 수 있는 프로토콜을 기술하라. => ..

서론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..

서론저번에 만들어놓은 모달창 레이아웃을 이용해서 동적 모달창 생성 방법에 대해 배웠다. 게시글을 누르면 상세페이지가 뜨도록 만들어주려고 한다.  본론동적 UI 생성 step 동적 UI를 생성하기 위해서는 3가지 단계만 거쳐주면 된다. 1. html / css로 미리 UI 디자인 생성2. UI의 현재 상태를 state로 저장3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성  본격적으로 모달창 띄우기 step.1 html과 css는 이미 작성을 해놨으므로 그대로 진행하도록 하겠다. step.2 UI의 현재 상태를 state로 저장해야한다. 모달의 현재 상태를 표현하는 건 어떤 방식이든 상관없으므로 나는 직관적으로 'close', 'open' 글자로 표현하였다. 0, 1 혹은 true, fals..