Algorithm Cinema

프로그래밍 언어겠죠 당연히자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.→ 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다.기본 문법은 C, Java와 유사하고 Self에서는 프로토타입 기반 상속을, Scheme에서는 일급 함수의 개념을 차용했다.인터프러터(Interpreter) Language인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화한다. 이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 불구하고 보다 빠른 코드의 실행이 가능하다.인터프러터 언어가 뭔데요→ 쉽게 설명하면 코드를 한줄씩 읽고 즉시 실행하는 방식의 프로그래밍 언어📌 인터프리터 언어의 특징실시간 실행..

개념을 아는게 그렇게도 중요한가?프로그래머가 해야 할 일은 문제를 해결하기 위한 방안을 고안하고 이것을 문법에 맞게 코드로 구현하는 것이다.구현된 코드는 의도한 대로 정확히 동작하여 문제를 해결해야 한다. 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 그리고 무엇을 돌려 줄 것인지 예측 가능해야 하며 이것을 동료에게 명확히 설명할 수 있어야 한다.→ 내가 쓴 코드를 남에게 나의 의도대로 정확히 구현하여 줘야하고 이에 대한 정보를 완벽히 알아야 함 ( 아는척하지말아야함) 필자도 그러기 위해 처음부터 다시 한다는 마음으로 자바스크립트 딥다이빙을 시작합니다!  복붙하면 되지않는가?Copy & Paste로 단순히 동작만 하는 코드를 만들고 그것에 만족한다면 여러분이 구현한 코드는 언제 무너져도..

🚀 React에서 useEffect를 활용한 그래프 애니메이션 적용법 https://www.loom.com/share/c80fd4298f6d420e9d182623ded33997?sid=56b1c360-1dd4-427a-8208-ac537fe408a0 recharts를 활용하여 막대 그래프(BarChart)가 부드럽게 위에서 아래로 솟아오르는 효과를 구현합니다.👉 핵심 포인트는 초기 데이터(0 값)를 useState로 설정하고, useEffect를 사용하여 값을 점진적으로 증가시키는 것입니다. 📌 메커니즘와 아이디어 그리고 상황저는 프론트 개발을 하면서 백엔드 개발자 분들의 서버 배포 전에는 늘 더미데이터를 써서 서버 api가 없을때 제가 구현한 동작을 테스트하고는 했습니다. 보여지는 시각적 그래프가..

서론프론트엔드 개발에서 CSS-in-JS 라이브러리는 점점 더 널리 사용되고 있습니다. 그중 Emotion은 유연성과 강력한 기능 덕분에 많은 개발자가 선호하는 도구입니다. 특히 Emotion에서 제공하는 템플릿 문자열과 스타일 재활용 기능은 유지보수를 용이하게 하고 생산성을 높이는 데 중요한 역할을 합니다. 하지만 스타일 컴포넌트를 사용할 때 발생할 수 있는 단점도 고려해야 합니다. 이번 포스팅에서는 Emotion을 활용한 스타일 재활용 방법을 일반적인 방식과 비교하며 템플릿 문자열 활용의 장점과 한계를 알아보겠습니다. 템플릿 문자열 활용Emotion은 스타일을 정의할 때 JavaScript 템플릿 리터럴을 사용합니다. 이 템플릿 리터럴의 특징을 활용해 스타일 재활용을 간단하고 직관적으로 구현할 수 있..

프론트엔드와 백엔드의 통신에서 가장 중요한 부분 중 하나는 Content-Type입니다. 이 글에서는 **application/json**과 **multipart/form-data**의 차이, 실제 구현 방식, 그리고 프로젝트에서 Content-Type을 동적으로 처리하는 방법을 친절하게 설명합니다. 프론트엔드와 백엔드 통신에 처음 입문하신 분들도 이해할 수 있도록 쉽게 풀어보겠습니다.1. Content-Type이란?Content-Type은 서버와 클라이언트가 통신할 때 데이터의 형식을 정의하는 HTTP 헤더입니다. 이를 통해 서버는 클라이언트가 보내는 데이터가 어떤 형식인지 알고 올바르게 처리할 수 있습니다.Content-Type의 역할클라이언트에서 서버로 데이터 전송: 클라이언트는 서버에 데이터를 전..

