Serverless - Firebase (startAt 과 limit)을 통해 pagination 구현 | 시작하기에 앞서, 프론트쪽에 개발을 집중하기 위해, 백엔드 쪽은 firebase로 구축하고 firebase+ react 조합으로 웹앱을 제작하고 있다. 그때 게시판기능을 구현하는데, pagination 기능을 직접 구현해 보고 있는데, 쿼리에서 limit offset과 같은 기능을 하는 firebase 쿼리로 요청을 했어야했다. | 구현 #firebase.js export const getBoard = () => { return database.ref().child('boards') }위와 같이 board 관련 데이터를 받아오는 쪽을 구현했다. prevPage(){ // 리팩토링 필요 const {..
React - 네이버 맵 api 활용하기 리액트로 웹앱을 개발할때 네이버 맵 api를 활용할 때가 있다. 그때 활용하는 방법을 알아보자.처음에 public/index.html 파일에 아래와 같이 바로 넣어주었다. 그럴때는 아래와 같이, 오류가 난다. cannot read property of 'style' 즉 naver maps 객체가 생성되지 않다고 나오는 것이다. 그이유는, 처음 리액트 메인페이지를 렌더링했을때 react가 마운트 되기전에 네이버 api 코드가 실행되서, mapdiv가 없는데 map을 찾아서 오류가 나고 있었던것이다. 왜냐면 나같은 경우는 첫 메인페이지에서는 네이버 map관련 div를 선언하지 않고, 길찾기 관련 컴포넌트에서만 naver map을 쓰고 있어서 길찾기 관련 컴포넌트에만 ..
Python - for | for python에서는 반복을 for과 while로 해줄 수 있다.아래와 같이 실행할 수 있다.반복할 부분을 코드블럭 이라한다. (들여쓰기가 꼭 필요하다. -> python은 필수, 들여쓰기를 탭으로 했으면 계속 탭으로 해줘야함, 띄어쓰기 4칸이 권장됨)for 변수 in 컨테이너: 실행할 명령1 실행할 명령2 아래가 사용예제 입니다, 아래와 같이 문자열에서도 사용할 수도 있습니다. | range() 내장함수이다. 아래와 같이 range(0,3) 으로 쓴다면 0~2까지 출력해 줄수 있다.즉 처음인자부터, 다음인자 전까지 출력할수있다.참고로 range(3)은 range(0,3)과 같다. | for x2 아래와 같이 for문을 중첩해서 쓸수 있다.아래예제는 구구단을 간단히 출력한 ..
Python - Tuple 튜플은 값을 변화시킬수 없다. | 튜플 아래와 같이 my_tuple은 ( , , )와 같이 선언해 줄수도 있고 괄호 없이도 선언이 가능하다. | 패킹 , 언패킹 패킹은 여러개 값을 하나로 묶는것이고 언패킹은 이묶은 값을 풀어주는 역할을 한다.아래와 같이 my_tuple 에 튜플로 패킹이 되어있는것을 num1,num2,num3에 언패킹을 해줄수 있다. 아래와 같이 사용해 줄수도 있다. num2,num1 과 같이 패킹을 하고 다시 num1,num2에 언패킹을 하는 예제이다.
Python - 리스트 | 리스트 문자열과는 다르게, 값을 변경할수 있다. 리스트->mutable (변경 가능)문자열 -> immutable (변경 불가능) | 값 추가하기 아래와 같이 append 메서드로 사용할 수 있다. 주의할점은 리스트를 미리 선언한 다음에 append를 해줘야 한다. | 인덱싱, del, 슬라이싱 indexing은 my_list[2]같이 index로 요소에 접근하는것이다.del 은 요소를 없애주는 역할을 한다.slicing은 문자열과 같이 my_list[:1], my_list[2:] , my_list[1:3] 과 같이 리스트를 자를 수 있는 것을 말한다. | 메서드 sort() sort는 말그대로 정렬을 하는 함수이다. count()아래와 같이 중복된것이 있으면 갯수를 세어준다...
ES6 - 윤지수교수님 오프라인 강의 | ES Modules javscript의 표준적인 모듈 시스템이다.nodeJS에서나 필요했던것이 spa의 등장으로 모듈방식개발이 필요해짐.지금까지는 commonJs 표준 -> nodeJS에서 사용되던 방식을 Browser가 도입정리하면 자바스크립트 파일 복잡성 증가 -> 모듈화 ->의존성문제 ECMAScript modules 탄생 1.모듈로 불려질 javascript entry 등록2.entry에서는 의존하고있는 파일import 해서 접근 가능3.다른곳에서 사용할 모듈을 export 설정 다이나믹 로더사용자가 글을 입력했을때나 클릭했을때 빠르게 처리 ? | Classes 프로토 타입 -> 클래스로 서비스 만듬상속은 프로토타입 체인으로 연결 -> 클래스 extends..
Python - 문자열 저번 포스팅에 이어 문자열에 대해 살펴봅시다. |문자열 아래에서 볼수 있듯이, ' ' 나 " " 로 스트링 변수를 선언할 수 있다.그리고, """와 같이 쓰면 스트링을 여러줄로 받을수 있다 |포맷팅 문자열을 조금 더 잘 표현해 주기 위한 개념c에서도 유사한 개념이 나오는데 이를 차용하고 있다.% 뒤에 대입할 값들을 적어주면 된다. 여러개를 대입할때는 ( , ... ,) 이런식으로 적어주면 된다.%s 문자열 대입 표현 %d 정수형 대입 표현 %f 실수형 대입 표현 format()포맷팅을 좀더 python스럽게 해주는 함수아래와 같이 '{}'.format() 꼴로 표현해 주면 된다. 그리고 아래와 같이 format 요소들을 index로 접근 할 수도 있다. |포맷팅 문자열의 위치 , ..
Javascript - 속 깊은 자바스크립트 [3.자바스크립트의 변수] | 시작하기에 앞서, 자바스크립트는 일단 객체를 기반으로 이루어진 언어이다. 기본형 변수들을 제외하면 모든 객체는 object를 확장하는 형태를 취한다. 따라서, 자바스크립트에서 변수는 함수를 포함한 모든 종류의 객체를 자유롭게 사용할 수 있다. 따라서, 변수를 잘 알고 사용해야 하는데, 자바스크립트에서는 글로벌 변수를 다루는 방식 등 다른 언어와 다른 부분이 있다. 이번 포스팅에서는 이러한 내용을 포함해, 변수를 효율적으로 선언하고 관리하는 방법에 대해 살펴보자. | 1. 자바스크립트의 기본형과 typeof 자바스크립트에서 객체가 아닌 기본적인 키워드와 문자로 활용되는 기본형은 다음과 같다. number(숫자)string(문자열)b..