전체 글

[JavaScript] 실행 컨텍스트(execution context)

들어가기 전실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 원리이다.따라서 실행컨텍스트는 아래 개념들의 동작원리를 담고있다.- 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식- 호이스팅이 발생하는 이유- 클로저의 동작 방식- 태스큐 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식실행 컨텍스트란?실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경 정보를 모아놓은 객체이다.  즉, 실행 컨텍스트는 변수, 함수, 클래스 등의 이름인 식별자를 등록하고 관리하는 스코프라는 환경 정보를 구성하고, 컨텍스트를 콜 스택에 쌓아올려 가장 위에 있는 컨텍스트를 실행하여 코드의 실행순서를 보장한다.실행 컨텍스트가 생성되는 시점자바스크립트 엔진이 스크립트를 처음 실행할 때..

Express.js CORS 오류 해결

👇🏻 해결법은 맨아래에풀스택구현중, 프론트에서는 axios 라이브러리를 사용하여 백엔드와 API 연동을 진행하려고 하였다. 코드의 유지보수와 재사용성을 위해 http 클라이언트를 따로 구성하는 코드를 만들었고, export하여 axios를 더 보기 쉽게 사용할 수 있게 하였다. // http.tsimport axios, { AxiosRequestConfig } from "axios";const BASE_URL = "http://localhost:3000";const DEFAULT_TIMEOUT = 30000;export const createClient = (config?: AxiosRequestConfig) => { const axiosInstance = axios.create({ baseU..

vscode snippet 만들기

console.log로 로그를 찍는다거나 컴포넌트를 만들때 함수형 컴포넌트를 만들 때의 구조를 만들때라던지 기본적으로 만들어야하는 뼈대를 작성하는 부분을 이제는 완전히 익혀져서 snippet을 사용하여 사용하고 있었다.👉🏻 결론적으로 리액트를 사용자 중, 함수 표현식 등 설정 없이 스니펫을 사용하기 원한다면 아래 extension(ES7+ React/Redux/React-Native snippets)을 다운받아 사용하시길 권장한다.ES7+ React/Redux/React-Native snippetsrafce라는 스니펫은 함수 표현식을 빠르게 생성해주어 코드생산성이 빠르게 증가한다.👉🏻 만약 다른 스니펫을 설정하고 싶거나, 스니펫 단축키를 바꾸고 싶다면 더 아래에 설정방법을 작성해놨다.Snippet..

zsh: command not found: nvm 해결

더보기vite로 리액트 앱을 생성하고 npm install을 하다가 아래와 같은 오류를 보게 되었고, 해당 오류는 노드 버전이 상이하다는 것이었기 때문에 nvm을 통해 버전 관리를 하려고 했다.노드 버전 관리를 위해 아래 명령어를 실행했는데 작동하지 않았다.$ nvm install 18.12.1zsh: command not found: nvm1. nvm 설치 여부 확인내 경우 nvm이 설치가 안되어있는 경우였다. 그래서 아래와 같이 nvm을 설치해주었다.nvm -v // 0.39.7 버전이 뜨지 않는다면 터미널에서 Homebrew로 설치해준다.brew updatebrew install nvmmkdir ~/.nvm 설치후 아래 2번 진행2. zshrc 설정nvm이 존재한다면 환경변수 설정이 제대로 되어 있..

[회고] 프로그래머스 풀스택 데브코스 단위 2차

