본문 바로가기

분류 전체보기328

[깃/깃허브] 깃허브 이슈 넘버와 커밋 메세지 연결하기 ⚠️ 이 포스팅은 핵심 쏙쏙 Git을 공부하고 정리한 블로그 포스팅입니다 ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 2주차 2-2 누가 이 작업할 거에요? - Issue 할당 이슈 넘버란? 깃허브 리포지토리 이슈를 등록하면 자동으로 부여되는 숫자로 해당 이슈 제목 옆에 위치한다. 이슈 넘버는 이슈를 등록한 순서다. 아래의 예시는 이슈 넘버가 #2이므로 리포지토리 이슈에 등록한 2번째 이슈다. 이슈 넘버와 커밋 메세지 연결해야하는 이유 이슈를 등록하면 이를 해결하는 코드를 작성하고 커밋을 하는 것이 일반적이다. 커밋 메세지를 작성할때 이슈 넘버를 참조한다면 해당 이슈페이지에 이슈를 해결한 커밋의 히스토리가 남는다. 이슈 넘버와 커밋 메세지 연결하기 ❗커밋메세지에 이슈넘버를 입력한다 git commit.. 2022. 3. 30.
[Linux/Shell/Vim] 자주 쓰는 리눅스, 쉘, 빔 명령어 모음 기초상식 키워드 의미 ~ 루트 디렉토리 * 모든 파일 (asterisk) . 현재 디렉토리 .. 상위 디렉토리 shell command 명령어 의미 clear cd 해당 디렉토리로 이동 (change directory) cd .. 상위 디렉토리로 이동 ls 현재 directory 안에 있는 파일 리스트 확인 (list) ls -l 상세 정보를 포함해서 현재 directory 안에 있는 파일 리스트 확인 (line by line) ls -a .으로 시작하는 숨김파일을 포함해서 현재 directory 안에 있는 파일 리스트 확인 (all files) ls -al 숨김파일을 포함한 모든 파일의 상세 정보를 포함해서 현재 directory 안에 있는 파일 리스트 확인 ls -help ls의 자세한 옵션 보기 m.. 2022. 3. 29.
[자바스크립트] 삼항연산자(ternary operator) 사용법 삼항연산자(ternary operator)란? if문의 단축형태로 항목이 세개라 삼항연산자라고 한다 간단한 연산은 삼항연산자를 사용하고 복잡한 연산은 if, switch문을 사용한다 return문 안에는 if문을 사용할 수 없기 때문에 return 안에 조건문이 필요할때는 삼항연산자를 사용한다 조건 ? 조건이 true일때 실행할 실행문 : 조건이 false일때 실행할 실행문 const name = "maple"; console.log(name === "maple" ? "yes" : "no"); // yes 코드해석 name이라는 변수에는 maple이라는 문자열 데이터가 할당되어있다 name이라는 변수에 "maple"이 할당되어있다면(true) yes를 콘솔창에 출력하고 아니라면(false) no를 콘솔창.. 2022. 3. 29.
[자바스크립트] 스프레드 오퍼레이터(spread operator, 전개 연산자)란? 스프레드 오퍼레이터(spread operator)란? 한글로 직역하면 펼치는 연산자로 객체나 배열 안에 있는 모든 데이터를 꺼내서 복사해준다. const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2]; console.log(newArr); // [1, 2, 3, 4, 5, 6] 코드해석 ...arr1은 arr1 안에 있는 데이터 1, 2, 3을 의미한다 ...arr2은 arr2 안에 있는 데이터 4, 5, 6을 의미한다 즉 newArr에 들어 있는 값은 arr1과 arr2의 데이터 1, 2, 3, 4, 5, 6이다 2022. 3. 29.
[자바스크립트] =, ==, ===의 차이 (할당연산자, 동등연산자, 일치연산자) 1. = 변수값을 변수명에 할당할때 사용하는 할당 연산자(Assignment Operator) 변수키워드 변수명 = 값; const name = 'maple'; 2. == 왼쪽과 오른쪽의 값이 동등한지 확인하는 동등 연산자(Loose Equality Operator) 값만 같고 타입이 달라도 같다(==) const stringFive = "5"; const numberFive = 5; console.log(stringFive == numberFive); // true 3. === 왼쪽과 오른쪽의 값이 일치하는지 확인하는 일치 연산자(Strict Equality Operator) 값도 같고 타입도 같아야 같다(===) const stringFive = "5"; const numberFive = 5; con.. 2022. 3. 29.
[자바스크립트] 클래스의 상속과 instanceof 1. 클래스 상속 1.1 클래스 상속이란? 클래스 상속이란 다른 클래스의 속성과 메서드를 그대로 가져오는 것 즉 상속받는 것을 말한다. // 클래스 Animal class Animal { constructor(name, age) { this.name = name; this.age = age; } showName(){ console.log(`My name is ${this.name}`); } showAge(){ console.log(`I am ${this.age} years old`); } } // 클래스 Animal로 새로운 인스턴스인 pubao를 생성 let pubao = new Animal('pubao', 1, 'bamboo') // 클래스 Animal을 상속받은 클래스 Cat class Cat ex.. 2022. 3. 29.
[자바스크립트] 클래스 선언하는 방법 (클래스, 오브젝트, 인스턴스의 차이) 1. 클래스(class), 오브젝트(object), 인스턴스(instance) 1.1 클래스란? 클래스는 객체 지향 프로그래밍에서 객체를 생성하기 위한 틀 또는 템플릿이다 클래스의 내부에는 객체를 정의하기 위한 속성(객체에 소속된 변수)와 메서드(객체에 소속된 함수)로 구성된다 클래스에 데이터를 넣어서 만든것이 오브젝트이다 클래스 안에는 데이터가 들어 있지 않기 때문에 메모리에 올라가지 않는다 자바스크립트의 클래스는 ES6부터 사용이 가능하다 클래스가 없었던 ES5에서는 함수를 사용해서 오브젝트를 생성하는 템플릿을 만들었다 1.2 오브젝트란? 프로그램을 짤 때 동일한 목적이나 기능을 하는 변수와 함수들을 각각 하나로 묶는것 여러 속성이나 메소드를 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 오브젝.. 2022. 3. 29.
[자바스크립트] 함수를 선언하는 3가지 방법 (함수 선언식, 함수 표현식, 화살표 함수) 함수를 선언하는 3가지 방법 1. 함수 선언식 (function declaration) 일반적인 함수 선언 호이스팅이되서 코드 맨 앞줄에 자동으로 선언이된다 function 함수이름() { 함수실행문 } sayHello(); // 함수의 선언식은 호이스팅이되기 때문에 함수가 실행된다 function sayHello() { console.log('Hello World'); } 2. 함수 표현식 (function expression) 함수를 변수에 저장 일반 함수와 다르게 호이스팅이 되지 않는다 let 변수명 = function() { 함수실행문 } sayHello(); // 함수의 표현식은 호이스팅이되지 않기 때문에 함수가 실행되지 않는다 let sayHello = function() { console.l.. 2022. 3. 29.
[자바스크립트] document.createElement로 DOM 요소 추가하기 DOM 요소를 추가하는 document의 메소드 document.createElement(태그이름) DOM 요소를 만들어주는 함수 createElement 함수로 DOM 요소를 만든 후 반드시 DOM에 붙여주는 작업을 해야한다 // 새 요소 만들기 const newDiv = document.createElement("div"); // 스타일 추가 newDiv.style.backgroundColor = "blue"; newDiv.style.width = "50px"; newDiv.style.height = "50px"; // 요소를 body에 추가 document.body.appendChild(newDiv); 2022. 3. 25.
[자바스크립트] document의 메소드로 DOM 요소에 접근하기 DOM 요소에 접근하는 5가지 document의 메소드 1. document.getElementsByTagName(태그이름) DOM 요소를 태그 이름으로 접근하는 함수 id나 class 선택자가 없는 DOM 요소에 접근하는 함수 getElementsByTagName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다 this is paragaph this is paragaph this is paragaph 2. document.getElementsByName(name속성값) DOM 요소를 요소의 name 속성값으로 접근하는 함수 getElementsByName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다 3. document.getElementById(아이디) DOM 요소를 .. 2022. 3. 25.
[Linux] 디렉토리 or 폴더 통째로 복사하는 리눅스 명령어 cp -R 2022. 3. 24.
[깃] 리포지토리(repository)란? git push, pull, clone 정리 ⚠️ 이 포스팅은 핵심 쏙쏙 Git을 공부하고 정리한 블로그 포스팅입니다 ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 1주차 1-8 원격 repo 사용하기 - 개념탑재 1-9 원격 repo 사용하기 - 실습 1. 리포지토리(repository) 깃으로 관리되는 프로젝트. 줄여서 리포라고도 한다. 1.1 리포지토리의 2가지 종류 1) 로컬 리포지토리(local repository) 내 컴퓨터에 저장되어 있는 깃으로 관리되는 프로젝트 2) 원격 리포지토리(remote repository) 깃허브처럼 다른곳에서 접속할 수 있는 공간에 저장되어 있는 깃으로 관리되는 프로젝트 1.2 원격 repo 와 로컬 repo가 함께 사용된다는 의미는? google drive 같은 클라우드 서비스에 있는 폴더를 내 컴퓨터.. 2022. 3. 24.
[깃/소스트리] 소스트리(Source Tree)에서 깃허브 리파지토리 클론하기 1. New > Clone from URL 클릭하기 2. Source URL에는 깃허브 리파지토리 URL을, Destination Path에는 클론한 프로젝트를 놓을 경로를 입력한다. 그리고 Name은 폴더이름에 따라 자동생성된다. 3. Clone 버튼을 누르면 프로젝트가 로컬 컴퓨터에 받아와진다. 2022. 3. 24.
[깃/소스트리] 소스트리(Source Tree)에서 깃허브 연결하는 방법 1. 깃허브에 연결하고 싶은 프로젝트를 소스트리에서 열고 > 설정 버튼 누르기 2. 원격 > 추가 버튼 누르기 3. 원격이름 origin, 호스트 종류 GitHub, 깃허브 사용자명 입력하기 4. URL/경로 옆의 지구 모양 버튼 누르기 5. 원하는 리퍼지토리 선택 > OK 버튼 누르기 6. 모든 정보가 채워졌으면 확인버튼 누르기 2022. 3. 24.
[리액트] props란 무엇일까? (부모 컴포넌트, 자식 컴포넌트) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.3 props Props props란 자식 컴포넌트의 속성을 설정할 때 부모 컴포넌트에서 전달해주는 데이터를 의미한다. 예제를 살펴보기 전에 부모 컴포넌트와 자식 컴포넌트의 개념부터 알아보자. 부모 컴포넌트: 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트: 부모 컴포넌트에게서 불려온 컴포넌트 부모 컴포넌트 부모 컴포넌트(App)에서 자식 컴포넌트(MyComponent)를 불러오고 자식 컴포넌트의 속성을 name={"React"} 설정하였다. 이때 자식 컴포넌트(MyComponent)에서 props 객체를 전달하게 되고 그 객체 안에 name: "Re.. 2022. 3. 23.
[리액트] 컴포넌트 선언하기, 모듈 내보내기, 불러오기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.2 첫 컴포넌트 생성 컴포넌트 선언하기 리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트로 총두가지 컴포넌트가 있다. 두 컴포넌트에 대해 더 자세히 알아보고 싶다면 👉 [리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?) 컴포넌트를 생성할때는 일반적으로 components라는 폴더안에 넣는다. src폴더 안에 components 폴더를 만든 후 FirstComponent.jsx라는 파일을 만들어보자. 컴포넌트 파일은 .js와 .jsx 둘다 가능하다. 나는 순수한 자바스크립트 파일과 JSX문법을 사용해 만든 컴포넌트파일을 구분하기 위해 파일확장자.. 2022. 3. 23.
[리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 1.3 작업 환경 설정 리액트 프로젝트를 생성하기 전에 필요한 도구 1. 터미널 터미널은 그래픽 유저 인터페이스(GUIs) 없이 컴퓨터에 명령을 내릴 수 있는 도구다. 여기서 그래픽 유저 인터페이스는 전자기기의 UI를 그래픽화시켜 일반 사용자들이 컴퓨터에게 쉽게 명령을 내릴 수 있게 하는 방식이다. 우리가 친구에게 메시지를 보낼때 전송버튼을 눌러 보낸다. 이때 버튼이라는 UI가 메시지를 전송하게 하는 기능을 가진 GUI 그래픽 유저 인터페이스다. 2. Node.js Node.js는 자바스크립트를 서버에서 실행할 수 있게하는 자바스크립트 엔진이다. 리액트에.. 2022. 3. 23.
[리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.1 클래스형 컴포넌트 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다. 또한 컴포넌트 내부에서 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount)의 작업을 처리할 수 있다. 리액트에서 컴포넌트는 두가지 방식으로 선언할 수 있는데 클래스형태로 컴포넌트를 선언하는 방식과 함수형태로 컴포넌트를 선언하는 방식이 있.. 2022. 3. 23.
[리액트 에러] 리액트 에러메세지 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? ⚠️ 에러내용 Warning: Invalid DOM property `for`. Did you mean `htmlFor` ❓ 에러발생이유 리액트에서는 자바스크립트과 유사한 JSX문법을 사용한다. 자바스크립트에서는 for가 반복문을 사용할 때 쓰는 예약어이므로 HTML의 속성 이름(attribute name)으로 사용할 수 없다. ❗️ 해결방법 과 같은 태그에서 for 속성 이름을 사용해야할 때는 htmlFor를 대신 사용해준다. import React from 'react'; const RadioButton = ({ foundingDate }) => { const { id, name, label } = foundingDate; return ( {label} ); }; export default Radio.. 2022. 3. 23.
[리액트] JSX 문법 9가지 완벽 정리 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 2장 JSX 2.1 코드 이해하기 2.2 JSX란? 2.3 JSX의 장점 2.4 JSX 문법 JSX JSX는 JavaScript XML로 HTML 문법을 사용할 수 있는 자바스크립트 파일을 의미한다. 확장된 자바스크립트 문법이지만 HTML과 비슷하게 생겼기 때문에 사용하기가 쉽다. 일반 자바스크립트가 아니기 때문에 번들링(파일을 하나로 합치는) 과정에서 바벨을 사용하여 일반 자바스크립트로 변환해야한다. JSX 문법을 사용한 코드 function App() { return ( Hello React ) } JSX를 Babel을 사용해 일반 자바스크립트로 변환한 코드 fun.. 2022. 3. 23.

티스토리툴바