![]()
SourceTree 1. SourceTree 이번엔 SourceTree에 대해 알아봅시다. SourceTree는 Git을 시각적으로 관리할 수 있는 무료 Git GUI 클라이언트입니다. SourceTree를 사용하면, Git 저장소를 쉽게 관리하고 변경 사항을 시각적으로 확인할 수 있습니다. 2. 주요 기능 1) 시각적인 표현 Git의 작업을 그림으로 보여주어 작업 내용을 이해하기 쉽게 합니다. 브랜치, 커밋, 병합 등이 시각적으로 표현됩니다. 2) 간편한 브랜치 관리 브랜치를 만들고 전환하는 것이 쉽습니다. 브랜치를 시각적으로 선택하여, 브랜치 간 전환을 수월하게 할 수 있습니다. 3) 커밋 및 병합 변경된 파일을 선택하여 커밋하고, 브랜치를 병합하는 작업이 SourceTree에서 직관적으로 이루어집니..
![]()
인터페이스 (interface) 1. 인터페이스 TypeScript의 인터페이스에 대해 알아봅시다. 인터페이스란? 코드의 구조를 정의하는데 사용되는 도구입니다. 인터페이스를 사용하면, 객체의 형태, 메서드, 속성 등을 명시적으로 정의할 수 있으며, 이를 통해 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다. 2. 사용방법 처음엔 다음과 같이 입력하여, 정의하여 줍니다. interface User { name: string; age: number; } 그 후 객체를 선언하고 출력해봅시다. interface User { name : string; age : number; } let user : User = { name : 'Kim', age : 30 } console.log(user.age); 속..
![]()
생성자 (constructor) 1. 생성자 (constructor) constructor는 객체를 생성할 때, 호출되는 메서드입니다. 일반적으로 클래스 or 함수를 사용하여 객체를 만들 때, 이 생성자가 호출됩니다. 2. 사용방법 console.clear(); class Person { // 생성자 constructor(name, age) { this.name = name; this.age = age; } // 다른 메서드들도 정의할 수 있음 hello() { console.log(`안녕하세요 ${this.name}입니다. 나이는 ${this.age}살 입니다.`) } } // 객체 생성 const user = new Person("Kim", 20); // 생성자에서 초기화된 속성 확인 console...
![]()
Git 최초 설정 1. 사용자 이름 및 이메일 설정 git의 사용자 이름 및 이메일을 설정해봅시다. #1. 마우스 오른쪽 클릭 후, git bash에 들어가서 다음과 같이 입력하여 user name을 설정합니다. git config --global user.name "(사용자명)" → git config --global user.name을 입력하면, 제대로 되었는지 확인할 수 있습니다. #2. 이번엔 다음과 같이 입력하여, user email을 설정합니다. git config --global user.email → git config --global user.name을 입력하면, 제대로 되었는지 확인할 수 있습니다. #3. 그 다음, 다음과 같이 입력하여 기본 브랜치명을 변경합니다. git config ..
![]()
Git 1. Git 코딩을 협업하는 데 꼭 필요한 Git에 대해 알아봅시다! Git이란? 소스 버전 관리 시스템으로, 코드를 추적하고 변경 내용을 기록하여, 여러 개발자가 효과적으로 협업할 수 있도록 도와주는 도구입니다. 각 개발자는 Git을 통해 전체 코드 기록을 로컬 저장소에 가지고 있어 독립적으로 작업할 수 있습니다. Git 설치하기 2. 용어 및 명령어 1) 저장소(repository) Git이 코드를 저장하는 곳입니다. 로컬 저장소와 원격 저장소로 나뉩니다. 로컬 저장소는 개발자의 컴퓨터에 있고, 원격 저장소는 중앙 서버에 위치합니다. 2) 커밋(commit) 코드의 변경 내용을 기록하는 단위입니다. 각 커밋은 고유한 해시 값을 가지며, 변경 사항과 함께 작성된 커밋 메시지가 포함됩니다. 3) ..
![]()
기본 타입 1. 기본 타입 TypeScript에서 기본 타입에 대해 알아봅시다. JavaScript와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용하여 지정합니다. 기본 타입에 대한 내용은 여기로! 1) 문자열 (String) 문자열은 변수명: string로 입력하여, 선언합니다. // 문자열 let car: string = "BMW"; // JavaScipt // let car = "BMW"; 2) 숫자 (number) 숫자는 변수명: number로 입력하여, 선언합니다. // 숫자 let age: number = 30; // JavaScript // let age = 30; 3) 배열 (array) 배열은 변수명: 타입[ ] 또는 Array으로 입력하여, 선언합니다. // 배열(숫자) let..
![]()
forEach 메서드 1. forEach 메서드 forEach 메서드란? 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드입니다. 반복문을 대신하여 코드를 간결하게 해주고, 배열의 각 요소에 대한 작업을 수행할 때, 편리하게 사용됩니다. 2. forEach 메서드 구조 array.forEach(function(currentValue, index, array) { // currentValue: 현재 반복 중인 요소의 값 // index: 현재 반복 중인 요소의 인덱스 // array: 원본 배열 // 수행 코드 }); 3. 예시 // 배열 생성 var numbers = [1, 2, 3, 4, 5]; // 배열의 각 요소와 인덱스를 출력 numbers.forEach(function (number, ind..
![]()
TypeScript 1. TypeScript 지금부터 TypeScript에 대해 알아봅시다. TypeScript란? Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입 시스템을 추가한 언어입니다. 모든 JavaScript 코드가 TypeScript 코드로 유효하며, TypeScript는 JavaScript를 그대로 지원합니다. 2. 특징 1) 정적 타입 시스템 변수, 함수, 객체 등에 명시적인 데이터 타입을 지원하며, 이를 통해 코드의 안정성을 높이고 버그를 줄일 수 있습니다. 개발자는 코드를 작성하면서 컴파일 단계에서 타입 오류를 미리 확인할 수 있습니다. 2) 객체 지향 프로그래밍 객체 지향 프로그래밍(OOP)의 개념을 지원합니다. 클래스, 상속, 인터페이스 등..
![]()
HTTP Status Code 1. HTTP Status Code 공부를 하면서, 404, 200 등 세 자리 숫자로 이루어진 코드를 본 경험이 있는데, 이것이 무엇이며, 어떤 종류가 있는지 궁금하여 알아보았습니다. HTTP Status Code란 클라이언트가 보낸 HTTP 요청의 결과를 나타내는 세 자리 숫자로 이루어진 코드입니다. 각각의 Status Code는 특정한 의미를 가지며, 클라이언트와 서버 간의 통신에서 어떤 일이 발생하였는지 알려줍니다. 2. Status Code 구조 상태 코드(Status Code)는 다음과 같은 구조를 나타냅니다. 첫 번째 자리 숫자 (1xx, 2xx, 3xx, 4xx, 5xx) : 상태 코드의 일반적인 범주를 나타냅니다. 코드 의미 1xx Informational ..
![]()
서명 : 미라클모닝 : 당신의 하루를 바꾸는 기적 아침 6분이면 충분하다 저자 : 엘 할로드 출판 : 한빛비즈 발행 : 2016.03.03 아침 일찍 일어나기.. 매우 쉽지 않다. 하지만, 이 책을 읽음으로써 아침에 일어나는 것은 매우 좋은 습관이며, 자기계발을 하기 위한 매우 적합한 시간임을 깨달았다. 내 개인적인 생각으로, 미라클모닝의 매우 큰 원동력은 근성이다. 평소 늦게 일어나는 사람이라면, 처음엔 쉽지 않을 것이다. 포기하고 싶은 마음도 많이 생길 것이다. 하지만 그것을 이겨내고 꾸준히 일찍 일어난다면, 그것은 습관이 되고 비로소 나의 것으로 만들 수 있을 것이다. 자기계발을 위한 기적의 아침을 만들고 싶은 사람들에게 이 책을 추천한다. 미라클모닝을 해야하는 목적과 이유, 방법까지 자세히 나와있..
![]()
서명 : 기분이 태도가 되지 않게 저자 : 레몬심리 출판 : 갤리온 발행 : 2020.06.30 제목부터 맘에 든다. 내 기분이 그대로 들어나게 되면, 작거나 혹은 큰 상황 속에서 결국 안좋은 결과를 가져올 수 있다. 사회, 연인, 친구 등등 여러 관계 속에서 나에 부정적인 감정을 표출하면, 상대는 나의 기분을 성격으로 받아들일 수 있다. 항상 다짐하자. 마음가짐을 조절하며 기분이 태도로 나타나지 않도록 노력하고, 주변에 그런 영향을 주는 사람들을 멀리하도록 하자. 습관적인 불평은 내 하루를 망치고 내 관계를 망치며 결국 나를 망쳤다. 엉망인 하루하루가 모여 결국에는 나는 '불만이 많은 친구' 가 되었다. > -레몬심리-
![]()
서명 : 소란스러운 세상 속 혼자를 위한 책 저자 : 데비 텅 출판 : 윌북 발행 : 2021.01.30. 여자친구의 추천으로 읽게 된 책이다. 나 또한 mbti가 INFJ인 성격 유형이라서, 이 책을 읽으면서 깊은 공감과 위로를 받았다 남들처럼 활발하게 다니고 싶어서 밖에 다닐 때, 더 밝은 척 노력하며 살았었다. 그러다 보니 에너지 소모가 심했고 피로가 더 쌓이게 되었고, 이런 모습을 고치고 싶었다. 하지만, 지금은 내 자신을 받아들였고 남들에게 맞춰가는 것이 아닌 나답게 행동하며 살아가고자 한다. 자신을 부정하지 말고 내 자신을 믿고 편안하게 살아가면 되는 것이다. 그렇게 살아가면, 에너지 소모도 덜 하게 되고 다른 사람들과의 만남도 부담가지지 않게 된다. 이 책은 자기 자신을 고치고 싶은 INFJ..
![]()
API Routes 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 로그인 페이지 - 이번에는 로그인 페이지를 구현해보겠습니다. - #1. pages 폴더 안에 admin.js 파일을 생성 후, 다음과 같이 입력해줍니다. export default function Admin() { return admin; } - #2. Gnb.js 파일에서 다음과 같이 수정해줍니다. → 브라우저에서 실행해보면 제대로 나오는 것을 확인할 수 있습니다. import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = u..
![]()
isFallback, getStaticPaths 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. isFallback - isFallback은 Suspense 내에서 현재 자식이 로딩 중인지 여부를 나타내는 불리언(Boolean) 속성입니다. - 터미널에 npm run dev를 입력하여, 실행해보면 상품에 들어갈 때마다 새로 생성되는 것을 알 수 있습니다. - #1. 그것을 자세히 보기 위해, const Post => {...}안에 다음과 같이 추가하고 실행해보겠습니다. → 그러고 실행해보면 다음과 같이 true, false가 나오는 것을 확인할 수 있는데 이것이 로딩 중인지 여부를 나타냅니다. const router = useRouter(); console.log(..
![]()
정적 생성 (Static Generation) 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 정적 생성 - 저번 시간에는 서버사이드 렌더링으로 작업을 해보았으니, 이번엔 정적 생성으로 페이지를 작업해보겠습니다. ※ 정적 생성이란? (바로가기) - #1. index.js 에서 다음과 같이 입력해줍니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.module.css"; import {..