회고가 많이 늦었네요.. 스프린트 2차가 6월7일에 끝났습니다. 지금까지 데브코스를 하면서 제공하는 강의 외 어떤 활동들을 했는지 위주로 남겨놓으려고 합니다! 프로그래머스 데브코스 고민중이신 분들께 도움이 됐으면 좋겠습니다.매주 유익하지 않은 적이 없는 리액트 스터디4월말부터 현재까지 리액트 스터디를 진행하고있는 중입니다. 참여를 희망하는 9명이 모여 모던 리액트 딥다이브 책을 읽고 면접질문을 만들어서 질문하고 답하는 형태로 스터디가 이뤄졌습니다. 리액트 딥다이브 책이 난이도가 있다보니 개발하면서 생각해보지 못했던 깊은 내용까지 공부할 수 있었습니다. 또한 면접 질문 형식을 통해 답을 할 수 있도록 공부한 내용을 기억하려고 했었는데 굉장히 유용했습니다. 새로운 라이브러리에 대해 알게되고, 리액트의 버전에..

[JavaScript] 변수의 재할당 과정

변수에는 메모리의 주소가 저장되어 있다. 그러니까, 특정 값이 저장되어 있는 것이 아닌, 특정값이 저장되어 있는 메모리의 주소를 가지고 있는 것이다. 변수에 값이 재할당될때 해당 값이 스택에 존재하면 그 스택 주소로 할당된다는 내용을 본 것 같은데, 값이 같더라도 다른 메모리 주소에 값이 저장되는 줄 알았는데 그게 아니어서 좀 더 정확하게 공부해서 정리해보려고 한다.변수의 종류에 따라 저장되는 위치가 다르다.메모리는 4개의 영역이 있고, 전역변수, 지역변수, 코드, 동적할 할당에 따라 저장되는 위치가 다르다.자바스크립트 엔진은 힙영역과 콜스택을 사용한다.콜스택원시 타입 데이터가 저장된다.변수에 저장되는 것 : 콜스택의 주소 메모리 힙(heap 영역)참조 타입 데이터가 저장된다. (배열, 객체, 함수 등)..

[React] sitemap으로 SEO 작업하기

파드 동아리원들의 여러가지 성과가 생기면서 성과페이지를 추가로 만들게 되었다. 새로운 기수를 뽑기 위한 홍보 과정에서 성과가 유용하게 작용해야했기에 SEO가 불가피했다. SEO에 대한 경험이 없어서 좋은 기회라고 생각했고, 개발로 끝나는 것이 아닌 기록으로 남기며 공부를 해보려고 한다.1. 검색엔진 결과 페이지(SERP)검색엔진은 SERP를 만들기 위해 아래와 같은 과정을 거친다.크롤링 : 구글봇(웹 크롤러)이 웹페이지의 콘텐츠를 복사해서 모든 정보를 수집한 정보를 검색엔진으로 가져온다. 인덱싱 : 구글봇이 가져온 정보를 주제별로 색인해서 데이터를 보관한다.랭킹 : 색인된 콘텐츠를 검색 의도에 맞춰서 순위를 부여한 다음 사용자가 해당 키워드로 검색했을 때 랭킹 순서대로 결과를 제공한다.2. 사이트맵SER..

api.channel.io API 가져오기 에러 해결 - plugin key

잘만 되던 동아리 웹사이트가 갑자기 POST 호출 중에 아래와 같은 403 forbidden 오류가 발생하며 동작하지 않았다. {type: "constraintUrlError", status: 403, errors: [{message: "this url is constraint"}],…}errors : [{message: "this url is constraint"}]language : "ko"status : 403type : "constraintUrlError"constraintUrlError에 대해서 검색도 해봤지만 마땅한 답이 나오지 않았다. 그런데 역시, 오류를 자세히 들여다 봐야한다. 오류에 아래와 같은 주소가 있었다. https://api.channel.io/front/v6/elastic/pl..

[Next.js] 프로젝트 생성

Next.js는 서버사이드렌더링을 지원해주는 프레임워크이다.서버사이드 렌더링의 장점은 아래 포스팅에 정리해놓았다. SSR의 경험을 쌓고 싶어서 Next.js를 사용해보려고 한다.2024.05.30 - [Front-end/React] - [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리 [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPAworld-developer.tistory.com프로젝트 생성하기npx create-next-app@latest 만약 typescript를 사용하고..