FE Dev

1. CSS : 스타일링하는 가장 기본적인 방법 - CSS를 작성할 때 중요한 점은 CSS클래스를 중복되지 않게 만드는 것 - 이를 방지하는 방식 중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 다른 하나는 CSS Selector를 활용하는 것 - CSS Selector를 사용하면 CSS클래스가 특정 클래스 내부에 있는 경우에만 스타일 적용할 수 있음 /* App안에 들어있는 클래스 스타일 적용할 때 (태그 자체에 스타일 적용할 때는 .을 생략) */ .App .logo{ height: 20px; } 2. Sass (Syntactically Awesome Style Sheets) 문법적으로 매우 멋진 스타일시트 - CSS 전처리기(pre-processor)중 하나로 확장된 CSS문법을 사..

컴포넌트의 라이프사이클(수명 주기) · 모든 리액트 컴포넌트에는 라이프사이클이 존재 · 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 · 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행된다. (서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용) ex) 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있음 => 이때 컴포넌트의 라이프 사이클 메서드 사용 클래스형 컴포넌트에서만 사용할 수 있음 (함수형은X → Hooks기능을 사용하여 비슷한 작업 처리) - Will: 어떤 작업을 작동하기 전 실행되는 ..

HTML id로 태그 선택 // id에 해당하는 태그 하나 출력 document.getElementById('id'); ※ getElementById를 통해서 존재하지 않는 id 값으로 태그를 선택하면, null값이 리턴된다. - 원리: 메소드의 파라미터로 접근하고자 하는 태그의 id 값을 문자열로 전달해 주면 해당되는 태그가 선택 - 사용: 자바스크립트로 딱 하나만의 요소를 선택할 때, html 태그에 id 속성을 부여하고 getElementById 메소드 활용 - 장점: id 속성을 활용하면 필요한 태그를 명확하게 선택할 수 있다는 장점이 있음 - 단점: 여러 요소들을 동시에 선택해야 하는 경우 활용하기 어려움 HTML class로 태그 선택 // class에 해당하는 태그 모음(HTMLCollect..

Redux (리덕스) 상태를 관리하기 위한 오픈 소스 자바스크립트 라이브러리 => 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측가능하게 만들어준다. 특징 Single Source of Truth 단 하나의 진실의 원천 - 하나의 상태(=객체) 모든 데이터를 넣는다. - 한 곳에 데이터를 집중적으로 관리하면 여러 곳에 흩어져있는 것보다 데이터를 더 관리하기 쉬워짐 - 단 하나의 state를 유지하는 걸 통해서 애플리케이션의 복잡성을 낮춘다. 어떻게 동작하는가? 1) store : 정보가 저장되는 곳(은행같은 역할) ex) 글에 대한 정보, 글 목록에 대한 정보 2) state : store 안에 state라는 실제 정보가 저장된다. 단, 직접 접속 불가(누군가를 통해서만 접속 가능) 3) reduc..

데이터 타입 종류 기본형 (원시형, primitive type) - 기본형은 값이 담긴 주솟값을 바로 복제한다. (모두 불변성) - 숫자(number), 문자열(String), boolean, null, undefined가 있으며, ES6에서 Symbol이 추가되었다. 참조형 (reference type) - 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 - 객체(object)가 있고 객체의 하위 분류에는 배열(Array), 함수(Function), 날짜(Date), 정규식(RegExp) 등과 ES6에서 추가된 Map, WeakMap, Set, WeakSet 등이 속한다. 메모리와 데이터 - 비트(bit): 0 또는 1 두 가지 값만 표현할 수 있는 하나의 메모리 조각 (1byte..

🔨 Git 코드 버전 관리 프로그램(툴), 버전을 편리하게 관리할 수 있도록 도와주는 도구 Git의 목적 1) 버전 관리 2) 동시 협업 3) 백업 버전 관리? 파일의 변화를 시간에 따라서 기록했다가 나중에 특정 시점에 버전을 다시 꺼내올 수 있는 시스템 버전 관리의 장점 1) 지난 과정 확인 가능 2) 언제든 이전 버전의 코드로 돌아갈 수 있음 3) 개발자끼리 협업할 수 있음 수정 시, 파일을 새로 만들면 관리가 힘들기 때문 💻GitHub Git으로 관리하는 프로젝트를 올려둘 수 있는 사이트 - 외부 컴퓨터를 따로 마련하지 않아도 작업한 내용(백업본)을 내 컴퓨터가 아닌 다른 곳에 저장 가능 - 외부에 컴퓨터를 대신 만들어주는 서비스 (원격 저장소를 대신 제공해주는 서비스) => 다른 사람과 협업 가능..

'자바스크립트의 거의 모든 것이 다 객체다!' ✨객체(Object) : 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙이는 것 - 여러가지 값을 한 번에 저장하고 싶을 때 사용 - key와 value를 콜론(:)으로 구분하는 프로퍼티들의 집합 - 중괄호{ } 안에 쉼표로 구분해서 저장해서 사용 - key-value로 이루어진 한 쌍을 객체의 속성(Property)이라고 함 - 프로퍼티 네임(key)은 문자열 타입을 가지고 있음 (따옴표' '로 감싸주지 않고 생략해도 JS가 암묵적으로 문자열로 형 변환) - 프로퍼티 value 값은 모든 자료형을 사용할 수 있음! (문자열, 숫자, 불린, null, 객체) - 이 값의 자료형은 object(객체)이며, 객체 안에 객체를 넣을 수도 있음 ❗Property N..

변수의 유효범위 scope: 범위, 영역 => 변수에는 유효한 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생 - 자바스크립트에서는 중괄호{ }로 감싼 코드를 블록문(Block Statement)이라고 함 - 블록문을 기준으로 변수 나뉨 ☝ 지역 변수, 로컬 변수(Local Variable) (블록문 안에 선언된 변수들) 블록문 내에서만 유효한 범위를 가지고 있다. // 함수 선언 function myFunction() { let x = 3; // 지역 변수, 로컬 변수 console.log(x); // 3 } myFunction(); // 함수 호출 console.log(x); // 오류 발생 ✌ 전역 변수, 글로벌 변수(Global Variable) (블록문 밖에서 선언한 변수) 블록문 안에서도 ..