1. var- 선언과 초기화가 동시에 이루어짐 (호이스팅 되며 undefined로 초기화 됨. 참조해도 오류 발생 x)- 재할당 가능- 재선언 가능- 함수 레벨 스코프 2. let- 선언과 초기화가 분리되어 이루어짐 (호이스팅 되며 선언은 되지만, 참조하면 오류 발생)- 재할당 가능- 재선언 불가- 블록 레벨 스코프 3. const- 선언과 초기화가 분리되어 이루어짐 (호이스팅 되며 선언은 되지만, 참조하면 오류 발생)- 재할당 불가- 재선언 불가- 블록 레벨 스코프 4. var vs let, const- 초기화 시점이 다름. var는 참조 에러 발생 x 5. TDZ (Temporal Dead Zone)선언과 초기화 사이의 구간 -> 이 때 호출하면 참조 에러 발생함수 선언문은 TDZ가 없지만, ..

2학기 공통 프로젝트를 시작할 때만 해도 길어 보였던 7주라는 시간이,어느새 다 끝나고 벌써 다음 프로젝트를 준비하고 있다. 프로젝트는 예비부부를 위한 스마트 웨딩플래너 서비스였고,우수 프로젝트에 선정되어 발표회에도 참가하게 되었다.개발을 SSAFY에서 처음 시작했으니,공통 프로젝트는 당연하게도 관통에 이어 내 두 번째 프로젝트였으며, 6명이 FE, BE, 인프라를 나눠서 담당하는 첫 대규모(?) 프로젝트였다고 할 수 있겠다. 전공자와 함께하게 되는 첫 번째 프로젝트였기에, (경험자 + 전공자)프론트 엔드와 팀을 해서 노하우와 스킬을 훔치겠다는 마음가짐으로 팀 구성을 시작했다.하지만 SSAFY 특성상 프론트 엔드 개발을 희망하는 사람이 거의 없었기에, 경험자는 고사하고 전공자 프론트 엔드를 찾기도 힘들었..

공통 발표회까지 드디어 끝 ㅜSSAFY 2학기 공통 프로젝트의 주제는 스마트 결혼준비 플래너같은 데이터(일정, 완료상태)를 한 페이지의 여러 컴포넌트(캘린더, 남은 일정, 다음 일정)에서 공유했음axios만을 사용해서 데이터를 요청했다면, 매 컴포넌트마다 불필요하게 동일한 요청을 보냈을 것(store에 저장하기에는 데이터 양이 많아질 수도 있고, 내 기준 변경이 많은 데이터라고 생각하여 store에 저장하지 않았음)React-Query의 useQuery를 사용시 불필요한 여러 번의 네트워크 전송을 막을 수 있을 것이라고 생각, 일정 호출에서 useQuery를 사용(신부 혹은 신랑이 배우자의 아이디를 등록하면 일정이 공유되어 같은 데이터를 수정하기에, staleTime은 따로 설정하지 않았음) 1.0 us..

관통 프로젝트를 진행할 때 사용했던 Vue.js는 내가 처음 사용해 본 프론트엔드 프레임워크였기 때문에 비교 대상이 없었다.(리액트는 라이브러리임)하지만 강사님의 말씀과 구글링을 통해 대부분의 기업이 React를 채택하고 있는 것을 확인, 그래서 방학 때 리액트 공부를 해보기로 리액트를 사용하며 처음 든 생각은 '뭐부터 해야하지?'일 정도로, 높은 자유도를 가졌다고 느꼈다., , 로 정해진 양식이 있는 vue와 달리, jsx파일 내에는 html과 javaScript의 혼용이 가능했음 아무튼 이런 리액트의 장점을 극대화 하는 React-Query에 대해 자세히 알아보자왜 React-Query를 사용해야 하는가1. 복잡한 캐싱을 대신해줌API 요청 결과를 자동으로 캐싱하여 불필요한 중복 요청 방지같은 API..

스터디 새로운 책 시작!제어장치에 대한 설명을 읽다가 클럭에 대한 설명을 발견,오버클럭에 대해서 알아보지 않을 수가 없겠지...?1. 클럭(Clock)이란?1-1. 클럭의 정의클럭(Clock)은 컴퓨터 내부의 모든 연산 및 데이터 처리를 동기화하는 주기적 신호입니다. 클럭 신호는 컴퓨터 하드웨어가 데이터를 처리하고 서로 통신하는 데 필요한 시간 단위를 제공합니다.클럭 신호: 정해진 간격으로 반복되는 디지털 신호(High/Low 전압)클럭 주기(Clock Cycle): 클럭 신호의 한 주기가 걸리는 시간클럭 속도: 1초 동안 발생하는 클럭 신호의 횟수(Hz 단위).예: 1GHz = 10억 회/초.1-2. 클럭이 중요한 이유연산 속도 결정CPU는 클럭 신호의 상승/하강 에지에서 명령어를 처리합니다. 클럭 속..

