본문 바로가기

쿤즈 Dev206

[React] JSX 문법 살펴보기. Javascript? HTML? 엘리먼트? React를 사용하기 위해서는 기본적인 구조를 알아야 합니다. 또, Javascript는 기본으로 알면 더욱 좋지만 React를 하면서 배워도 괜찮습니다. 다만, JSX라는 것이 등장합니다. 이번 포스팅에서는 React에서 사용하는 JSX에 대해서 알아보도록 하겠습니다. React에서 사용하는 JSX란 우선 아래 형태를 볼게요. const element = Hello, world; element라는 변수에 HTML 태그가 저장되어 있습니다. 이러한 형태는 사실 Javascript도, HTML도 아닙니다. 이 둘을 모두 포함하고 있는 형태로 볼 수 있죠. JSX는 Javascript를 확장한 문법입니다. 따라서 Javascript의 모든 기능이 포함되어 있으면서도 HTML과 같은 엘리먼튼를 생성할 수도 있.. 2021. 6. 8.
[GraphQL] 스키마(Schema) 정의 방법 (5): Input type GraphQL의 스키마를 정의하는 방법을 다루고 있습니다. 앞선 포스팅에서는 Scalar type, Object type, Query type, Mutation type을 설명해 드렸어요. Scalar가 베이스를 이루고 여기서 애플리케이션에 맞게 Object type을 정의해서 Query type을 만들거나 Mutation type을 만듭니다. 이번 포스팅에서는 데이터를 받을 때 묶어서 받을 수 있는 Input type을 알아보겠습니다. Input type Input type은 이름 그대로 입력값을 정의하는 타입입니다. Query type, Mutation type, 아직 다루지 않은 Subscription type에서도 마찬가지로 parameter들을 받는 경우가 발생합니다. 이때, 값들을 묶어서 설정.. 2021. 6. 6.
[React] React구조와 Hello, World 출력하기 앞선 React 포스팅에서는 Node.js를 설치하고 React 라이브러리를 설치한 이후에 React 앱을 만들어서 실행해 보았어요. 2021.06.02 - [쿤즈 Dev/React] - [React] 새로운 React 앱 만드는 방법 앱을 만들 때는 간단한 패키지 관리자인 npx를 이용해서 만들었고 실행도 npm을 이용해서 진행했습니다. 이번 포스팅에서는 간단히 Hello, World를 출력해보겠습니다. 목차 React 내부 구조 React를 설치한 디렉터리를 VSCode를 이용해서 열어보았습니다. * VSCode외 다른 개발 툴을 이용해도 됩니다. 이 포스팅에서는 VSCode를 이용합니다. 디렉터리(폴더) 구조 열어서 구조를 보시면 아래와 같이 구성되어 있습니다. node_modules은 설치된 모듈.. 2021. 6. 4.
[React] 새로운 React 앱 만드는 방법(React 시작하기) 웹 프로그래밍을 하기 위해서 최근 가장 많이 사용하는 라이브러리 중 하나가 React(리액트)입니다. React는 Node.js 기반으로 동작합니다. 즉 Javascript를 이용한 라이브러리이기 때문에 Javascript를 안다면 쉽게 배울 수 있는 라이브러리입니다. 이번 포스팅에서는 React를 이용해서 앱을 만들기 위한 시작방법을 알아보도록 하겠습니다. React(리액트) 환경 구성하기 기본적으로 React를 사용하기 위해서는 Node.js가 우선적으로 설치가 되어 있어야 합니다. Node.js 설치 방법은 아래 링크에서 확인하실 수 있습니다. 2021.03.19 - [쿤즈 Dev/Nodejs] - [Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS) [N.. 2021. 6. 3.
[Javascript] Promise 사용시 async, await 사용하는 방법 지난 포스팅에서는 프로미스(Promise)에 대해서 알아보고 Promise 함수를 만드는 방법에 대해서 소스코드로 알아보았습니다. 비동기 함수를 사용하데 있어서 어려움이 있습니다. 이 어려움을 프로미스가 조금 더 편리하게 비동기 함수를 사용할 수 있도록 만들어 주었습니다. 이번 포스팅에서는 비동기를 동기처럼 사용해 볼 수 있는 async와 await에 대해서 알아보겠습니다. async와 await async와 await 키워드를 사용하면 프로미스를 조금 더 편하게 사용할 수 있습니다. 그럼 각각은 어떤 역할을 하고 있는지 보시죠. async async는 함수 앞에 붙는 키워드입니다. 이 키워드를 사용하면 사용한 함수는 항상 프로미스(Promise)를 반환합니다. 아래 예제를 보겠습니다. const asy.. 2021. 6. 1.
[C언어 문제] 구구단 출력하기(2): 구구단 전체 출력하기 지난 포스팅에서는 구구단을 출력해 보았습니다. 사용자로부터 단을 입력받고 그 단에 해당되는 구구단을 화면에 출력하였습니다. 표준 입출력과 반복문을 이용하는 방법을 조금 더 자세하게 알아보기도 했습니다. 이번 포스팅에서는 구구단 전체를 출력해 보도록 하겠습니다. C언어 문제. 구구단 출력하기(2): 구구단 전체 출력하기 화면에 다음과 같이 출력되도록 프로그래밍하시오. 2 단 2 * 1 = 2 2 * 2 = 4 2 * 3 = 6 ... 9 * 7 = 63 9 * 8 = 72 9 * 9 = 81 조건 1. 각 단이 출력되기 전 몇단인지 출력하시오. 조건 2. 반복문을 이용하시오. *프로그래밍 의도 표준 출력을 이용할 수 있는가? 반복문을 이용할 수 있는가? 중첩 반복문을 이용할 수 있는가? *문제 해결을 위한.. 2021. 5. 30.
[C언어 문제] 구구단 출력하기(1): 단을 입력받아 출력하기 이번 포스팅에서는 구구단을 출력해보려 합니다. 구구단은 반복문에서 사용되는 가장 기본적인 형태로 만들어 볼 수 있는 프로그래밍입니다. 이번 포스팅에서는 첫 번째로 사용자로부터 원하는 단을 입력받아서 출력해보도록 하겠습니다. C언어 문제. 구구단 출력(1): 단을 입력받아 출력하기 화면에 다음과 같이 출력되도록 프로그래밍하시오. 출력할 단을 입력하세요: 7 7 * 1 = 7 7 * 2 = 14 7 * 3 = 21 7 * 4 = 28 7 * 5 = 35 7 * 6 = 4 7 * 7 = 49 7 * 8 = 56 7 * 9 = 63 조건 1. 사용자로부터 정수를 입력받으시오. 조건 2. 반복문을 사용하시오 *프로그래밍 의도 표준 입출력 함수를 사용할 수 있는가? 반복문을 사용할 수 있는가? *문제 해결을 위한 .. 2021. 5. 29.
[Javascript] 프로미스(Promise) 비동기 함수 사용 방법 지난 포스팅들에서는 비동기의 작동 방법과 대표적인 함수인 setTimeout() 함수, 그리고 콜백 함수를 사용하는 방법까지 알아보았습니다. 2021.05.23 - [쿤즈 Dev/JS HTML CSS] - [Javascript] 비동기(Asynchronous) 사용해보기 2021.05.26 - [쿤즈 Dev/JS HTML CSS] - [Javascript] 콜백 (Callback) 함수 사용 방법 비동기와 콜백의 개념과 사용을 알고 있어야만 이번 포스팅에서 진행할 프로미스(Promise)에 대해서 이해하실 수 있습니다. 이번 포스팅에서는 프로미스(Promise)를 사용하는 방법에 대해서 알아보도록 하겠습니다. 프로미스(Promise)란 무엇인가 프로미스는 비동기 함수를 보다 편리하게 다룰 수 있는 Obj.. 2021. 5. 28.
[Javascript] 콜백 (Callback) 함수 사용 방법 Javascript를 공부하다 보면 반드시 나오는 단어 중 하나가 바로 콜백(Callback) 함수입니다. 그리고 콜백 함수를 조금 더 쉽고 편하게 사용하기 위한 기능도 내장되어 있습니다. 이번 포스팅에서는 콜백 함수가 무엇이고 어떻게 사용한지 알아보도록 하겠습니다. 콜백(Callback) 함수란 무엇인가 콜백 함수는 어떤 함수를 실행시키고 난 이후에 결과를 받을 함수 혹은, 그다음에 실행될 함수를 의미합니다. 콜백 함수가 나오게 된 이유는 Javascript의 모든 이벤트는 모두 싱글 스레드입니다. 즉, 한 번에 한 가지 일만 처리하는 것이죠. 싱글 스레드의 경우는 작업을 요청한 이후에 그 작업이 끝날 때까지 다음 작업은 진행할 수 없습니다. 만약 통신 과정이 포함되어 있고 데이터를 보낸 이후에 답이 .. 2021. 5. 27.

티스토리툴바