모든 일에 열정을 쏟아붓는 프론트엔드 개발자

객체란 ? 자바스크립트는 객체 기반의 프로그래밍 언어이다. 자바스크립트를 구성하는 거의 "모든것"이 객체이다. 원시값을 제외한 나머지 값(함수,배열,정규표현식 등..)은 모두 객체이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이고, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 객체 지향 프로그래밍이라 한다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작이다. 객체 리터럴에 의한 객체 생성 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다. _ 객체..

SPA 1. SPA 란 ? - SPA (Single Page Application) - 페이지가 한 개인 애플리케이션 - 기존 프로젝트에서는 메인화면,로그인화면,회원가입화면 등 각 화면마다 html파일이 있었다. - 리액트 프로젝트에서 .html 파일의 개수는? 1개 >>> SPA(Single Page Application) - 한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? Routing 이있다. - Routing 이란 ? - 라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 입니다. - 리액트 자체에는 이러한 기능이 내장되어있지 않습니다 - React-router 는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리입니다..

Rendering 이란? state, props 를 기반으로 UI 요소를 그려내는 행위입니다. 렌더링의 결과물은 UI 요소, 그러니까 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들이라고 할 수 있습니다. 렌더링 결과물에 영향을 주는 요소는 state와 props 입니다. 쉽게 말하여 state와 props 를 활용하여 그림을 그려내는 작업 이라고 생각하면 쉽다. Mount : 화면에 첫 랜더링 Update : 다시렌더링 Unmount : 화면에서 사라질때 Side Effect 란? 함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현합니다. 이 함수는 단순히 input과 output만 존재하는 함수..

Westagram 로그인 페이지에서 로그인기능, 메인페이지에서 댓글기능 작업 완료 후 백엔드 와 소통하는 시간을 갖게되었다. 1차프로젝트 시작 전 백엔드 와 회원가입 과 로그인기능 을 맞춰보는 시간을 통해 너무나 좋은 경험을 했다. fetch() 함수 기본 fetch('api 주소') .then(res => res.json()) .then(res => { // data를 응답 받은 후의 로직 }); 백엔드와 통신할때 fatch() 함수 에대해 알아보자. fetch("API 주소", { method: "POST", body: JSON.stringify ({ email: id, password: pw, }), }) .then((response) => response.json()) .then((result) ..

제어문은 블록문, 조건문, 반복문 , break문 이 있다. 블록문 0개 이상의 문을 중괄호로 묶은것 (코드 블록) 자바스크립트는 블록문을 하나의 실행 단위로 취급 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다. 블록문의 끝에는 세미콜론을 붙이지 않는다. (블록문은 자체종결성을 갖고있기 때문이다.) // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x++; } // 함수 선언문 function sum(a , b) { return a + b; } 조건문 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다. 자바스크립트는 if…el..

key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다. 리액트는 내용이 바뀔 때 마다 랜더링을 하는데 1000 개의 리스트가 있다고 가정했을 때 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 한군데가 달라졌네 ? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다. 그러면 리액트는 key값을 통해 변한 내용인지, 변하지 않은 내용인지 구별하고 전체를 재 랜더링 하지않고 필요한 것만 변경해준다. 처음에 내가 key 값으로 index를 부여했다. 이때 이벤트가 일어낫을 때 페이지를 보자 key 값을 index로 줬을때 1번부터 인덱스 번호는 0 ,1 , 2, 3, 4 이다. 이때 내가 1번인덱스 즉 ..

twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다. # 가정 target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다. 처음 이 문제를 접한 나는 for문을 쓰면 되겠는데 ? 라는 생각을 했고 그걸 코드로 작성하려니 멍.. 했습니다. 그렇게 여러 고민 끝에 풀이 법을 알아냇고 풀이법은 중첩fo..

React ? 2013년 페이스북에서 개발한 라이브러리 이다. "지속적으로 데이터가 변화하는 대규모 애플리케이션 을 구축하는 것" 을 목표로 개발한다, 앵글러 , 뷰 등 다른 프레임워크와는 달리 리액트는 오로지 View를 그리는것 만 담당하는 라이브러리 내장되어있는 기능이 부족해 서드 파티 라이브러리를 활용하여 사용한다. 자기만의 문법을 가진 앵글러,뷰 와 달리 자바스크립트 문법을 그대로 사용한다 페이스북의 지속적인 관리가 이루이고있다. 프론트앤드 라이브러리 중 가장 많은 사용자수를 기반으로 생태계가 활성화 되어있다. 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있다. 리액트 네이티브 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능하다. 프레임워크와 라이브러리의 차이 ? 프레임워크는 ..

http 란 ? 우리는 어떠한 방법을 통해서 소통을 하고있나 ? how do we commnicate ? hypertext 문서와 문서가 링크로 연결되어 있음을 뜻함 transfer 전송하다 = 물건이나 편지따위를 보내다 html로 만든 웹페이지 문서(파일)을 보낸다. Protocol 컴퓨터끼리 어떻게 html파일을 주고 받을 지에 대한 소통 방식 또는 약속 언제쓰나 ? 필요한 데이터를 주고받을 때 프론트와 백이 서로 데이터를 주고받을때 http 규약을 지키며 주고 받는다. Request, Response (요청 , 응답) 요청 (클라이언트) , 응답 (서버) 요청이 있어야 응답을 할 수 있다. 요청이 없으면 응답을 할 수 없다. Stateless http 개별 통신은 모두 독립 이어서 , 과거의 htt..

- Dom 이란 ? Document. Object. Model. DOM 은 웹페이지(HTML)와 스크립트 언어(Javascript)를 연결하는 중간다리 역할을 하며, 웹페이지의 HTML 을 계층화시켜 트리구조로 만든객체모델이고 Javascript 는 이모델로 웹페이지(HTML)에 접근하고 페이지를 수정할 수 있다. - Document 란 ? Document는 DOM 트리의 최상위 객체이다. 브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다. - 콘솔창에 console.log(document) - querySelector , getElementsByClassName , getElementsById querySele..