지식을 남기고 쌓는 곳

GD프로젝트 리액트 심화반 4주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(Badge, RealTimeBase) 2. 4주 차 과제 및 느낀 점 1. 새롭게 배운 내용 1. Badge 더보기 Badge는 PC 뷰에 비해 모바일 뷰같이 매우 작은 화면 공간을 효율적으로 사용하고 간편성 또한 추구하기 위해 단축화시킨 모양이라고 생각하시면 된다. (몰론 PC 뷰에서도 많이 쓰이기도 한다.) 위 사진은 페이스북 애플리케이션에서 사용하는 Badge이다. 왼쪽에서부터 타임라인, 내 홈피(?), 단체, 알림, 메뉴 기능인데 이걸 일일이 PC 뷰의 메뉴들처럼 이름으로 나열했으면 공간도 부족하고 이쁘지도 않았을 것이다. 그래서 많은 모바일 어플리케이션에선 Badg..

GD프로젝트 리액트 심화반 3주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(immer, redux-action, Debounce, Throttle, useCallback) 2. 3주 차 과제 3. 배운 내용 프로젝트에 적용 1. 새롭게 배운 내용 1 -1 immer, redux-actions 더보기 사실 2주 차에 배웠던 것들인데 그때는 배운 내용들이 정리가 안되어서 3주 차에 쓰고 있다.. 3주 차에는 redux를 더욱 쉽고 이용하기 간편한 모듈들에 대해 배웠다. redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날 때마다 action 이전..

GD프로젝트 리액트 심화반 2주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(비동기, callback, Promise, OAuth, 웹 저장소) 2. 2주 차 과제 3. 배운 내용 프로젝트에 적용 1. 새롭게 배운 내용 1 - 1 비동기 더보기 Promise를 언급하기 전에 동기와 비동기부터 설명하겠다. 자바스크립트는 동기적인 언어이다. 동기적인 것이 무엇이냐 하면은 동기 (Synchronous: 동시에 일어나는) 말 그대로 동시에 일어나는 뜻인데 프로그래밍적인 개념으로 말하자면 요청과 그에 대한 결과가 동시에 일어나는 것이다. function add(a,b){ return a + b; } let a = 3; let b = 6; let c = add..

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는 밖에서 접근할 수..

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파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가..

GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 2주 차가 시작되었다. 요번 2주차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운 내용(SCSS, Styled Component, 가상 DOM) 2. 결과물 1. 새롭게 배운 내용 1 - 1 SCSS 더보기 SCSS는 SASS의 세 번째 이름이다. 그럼 SASS는 무엇이냐면은 Sass : Syntactically Awesome Style Sheets : 문법적으로 편하게 css를 작성하는 언어 근데 이 SASS는 CSS와 호환이 잘 안되어서 생긴 것이 SCSS이다. SCSS의 장점은 CSS를 편하고 더욱 가독성 있게 작성하기 위한 것이다. SCSS를 사용했다 해서 CSS보다 더욱 아름답고 화려한 이펙트가 생기는 것이 아니다. 그럼 이제 SCSS..

직업상담사님이 구로 청년 이룸에서 진행하는 GD프로젝트를 추천해주셨다. 자세한 내용 [클릭] 커리큘럼을 보시면 프론트는 React 백은 스프링에 깊게 배운 후 공통적으로 알고리즘과 취업관련된 내용을 2달 동안 탄탄하고 알차게 배우는 거 같아 보였다. 평소에 React를 좋아하는 저로썬 이건 못참지...ㅋ 저질러 아니 지원해버렸다.. 목차 1. GD프로젝트에 대해 2. 새롭게 배운 내용(javascript scope, 웹 동작 방식, 서버리스) 3. 앞으로의 방향성 1. GD프로젝트에 대해 더보기 GD프로젝트는 스파르타 코딩 클럽이라는 플랫폼을 통해 교육생들에게 온라인 강의 수업을 지원한다. (원래는 구로 청년 이룸에서 오프라인 수업을 지원할 예정이었는데 시국이 시국인지라 온라인 수업으로 대체된 거 같았다..