본문 바로가기

전체 글77

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.