TIL (27) 썸네일형 리스트형 [Modern Javascript Deep Dive] 4장. 변수 (작성중) 4장. 변수 변수란 왜 필요한가? CPU : 연산 장치 / 메모리 : 기억 장치 메모리는 '메모리 셀'들로 이루어져 있으며, 메모리 셀에 값이 이진수로 저장됨. 각 셀은 고유의 주소를 가짐 But, 자바스크립트에서는 개발자가 직접 메모리 주소로 접근할 수 없음 예컨대 '10 + 20' 이라는 표현식에서, 10과 20, 그리고 위 표현식이 계산된 결과인 30은 각각 메모리 셀에 2진수로 저장된다. cf) 같은 값이더라도 메모리 주소는 메모리 상황에 따라 임의로 결정된다. 즉, 매번 달라짐 이 30이라는 값을 기억하여 다시 사용하고자 할 때, 직접 30의 메모리 주소로 접근할 수가 없는 것이다. ✔️ 따라서 변수를 통해 해당 메모리 공간을 식별하고, 값을 재사용할 수 있다. (메모리 = 메모리 공간에 상징적.. useState(useRecoilState)를 동기적으로 처리하는 방법 문제 상황 아래와 같은 코드를 통해 (1)로그인 성공 → (2)setIsLogin 함수 실행(isLogin = true) → (3)navigate 함수 실행 의 순서로 진행되는 로직을 구현하려 했다. ... const [isLogin, setIsLogin] = useRecoilState(isLoginState); const getToken = async () => { await axios({ method: "GET", url: `${process.env.REACT_APP_BASE_URL}/auth/kakao/callback`, params: { authCode, }, withCredentials: true, }) .then((res) => { // (1) 로그인 성공 onLoginSuccess(res)... React.StrictMode로 인한 KOE320 에러 (카카오 로그인) 문제상황 새로운 서비스의 카카오 로그인 기능을 구현하던 중, 인가 코드를 통해 카카오 서버로부터 액세스 토큰을 받아오는 과정에서 다음과 같이 KOE320 에러가 발생했다. KOE320에 대해 검색해보니, 이미 발급된 인가코드를 다시 사용하여 발생하는 문제라고 한다. 현재 로그인 관련 로직은 다음과 같이 구현되어 있다. 카카오 계정으로 로그인 카카오 콜백 url(클라이언트측으로 설정)에서 인가코드를 받아오고, 이를 담아 서버측으로 API 요청 서버 API에서 인가코드를 통해 액세스 토큰을 받아온 후 회원가입or로그인 처리 클라이언트로 액세스 토큰 response body에 담아서 보냄 & refresh token은 httpOnly 쿠키에 저장 클라이언트에서 토큰 받아와서 axios.defaults.head.. req.body에 한글이 넘어와서 TypeError 발생 (Request path contains unescaped characters) 문제 상황 유저가 입력한 url을 전달 받아 이를 크롤링하는 코드가 구동중이다. 그런데 Velog의 경우, 다음과 같이 url에 한글이 포함되는 경우가 있다. “https://velog.io/@username/가나다라마바사” request 값으로 한글을 전달받게 되면 다음과 같은 에러가 발생한다. TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters 해결 자바스크립트 내장 함수인 encodeURI()를 쓰면 된다. encodeURI(req.body.url) 하지만 전달받는 값이 한글이 아니라 영문일 경우, encodeURI로 감싸게 되면 원래의 문자열과 달라진다. 전달받는 값이 한글일때를 식별하여 encodeURI.. [Modern Javascript Deep Dive] 1장.프로그래밍 / 2장.자바스크립트란? / 3장. 자바스크립트 개발 환경과 실행 방법 들어가기 전에 프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고, 이를 코드로 구현하는 것입니다. 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측 가능해야 하며, 명확히 설명할 수 있어야 합니다. ✔️ 너무나 중요한 내용. 프로그래머는 코드라는 '도구'를 이용하여, 문제를 해결하는 사람. 1장. 프로그래밍 프로그래밍이란? 문제(요구사항)의 집합을 분석 → 적절한 자료구조와 함수의 집합으로 변환한 후 → 그 흐름을 제어하는 것. ✔️ 컴파일러(인터프리터) : 프로그래밍 언어를 기계어로 변환하는 역할 2장. 자바스크립트란? + 3장 자바스크립트의 역사 크로스 브라우징 이슈 → 자바스크립트 표준화의 필요성 대두 → ECMAScript 등장 ES6(let, co.. [그림으로 배우는 웹 구조] Chapter 1. 웹 기술의 기본 웹이란? 웹 : 인터넷을 통해서 제공되는 정보나 서비스 등을 공개하거나 주고 받기 위한 구조 웹은 **하이퍼텍스트(HTML : Hyper Text Markup Language)**로 쓰인 페이지들이 하이퍼링크를 통해 연결되어 있는 구조를 가진다. 웹 시스템의 구조 디바이스(브라우저), 인터넷, 웹 서버가 기본 구성. 웹 사이트 : 웹 페이지들로 구성되는 집합체 웹 앱 : 웹서버 + AP(Application) Server + DB Server 형태의 동적인 구조를 가짐. 규모에 따라 웹 서버 안에 AP서버나 DB서버를 넣거나, 따로 분리하기도 함 URL이란? URL은 보고 싶은 웹페이지 혹은 웹사이트의 파일을 의미. ‘스키마명(https, http 등의 프로토콜) + FQDN(host + domain) .. Sequelize 시차 발생 현상 해결 Sequelize에서 모델을 생성할 때, 'timestamps: true' 설정을 추가하면 DB에 현재 시각이 created_at 컬럼에 자동으로 추가된다. 그러나 Sequelize의 기본 시간 설정은 UTC(Universal Time Coordonne)이고, 이는 영국 시간을 기준점으로 하기 때문에 우리나라보다 9시간이 느린 값을 가진다. 따라서 이를 우리나라 시간으로 반영하기 위해서는 Sequelize의 config 파일에 "timezone": "+09:00" 설정을 추가해줘야 한다. 그러나 여기서 끝이 아니다. DB에 저장된 datetime 값을 find로 조회하게 되면, timezone 적용 이전 시각(UTC 기준 시각)이 다시 표시된다. (로드시 nodejs가 자체의 타임존 설정에 따라 시간을 .. SameSite 정책으로 인해 브라우저로 쿠키가 전송되지 않는 문제 해결 배경 서버에서 클라이언트(브라우저)로 쿠키에 값을 담아 보내야 할 때, res.cookie(key, value)와 같은 형태로 보낸다. 그런데 이때, 쿠키를 주고 받는 서버와 클라이언트의 origin(출처)가 다르므로, 추가 설정을 하지 않는다면 CORS(Cross-Origin Resource Sharing) 에러가 뜬다. 더보기 CORS, origin(출처) 란? CORS(Cross-Origin Resource Sharing) 말 그대로 서로 다른 origin 간에 리소스를 주고 받을 때와 관련한 보안 정책이다. origin은 어디까지를 의미하나? 보통 origin이라 함은 프로토콜과 호스트, 그리고 포트 번호까지를 합친 값을 의미한다. 즉, 포트번호까지 같아야 cors에 해당하지 않는다. 이때 ‘쿠키.. 이전 1 2 3 4 다음
