본문 바로가기

전체 글328

[리액트] 리액트에서 자주 쓰이는 자바스크립트 배열의 메서드 3가지 (concat, filter, map) 리액트에서 객체나 배열을 업데이트 해야할때 주의점 직접 접근해 업데이트 할 수 없다 불변성을 지켜주면서 업데이트를 해야한다 (기존 배열이나 객체의 복사본을 업데이트) 기존 코드를 변화시키는 배열의 메소드를 사용할 수 없다 push(추가), splice 기존 코드를 변화시키지 않는 배열의 메소드만 사용해야한다 concat(추가), filter(삭제), map(수정) 불변성이란? 리액트에서 객체나 배열을 업데이트할때는 불변성(immutable)을 지켜주면서 업데이트를 해야한다. 불변성이란 상태가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다. 즉 리액트에서 어떤 값을 업데이트하기 위해서는 상태 변경을 하지 않아야 한다는 것이다. 상태를 변경하지 않고 어떻게 업데이트를 할 수 있을까? 정답은 업데이트를.. 2022. 3. 30.
[웹개발/한줄정리] 버그(Bug)란? 버그란 프로그램이 의도한대로 동작하지 않는 것을 의미한다. 2022. 3. 30.
[깃/한줄정리] 깃에서 체크아웃(check out)이란? 체크아웃(check out) 현재 작업할 브랜치로 바꿔주는것 사용하고 있던 브랜치를 떠나 새로운 브랜치로 들어가는것 브랜치 A에서 브랜치 B로 깃을 체크아웃한다 (= 브랜치 B에서 작업을 하겠다고 선언) 2022. 3. 30.
[깃/깃허브] 깃허브 이슈 해결할 용도로 브랜치 만들때 브랜치 이름 정하는 방법 ⚠️ 이 포스팅은 핵심 쏙쏙 Git을 공부하고 정리한 블로그 포스팅입니다 ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 2주차 2-4 각자 공간에서 작업하기 - Branch - 실습 1. 깃허브에 이슈 등록 2. 해당 이슈를 해결하기 위해 새 브랜치를 만들어 작업한다 ⭐️ 브랜치 이름 정하기 prefix: 용도에 따라 prefix를 결정 이슈번호: 깃허브에 등록된 해당 이슈번호 이름: 어떤 기능인지 명시 prefix/이슈번호_이름 2022. 3. 30.
[웹개발] 프로그래밍에서 이슈(issue)란? 이슈의 상태 정리 이슈(issue)란? 프로젝트에서 해결해야하는 문제로 아래와 같은 것들이 있다: 프로젝트에서 해야할 작업 기능 추가 등의 프로젝트 개선 제안 버그 신고 (bug report, 버그 리포트) 이슈의 상태 1. Open 이슈가 처음에 생긴 상태 2. In Progress 개발자의 검토 및 수정이 진행되는 상태 3. Resolved 개발자가 작업을 완료해서 담당자의 확인을 기다리고 있는 상태 문제가 해결된 상태 4. Closed 이슈가 담당자의 확인 후 재수정이 필요하지 않아 이슈가 종결된 상태 5. Reopened 이슈가 담당자의 확인 후 재수정이 필요해 이슈를 다시 열은 상태 Reference 핵심 쏙쏙 Git 2-2 누가 이 작업할 거에요? - Issue 할당 Atlassian JIRA 블로그: 이슈란 .. 2022. 3. 30.
[깃/깃허브] 깃허브 이슈 넘버와 커밋 메세지 연결하기 ⚠️ 이 포스팅은 핵심 쏙쏙 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.

티스토리툴바