요청 인터셉터, 응답 인터셉터, 리프레쉬 토큰 함수는 axios Instance에서 비동기 함수로 선언되어있다. 요청 인터셉터와 응답 인터셉터의 역할 1. 요청 인터셉터: 서버와 통신 전 필요한 작업 -> 서버야 주세요! 하기전 작업입니다. 로컬스토리지부터 권한을 받아옵니다.  • 요청 인터셉터는 모든 API 요청 전에 호출됩니다.  • 주 역할: 1. 헤더 추가: • 요청마다 엑세스 토큰(또는 인증 정보)을 자동으로 헤더에 추가.  2. 요청 수정: • 예: URL을 동적으로 변경하거나, 특정 조건에 따라 요청을 수정.  3. 디버깅/로깅: • 요청이 서버에 도달하기 전에 요청 정보를 기록. 2. 응답 인터셉터: 서버 응답 후 필요한 작업 • 응답 인터셉터는 서버에서 응답을 받은 직후 호출됩니다.  •..

인터셉터 설정의  포스팅의 다음 단계입니다.  리프레시 토큰을 사용해 새로운 엑세스 토큰을 발급받는 함수입니다. 요청과 응답 인터셉터에서 사용하는 핵심 로직 중 하나로, 엑세스 토큰이 만료된 경우를 처리하기 위해 만들어진 함수입니다. 이 함수는 토큰 기반 인증 시스템의 중요한 부분입니다. 아래에서 동작 원리와 역할을 설명하겠습니다. 1. 이 함수의 역할 1. 엑세스 토큰 갱신: • 엑세스 토큰이 만료되면, 기존 리프레시 토큰을 사용해 새로운 엑세스 토큰을 발급받습니다. • 새로 발급받은 엑세스 토큰은 이후의 요청에서 사용됩니다.  2. 리프레시 토큰도 갱신: • 리프레시 토큰 역시 일정 기간 후 만료될 수 있으므로, 서버에서 갱신된 리프레시 토큰이 함께 반환되면 이를 업데이트합니다.  3. 인증 상태 유..

웹 애플리케이션을 개발하다 보면, 프론트엔드와 백엔드를 연동하는 과정은 필수적인 단계입니다. 이번 글에서는 실제 서버와 프론트엔드 코드를 연동하는 과정에 대해 자세히 알아보겠습니다. 이 과정은 초보 개발자나 처음 서버와 프론트를 연결하는 분들에게 유용할 것입니다. Axios는 HTTP 요청을 다루는 라이브러리로, RESTful API와 통신하는 프론트엔드 개발에 필수적인 도구입니다. 이 글에서는 Axios Instance를 활용해 API 통신을 효율적으로 설정하는 방법을 살펴보고, Interceptor를 통해 인증 토큰 처리까지 구현하는 과정을 알아보겠습니다.1. API Instance 생성하기 (Axios Instance)API 통신은 대부분 HTTP 클라이언트를 사용하여 이루어집니다. 저는 axios..

토큰은 클라이언트와 서버 사이에서 인증을 담당하는 열쇠와 같은 존재입니다. 이번 포스팅에서는 토큰이란 무엇인지, 왜 필요한지, 그리고 어떻게 사용하는지 알아보겠습니다.  # 토큰은 뭐고 왜 가져와야하는가?const accessToken = localStorage.getItem('token');const refreshToken = localStorage.getItem('refreshToken'); 먼저 토큰은 서버와 클라이언트(사용자) 간의 인증 및 권한 부여를 위해 사용되는 데이터 조각입니다.클라이언트가 서버에 접근할때, 클라이언트의 요청이 인증된 요청인지 아닌지 확인하는 디지털 증명서입니다. 일반적으로 두 종류의 토큰이 있습니다.• Access Token (엑세스 토큰): 주로 인증 및 권한 부여를 위..

서론 React 애플리케이션에서는 데이터를 서버에서 가져오는 작업(Fetching)이 필수적입니다. 하지만 데이터를 언제, 어떻게 가져올지는 사용자와 애플리케이션의 동작 방식에 따라 다릅니다. 이를 크게 두 가지로 나눌 수 있습니다: 1. 수동적 데이터 Fetching: 페이지가 로드되거나 특정 상태가 변경될 때, 애플리케이션이 자동으로 데이터를 서버에서 가져옵니다. 2. 능동적 데이터 Fetching: 사용자가 버튼 클릭이나 특정 액션을 통해 데이터를 요청합니다. 이 두 가지 경우는 각각의 특성과 요구사항이 다르기 때문에 React의 useEffect와 비동기 통신 함수의 역할이 달라집니다. 이번 포스팅에서는 상황에 맞는 useEffect와 비동기 함수의 활용법을 알아보고, 능동성과 수동성에 따라 us..