로니의 개발 이야기

웹 접근성 개요 웹은 원래부터 사용자의 환경이나 사용하는 기기, 운영체제에 가능한 영향을 받지 않고 웹이 제공하는 정보를 사용자에게 전달하고자 하는 목적에서 만들어진 정보 전달 체계이다. 따라서, 웹 접근성은 새롭게 대두되는 것이 아니라 당연히 가져야 할 개념이라고 볼 수 있다. 그러나 최근의 웹의 현질은 웹의 기본적이고 중요한 목적을 무시하고 특정 기기 또는 운영체제에만 최적화되어 있는 경우가 많았다. 특히나 노약자 또는 장애인 등은 정보화의 혜택이 필요한 계층임에도 불구하고 국내의 웹 환경으로 부터 소외되고 있다. 이러한 상황은 웹이 생활 속에 파고든 현 시점에서 커다란 문제점으로 제기되고 있는 것이다. 따라서, 이번에는 웹 접근성에 대해서 자세히 알아보는 시간을 가져보려고 한다. 웹 접근성이란? 웹..

mongoDB Compass를 외부 서버의 컴퓨터에 연결을 하면서 많은 시행착오를 겪어서, 내용을 천천히 기록으로 남겨보려고 합니다. 먼저 이 과정은 mongoDB, mongodb-compass 가 정상적으로 설치되어 있고, 환경 설정이 끝났다는 가정하에 진행되었습니다. mongoDB Compass를 실행 시켜보면 아래와 같은 화면을 볼 수 있습니다. 여기서 연결하는 방법이 두가지가 있는데, 저는 string 형식을 사용하지 않기 때문에 Fill in connection fields individually를 눌러 줍니다. 그러면 아래와 같은 폼을 볼 수 있습니다. 여기서 Hostname은 default로 localhost로 두고, port도 마찬가지로 27017로 둡니다. (별도의 변경 사항이 없었다면)..

머리말 다양한 구글링을 해보면서 mongoDB 를 설치를 하다 보니 각각 다른 환경 설정을 가지고 있어서 여러 문제가 발생하는 것 같습니다. 그래서 저의 mac 에 맞는 설치 및 인증 설정 기록을 남겨보려고 합니다. 저는 homebrew 를 통한 설치 방법을 진행해보겠습니다. (homebrew 가 설치되어있다고 가정하고 진행) 설치 과정 패키지 저장소를 확보합니다. $brew tap mongodb/brew 설치할 mongodb 버전을 찾습니다. $brew search mongodb 저는 mongodb-community@4.4 버전을 설치하도록 하겠습니다. $brew install mongodb-community@4.4 설치를 하고 나면 아래와 같은 메시지가 뜨게 되고, 이 메시지를 주목할 필요가 있습니다..

지난 포스팅에서는 로그인 인증 - 세션과 쿠키 인증 방식에 대해서 알아봤다. 이번엔 토큰 인증 방식에 대해서 알아보려고 한다. 그렇다면, 토큰을 이용한 인증 방식은 뭘까? 토큰 인증 방식은 인증받은 사용자들에게 토큰을 발급하고, 서버에 요청을 할 때 헤더에 토큰을 함께 보내도록 하여 유효성 검사를 한다. 세션 방식과 달리 상태를 유지하지 않으므로 stateless 한 구조를 갖는다. 이러한 토큰 인증 방식에서 대표적으로 사용되는 JWT 를 이용한 토큰 인증 방식에 대해서 알아보고자 한다. JWT(Jason Web Token)이 뭘까? JWT 는 정보를 JSON 객체 형태로 사용자에 대한 속성 정보(Claim)를 저장하는 암호화된 문자열(token)이다. JWT는 토큰 자체를 정보로 사용하는 Self-co..

로그인 인증 방식에는 대표적으로 JWT를 이용한 토큰 기반의 인증 방식과 세션/ 쿠키 인증 방식이 있다. 이 중에서 오늘은 세션과 쿠키를 이용한 인증 방식에 대해서 알아보려 한다. 세션(Session)은 뭘까? 세션이란 일정 시간 동안 같은 사용자로부터 들어오는 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다. 여기서 일정 시간이란 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점을 말한다. 즉, 유저가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 세션(Session)이라고 말한다. 쿠키(Cookie)는 뭘까? 특정 웹 사이트를 방문했을 때 만들어지는 정보를 담는 파일을 지칭하는 것으로, 상태 정보를 유지하는 기술이다. 세션과 쿠..

커링(Currying) 이란? 커링은 인자를 여러개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다. 함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예시 적용 전에 const testAction = (initialState, action) => produce(initialState, draft => { const { type } = action; switch (type) { case TEST_ACTION1: draft.test1 = 'test1'; break; case TEST_ACTION2: draft.test2 = 'test2'; break; def..

Puppeteer? Puppeteer는 Google Chrome 팀에서 공개한 Node.js 라이브러리로 Node.js를 이용해서 Headless Chrome 혹은 Chromium를 제어하도록 도와주는 라이브러리이다. Headless Browser CLI(Command Line Interface)에서 동작하는 브라우저이다. 일반적으로 사용자가 사용하는 GUI(Graphical User Interface)에서 동작하는 브라우저가 아니다. 백그라운드에서 동작하며, 실제로 브라우저 창을 띄우지 않고 백그라운드에서 가상으로 진행되며 특정 페이지에 접속하고 랜더링 한다. Features puppeteer는 아래와 같은 기능들을 제공한다. SPA 화면을 랜더링 할 수 있다. 랜더링 후 키보드, 마우스 입력을 제어할..

Visual Studio Code를 사용하면서 코드를 이쁘게 만들어주는 prettier 라는 확장 프로그램을 사용하게 된다. 설치 후 간단한 설정을 거쳐야만 적용이 가능하다. 환경 설정 들어가기 Windows : File → Preferences → Settings Mac : File → Preferences → Settings (command + ,) 설정해주기 FormatOnSave 를 검색해서 체크를 해준다. Default Formatter 를 검색해서 Prettier - Code formatter 를 설정해준다. prettier 설정이 완료되었다. 이제 코드 작성 후 저장을 하면 자동으로 코드가 이쁘게 정렬이 되는 것을 볼 수 있을 것이다.

useSelector에 대해서 알아보자 1. 왜 사용할까? Redux store로 부터 데이터를 추출하기 위해서 사용한다. 2. 무슨 특징이 있을까? 객체 뿐만 아니라 어떤 결과도 리턴할 수 있다. action이 dispatch되었을 때, useSelector() 는 이전의 결과와 현재의 결과를 비교하여 다를 경우에 다시 랜더링을 진행한다.

🅰 useState 1. 왜 사용할까? state를 사용하기 위해서 사용한다. 함수형 컴포넌트 안에서는 state를 사용할 수 없었다. 여기서 useState Hook을 이용하여 state를 사용할 수 있게 되었다. 2. 무엇을 호출할까? state 변수를 선언하고, 그 state를 호출할 때 사용한다. this.state가 제공하는 기능과 똑같다. 3. 인자로 무엇을 넘겨줄까? 인자로 넘겨주는 값은 state의 초기 값이다. 아래의 경우 초기 값으로 0을 넘겨주는 것이다. useState(0); 4. 무엇을 반환할까? state 변수와 해당 변수를 갱신할 수 있는 함수 두 가지 쌍을 반환한다. 예를 들어, 아래와 같이 선언이 되었다고 했을 때, count라는 이름의 state는 0의 초기 값을 갖고, ..