프로그래밍 공부를 하면 깃(Git)과 깃허브(GitHub) 이야기는 많이 들었을 것입니다. 프로그램의 버전을 관리하거나, 관련 문서를 편하게 관리하는 깃과 깃허브를 간단하게 배워봅시다. 📌 지옥에서 온 관리자, 깃 리누스 토르발스는 깃을 처음 세상에 소개하면서 깃은 지옥에서 온 관리자 라고 말했습니다. 지옥은 26년동안 1만명이 넘는 소프트웨어 엔지어들이 오픈 소스 방식으로 2천만줄이 넘는 소스코드가 넘치는 세상입니다. 이러한 지옥에서 태어난 소프트웨어가 리눅스 운영체제입니다. 리눅스 창시자인 그는 지옥같은 환경에서 벗어나기 위해 깃으로 만들었고, 넘쳐나는 리눅스 오픈 소스코드를 효율적으로 관리하게하였습니다. 📚 깃으로 할 수 있는 일 깃의 핵심 기능은 '버전 관리(Version Control)', '백..

자바스크립트에서 강력한 도구는 객체입니다. 그 객체에 대해 배워봅시다. 📌 Objects / 객체 📚 Introduction to Objects / 객체 소개 자바프로그래밍의 모든 기초는 객체입니다. 객체는 자바스크립트의 강력한 도구이자 핵심적인 개념입니다. 자바 스크립트에는 7가지 기본 데이터 유형이 있으며 그 중 6가지는 기본 데이터 유형(문자열, 숫자, 부울, null, 정의되지 않음 및 기호)입니다. 일곱 번째 유형인 객체를 사용하면 실제 사물을 모델링하거나 개체를 사용하여 웹을 가능하게 하는 데이터 구조를 구축할 수 있습니다. 객체는 다음 그림처럼 각각의 사물을 의미합니다. 객체마다 고유한 특징을 가지며 이 사실은 객체 스스로 변경할 수 있습니다. 객체는 또다른 객체를 자신만의 성질로 가질 수도..

하나의 함수는 간결하게 작성되어 하나의 일을 중점적으로 합니다. 이 함수를 매개변수로 받거나, 값을 반환하는 경우를 고차함수라고 합니다. 이러한 고차함수를 이용하여 배열의 각 요소들을 효과적으로 방문하는 반복자가 있습니다. 이번 시간에는 배열의 각 함수에 효과적으로 접근할 수 있는 반복자를 배워보겠습니다. 조건에 맞는 요소만을 반환하거나 각 값을 변경하는 등의 반복자는 코드를 설계할 때 굉장히 중요합니다. 📌 Higher-Order Functions / 고차함수 📚 Introduction / 소개 하나의 함수에서 다른 함수를 인수로 받거나 반환하는 함수를 고차함수라고 합니다. 간결하게 불필요한 세부 사항을 줄이고 핵심 개념만을 전달하는 방법을 "추상화"라고 합니다. 이번 단원에서는 함수를 작성하여 프로그..

우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다. 이번 실습은 다음과 같은 순서로 진행됩니다. 프로젝트 준비하기 UI 구성하기 기능 구현하기 📌 프로젝트 준비하기 📚 프로젝트 생성 및 필요한 라이브러리 설치 일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요. $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass c..

