주발이의 개발새발

생명주기 함수 2번째 시간 ~ [React] 리액트 입문 - 생명주기 함수 사용하기 (생성 과정) 생명주기란( in react ): component의 생성, 변경, 소멸 과정을 뜻한다 ~ ! 더보기 앞서 배웠던 리액트에서 component를 App.js에 import하여 화면에 rendering하였다. import React from 'react' export default function R004_Lif 0lrlokr.tistory.com 앞서 우리는 생명주기 함수 중 '생성'하는 함수들을 살펴보고 왔다 이번 포스팅에서는 생명주기 함수 중 '변경'하는 함수인 shouldComponentUpdate()함수에 대해서 알아보겠다 ! 이 때 '변경'이란 props나 state의 변경을 말한다. App.js ..

생명주기란( in react ): component의 생성, 변경, 소멸 과정을 뜻한다 ~ ! 더보기 앞서 배웠던 리액트에서 component를 App.js에 import하여 화면에 rendering하였다. import React from 'react' export default function R004_LifecycleEx() { return ( R004_LifecycleEx ) } 방식이 아니라 render()함수를 사용하여 html 코드를 return 하는 방식에 대해서 자세히 알아보겠다 필자는 앞선 방식에 익숙해서 render함수 배움의 필요성을 느껴서 접은 글에 언급해본다. rfc+enter에 대해 알지 못하는 분들은 혼란을 피하기 위해 넘어가는 것이 좋을 것 같다 ! component의 생성 ..

집나간 리액트가 돌아왔다 ~ 유후 오랜만에 리액트 포스팅.. 리액트를 처음 하시는 분들이라면 다음 링크를 참고하여 개발환경을 구축하시길 바란다 ! [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 0lrlokr.tistory.com 지금까지 jsx를 이용한 리액트를 사용해보았다면 js문법 리액트부터 차근차근 다루어보겠다. 리액트 → 자바스크립트 → 리액트 기초 순서로 이상하게 배우고 포스팅하고 있긴한데 저는 선샌님들을 믿습니다. 자 그럼 ~ 개발환경이 모두 구축된 상태에서 ! creat..

1. 문자열 합치기 console.log('my'+' cat'); //my cat console.log('3'+ 5 ); //35 console.log(`string literals: 3+4 = ${3+4}`) //string literals : 3+4 = 7 * '3'+5를 하게 되면 숫자가 문자열로 변환되어서 출력된다 ! * `(백틱)기호를 사용하여 문자열에서 연산을 할 수 있다 ~ ! `기호는 특히나 많이 쓰이니 '와 헷갈리지 말고 기억할 것 2. 숫자 연산 console.log(1+1); // 더하기 console.log(1-1); // 빼기 console.log(1/1); // 나누기 console.log(1*1); // 곱하기 console.log(5%2); // 나머지 console.log(..

[JavaScript] 자바스크립트 기초 문법 : 변수와 상수 *유튜브 드림코딩님의 「자바스크립트 기초 강의」를 수강하며 작성하였습니다. 1. 'use strict' ; 'use strict'; 자바스크립트는 비교적 제한이 덜 한 언어이다. 세미콜론 안붙였다고 코드가 돌아가지 0lrlokr.tistory.com 우리는 지난 포스팅에서 자바스크립트의 변수와 상수에 대해 알아보았다. 이러한 변수와 상수가 어떤 자료형에 속하는 지, 어떤 자료형으로 선언하고 싶은지에 대해 알아보기 위해 자료형에 대해 자세히 알아보겠다! 자바스크립트 자료형(타입) 자바스크립트에는 총 8가지 자료형이 있고 그 중 7가지가 원시형, 나머지 객체형이 있다 . 원시형 Number 타입, String 타입, BigInt타입, Boolea..

*유튜브 드림코딩님의 「자바스크립트 기초 강의」를 수강하며 작성하였습니다. 1. 'use strict' ; 'use strict'; 자바스크립트는 비교적 제한이 덜 한 언어이다. 세미콜론 안붙였다고 코드가 돌아가지 않는 것도 아니고 .. 에러가 조용히 무시되는 경우가 많다. 하지만 .. 이런 에러를 throw해주어야 리스크를 줄일 수 있는데 .. ! 그래서 엄격모드가 권장되는 것이다. use strict사용 시 - 기존에서 지나친 에러들을 throwing한다. - JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로 잡는다. mdn 참고자료 2. variable (변수) 변수 : 숫자 또는 문자열과 같은 값의 컨테이너이며 변경될 수 있는(mutable) 값, 즉 데이터의 이름 저장소 ! ..

*유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. [리액트 실습] 로그인 화면 만들기 0 (React Hooks - useEffect, useState ) * 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 우선 개발에 앞서 이번 포스팅에서는 리액 0lrlokr.tistory.com 이번 포스팅에서는 Login컴포넌트의 뼈대를 잡아보려한다. useState, useEffect와 같은 함수는 쓰이지 않을 예정이며 리액트의 CSS, HTML의 기초적인 부분에 대해 다루어볼 것이다. 1. 뼈대잡기 우선 create-react-app을 활용하여 login-review 디렉토리를 만들어주었다. (복습 겸 ..

* 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 우선 개발에 앞서 이번 포스팅에서는 리액트 Hooks에 대해서 '간단히' 다루어보겠다. 추후에 hooks의 많은 함수를 공부하고 Hooks를 자세히 정리해서 작성해보도록 하겠다. 1. React Hooks Hooks - 리액트의 새로운 기능 : React 16.8 버전에 새로 추가 - function 컴포넌트에서도 state를 관리할 수 있다. - React의 여러 기능을 함수형 프로그래밍으로 사용할 수 있다. - lifecycle(라이프 사이클, 생명 주기)를 사용할 수 있다. Hook의 개요 – React A JavaScript library for bui..

* 유튜브 인브로즈님의 실습 영상을 학습한 뒤 작성하는 포스팅입니다. [리액트 실습] 간단 영화 앱 만들기 6 (헤더 만들기) [리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개 0lrlokr.tistory.com 아마 간단 영화 앱 만들기는 7편을 마지막으로 끝나지 않을까 싶다. 하지만 필자가 좀 더 배워서 TV프로그램 , 등장인물 등등 여러 페이지를 만들 수 있는 능력과 글을 쓸 수 있는 여유가 된다면 다시 돌아오도록 하겠다 .. 이번 포스팅에서는 이렇게 영화가 정렬된 화면에서 영화 화면을 누르면 클릭한..

[리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb a 0lrlokr.tistory.com 5에서 이어진다 ~ 이번 포스팅에서는 '헤더'부분에 대해서 코드를 짜 볼 예정이다. 아마 마켓컬리 클론코딩 헤터 포스팅과 유사한 부분이 많을 것이다. [리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기 3주차 과제는 ~~~ 마켓컬리 클론 코딩이다 ! 3주차에서는 SPA, routing에 대해서 배웠다. React Routing - Rising Camp 12th..