전체 글 51

[JavaScript] 클로저

자바스크립트에서 중요한 개념인 클로저!클로저함수가 자신이 선언될 때의 환경(변수, 상수 등)에 접근할 수 있는 권한을 가진 함수 일반적으로 함수가 실행을 마치고 종료되면, 그 함수 내에서 선언된 변수들은 소멸하게 접근할 수 없게 되지만,클로저는 함수가 종료된 후에도 그 함수가 선언된 시점의 환경을 기억하기 때문에, (렉시컬 스코프)외부 함수가 종료된 이후에도 내부 함수에서 외부 함수의 변수에 접근할 수 있다. 클로저의 생성 원리주로 함수 내에 중첩된 함수가 있을 때 생성자바스크립트는 함수가 생성될 때 외부 함수의 변수를 기억하는 방식으로 클로저를 형성함! 클로저의 동작 방식1. 중첩된 함수에서 외부 함수의 변수에 접근할 때 중첩 함수가 외부 함수의 변수들을 계속 참조할 수 있음2. 외부 함수가 실행을 마..

개발/JavaScript 2024.11.13

[Node.js] CORS와 SOP의 개념 및 구현 방법

CORSCross-Origin Resource Sharing웹 페이지가 다른 출처(origin)에 있는 리소스에 안전하게 접근할 수 있도록 허용하는 메커니즘* origin- 도메인, 프로토콜, 포트를 의미- 웹의 보안을 위해 기본적으로 SOP(Same-Origin Policy)가 적용되어, 동일 출처가 아닌 리소스에 접근하는 것을 차단함.- 그러나 여러 서비스가 연동되는 웹 환경에서는 다른 출처의 리소스를 사용해야 할 때가 생김.→ CORS를 사용하면 가능함. SOPSame-Origin Policy웹 브라우저가 동일한 출처(origin)에서 로드된 리소스에만 접근할 수 있도록 제한하는 보안 정책.(즉, 같은 도메인, 프로토콜, 포트를 가진 경우에만 접근 가능)- 여러 출처에서 데이터를 필요로 하는 웹 애..

개발/Node.js 2024.11.13

[Node.js] HTTP와 HTTPS의 차이점 및 보안 메커니즘

HTTP 및 HTTPSHTTP HyperText Transfer Protocol Secure 웹에서 클라이언트와 서버 간에 데이터를 주고받기 위한 프로토콜- 웹 브라우저와 같은 클라이언트가 서버에 요청을 보내고, 서버는 이에 대한 응답을 클라이언트에게 보내는 방식 HTTP의 주요 특징1. 비연결성- 요청-응답이 끝나면 연결을 끊음.- 매 요청마다 새로운 연결을 설정해야 함.2. 무상태성- 각 요청은 서로 독립적이며, 이전 요청이나 응답의 상태를 기억하지 않음.- 이를 보완하기 위해 쿠키, 세션 등의 개념을 도입하여 상태 관리3. 요청과 응답의 구조- 클라이언트가 서버에 요청을 보내고, 서버가 그에 맞는 응답을 반환하는 요청-응답 구조로 작동- 이 과정에서 HTTP 메서드(GET, POST 등)와 상태 코..

개발/Node.js 2024.11.13

[Node.js] 네트워크의 기본 구조

