Server (13) 썸네일형 리스트형 <Node> M1 Mac에서 Rosetta로 노드 패키지 설치하기 * 배경 - 최근 Cypress라는 프론트엔드에서의 E2E테스트 툴을 공부하면서 발생한 문제와 그 해결과정을 공유하려 한다. 사실 Cypress 공식 문서에 해결방법이 나와있긴 하지만 왜? 라는 의문이 생길 수 있고, 다른 패키지를 설치할 경우에도 충분히 발생할 수 있는 문제이다. - 필자는 MacBook M1 Air (맥북 M1 에어) 모델을 사용하고있으나 지금까지 OS 관련 문제를 겪어본 적은 없었다. 프론트엔드의 경우 M1과 관련된 특별한 호환 이슈는 들어본 적이 없기도 했고, 비교적 최근에 (2021) 맥북을 구매해서일 수도 있다. - 하지만 Cypress를 설치하고 실행했더니 다음과 같은 Cypress failed to start 에러가 발생하였다. - Platform이라는 텍스트를 봤을 때, .. <파이어베이스> 배포 및 보안 1. 배포 * 준비 - cra를 깃허브를 통해 배포하기위해 패키지를 하나 설치해야한다. 아래의 명령어로 설치하자. npm i gh-pages - 설치가 완료되면 package.json 파일을 수정해야한다. 먼저 패키지를 설치했을 때 안내문구가 떴을 것이다. 이를 따라 "homepage" 를 추가해주자. "homepage": "https://haesoo9410.github.io/testtest" - 위 처럼 작성한다. 가장 끝에는 연결된 레포지토리를 작성한다. 연결된 레포지토리 확인은 git remote -v 를 입력하여 확인할 수 있다. 만일 연결된 레포지토리가 없다면 remote명령어로 연결시켜야한다. * 배포 - 배포를 위한 스크립트를 작성하자. 아래의 두 명령어를 package.json의 스크립트에.. <파이어베이스> 프로필 수정 1. 프로필 수정 * 프로필 가져오기 - 사용자의 닉네임 또는 사용자명을 보여주고 싶다고 가정하자. - 우리는 현재 user객체를 userObj라는 객체로 사용하고 있다. (firebase.auth().currentUser) - 이 객체에는 여러가지 프로필 정보와 관련된 속성이 있다. 대표적으로 displayName과 email, photoURL이 있다. 필자는 구글로 로그인 했기 때문에 구글에서 사용하는 사용자명이 그대로 displayName에 담겨 있었다. {userObj.displayName}의 프로필 - 위와 같이 유저 객체를 이용하여 displayName 을 불러왔다. 하지만 userObj가 없다거나 displayName이 없을 경우 오류가 날 수 있으므로 아래와 같이 수정하였다. {userOb.. <파이어베이스> 필터와 정렬 1. 필터 - 우리는 프로필페이지를 별도로 만들어서 로그아웃 기능을 버튼과함께 넣었었다. 이번엔 프로필 페이지에서 로그인한 사용자의 글만 보이도록 필터링해보자. * 쿼리 - 파이어베이스의 Cloud Firestore은 컬렉션이나 그룹에서 검색할 문서를 지정하는 쿼리 기능을 제공한다. // Create a reference to the cities collection var citiesRef = db.collection("cities"); // Create a query against the collection. var query = citiesRef.where("state", "==", "CA"); - 위는 파이어베이스 공식문서에 나온 예시이다. 위 코드는 db에서 cities 컬렉션으로 Ref를 만들고.. <노드JS> http 서버 만들기 1. http 서버 만들기 * 포트 연결 - http 요청에 응답하는 노드 서버를 만들어 보자. const http = require('http'); http.createServer((req, res) => { // 응답 내용 }); - 위와 같이 http를 불러와서 createServer로 서버를 만들 수 있다. - res로 응답을 보내는데 write로 응답내용을 적고, end로 끝을 낸다. // server1.js const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { 'content-Type': 'text/html; charset=utf-8' }); res.write('Hell.. <파이어베이스> 파일 업로드 1. 초기 셋팅 * 콘솔 - 파이어베이스 콘솔에서 storage를 시작하자. - 아래와 같이 파일을 저장하는 버킷이 생성되면 끝이다. * 코드 - 셋팅을 위해 만들어 둔 fbase.js 파일에 storage를 추가한다. // fbase.js // ... import "firebase/storage" const firebaseConfig = { // ... }; firebase.initializeApp(firebaseConfig); // ... export const storageService = firebase.storage(); - firebase.storage() 를 storageService라는 변수로 export 해주었다. 2. 첨부 * 파일 첨부 - 위처럼 파일선택을 하고, 파일명을 띄우고, 미.. <노드JS> 노드 내장 모듈 1. os & path * os - 운영체제의 정보를 담고 있다. const os = require('os'); console.log(os.arch()); // x64 console.log(os.platform()); // win32 console.log(os.type()); // Windows_NT console.log(os.cpus()); // [ // { // model: 'Intel....', // speed: 9999, // // ... // }, // {//...}, // {//...}, // {//...}, // ] console.log(os.freemem()); // 123456789 console.log(os.totalmem()); // 1234567890 - os.arch() : prc.. <노드JS> 노드 내장 객체 1. 전역객체, console객체, 타이머 * global - 노드의 전역 객체를 의미하며, 브라우저의 window같은 역할이다. 그러나 document는 존재하지 않는다. - window와 같이 생략이 가능하다. (ex. console) - 최근에는 브라우저와의 호환을 위해서 globalThis로 통일되어 사용할 수 있다.(익스플로러에서는 동작X) - global 속성에 값을 대입하면 다른 파일에서도 사용이 가능하지만 관리가 힘들어지므로 권장하지 않는다. * console - 브라우저의 console과 거의 같다. - console.log : 로그 - console.time, console.timeEnd : 시간 로깅 - console.error : 에러로깅 * 타이머 메서드 - 브라우저의 시간과 관련.. <노드JS> 노드 JS란 1. 노드 JS란 * 정의 - 노드 js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다. (Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. ) - 위 문구는 노드js 공식사이트에서 노드js를 설명하는 문장이다. 흔히 노드js를 서버라고 오해하는 경우가 많으나 노드js는 단지 js코드를 실행시켜주는 도구 중 하나이다. - 노드외의 런타임을 예시로 알아보자면 웹 브라우저(크롬, 엣지, 사파리, 파이어폭스 등)들이 있다. - js가 브라우저에 한정된 언어라는 단점을 극복하기 위해 js 런타임을 만들기 위한 다양한 시도들이 있었으나 엔진 속도 문제를 극복하지 못하였다. 그러나 크롬 V8 엔진이 엄청난 속도를 보여주.. <파이어베이스> 게시글 CRUD 1. 초기 세팅 * 파이어베이스 - 이번 장에서는 파이어베이스를 이용해서 realtime database를 만들어 볼 것이다. - 실시간으로 글이 만들어지고 지워지는 환경을 구축하는데 있어 파이어베이스는 아주 좋은 도구이다. - 데이터베이스를 만들어 보자. - 데이터베이스 만들기를 클릭하고, 테스트모드를 클릭하여 다음으로 넘어간다. 파이어스토어 위치는 가까울수록 좋기때문에 asia-northeast 중에서 선택한다. - 데이터베이스가 만들어지면 위와같이 표시된다. 직접 컬렉션을 만들 수도 있지만 우리는 코드를 통해 만들고 접근할 것이다. - 참고로 위 DB의 구조는 컬렉션 > 다큐먼트 > 데이터 순으로 이루어진다. 컬렉션은 다큐먼트의 집합이며 하나의 폴더라고 생각하면 좋다. 다큐먼트는 데이터 하나를 갖고.. 이전 1 2 다음
