분류 전체보기 82

[firebase] 백엔드없이 firebase로 리액트 프로젝트 만들기

매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....! 최종코드 : github.com/jayounglee92/react-firebase 1. 목표설정 우선! 하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!) - 소스 관리 : GitLab - 호스팅 : Netlify - 백엔드 ..

Developer/React 2020.09.14

SSR(Server-side-rendering) & CSR(Client-side-rendering)

렌더링이란? 웹페이지 접속시, 그 페이지를 브라우저에 그려주는 것. SPA(Single Page Application)란? 생긴 이유? 모바일의 시대가 도래하면서, 모바일은 데스크탑에 비해 성능이 낮고 유저의 모바일 웹에서의 동작 및 요청이 많아 웹페이지를 기존에 방식과 다르게 렌더링할 필요가 느껴지면서 등장한 클라이언트 사이드 렌더링 Single Page Application(SPA) 어떤게 있는가? 우리가 아는 React, Angular 등 대부분의 자바스크립트 프레임워크를 말한다. 특징과 차이 SSR(Server-side-rendering) 전통적인 웹 방식. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식 장점 검색엔진최적화(SEO)에 문제없..

Developer/Web 2020.08.12

[HackerRank] Compare the Triplets

Compare the Triplets Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from 1 to 100 for three categories: problem clarity, originality, and difficulty. 앨리스와 밥은 각각 해커랭크에 문제를 하나 만들었다. 한 리뷰어는 세 개의 카테코리(명확성, 독창성, 난이도)에 대해 1부터 100까지 점수를 매겨 채점한다. The rating for Alice's challenge is the triplet a = (a[0], a[1], a[2]), and the rating ..

Developer/Coding 2020.08.06

[HackerRank] Simple Array Sum

Simple Array Sum Easy Problem Given an array of integers, find the sum of its elements. 주어진 정수 배열에 대해 요소들의 합을 구해라. Function Description Complete the simpleArraySum function in the editor below. It must return the sum of the array elements as an integer. 아래 에디터에 있는 함수 simpleArraySum 를 완성해라. 정수로 배열의 합을 리턴해야한다. simpleArraySum has the following parameter(s): ar: an array of integers Input Format The..

Developer/Coding 2020.08.06

2.4 변수와 상수

변수 변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 이다. var, let, const를 사용해 변수를 선언할 수 있다. let : 모던한 변수 선언 키워드 var : 오래된 변수 선언 키워드 (잘 사용하지 않음) const : let과 비슷하지만, 변수의 값을 변경할 수 없음 아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(선언)한다. let message; 이제 할당 연산자 =를 사용해 변수 안에 데이터를 저장해 봅시다. let message; message = 'Hello'; // 문자열을 저장합니다. 문자열이 변수와 연결된 메모리 영역에 저장되었고 변수명을 이용해 문자열에 접근할 수 있다. let message; message = 'Hell..

2.3 엄격 모드

use strict 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다. 예시: "use strict"; // 이 코드는 모던한 방식으로 실행됩니다. ... "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다. 이렇게 하면 오직 해당 함수만 엄격 모드로 실행된다. ✅ "use strict"는 반드시 최상단에 위치시키세요. "use strict"는 스크립트 최상단에 있지 않으면 엄격 모드가 활성화되지 않을 수도 있다. 다음 코드에서는 엄격 모드가 활성화되지 않는다. alert("some code"); // 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다. "use strict"; // 엄격 모드가 활성화되지 않습..