🌊 CSR과 SSR CSR과 SSR은 개발을 처음 배우기 시작했을 때 부터 자주 듣던 용어다. 단순히 React에서 만들면 CSR, 아니면 SSR로 기억해두었지만 Next.js로 프로젝트를 진행하게 되므로 확실히 개념을 짚고 넘어가려 한다. CSR이란? CSR(Client-side Rendering)은 클라이언트에서 페이지를 렌더링을 하고 사용자가 다른 경로를 요청할 때 마다 페이지를 새로고침 하지 않고 동적으로 관리한다는 특징을 가지고 있으며 데이터 가져오기, 라우팅 등 모든 로직이 클라이언트에서 처리 된다. CSR의 특징 자바스크립트 번들 크기의 영향을 많이 받아 코드 분할을 통해 필요한 것만 필요할 때 제공해야 한다. 사용자가 웹페이지에 방문하면 최소한의 HTML 파일을 다운로드 한 후 HTML ..

🌊 Hashing Hashing은 암호화 방식 중 하나로, 복호화가 가능한 다른 암호화 방식과 달리 해싱은 암호화만 가능하다. 해싱은 해시 함수(Hash Function)를 사용하여 암호화를 진행한다. 해쉬 함수의 특징 항상 같은 길이의 문자열을 리턴한다. 서로 다른 문자열을 동일한 해시 함수를 사용하면 반드시 다른 결과값을 반환한다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나온다. 해쉬 함수 SHA1 생성기 https://www.convertstring.com/ko/Hash/SHA1 SHA1 해시 - 온라인 SHA1 해시 생성기 www.convertstring.com 해싱의 목적 해싱은 복호화 불가능한 암호지만 비밀번호 또한 해싱하여 저장하므로 해싱값이 서로 확인하여 일치하는 ..

🌊 cookie & session cookie HTTP 프로토콜의 무상태성을 보완해주는 도구. 원래 보안이 목적이 아니지만 요즘은 인증, 보안의 용도로 자주 사용한다. 쿠키는 서버에서 클라이언트에 전송하는 작은 데이터 조각이다. 쿠키는 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있으며 반대로 클라이언트에서 서버로 쿠키를 다시 전송할 수도 있다. 쿠키를 이용하면 상태가 없는(statelss) HTTP 프로토콜에서 상태 정보를 기억시켜주어 사용자의 로그인 상태를 유지할 수 있다. 팝업창 오늘 하루 보지 않기 로그인 상태 추천광고 쿠키의 목적 세션 관리 (session management) 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리..

🌊 네트워크 기초 웹 어플리케이션 아키텍처 인터넷 연결이 없다면 네이버나 여러 앱은 정상적으로 동작할 수 없다. 그 이유는 우리가 보고자 하는 정보를 인터넷 어딘가에 존재하는 서버로부터 받아오기 때문이다. 만약 정보를 제공해주는 서버가 없다면 정보가 업데이트 될 때 마다 우리는 어플리케이션 스토어에서 끊임없이 업데이트를 해야할 것이다. 클라이언트 - 서버 아키텍처 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 바로 '클라이언트', 리소스를 제공하는 곳은 '서버'라 부른다. 클라이언트 - 서버 - 데이터베이스 아키텍처 일반적으로 서버는 리소스를 전달해 주는 역할만 담당한다. 리소스를 저장하는 공간을 별도로 마..

🌱 웹 표준 & 접근성 웹 표준 웹 표준은 W3C에서 제시한 권고 사항으로, 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 어떤 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 포함하고 있으며 이러한 웹 표준을 준수하는 것은 사용자에게 좋은 사용자 경험을 제공하고, 검색 엔진 최적화 등의 이점을 가져다줍니다. 최신 웹 브라우저, 크롬, 엣지, 사파리, 오페라, 파이어폭스 등은 모두 웹 표준을 지원하므로, 웹 페이지를 웹 표준에 맞춰 작성하면 어떤 브라우저를 사용하더라도 동일한 결과물을 얻을 수 있습니다. 웹 표준은 W3C에서 제공하는 '권고' 사항이지만, 사용자에게 좋은 사용자 경험을 제공하기 위해 웹 표준을 준수하는 것이 좋습니다. ..

Java Script Promise의 기능과 필요한 이유에 대해서 설명해주세요. Promise를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 최종 결과를 반환하는 것이 아니고 어떤 시점에 결과를 제공하겠다는 '약속'을 반환합니다. Promise 이전에는 비동기 처리로 콜백 패턴을 주로 사용했으나 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리 중에 발생한 에러 처리가 까다로워 Promise는 이러한 단점을 보완하기 위해 나온 대안이며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다. Promise는 결과를 값으로 받아서 저장할 수 있다는 것이 특징이고 결과 그 자체를 값으로 받기 때문에 연속으로 실행하는 코드에선 then()을 이용하여 더 가독성 있는 코드..

🌊 Express - req.query, req.params req.params : 라우터의 매개변수 // 요청온 url : www.dreamogu.com/ogu/babyogu?greeting=hello const express = require('express'); const router = express.Router(); router.get('/user/:id', (req, res) => { console.log(req.params.id); // {id: 'ogu', name:'babyogu'} }); 주소에 :id는 문자 그대로 :id를 의미하는 것이 아닌 다른 값이 들어가는 장소이다. 예를 들어 /user/ogu, /user/rabbit 등의 요청을 이 라우터가 처리하게 된다. /:id/:name..

🌊 Express 프레임워크 경량화 웹 개발 프레임 워크. 노드를 이용한 웹 서비스나, 웹 어플리케이션 개발에 가장 널리 쓰이는 확장 모듈이다. express는 기본 모듈 중 하나인 http 모듈을 이용하여 웹 서버를 구축하거나 API서버를 제작하기 위해 사용되는 프레임워크 입니다. Node.js HTTP 모듈로 작성한 서버와 다른 점 미들웨어를 추가할 수 있다. 라우터를 제공한다. MERN stack MongoDB : NoSQL데이터 베이스로, JSON형식으로 데이터를 저장한다. Express : Node.js를 기반으로 하는 웹 프레임워크로, 웹 어플리케이션의 구조와 로직을 구성한다 React : 페이스북에서 개발한 프론트엔드 라이브러리로, 웹 어플리케이션의 사용자 인터페이스(UI)를 만든다. Nod..