본문 바로가기

분류 전체보기77

DOM 이해하기 (Document Object Model) Dom은, 자바스크립트로 HTML을 제어하기 위해 만들어진 "모델"이다. 이 때, 모델의 의미는 HTML을 자바스크립트에서 "객체"로 다루기 위해 만들어진 추상화된(여러 기능이 묶여 새로운 의미로 정의된) 개념이라는 뜻이다. console.dir() console.dir() 메서드는 브라우저의 콘솔에 내가 원하는 HTML의 요소를 객체형태로 보여주는 메서드이다. console.dir(document) // document 객체가 가진 (HTML에서는 head와 body요소 뿐만 아니라, // window에 렌더링 되기 전 document가 가진 모든 객체를 보여준다고 생각하면 쉽다) console.dir(title) // 크롬의 about:blank에서는 공백이 console에 찍힌다. // 이는 doc.. 2023. 2. 14.
useState(), useEffect() useState()와 useEffect()? useStates와 useEffect는 React.js가 JS DOM을 대체할 수 있었던 가장 핵심적인 기능이다. 모던 웹은 정적 정보만을 제공하지 않고, 인터페이스를 통한 동적 상호작용을 통해 현재 페이지에 그려지는 요소의 상태를 표현한다. 이를 다루기 위해 라이브러리 없이 JS DOM으로만 이벤트를 처리할 때, 해당 요소를 정의, 로딩, 이벤트 정의, 이벤트 핸들링 등의 개념이 절차적 프로그래밍과 같이 코드로 작성되어야 했다. 하지만, useStates()와 useEffect()는 이러한 상태(state)를 변수에 담아 관리하고, 컴포넌트의 생명주기를 의존성 배열이나 조건부 렌더링 등을 통해 관리할 수 있다는 장점이 있다. use~()이라고 하는 모든 리액.. 2023. 2. 13.
States & Props (feat. eventHandler) Props? props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주도록 하는 "속성"이다. 속성이라는 말에서 알 수 있듯, props는 마치 html 태그에 속성을 추가하는 모습처럼 사용된다. import "./styles.css"; import "./component/ExpenseItems"; import Expense from "./component/Expense"; const App = () => { // 나는 App 함수에서 정의된 객체들을 App 컴포넌트가 아닌 하위 컴포넌트에서도 동시에 제어하고자 한다. const expenses = [ { id: "e1", title: "멘토 매칭 서비스", amount: 99000, date: new Date(2020, 7, 14) }, { id:.. 2023. 2. 6.
Component " 컴포넌트는 리액트의 심장이다! " - React 개발자 Dan Abramov 리액트 없이 HTML과 Javascript만을 갖고 웹을 개발하려고 한다면 웹에 있는 각 기능을 html 파일 안에서 하드코딩된 형식으로 전부 구성해야 하며, Javascript를 일일이 연결해서 그 기능을 구현해야 했다. 하지만, React에서 Component의 개념을 제시한 뒤로는 HTML은 오직 렌더링 이후의 결과만을 보여주는 역할만을 수행했고, 나머지 웹의 구조부터 기능에 이르기까지 전반적인 내용들 Component 단위로 쪼개어 구현한 뒤 Root 단계에서 조립하는 식으로 변화되었다. Component 기반 개발의 특징과 장점 컴포넌트는 웹의 각각에 보여지는 부분들을 기능 단위로 쪼개어 개발된다. 이 때의 기능 단.. 2023. 2. 2.
JSX JSX 1. JSX의 코드 그 자체로는 브라우저에서 읽어들일 수 없다. 이로 인해 babel이라는 컴파일러는 사용하게 된다. 2. 중간 렌더링 툴이 필요할만큼 복잡한 JSX가 필요한 이유는, 개발상 용이성 때문이다! Hello React! 흔히 볼 수 있는 위의 h2 밑에 "I want to be a developer who increases value"라는 내용을 갖는 태그를 JS를 활용하여 추가하기 위해서는 다음과 같은 2가지 방식이 있다. // ./App.js // * JS DOM으로 구현한 코드 const para = document.createElement("p"); para.textContent = "I want to be a developer who increases value"; docum.. 2023. 1. 31.
Create-react-app 리액트 프로젝트 시작하기 "React는 라이브러리이다." 1. React로 개발한 모든 어플리케이션은 JS로도 구현이 가능하다. 2. 그럼에도 불구하고, React를 쓰는 이유는 다양한 도구(js코드의 집합===>명령어/태그 등)들을 통해 어플리케이션 자체에 집중할 수 있고, 향후 유지보수 및 개선에 있어서 높은 생산성을 보장하기 때문이다. 3. 다만, JS자체가 아니기에 프로젝트 시작단계에서, 라이브러리 설치부터 진행해야 단다. # npx === node package module (패키지 모듈 설치) # create-react-app === 리액트 라이브러리를 사용한 새로운 프로젝트의 시작 # my-app === 폴더명, 프로젝트 이름에 따라 다양하게 변경됨 npx create-react-app my.. 2023. 1. 30.
Spread and Rest Operator (+a 구조분배할당) 스프레드 연산자 1. spread 연산자는 일반적으로 배열 혹은 객체 안에 있는 수많은 값들을 전개 한 뒤 새로운 배열 혹은 객체에 넣어서 활용하기 위한 방법으로 사용된다. 2. rest로 쓰일 때는, 전개하고 남은 값들을 특정 변수에 담아 재사용하게 될 경우 활용된다. // spread 연산자의 기본구문 // iterator : 순환(for...in / for...of), let iterableArr = [1, 2, 3, 4]; let iterableObj = { 1: "1", 2: "2", 3: "3", 4: "4" }; myFunction(...iterableObj); // iterable의 값들을 전개하는 연산자 console.log(myFunction); // 1: "1", 2: "2", 3: .. 2023. 1. 30.
Arrow Function 화살표 함수 // Arrow Fuction 기본구문 // 아래의 myFunc1~5는 모두 param을 매개변수로 받고 expression을 실행시키는 동일한 함수이다. // ----------------- 함수가 1줄로 끝나는 경우 ------------------ const myFunc = param => expression // 매개변수가 1개인 경우 const myFunc2 = (param) => expression // 매개변수의 수 관계x const myFunc3 = (param1, paramN) => expression // 매개변수의 수 관계x // ----------------- 함수가 여러 줄로 끝나는 경우 ------------------ const myFunc4 = param => {.. 2023. 1. 19.
__proto__ : 프로토타입 자바스크립트에서 모든 객체는 프로토타입(prototype)이라는 객체를 가진다. 프로토타입은 해당 객체가 가지는 속성과 메서드를 정의하고, 모든 객체는 자신의 프로토타입을 상속받아서 해당 프로토타입이 가지는 속성과 메서드를 사용할 수 있다. 이를 프로토타입 상속(prototype inheritance)이라고 한다. 이러한 프로토타입 상속은 프로토타입 체인(prototype chain)이라는 연결고리를 통해 이뤄진다. 프로토타입 체인은 클래스에서 생성된 객체가 상위 프로토타입의 상속을 탐색하는 연결고리를 말한다. 더 정확하게 프로토타입 체인은 프로토타입이 가지는 속성과 메서드를 사용할 수 있도록 프로토타입 객체의 연결된 체인을 순차적으로 탐색하는 과정이다. 이 과정에서 객체가 원하는 속성이나 메서드를 찾을.. 2023. 1. 16.
Class and Instance Class와 Instnace를 사용하는 이유?" 1. Class는 Instance를 생산하는 일종의 공장이자, Instance에 따라 일정한 형태를 리턴하는 청사진! 2. 구현된 기능을 파악하고 이를 재사용하기 용이하며, 향후 유지보수 및 기능을 추가할 때 생산성이 높다. // Class 기본구문 === MDN 참조 === ES6 최신구문 기준 const NewClass = class { // 클래스 선언 ===> 파스칼케이스 사용 (js의 카멜케이스x) constructor() { // 생성자 this.prop = "value" // 생성자에서 만들어내는 속성과 값 } newMenthod() { console.log(this.prop) // "value" } }; let newInstance = new.. 2023. 1. 16.
객체란? 1. 객체란? 1) 키(key)와 값(value)로 구성된 집합 2) 키(key)와 값(value)으로 구성된 한 쌍을 속성(property)라고 부른다. 2. 객체의 기본구조 (리터럴표기) let NewObject = { freshKey1 : "newValue1", // 값에는 문자열, 숫자열, 불리언 등 모든 타입이 들어갈 수 있다 freshKey2 : "newValue2" // 속성이 함수일 경우 ===> 해당 함수를 메서드라고 부른다 } 3. 객체에 접근하기! ===> 애초에 객체라는 개념이 주목받게 된 이유는, 절차적 사고를 중심으로 작성된 코드들이 IT의 발전에 따라 거대해져서 사람이 코드를 통해 유지보수를 하는데 많은 어려움을 겪게 된 데에서 찾을 수 있다. ===> 그렇기에 객체를 생성하고.. 2023. 1. 16.
자바스크립트 디버깅(debugging) 해보기(feat. vsc & 개발자도구) 1. Microsoft에서 제시하고 있는 디버깅의 개념 & 코린이에게의 디버깅 링크 : https://learn.microsoft.com/ko-kr/visualstudio/debugger/what-is-debugging?view=vs-2022 디버깅이란 무엇인가요? - Visual Studio (Windows) 앱을 디버그한다는 것의 의미를 알아봅니다. learn.microsoft.com 마이크로소프트에서는 디버깅의 개념을 코드에서 버그를 제거하는 일로 정의한다. 1-2# 하지만 나처럼 개발공부를 시작한지 1달도 채 안된 코린이 입장에서 디버깅이란, 조건문, 반복문 등의 개념을 학습하는 과정에서 '내가 알지 못하는' 자바스크립트가 코드를 읽어가며 산출하는 결과값들을 차례로 살펴보고 코드를 점검하기 위한 .. 2023. 1. 4.
(for문) n = n+i를 n === n+1처럼 착각하지 말자 예제) 1부터 100까지를 모두 더한 값을 for문을 활용하여 구하시오. tmi, 1부터 100까지의 합은 중학교때 처음 접했던 것 같은데,, 그때는 귀찮아서 그냥 답을 외워버렸다..(셤에 나온다길래) 근데 JS만나니 아주 반갑네;;ㅎㅎㅎ let sum = 0; for (let i = 0; i 2022. 12. 19.
자바스크립트의 타입과 변수 1. 자바스크립트의 타입(Type) 코딩을 하기 위해서는 다양한 타입(정확하게는 7개의 타입)들을 적절한 방법으로 작성할 수 있어야 한다. 특히, 타입의 특징을 활용한 여러 예제도 있는만큼 타입을 정확하게 이해하는 것이 중요하다. *내가 이해한 타입이란, 결국 일상생활에서 쓰이는 다양한 값(들어가는 값/나오는 값)을 컴퓨터 언어에 맞게 분류한 것에 불과하다! - 특히 어떤 예제에서 불린 타입(boolean) 형태로 Return(반환)하라는 요구를 들었을 때, "어? 내가 생각한 불린은 컴퓨터에서 알아서 판단하고 나오는 값 아닌가? 왜 그렇지?라는 선입관에 의해 벙쪘었다. 1. Number(숫자) 타입 : 양의 정수(100), 음의 정수(-100), 자연수(3.14 등) 2. String(문자열) 타입 :.. 2022. 12. 16.
6-7개월 뒤 금융권/교육분야에서 3000이상의 초봉을 시작으로 커리어를 시작하는 나 Ⅰ . 코드스테이츠를 시작하며 세운 목표 1. 금융권 혹은 교육계열 기업에 입사 2. 3000만원 이상의 연봉으로 시작 3. "반드시" 코스 수료 1-2개월 안에 취업 한번 열심히 달려보자구! Ⅱ. 내가 만들고 지켜나갈 Routine 1. 수면 루틴 : 7시 기상 ~ 12시 취침 2. 학습량 : 평일~>하루에 10시간 이상 공부, 토요일~>6시간 Study, 일요일~>Help my mental..... 3. 매일 반드시 할 일 - 그 날 배운 내용과 과제는 반드시 그 날 복습하기 (저얼때!!!!! 미루지 말자!) - 매일 블로그 작성하기! (대신,, 20-30분 이내로!) - 매일 운동 30분! (걷기에는 넘모나 추워,, 헬스장 가서 런닝하기!) - 주말에는 휴식과 함께 아름다운 미래를 그리며 복기하기 .. 2022. 12. 15.
Git의 활용 참조강의 : 얄코-[깃 끝장내기] 제대로 파는 Git & GitHub 강좌 링크 : https://www.youtube.com/watch?v=1I3hMwQU6GU git : 버전관리 시스템 - 핵심 : 이 수많은 코드들 중 내가 편집한 것, 시도한 것, 함께 공유할 것, 공유한 것들 중 되돌려야 할 것, 공유한 것들 중 선택해야 할 것 등 내가 원하는 동작을 몇 가지 명령어로 쉽게 관리할 수는 없을까? 1. Local과 Remote local은 프로젝트가 어딘가에 공유되지 않고 나의 컴퓨터에 있는 것을 의미한다. - local에서는 터미널/명령 프롬프트를 통해 git을 설치하고 관리한다. - git이 관리하는 프로젝트의 범주는 .git폴더가 포함된 lepository(쉽게 말해 폴더...)만 이다. - .. 2022. 9. 20.
GIt 개발환경 셋팅(Mac Mojave version 10.14.6) 참조강의 : 얄코-[깃 끝장내기] 제대로 파는 Git & GitHub 강좌 링크 : https://www.youtube.com/watch?v=1I3hMwQU6GU A. 개발환경 세팅 / 설치 프로그램 - Homebrew - Git - iterm2 - Sourcetree B. 설치과정 1. Homebrew Homebrew는 맥에서 사용하는 다양한 패키지들을 손쉽게 설치하고 제거할 수 있는 프로그램, 거의 개발자 필수 프로그램이라고 한다. (사실 아직 git이랑 iterm2 바께 안 써봐서 잘 모른다...) https://brew.sh/index_ko 위 링크로 직접 로그인하여 설치한다. 2. Git git&github : 기본적인 의미는 버전관리 시스템, clone/pull/push와 같은 기능으로 원격에.. 2022. 9. 13.