히히후후

class형 컴포넌트는 현재 잘 쓰이지 않고 함수형 컴포넌트가 훨씬 더 중요하기 때문에, class형 컴포넌트의 내용은 읽어만 보고 따로 이곳에 정리하지 않을 계획이다. 모듈 불러오기(import) import React from 'reat' 모듈 내보내기(export) export default MyComponent; 함수형 컴포넌트를 선언할 때 function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것 간에는 큰 차이가 없다. 대부분의 예제들을 보면 화살표 함수 문법 보다는 function 키워드를 많이 사용한다. 내 생각에도 단순히 const로 component를 선언하는 것 보다는 function 키워드를 사용하는 것이 더 가독성이 좋은 방법이라 생각한다. props 라는 키워드 하나..

MOFE 스터디 2020. 11. 14. 03:12

이번 주부터는 '리액트를 다루는 기술'이라는 책을 바탕으로 공부한다. 기록되는 모든 내용들은 이 책을 바탕으로 작성한 것이며 중요하다고 생각이 드는 부분만을 정리할 생각이다. 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC(Model View Controller), MVW(Model View Whatever) 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다. juyeop.tistory.com/23 프레임워크와 라이브러리의 차이 안녕하세요, 오늘은 프로그래밍을 할 때 자주 이용되는 위의 두 가지에 대해서 이야기하려고 합니다. 저를 포함한 많은 사람들이 프레임워크와 라이브러리의 차이에 대해서 잘 모르고 계셔서 juyeop.tistory.com ..

MOFE 스터디 2020. 11. 6. 21:23

가면 갈수록 할애하는 시간이 적어진다 ㅎ.... 아무래도 학기가 꽤 진행되다보니 과제도 쏟아지고 할 일도 많아지면서 계속 우선순위에서 밀리게 되는 것 같다. 그래도 이번 학기에 스터디한 덕분에 이렇게 반강제(?)적으로 할 수 있어서 좋은 것 같다. 나같이 게으른 사람에게는 확실히 시간과 분량의 압박이 필요하다. 16강. const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); const walk=100; //100px function shadow(e){ //const width = hero.offsetWidth; //const height = hero.offsetHeight; const {offsetWidth:..

MOFE 스터디 2020. 10. 28. 00:42

이번 주는 JS30 강의의 6강-15강까지 진행하였습니다. 확실히 이론을 실제에 적용해서 사용하는 것은 어려운 일인것 같습니다. const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)) endpoint는 특정 사이트입니다. 특정 사이트로부터 데이터들은 fetch하고 이 data들을 json화하여 cities 배열에 push하는 순서로 이루어져 있습니다. 이 fetch를 이해하기 위해서는 Ajax 요청에 대한 이해가 필요했습니다. AJAX(Asynchronous Javascript and XML) ->비동기적인 웹서비스를 개발하기 위한 기법. 이름에 XML이 있지만 꼭 XML을 사용하는 것..

MOFE 스터디 2020. 10. 17. 14:35

javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 이번 주에는 JavaScript 30의 5강까지 공부하였다. 사실상 공부라기 보다는 영상을 보면서 부분 부분 따라서 실행시켜보았다. 확실히 이론을 공부하는 것과 실제로 사용해보는 것은 큰 차이가 있다. 개인적으로 이론도 어렵지만, 실제로 사용하는 것은 더 어렵다 ㅎ..... 하지만 확실히 내가 타이핑하는 코드들이 바로 화면에 반영되다보니 이론 공부보다는 훨씬 덜 지루하다. 이 강의의 제목은 자바스크립트이지만 자바스크립트 못지 않게 CSS 코드들도 많이 나온다. 화면에 무언가를 이쁘게 구현하기 위해서는 CSS 없..

MOFE 스터디 2020. 10. 11. 05:14

1. null과 undefined null과 undefined는 모두 자바스크립트에서 값이 없음을 나타낸다. let foo; // foo의 type은 undefined가 된다. let foo=null; // foo의 type은 null이 된다. null은 이렇게 명시적으로 값을 넣어주어야 한다. 그렇다면 이 둘의 차이는 무엇일까? 바로 등록과 저장 여부의 차이이다. null은 값은 값이지만 값으로써 의미없는 특별한 값이 등록되어 있는 것. undefined는 등록이 되어있지 않기 때문에 초기화도 정의되지도 않는 것. 이런 차이에도 불구하고 null과 undefined는 모두 값이 없음을 의미하고 서로 바꿔 사용하는 경우도 많이 존재한다. 이 둘은 동등연산자(==)를 사용하면 같다고 나오기에, 둘을 구별하..

MOFE 스터디 2020. 10. 2. 16:55

1. 자바스크립트는 동적 언어이면서 인터프리트 언어이다. 이 때문에 변수의 타입이 런타임에 결정된다. 간단한 프로그램을 만든다면 상관 없겠지만, 복잡한 프로그램에서 변수의 타입이 런타임에 결정되는 것은 프로그래머의 실수를 유발하기 쉽다. 이러한 자바스크립트의 단점을 보완하기 위해 타입스크립트가 나왔다. + 인터프리트 언어란 코드를 한줄 한줄 읽어가며 명령을 처리하는 방식. Interpreter(통역사)를 생각하면 확실히 더 오래 기억에 남을 것 같다. 이렇게 한줄 한줄 읽어가며 명령을 처리하다 보니 그 속도가 컴파일러 언어에 비해 느린 것이다. 대신 한 줄씩 읽어들이기에 명령이 잘못 입력됐을 때 바로 수정할 수 있다는 장점도 지닌다, ryusm.tistory.com/105 스크립트 언어와 컴파일 언어의 ..

MOFE 스터디 2020. 9. 24. 12:10

이런 모양의 폴더 구조가 존재한다. 만약 containers 폴더 속의 MonitorController, Notification 파일 두 개를 불러온다면 나는 아마도 import MonitorController from './containers/MonitorController.tsx' ; import Notification from './containers/Notification'; 이와 같이 코드를 짰을 것이다. 하지만 조금 더 편한 방법이 있다. 이를 위해서는 각 폴더의 index 파일을 만들어야하고 그 index 파일의 내용은 위는 containers 폴더의 index, 아래는 components 폴더의 index이다. 이런 식으로 export를 하게 되면 이런 식의 사용이 가능해진다. 이렇게 간단..

React 2020. 9. 23. 01:45