목록전체 글 (105)
책 읽다가 코딩하다 죽을래
라우팅이란 페이지를 나눠주는 것이다. 우리가 React로 작업을 할 때 create-react-app을 이용하든 웹팩을 이용하든 html 파일은 index.html 하나뿐이라는 것을 알 것이다. 이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우 우리는 이것을 SPA(Single Page Application)이라 부른다. 이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가 달라지게 되면 리다이렉트(새로고침)가 일어나게 되는데 만약에 페이지가 여러개이면 html 파일이 수시로 교체가 되고 서버에서 주는 데이터도 바뀌다 보니까 상태 유지도 어렵고 바뀌지 않은 부분까지 새로 불러오게 되니 비효율적입니다. (ex : facebook에서 좋아요 ..
자바스크립트의 함수도 다른 언어와 달리 신기한 특징을 갖는다. 자바스크립트 함수는 값(value)이 될 수 있다. const printFn = function(){ console.log('fn'); } printFn; // ƒ (){ // console.log('fn'); // } printFn(); // fn 그래서 이렇게 변수에 저장할 수 있으며, 변수에 () 을 붙이면 함수가 실행되고 변수만 적으면 함수 내용을 문자형으로 출력한다. 함수를 정의하는 데에는 함수선언문과 함수 표현식이 있다. // 함수 선언문 function printFn(){ console.log('fn'); } // 함수 표현식(anonymouns funciton) const printFn = function(){ console.l..
GD프로젝트 리액트 심화반 저번 주 프론트엔드의 꽃 수업을 다 들은 후 이번 주에는 리액트 심화반이라는 새로운 강의를 듣게 되었다. 이번 5주 차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운 내용(scope, Object, Function) 2. 1주 차 과제 1. 새롭게 배운 내용 1 - 1 Scope 더보기 scope는 어떤 하나의 데이터가 어느 정도의 범위를 가져 영향을 주는지의 대한 개념이다. function fn(){ int a = 1; } fn(); system.out.println(a); 자바나 c++을 배웠다면 위의 코드가 이상하다고 생각할 것이다. 왜냐하면 함수 밖에서 함수 안에 있는 a를 접근하면 분명 오류가 일어나기 때문이다. 즉 함수 안에서 선언된 a는 밖에서 접근할 수..
이번 시간에는 자바스크립트의 객체의 특징에 대해 설명해보겠다. 자바스크립트의 객체는 Object라 하며 선언은 다음과 같다. 객체의 선언 및 접근 더보기 const obj1 = {}; const obj2 = new Object(); const ablue = {name:'ablue', age: 26}; // 선언과 초기화를 동시에 하는 법 객체는 "key" : value로 이루어져 있다. c언어의 구조체와 자바의 해쉬 맵과 파이썬의 딕셔너리와 비슷하다. 그런데 여기서 key는 무조건 string형이며 value는 어떤 타입이든 상관없다. console.log(ablue['name']); //이렇게 배열형태로 데이터에 접근할 수 있다. 주의할 점은 배열의 인덱스는 String타입으로 줘야한다. name으로 ..
scope는 어떤 하나의 데이터가 어느 정도의 범위를 가져 영향을 주는지의 대한 개념이다. function fn(){ int a = 1; } fn(); system.out.println(a); 자바나 c++을 배웠다면 위의 코드가 이상하다고 생각할 것이다. 왜냐하면 함수 밖에서 함수 안에 있는 a를 접근하면 분명 오류가 일어나기 때문이다. 즉 함수 안에서 선언된 a는 밖에서 접근할 수 없는 것 a의 scope는 함수 fn 범위 안이라고 정의할 수 있다. 자바스크립트에서의 scope는 다양해서 헷갈릴 것이다. 이번 시간에 자세히 알고 가자. 자바스크립트 내에 데이터 타입은 크게 var, let, const로 나뉜다. 여기서 let과 const는 스코프가 같으니 var와 let, const 이렇게 설명하겠다..
GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 마지막 주차도 드디어 끝이 났다. 이번 5주 차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운 내용 2. 결과물 3. 5주동안 배운 내용 간단 요약 4. 후기 1. 새롭게 배운 내용 더보기 1 - 1 middleware 미들웨어는 단어 뜻 그대로 소프트웨어와 운영체제 가운데에서 중재하는 역할을 한다. 미들웨어 종류는 여러 가지인데 우리가 5주 차에 배웠던 미들웨어는 firebase내에 있는 firestore와 redux 데이터를 연결하는 미들웨어인 redux-thunk를 배웠다. redux-thunk는 액션과 리듀서 가운데에서 중재하는 역할을 한다. 더 자세히 말하자면 사용자가 이벤트를 일으켜 액션이 일어나고 -> 미들웨어가 실행 -> 리듀서 ..
GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 4주 차를 무난히 끝을 냈다. 4주 차에선 firebase 위주로 실습을 하였다. 프론트가 백 요소도 다뤄보니 재미가 있었다. 목차 1. 새롭게 배운내용 2. 결과물 1. 새롭게 배운 내용 더보기 1주 차에 서버리스를 배웠었다. 서버리스는 서버나 스토리지 같은 물리적인 하드웨어를 구입하지 않아도 AWS 같은 클라우드 시스템에서 서버를 빌려오는 것이다. 이런 클라우드 서비스에는 IaaS(인프라형 서비스), PaaS(플랫폼형 서비스), SaaS(소프트웨어형 서비스) 등등 있는데 우리가 배운 Firebase는 BaaS(Backend as a Service)가 된다. Firebase는 데이터베이스 서버 제공, 소셜 서비스 연동, 파일 시스템 등을 API 형태로 ..
GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 3주 차도 무난히 끝을 냈다. 이번 3주차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운내용 (redux, router) 2. 결과물 3. 배운 내용 적용 1. 새롭게 배운 내용 1 - 1 Router 더보기 라우팅이란 페이지를 나눠주는 것이다. 우리가 React로 작업을 할 때 create-react-app을 이용하든 웹팩을 이용하든 html 파일은 index.html 하나뿐이라는 것을 알 것이다. 이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우 우리는 이것을 SPA(Single Page Application)이라 부른다. 이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가..