![]()
클래스형 컴포넌트앞에서 보았던 App 컴포넌트는 함수형 컴포넌트입니다.다른 컴포넌트 선언 방식인 클래스형 컴포넌트를 작성 해 볼 겁니다. - Typescript//위에 항상 들어가야 합니다.//import React from 'react'// (...)import { Component } from 'react'class App extends Component { render() : JSX.Element { //const name = 'react' 도 상관없습니다. const name : string = 'react'; return { name } }}export default App; src 디렉토리에 MyComponent.tsx 파일을 생성해 보..
코드 이해하기먼저, src/ 내부의 모든 ts, tsx 파일은 맨 위에 디폴트로 import 해야하는 항목이 있습니다.import React from 'react';typescript 를 적용하기 위해서 필수로 입력해야 하는 문장입니다.먼저, yarn create react-app [생성한 프로젝트 이름] --template typescript로 생성한파일을 이해하기 위해 src/App.tsx 파일을 열어봅니다.import React from 'react';import logo from './logo.svg';import './App.css';function App() : JSX.Element { return ( Edit src/App.ts..
기초적인 Typescript 문법을 알아야 합니다1. 변수 선언 방법const typeString : string = "Hello World"const : 변하지 않는 고정 값이라는 의미입니다.typeString : 제가 임의로 정한 변수 이름입니다.string : Typescript에서는 모든 변수에 타입이 지정이 되어야 합니다.2. 함수의 반환값 선언 방법const App : () : JSX.Element => { return ( Hello World );};App : React 프로젝트를 작성 시, "컴포넌트" 를 모아서 처리하는 역할로 계속 쓰이게 됩니다.JSX.Element : "React.FC" 로 선언하는 방식이 있지만, JSX.El..
1장에 대한 요약1. React 서론컴퓨터의 성능이 매우 발전함에 따라 동적인 페이지 에 대한 필요도가 높아졌습니다.이에 FaceBook이 최대한 성능을 아끼고 동적인 웹을 보여줄 수 있는 "React" 라는 시스템을 개발했습니다.성능을 아끼는 방법은, 수많은 Component 에서 몇 개의 정보가 변경되었을 때, 모든 Component를 변경하는 것이 아니라, 변경 된 Component 만 변경하는 방식입니다.이 방식은 Virtual DOM을 사용하여 성능을 아낍니다.Virtual DOM : 변경된 Component를 가상의 환경에서 만든 후, 실제로 변경 된 DOM을 비교하여 반영하는 방식2. 작업 환경 설정 - 저는 "Mac"입니다.Node.js / npm, yarn 설치하기코드 에디터 - ..
hyperskill - Frameworks 영어 원문What are frameworks? - 프레임워크는 무엇일까?모든 프로그램들은 눈송이처럼 각자 다릅니다만,그들의 프로그램의 코드에는 당신의 관심을 끌고 싶어하는 유사점들을 가지고 있습니다.또는, 이러한 유사점들이 어떻게 개발자들에게 이점으로 사용될 수 있는지에 대한 겁니다.프로그래밍에서는, 개발을 간단화하기 위해 라이브러리로 포장된 코드를 재사용하여 같은 에러를 피하는 것은,평범한 관행입니다.이러한 라이브러리들은 대부분의 프로그래밍 언어들을 위해 존재합니다.그들은 좋은 문서를 제공하며, 많은 사람들에게 사용되는 잘 테스팅 된 코드를 제공합니다.인터넷 스토어, 온라인 은행, 소셜 네트워크와 같은 거대한 어플리케이션들은,유저 인증, 데이터베이스 상호작용,..
hyperskill - Web development 영어 원문웹 개발은 웹사이트의 웹 어플리케이션을 생성하는 프로세스입니다.웹 어플리케이션을 생성하는 하나의 접근법은 server-side 와 client-side로 로직을 분리하는 것 입니다.server side rendering : 서버에서 웹 페이지를 구축하여 고객에게 페이지를 전송하는 형태client side rendering : 클라이언트 웹 브라우저에서 서버로부터 정보를 받아 페이지를 구성하는 형태이러한 프로세스는 주로 서로 다른 영역에 특화된 개발자들을 포함합니다.이제 웹 개발의 관점에 대해서 더 배워 봅시다.Frontend and backend development - 프론트엔드 백엔드 개발이는 웹 개발에 있어 관례적으로 두 개의 부분으로 나..
hyperskill - HTTP: HyperText Transfer Protocol 영어 원문What is HTTP - HTTP 는 무엇인가?당신이 소셜 네트워크에서 친구의 사진을 확인하기로 결정하거나,메세지 채팅방에서 나가거나, 고양이가 있는 웃긴 비디오를 시청하거나,검색 엔진에서 모르는 용어에 대한 용어를 찾거나,디바이스, 즉 기기 (client) 에서 당신이 인터넷에게 보내는 request (요청) 은서버로 보내며, 서버로부터 response (응답) 을 받습니다.Client (클라이언트) 는 서비스의 사용자이며, Server 는 유저들이나 다른 컴퓨터들에게 서비스를 제공하는 컴퓨터입니다.이러한 서버는 원격으로 위치할 수 있는데, 당신으로부터 수천 km 떨어 진 곳일 수도 있습니다.서버와 서비스 사..
hyperskill - Naming variables 영어 원문세계의 자바 프로그래밍 속에서, 변수는 정보를 저장하는 컨테이너와 같습니다.만약 이러한 모든 컨테이너들이 그저 "box1", "box2", 등등 으로 레이블되었다고 상상 해 보세요.이건 꽤나 혼란스러울 겁니다. 그쵸?Java의 변수 이름 짓는 것에도 동일합니다.어떤 이름이던 변수에게 주라는 것이 아닙니다.변수에게 올바른 이름주는 것에 대한 겁니다.이번 주제는 Java에서의 변수 이름을 짓는 것의 예술에 대한 것이며,당신의 코드를 좀 더 이해할 수 있게 만들며, 당신의 프로그래밍 라이프를 조금 더 쉽게 만들어 줄 겁니다.이번 주제는 java에서 어떻게 적절하게 변수에 이름을 지어줄 수 있는지 가르쳐 줄 겁니다.Why is naming impor..
hyperskill - Coding style conventions 영어 원문당신이 단순한 단일 줄 프로그램에서 더 복잡한 프로그램으로 이동할 때 부딪히는 질문이 있습니다 :어떻게 코드를 깔끔하게 하며, 가독성 좋게 작성 할 것인가?이거는 시작 할 때엔 보기보단 까다로워 보일 테지만, 이건 꽤나 중요합니다 :실제 세상에서, 프로그래밍은 많은 사람들과 함께 일하는 프로세스를 포함합니다.사실, 당신은 자주 코드를 작성하는 것보다, 읽는 데 시간을 더 소비합니다.심지어 당신이 혼자서 작업하고, "스스로를 위해" 작성 한 프로그램 이라도,시간이 지나고 나서, 만약 당신이 안좋게 작성했다면,스스로의 프로그램을 이해하는 데 어려워 질 겁니다.이것은 당신이 일반적인 최고의 예제들로부터 프로그래밍 스타일에 관하여 따라..
hyperskill - Reading user's input with Scanner 영어 원문standard input (표준 입력) 은 프로그램으로 향하는 데이터 스트림이며,운영체제에 의해 지원받습니다.기본적으로, 표준 입력은 키보드 입력 데이터를 필요로 하지만,파일로부터 redirect 하여 표준 입력으로 삼을 수도 있습니다.모든 프로그램이 표준 입력을 요구하는 것은 아닙니다만,당신은 프로그래밍 스킬을 마스터하는 것을 돕기 위해 이러한 표준 입력을 자주 사용하게 될 겁니다!프로그래밍 문제들을 풀기 위한 일반적인 접근은 :표준 입력 으로부터 데이터를 읽는다 - (System.in)결과를 얻기 위해 데이터를 처리합니다.표준 출력 (standard output) 으로 결과를 내보냅니다. - (System...