네트워크의 종류네트워크는 LAN, MAN, WAN 이렇게 3가지 종류가 있습니다. LAN (Local Area Network)근거리 통신망으로, 학교나 사무실, 가정 등 특정 구역 내에서 네트워크를 형성하는 네트워크 유형- 비교적 작은 범위에서 운영- 높은 전송 속도- 네트워크 내의 자원(파일, 프린터 등)을 공유하기 위해 사용- ex) 가정용 와이파이 네트워크, 소규모 사무실 네트워크 MAN (Metropolitan Area Network) 도시 단위의 중간 범위에서 사용되는 네트워크.여러 개의 LAN을 연결하여 형성!- 도시나 대학교 캠퍼스처럼 LAN보다 큰 지역에서 사용- 특정 지역의 여러 네트워크를 연결하여 더 큰 네트워크를 형성함.- ex) 대학교 캠퍼스 네트워크 WAN (Wide Area Ne..

개발/Node.js 2024.11.13

[React] 영화 추천 사이트 제작하기 (마무리)

안녕하세요.벌써 React 미니 프로젝트가 마무리 되었습니다.5단계 미션은 배포하는 것 뿐이라서 4단계와 같이 작성할 생각입니다! 4단계 미션은 바로 Supabase를 이용한 회원가입, 로그인, 소셜로그인 및 북마크 기능 구현 입니다!(정말... 정말 어려웠습니다. ㅜㅜ)이번에 제가 구현한 기능은1. 회원가입 구현하기2. 로그인/로그아웃 구현하기3. 소셜 로그인 (카카오) 구현하기4. 북마크 기능 구현하기5. netlify를 통해 배포하기입니다!가장 어려웠던 건... 제가 supabase 자체를 처음 써봐서 그냥 모든게 다 어려웠어요. ㅠㅠ 허엉그래도 한 번 해봅시다......https://supabase.com/ Supabase | The Open Source Firebase AlternativeBui..

개발/React&Redux 2024.11.13

[React] 영화 추천 사이트 제작하기 (3)

3번째 미션도 무사히 마무리 하였습니다!원래는 어제 블로그를 작성했어야 했는데.... 주말이라는 이유로 하루 미뤘습니다 ㅎㅎ3단계 미션은 Nav-bar 검색 기능 구현 및 반응형 디자인 입니다!! 저는 처음에 사이트를 구현하면서부터 반응형 디자인을 신경쓰며 CSS를 만졌기 때문에,이번 미션에서는 검색 기능 구현이 주된 미션이었던 것 같습니당제가 이번에 구현한 기능은1. Nav-bar 검색 기능 구현하기 (API 사용) 2. 다크모드/라이트모드 구현3. 메인 페이지에 들어갈 현재 상영 중 영화 컴포넌트 만들기4. CSS 수정입니다 _^_ 1. Nav-bar 검색 기능 구현하기 (API 사용)Nav-bar에서 검색 기능을 구현하려면, 따로 API가 있더라구요!엔드포인트는  /search/movie 이고, q..

개발/React&Redux 2024.11.10

[React] 영화 추천 사이트 제작하기 (2)

2번째 미션도 무사히 마쳤습니다!(비록 현재 시간은 23시 46분이지만...) 2단계 미션은 바로... TMdb API를 이용한 영화 웹 애플리케이션 확장 입니다!! 이제 더미데이터가 아닌, 실제 API를 활용해서 데이터를 받아올 거예요.오늘 구현한 기능은~1. TMdb API Key를 발급받고 .env에 저장하여 환경변수로 이용 2. API 호출해서 더미데이터를 응답 데이터로 변경 3. 클릭한 MovieCard에 맞는 MovieDetail로 이동하도록 라우팅 4. NavBar 만들기 5. 회원가입, 로그 페이지 레이아웃 만들기 6. 반응형 Navbar 구현하기 (모바일 모드에서 햄버거 노출시키기)7. 더보기 버튼으로 데이터 더 받아오기입니다!! 하나씩 해봅시다. 그 전에, TMDB API가 뭔지 알아볼..

개발/React&Redux 2024.11.08

[React] 영화 추천 사이트 제작하기 (1)

현재 부트캠프에서 영화 추천 사이트를 만드는 프로젝트를 진행 중입니다.총 5개의 미션으로 진행되어, 미션 1개씩 완료할 때마다 블로그를 작성하여 정리하려구 합니다!(제발 당일에 쓰자...!!)우선 첫번째 미션 결과물입니다.1.5배를 돌렸더니 좀 정신없네요...우선 1단계 미션은 메인 페이지 및 영화 상세 페이지 레이아웃 구성 입니다!! 따라서 구현한 기능은1. 더미데이터를 사용한 메인 페이지 (App.jsx) 레이아웃 구성2. 더미데이터를 사용한 상세 페이지 (MovieDetail.jsx) 레이아웃 구성 3. React-Router-Dom을 사용하여 라우팅 구성 4. Swiper를 사용하여 슬라이드 구현5. (+) Header 만들기6. (+) 반응형 웹으로 만들기입니다!! 우선 메인 페이지인 App.j..

개발/React&Redux 2024.11.07

[React] React로 Todo List 만들기

JavaScript로 Todo List를 만들었으니, 이번엔 React로 만들어 봤습니다.완성본입니다.- 기본적인 TodoList 기능 (추가, 삭제, 수정, 전체삭제)- 랜덤 명언 표시- 스톱워치 기능이렇게 기능을 구현하였습니다.음악 재생은 모양만 내봤습니다... ㅠㅠ(제가 좋아하는 노래들이에요)// main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import App from './App.jsx'import './index.css'import Box from './Box.jsx'import Music from './Music.jsx'createRoot(document.getElementById('..

개발/React&Redux 2024.11.06