반복은 중지 조건이 될 때까지 명령들을 반복하는 프로그래밍 구조입니다. 루프를 참조할 때 iterate 를 사용하게 되는데 이는 "반복하다"라는 의미입니다. 코드에서 작업을 재사용할 때는 함수로 묶습니다. 같은 원리로 프로세스가 한 행에서 여러 번 반복되면 루프를 작성해야합니다. 다이어그램처럼 루프는 특정 조건이 충족될 때까지 작업을 반복합니다. 📌 Loops / 반복 📚 Repeating Tasks Manually / 직접 반복하기 우리가 배운 방법들을 이용해 각 배열의 요소를 출력하는 방법은 다음과 같습니다. 같은 코드가 반복되고 요소가 많다면 이 작업이 굉장히 힘들 것입니다. let vacationSpots = ['Seoul', 'Tokyo', 'London'] console.log(vacation..

컴퓨터에서에 대이터를 저장하고 저장하는 방식을 설계하는 것은 굉장히 중요합니다. 프로그래밍 언어에서 데이터를 저장하기 위해 가장 많이 쓰는 것이 배열입니다. 자바스크립트에서의 배열은 모든 데이터 유형들을 저장할 수 있고, 배열의 순서인 인덱스 번호를 통해 정해진 위치를 가져옵니다. 배열은 정해진 자료를 순서대로 저장하고 쉽게 꺼내올 수 있습니다. 자바스크립트에서의 배열을 어떠한 방식으로 저장되는지 배워봅시다. 📌 Array / 배열 📚 Create an Array / 배열 만들기 배열을 만드는 방법은 배열에 넣을 항목들을 [ ] 로 묶으면 됩니다. 배열은 다양한 데이터 유형을 가질 수 있습니다. 배열은 대괄호([ ])와 내부 내용으로 만들어집니다. 배열 내의 각 항목을 요소 라고 합니다. 현재 예시의 배..

리액트 컴포넌트를 스타일링할 때는 다양한 방법이 있습니다. 자신이 필요하거나 회사가 원하는 방식으로 만들면 됩니다. 이번 포스트에서 알아볼 스타일링 방식은 다음과 같습니다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기(prev-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS를 더욱 쉽게 작성할 수 있음 CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 고유의 이름을 지정하는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시킴, 해당 스타일이 적용된 컴포넌트를 스타일을 작성함과 동시에 만듦 이번 실습은 다음과 같은 순서로 진행합니다. 프로젝트 준비하기..

프로그래밍에서 중요한 아이디어는 범위(Scope) 입니다. 변수에 액세서하거나 참조할 수 있는 범위를 다르게 설정하여 원하는 변수에 접근시킬 수 있습니다. 변수의 범위는 다른 프로그래밍 언어에서도 중요한 개념입니다. 이번 포스트를 통해 자바스크립트 내의 변수의 선언과 범위 설정에 대해 배워 봅시다. 📌 Scope / 범위 📚 Blocks and Scope / 블록 및 범위 if 문을 배우면서 중괄호 { } 안에 있는 코드인 블록을 배웠습니다. 블록은 하나 이상의 명령문을 함께 그룹화하고 코드에 대한 구조적 표식 역할을 합니다. const city = 'New York City'; function logCitySkyline(){ let skyscraper = 'Empire State Building'; r..

본 글은 "황기태"님의 [명품 C++ Programming]의 연습 문제 답을 공유하고자 작성되었으며, 필자가 직접 문제를 풀며 작성한 것이기에 오류가 있을 수 있습니다. 댓글로 알려주시면 반영하도록 하겠습니다. 시리즈 보기 [C++] 명품 C++ Programming 1장 연습 문제 풀이 (이론 문제) [C++] 명품 C++ Programming 1장 연습 문제 풀이 (실습 문제) [C++] 명품 C++ Programming 2장 연습 문제 풀이 (이론 문제) [C++] 명품 C++ Programming 2장 연습 문제 풀이 (실습 문제) [C++] 명품 C++ Programming 3장 연습 문제 풀이 (이론 문제) [C++] 명품 C++ Programming 4장 연습 문제 풀이 (이론 문제) [C..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 상태 관리를 할 수 있는 더영헌 기능을 제공합니다. 이번 실습은 다음과 같이 진행됩니다. 리액트 내장 Hooks 사용하기 커스텀 Hooks 만들기 실습을 위해 create-react-app을 사용하여 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 📌 useState useState는 가장 기본적인 Hook으로, 함수 컴포넌트에서 가변적 상태를 지니도록 합니다. 3장을 복습하며(https://daradarav.tistory.com/14) useState를 사용하는 카운터를 만들어봅시다. src 디렉터리에 Counter.js 파일을 만들어 다음의 코드를 작성합니다. // Counetr..