profile
개발블로그
post-thumbnail

Component Life Cycle

Component Life Cycle라이프 사이클 메쏘드는 기본적으로 리액트가 컴포넌트를 생성하는 그리고 없애는 방법이다.마운팅(mounting)은 태어나는 것과 같다업데이팅은 일반적인 업데이트언마운팅은 컴포넌트가 죽는 걸 의미 (페이지가 바뀔 때)마운팅(mountin

2021년 4월 28일
·
0개의 댓글
post-thumbnail

Class Components and State

Class Component와 function Component의 차이function Component는 function. 무언가를 return 한다. 그리고 스크린에 표시된다.Class Component는 class. 하지만 React Component로 부터 확장되

2021년 4월 26일
·
0개의 댓글
post-thumbnail

재사용가능한 컴포넌트(Reusable Components) with JSX + Props(수정중)

React application 은 한번에 하나의 component 만을 rendering 해야한다.그 component가 App.JSX는 javascript 안의 HTML이다. jsx = HTML + Javascriptcomponent를 만들고 어떻게 사용하는가에

2021년 4월 24일
·
0개의 댓글
post-thumbnail

First project 회고

2주 프로젝트 - 국내 전용 숙박 예약 웹 제작하기

2021년 3월 25일
·
0개의 댓글
post-thumbnail

CSS 모듈

CSS 모듈className을 임의화해서 css가 글로벌(global)이 아닌 로컬(local)이 되게 하는 것이다.여러 component 에서 css className을 이용 할때 같은 이름을 써야 할 경우가 생긴다. 글로벌하게 동작하기 때문에 한곳에서 css 효과를

2021년 3월 22일
·
0개의 댓글
post-thumbnail

Structuring, Object Destructuring

Structuring해당 코드는 효율적이지 않다.human 객체의 name 과 새로 선언한 변수의 이름이 같다. 바로 밑의 lastName도 마찬가지.효율적이지 못한 코드를 Structuring을 통해 간단히 바꿔 줄수 있다.\-> 이것은 객체 안에 있는 propert

2021년 3월 21일
·
0개의 댓글
post-thumbnail

Final Project 회고

4주 프로젝트 - 러닝액션게임

2021년 2월 10일
·
0개의 댓글
post-thumbnail

React Hooks

Problem of Classical ReactClasses confuse both people and machines(This binding, Binding event handlers...)Complex components become hard to understan

2021년 1월 13일
·
0개의 댓글
post-thumbnail

React Hooks USESTATE 실습

USESTATE\-useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.\-useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다.\-useState()Hook의 인자로 넘겨주는 값은 state의 초기 값이다. 함수 컴포넌

2020년 12월 20일
·
0개의 댓글
post-thumbnail

React Redux

기존에는 부모에서 자식의 자식의 자식까지 상태가 흘렀었는데, 리덕스를 사용하면 스토어를 사용하여 상태를 컴포넌트 구조의 바깥에 두고, 스토어를 중간자로 두고 상태를 업데이트 하거나, 새로운 상태를 전달받는다. 따라서, 여러 컴포넌트를 거쳐서 받아올 필요 없이 아무리 깊

2020년 12월 20일
·
0개의 댓글
post-thumbnail

CSS display, position 정리

js bin 으로 실습한 내용입니다.div는 block level이고 한줄에 하나씩 출력된다.span은 inline level이며 내용이 있어야 표기된다. 한줄에 공간이 많으면 여러개가 동시에 나온다.만약에 span을 div 처럼 한줄에 하나씩 만들려면 diplay로

2020년 12월 16일
·
0개의 댓글
post-thumbnail

RDS

Create RDS InstanceConnect RDS Database생성이 되었다면 제대로 만들었는지 확인을 해야 한다.연결 보안 탭에서 엔드포인트 주소가 있는지 설정한 포트 번호가 맞는지 확인한다.구성 탭에서 설정한 마스터 사용자의 이름이 맞는지 확인한다.만약 my

2020년 12월 16일
·
0개의 댓글
post-thumbnail

토큰기반 인증

토큰기반 인증의 필요성세션기반 인증은 서버 또는 데이터베이스에 유저 정보를 담아서 인증해주는 방식 이었음.서버는 유저가 민감하고 제한된 정보를 요청 할 때마다 해당 유저에게 정보를 줘도 괜찮은지 확인하기 위해서 가지고 있는 세션값과 일치 하는 지 확인한다.그러나 매번

2020년 12월 10일
·
0개의 댓글
post-thumbnail

MVC디자인패턴, ORM

MVC Design Pattern소프트웨어 설계와 관련된 디자인 패턴으로, 소프트웨어 공학에서의 "흔히 사용되는" 설계 패턴을 의미한다.Express(JS) , React의 단방향 데이터 흐름이라던지, Redux의 Flux 패턴 역시 일종의 디자인 패턴이다.MVC 디자

2020년 12월 8일
·
0개의 댓글
post-thumbnail

구조 분해 할당(destructuring)

구조 분해 할당 구문배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법.함수에 객체나 배열을 전달해야 하는 경우. 객체나 배열에 저장된 데이터 전체가 아닌 일부

2020년 11월 26일
·
0개의 댓글
post-thumbnail

리액트(ReactJS)

React는 페이스북이 만든, MVC 패턴 중 V를 담당하는 라이브러리. 페이스북이 만들었기 때문에 페이스북, 인스타그램에서 사용된다. 또한 에어비앤비나, 테슬라, 야후에서도 쓰인다. 뷰만 담당하기 때문에 M이나 C는 다른 라이브러리나 패키지로 보완해주어야 한다. 현재

2020년 11월 18일
·
0개의 댓글
post-thumbnail

Chatterbox Server 만들기

<스프린트 해결 시 중요하게 생각해 볼 문제>node server 의 requestHandler는 항상 request, response를 인자로 받습니다.또한 http 요청은 항상 요청과 응답이 동반 되어야 합니다.노드 서버에 대한 모든 요청은 응답이 있어야 합니

2020년 11월 16일
·
0개의 댓글
post-thumbnail

Node.js

v8엔진\-자바스크립트를 기계어로 컴파일 해준다.런타임\-프로그래밍 언어가 구동되고 있는 환경.다시 말해 Node.js 는 자바스크립트를 컴파일 해주는 엔진으로 빌드 된 자바스크립트가 구동중인 환경이다.\-유저의 클릭이나 네트워크에 리소스를 요청 하는 이벤트가 논블로킹

2020년 11월 15일
·
0개의 댓글
post-thumbnail

Ajax, Fetch 란?

축구를 좋아해서 아약스로 읽는 줄 알았는데 에이젝스로 읽는 거 였음 ....AJAX (Asynchronous JavaScript And XML)는 HTML, CSS, JavaScript, DOM 조작, 와 XMLHttpRequest object를 활용한 프로그래밍 방식

2020년 11월 15일
·
0개의 댓글
post-thumbnail

CORS

처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청 될 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다.어플리케이션을 보호한다, 웹서버를 보호한다는 개념이라기 보다는 어플리케이션 사용자를 보호하기 위한 브라우저만의 자발적인 보안

2020년 11월 15일
·
0개의 댓글