밤의 공간

깃 허브에서 포스트를 더욱 편하게 볼 수 있습니다! https://github.com/Bam-j/study-repo

• [블로그 이전 공지] Velog로 이사를 준비하고 있습니다. 이 글이, 공지사항란에도 있지만, 공지사항란이 노출되지 않아서 다른 카테고리에 다시 작성하게 되었습니다. 블로그를 2022년도 부터 Velog로 옮기려고 합니다. 티스토리는 무난하다는 Simple is Best가 최고의 장점으로 작용했지만, 기술 블로그를 운영하는 저로써는 개발자에 특화된 Velog가 좀 더 매력적이라고 생각되어서 Velog로 이전하려고 합니다. 또한 블로그의 가독성을 위해 스킨을 직접 커스텀하고 꾸며야하는 티스토리에 비해 기본 제공되는 스킨이 가독성이 좋고 깔끔한 Velog가 더 좋다고 생각되었습니다. 아무래도 커스텀하는 시간에 차라리 로직을 한 번 더, CS를 다시 훑어보는게 낫다고 판단되기에 스킨 꾸미는 것에 관심이 없던 것도 한 몫 했습니다. 현재, 이 블로그의 글들을 Velog로.. 2022.02.09

• 

  [MongoDB] update()와 기존 데이터 수정하기 이번엔 CRUD에서 U(Update)를 담당하고 있는 업데이트와 관련한 함수를 알아보겠습니다. 지난 포스트에서 find()를 실습하며 만들어두었던 데이터베이스와 컬렉션을 이용하겠습니다. 1. update() db.컬렉션명.update({쿼리}, {업데이트값}, {옵션}) 도큐먼트는 update() 함수를 통해서 내용을 변경할 수 있습니다. 각 파라미터에 대해서 설명을 하겠습니다. 쿼리는 find()에서 검색을 위해 조건을 넣던 쿼리와 동일합니다. 이 쿼리로 변경할 도큐먼트를 찾습니다. 업데이트 값은 수정할 값을 적는 파라미터입니다. 옵션에는 upsert(찾는 값이 없으면 새로 추가), multi(여러 도큐먼트 변경) 등이 있습니다. 현재 다음과 같은 컬렉션이 있습니다. 여기에서 이름이 ed인 도큐먼트를 .. 2022.02.07

• 서버 사이드 렌더링과 클라이언트 사이드 렌더링 1. 서버 사이드 렌더링 SSR 서버 사이드 렌더링(SSR, Server Side Rendering)은 서버에서 페이지를 만들어서 클라이언트에게 보여주는 방식입니다. 기존의 웹개발에서 주로 사용되던 방식으로 브라우저에 렌더링되는 형태를 HTML문서로 만들어서 보내주는 식으로 진행이 됩니다. 이 방식은 요청시 새로고침을 해야하고 클라이언트 사이드 렌더링 에 비해서 처음 렌더링되어 보여주기 까지의 시간이 길었습니다. 요청마다 새로고침이 발생하고, 한 페이지에서 보여주는 정보가 무수히 많은 웹 페이지에서는 오히려 사용자 경험을 떨어뜨리는 경우가 있어서 그런 경우 클라이언트 사이드 렌더링을 하는 경우가 있습니다. 2. 클라이언트 사이드 렌더링 CSR 클라이언트 사이드 렌더링(CSR, Client Side Ren.. 2022.02.05

• 

  [React] 리액트에서 코드 스플리팅 1. 코드 스플리팅 code splitting 코드 스플리팅이 무엇인지에 대해서 먼저 알아보겠습니다. 리액트 카테고리에 집어넣긴 했지만, 웹팩(webpack)을 이용한 다른 어플리케이션에서도 모두 사용 가능한 언어입니다. 웹팩도 간단히 설명하자면, 어플리케이션의 모든 파일들을 묶고 압축하여 하나의 결과물을 만들어주는 웹 개발 도구입니다. 자바스크립트로 개발을 하고 배포하는 과정에서 빌드(build) 과정을 거치게 되는데, 이 과정에서 모든 파일들이 하나로 합쳐지게 됩니다. 우리가 index.js, components들로 나눴던 소스 코드들이 하나의 거대한 소스 코드로 합쳐진다는 말입니다. 간단한 프로젝트라면 영향이 적겠지만, 거대한 프로젝트라면(특히 SPA 페이지에서) 길고 많은 자바스크립트 코드(.cs.. 2022.02.04

• 

  [React/Redux] redux-saga redux-thunk에 이어서 또 다른 비동기 처리를 담당하는 리덕스 미들웨어 redux-saga를 알아보겠습니다. yarn add redux-saga 0. 발생자 Generator redux-saga 미들웨어는 Generator 문법을 사용해서 비동기 처리를 관리해줍니다. 그러므로 미들웨어를 공부하기 전에 발생자에 대한 문법과 개념을 알아두어야합니다. 발생자 문법과 설명은 아래 링크를 참조해주세요. 2022.01.11 - [Programming/Javascript] - [Javascript] Iterator(반복자), Generator(발생자) [Javascript] Iterator(반복자), Generator(발생자) 오늘 소개드릴 자바스크립트 문법은 반복자와 발생자 입니다. 두 문법 모두 es201.. 2022.02.03

• 

  [MongoDB] find()와 연산자 지난 포스트에서 내용을 확인하는 find()함수를 알아보았습니다. find() 함수 내부에서 다양한 연산자들을 조합하면, 원하는 데이터들을 쉽게 찾을 수 있습니다. 지난번에 실습하면서 모든 db를 지웠으므로 사전에 실습을 위한 db, 콜렉션을 만들어 두고 시작하겠습니다. use test //데이터베이스 생성 db.createCollection("testCollection") //컬렉션 생성 db.testCollection.insert([ {"name": "alex", "age": 23, "sex": "m"}, {"name": "triss", "age": 21, "sex": "f"}, {"name": "morgan", "age": 24, "sex": "f"}, {"name": "ed", "age": 21,.. 2022.02.02