React 18.2 + Vite 환경에서 작성되었습니다. SSAFY 공통프로젝트에서 전역 상태관리툴로 Redux대신 Zustand를 사용하기로 결정했다.실습코치님께 여쭤봤던 다른 팀 친구가 6인 정도 규모의 프로젝트에서는 더 가벼운 Zustand사용을 추천받았다고 알려줬기 때문..Redux는 아무래도 더 큰 엔터프라이즈급 툴인 모양임..방학 동안 공부했던 Redux를 내려놓고 다시 Zustand에 대해 공부하며 주요 함수에 대해 정리했다.Redux보다 훨씬 작고 가볍고, 짧은 Hook형식의 코드를 보며 왜 Zustand를 사용하는지 이해했음0. Installnpm install zustand1. CreateStore 생성 함수 현재 state와 setter를 저장할 store를 생성합니다.import {..

암호화 프로토콜SSL(Secure Sockets Layer)/ TLS(Transport Layer Security)🔑SSL은 데이터를 안전하게 전송하기 위해”웹 서버와 클라이언트 간의 통신을 암호화하는 프로토콜”— SSL은 이후 TLS로 발전 —1. 주요 목적1.1 기밀성(Confidentiality)데이터가 암호화되어 네트워크를 통해 전송되므로, 중간에 누군가가 데이터를 가로채더라도 내용을 알 수 없음. ** 비대칭 암호화와 대칭 암호화 방식을 사용1.2 무결성(Integrity)데이터가 전송 중에 변조되지 않도록 보장** 데이터에 디지털 서명을 추가하여 변조 여부를 확인1.3 인증(Authentication)서버와 클라이언트가 서로 신뢰할 수 있는지 확인** 인증서를 사용하여 서버의 정당성을 검증2..

쿠키의 취약점1. 네트워크 스니핑 (Network Sniffing)1. 1 네트워크 스니핑이란?네트워크 상의 데이터를 가로채거나 감청패킷 캡처(Packet Capture) 도구를 이용해 네트워크에서 전송되는 데이터를 수집 & 분석HTTP 같은 암호화되지 않은 프로토콜을 사용할 때 발생1. 2 네트워크 스니핑 방식공유 네트워크 스니핑공공 Wi-Fi와 같은 공유 네트워크에서 발생네트워크가 브로드캐스트 방식으로 데이터를 전송→ 공격자는 네트워크 트래픽을 모니터링하여 다른 사용자가 보내는 데이터를 하이재킹ARP 스푸핑 (ARP Spoofing)공격자가 로컬 네트워크에서 자신의 장치를 라우터로 위장하여 패킷을 중간에서 가로채기→ 세션 쿠키, 로그인 자격 증명, 민감한 데이터를 탈취MITM (Man-in-the-M..

1. Port Forward1.1 포트 포워딩이란?🌐방화벽(모뎀, 공유기 등)으로 차단된 네트워크의 외부에서내부망으로 접속할 수 있도록 외부 포트를 개방하는 것.1.2 왜 해야함?네트워크 외부에서 사설 네트워크로 접근하려면 공인 IP주소를 사용해야함But, 공인 IP주소로 오는 연결은 공유기에서 끝나버림.→ 사설 네트워크의 어느 주소로 가야하는지 모르기 때문공인 IP 주소로 오는 연결을 사설 네트워크의 특정 PC로 가도록 연결해주는 것이포트 포워딩임.예시컴퓨터 1에서 80번 포트로 웹 서버를 열었다고 했을 때,12.34.56.78:80으로 접속할 수 없음.공인 아이피로 들어온 12.34.56.78:80 요청은 공유기에서 끝남.이 요청을 컴퓨터 1로 보내도록 **매핑하는 것**이 포트 포워딩임1.3 참고..

게이트웨이란?🌐다른 네트워크로 나가는 출구, 다른 네트워크로 들어가는 입구비유를 하자면게이트웨이는 아파트의 현관문, 호스트들은 하나의 방왜 필요할까?다른 네트워크에 있는 다수의 호스트들이 직접 통신을 하게 된다면 통신 경로가 복잡해짐.→ 비효율적, 유지보수 & 관리가 어려움But, 다수의 호스트들을 그룹화하고 한 지점을 통해 서로 연결하면 경로가 단순화 됨.→ 복잡한 연결을 단순화게이트웨이의 주소공유기의 내부 아이피 주소는 해당 컴퓨터의 게이트웨이 주소임네트워크 대역 안에서 임의의 주소를 할당 → 통상적으로 첫번째 주소(1) 혹은 마지막 주소(254)를 사용함게이트웨이 & 라우터🌐❗️❗️게이트웨이 ≠ 라우터 ❗️❗️공유기는 보통 라우팅, 게이트웨이, NAT 등등의 기능이 포함된 복합기기라 헷갈리기 쉬..