전체 글

hyperskill - Synchronous, asynchronous, parallel 영어 원문우리가 몇 가지 복잡한 프로세스를 고려하고 있을 때, workflow (워크플로우) 라고 불러 보겠습니다.이 워크플로우의 다양한 부분들은 아마 서로 다르게 실행 될 겁니다.가끔은 하나의 액션이 한 부분에서 하나의 부분으로 가거나, 어떨 때는 각각 랜덤 순서로 각기 겹치기도 하며,어떨 때는 병렬로 동시에 흘러가기도 합니다.workflow는 서로 다르게 진화할 수 있습니다.그리고 워크플로우 실행 시퀀스 종류가 있습니다.synchronous (동기화), asynchronous (비동기화), parallel (병렬화)컴퓨터 프로그램 처리에 관련된 많은 용어들은 그저 기술적인 것들이 아닙니다.이들은 실제 세상에서 벌어..

hyperskill - Coupling and cohesion 영어 원문Coupling (연결) 과 Cohesion (응집력) 이라고 불리는 두 가지 용어가 있습니다.이러한 개념들은 당신의 코드를 더 이해하는 데 도움을 주며, 당신의 행동의 코드에 어떻게 영향을 미치는지 이해하도록 돕습니다.이 용어들은 클래스 내부의 관계와 클래스 내부의 관계를 정의합니다.They define relations between and within classes. - between 과 within이 클래스 단락의 설명을 의미.이것들을 아는 것은 당신의 코드에 있어 더 나은 구조를 생성하는 데 도움을 줄 수 있으며,더 유연하고, 목적에 맞게 만들 수 있습니다.이제 이것들을 배우러 가 봅시다.coupling(커플링 - 연결) 부..

hyperskill - Code organization. Design principles 영어 원문소프트웨어를 생성하는 것은 엔지니어링과 비슷합니다 : 만약 중요한 부분이 부서진다면, 모든 것이 실패합니다.우리는 이러한 재앙을 어떻게 예방 할 수 있을까요?당연하게도, 우리는 프로그램을 테스트 할 수 있지만, 충분한가요?모든 테스트들을 통과한 프로그램도 여전히 다른 문제들을 가지고 있습니다.나쁜 디자인(구조) 를 가지고 있을 수 있어서, 누구도 사용하지 않을 수도 있습니다.이 프로그램이 어떻게 작동하는지 이해하기 어려워서 어떠한 부분도 확장할 수 없거나, 새로운 기능을 추가 할 수 없습니다.이번 주제에서는, 우리는 프로그램의 내부 디자인(구조) 에 대해서 말할 것이며,시간이 지나 우리는 향상시키고 진화하는..

hyperskill - YAML 영어 원문Introduction - 소개복잡한 구조로 이루어진 객체를 상상 해 보세요.예를 들어, 당신이 커다란 사전이나, 다른 값들의 묶음인 목록을 가지고 있습니다.당신은 이것의 구조를 잃지 않고 객체를 보존해야 해야 합니다.다른 말로, 당신은 이것을 직렬화하고 싶어합니다.만약에 직렬화 된 포맷이 간단한 구문과 사람이 읽을 수 있는 경우에도 좋습니다.따라서, YAML 이라 불리는 유명한 데이터 포맷에 정통 해 져 봅시다.YAML 은 재귀적인 약어인데, YAML Ain't Markup Language 의 약어입니다.이는 모든 프로그래밍 언어들에게 표준이 되는 인간이 읽을 수 있는 데이터 직렬화입니다.YAML 은 보통 설정 파일로 사용되거나, 데이터를 저장하거나 전송하기 위..

hyperskill - Interfaces 영어 원문우리는 매일 일하러 가거나, 대학 혹은 학교를 가기 위해 지하철이나 버스를 탑니다.점심시간에 우리는 카페나 레스토랑을 들릅니다.우리는 우리의 하루를 정리하는데 도움을 주는 다른 서비스나,카페, 레스토랑과 같은 곳에서는 문제가 거의 없습니다.이러한 협약 및 계약이 존재하는 것은 사람들의 기본적인 니즈를 용이하는데 도움을 주거나,삶을 좋은 방향으로 예측하게 만들어 줍니다.이제 우리가 프로그래밍 객체 사이에서 비슷한 협약을 만들어 낼 수 있는지 봅시다.Basic definitions - 기본 정의스킬은 당신이 작업할 수 있는 것을 정의합니다.만약 당신이 몇 가지 작업에 능숙하다면, 당신은 계약에 사인하고 가져갈 수 있습니다!우리는 계약이 사람들이 가지고 있는..

hyperskill - What is object-oriented programming 영어 원문Fundamentals - 기초Object-oriented programming (OOP - 객체지향 프로그래밍)은 objects (객체) 의 개념에 기반한 프로그래밍 패러다임입니다.객체는 프로그램 기능을 수행하기 위해 서로 다른 객체들과 소통하는 것을 의미합니다.각각의 객체는 변수와 행동에 의해 특성화될 수 있습니다. 객체는 고유의 변수와 함수에 의해 개별화될 수 있다는 얘기이다.객체의 현재 상태는 스스로의 필드 에 의해 표현되며,객체의 행동은 스스로의 메서드 에 의해 표현됩니다.Basic principles of OOP - OOP의 기본적인 규칙 및 규약OOP (Object-Oriented-Programm..

4장 - 이벤트 핸들링 리액트의 이벤트 시스템 - React Typescript Versionsrc/ 안에 들어가는 모든 .ts 파일은 맨 위에 import React from 'react'가 들어갑니다!코드 내부의 (...)안에 들어간다고 생각하시면 됩니다.일단, 기본적인 틀은 Say.tsx 로부터 시작합니다!먼저, 작성했던 Say.tsx 파일부터 보겠습니다.Say.tsx// (...)import { useState } from 'react'const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('Hello!'); const onClickLeave = () ..

함수 컴포넌트에서 useState 사용하기사실상 제일 많이 사용하게 됩니다.Hook 이라는 요소에 속합니다.useState 사용하기Say.tsx// (...)import {useState} from 'react'const Say = () : JSX.Element => { const [message, setMessage] = useState(''); const onClickEnter = () : void => setMessage('Hello'); const onClickLeave = () : void => setMessage('Good Bye!'); return ( 입장 퇴장 )}export default Say..

state - Typescript컴포넌트 내부에서 바꿀 수 있는 값props는 상위 컴포넌트에 의지, state는 내부에서 직접 변경이 가능합니다.솔직히 클래스형 컴포넌트는 굉장히 까다롭습니다.나중엔 대부분 함수형 컴포넌트만 쓰게 됩니다.그래도 코드 참고 할 때, 읽을 줄 알아야 해서 이해는 필수입니다!! 클래스형 컴포넌트의 statesrc/ 디렉토리에 여전히 작성하시면 됩니다.Counter.tsx// (...)import { Component } from 'react';interface StateFace{ number : number;}class Counter extends Component { constructor(props : {}){ super(props); /..

비구조화 할당 문법을 통해 props 내부 값 추출하기 - Typescript앞선 문법에서는 props를 그대로 사용했습니다.이번에는 함수 내부에서 변수에 할당 하여 사용 할 것 입니다.먼저 알아야 할 것!props 로 오는 값은 Object의 형태를 띄고 있습니다.Example// App.tsx에서 name, children 값을 보내 왔다고 가정하겠습니다.props = { name : 'Gong', children : 'React'}// name : string, children : string 인 것을 알 수 있습니다.// 따라서,interface PropFace{ name : string; children : string;}// props로 오는 name 그리고 childre..