yeeendy

Cookie 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있음 쿠키를 이용한다는 의미는? → 서버에서 클라이언트에 쿠키를 전송 → 클라이언트에서 서버로 쿠키를 다시 전송 쿠키 특징 → 서버가 클라이언트에 특정한 데이터를 저장할 수 있다. → 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있다. *특정 조건 → http 헤더를 사용해 쿠키 옵션으로 표현 'Set-Cookie':[ 'cookie=yummy', 'Secure=Secure; Secure', 'HttpOnly=HttpOnly; HttpOnly', 'Path=Path; Path=/cookie', 'Doamin=Domain; Domain=codestates.com' ..

네트워크의 탄생 배경에 대해 알아보자 회선교환 방식 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결 단점 내가 연결하고 싶은 상대가 다른 상대와 연결 중이라면 연결이 불가능 특정 회선이 끊어지는 경우에는 처음부터 다시 연결을 성립해야 함 → 즉시성이 떨어짐 패킷교환 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 → 각 패킷에는 출발지와 목적지 정보가 있고 이에 따라 패킷이 목적지를 향해 가장 효율적인 방식으로 이동할 수 있음 → 특정 회선이 전용선으로 할당되지 않기 때문에 빠르고 효율적으로 데이터 전송 가능 → IP는 출발지, 목적지 정보를 IP 주소라는 특정한 숫자값으로 표기하고 패킷단위로 데이터를 전송 IP와 IP Packet IP는 지정한 IP 주소 (IP Ad..

Quiz ❓인터넷은 웹 기반으로 작동한다 ( O / X ) 정답 : X 설명 인터넷이 웹보다 좀 더 포괄적인 개념 인터넷 전세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함 웹 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 인터넷만 연결되어 있다면 웹이라는 공간 안에서 사용할 수 있다 2000년대 초까지만 해도 브라우저 간 호환이 되지 않아서 화면이 안 나오는 일 등 정상적으로 구동이 되지 않아 개발자들이 각 브라우저마다 따로 개발을 해주어야 했다 이러한 수고를 없애고 웹 개발의 형식을 통일시킨 것이 바로! → 웹 표준 웹 표준 웹에서 표준적으로 사용되는 기술이나 규칙 W3C(W..

구글 캘린더를 따라 만들어보려고 하는데 사용할 라이브러리에 대해 알아보자 dayjs 달력 라이브러리들이 많은데 그 중에 dayjs를 선택한 이유는 다른 라이브러리들은 날짜만 나오는 게 아니고 위에 날짜(2023년 6월)까지 붙어나오는 경우가 많은데 분리가 안 돼서 따로따로 배치하는 것이 안 됐다. javascript 날짜 관련 라이브러리 중 가장 가벼운 라이브러리이다 https://day.js.org/en/ 사용 방법 새로운 객체 생성 //현재 날짜, 시간이 포함된 객체 dayjs(); //지정한 날짜 객체 생성 dayjs('2023-06-23'); dayjs('2023-06-23 14:08:34'); 날짜 형태 지정 let date = dayjs(2023-06-23 10:30:25') date.form..

Redux 리액트의 상태 관리 라이브러리 state = 사용자 지정 변수 리덕스 = state를 한 곳에다 저장 저장할 때 store 단위로 저장, state의 저장과 조작을 다룬다 -> 사용하기 편리하며 오류를 잘 잡아줄 수 있다. Redux 쓰는 이유 props 문법 귀찮을 때 state 변경 관리할 때 Redux 구조 상태가 변경되어야 하는 이벤트가 발생 → 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달 Reducer 함수는 Action 객체의 값을 확인 → 전역 상태 저장소 Store의 상태를 변경 상태가 변경되면, React는 화면을 다시 렌더링 단방향 흐름..

이번 단원에서는 redux에 대해 배운다! 본격적인 redux 공부 전에 상태 관리에 대한 개념과 상태 관리 라이브러리(Redux)의 필요성에 대해 먼저 알아보자 프론트엔드 개발에서의 상태 관리 상태란? → UI에 동적으로 표현될 데이터 Side Effect란? → 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 → ex) 네트워크 요청(백엔드 API 요청) React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것 상태의 두 가지 구분 로컬 : 특정 컴포넌트 안에서만 관리되는 상태 전역 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 전역 변수는 남용하는 것이 좋지 않지만, 경우에 따라 필요하다 → 서로 다른 컴포넌트가 사용하는 상태의 종류가..

styled-components와 useRef를 활용해 과제해보는 시간이었다 과제를 하다가 알게된 개념을 정리해보자 1. setIsOn(!isOn) 보다 setIsOn((prev)=>!prev)가 더 안정적이다. 2. e.sotpPropagation() 우선 useState를 사용할 때 기본 boolean값을 바꿀때 // 예시 const [isOn, setIsOn] = useState(false); // true로 바꾸고 싶을 때 setIsOn(!isOn) // 이런 방식으로 많이 쓰는 데 setIsOn((prev)=>!prev) // 이 방식으로 쓰는 게 더 안정적이라고 한다 setIsOn(!isOn) 보다 setIsOn((prev) => !prev) 방식이 더 안정적인 이유 예측 가능성이 높다 use..

CDD (Component Driven Development) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 재사용할 수 있는 UI 컴포넌트를 만들어 활용할 수 있다. CSS 전처리기 (CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 우리가 흔히 CSS 문서를 작성할 때는 color값 찾기, tag를 닫는 일 등 많은 번거롭고 반복적인 작업을 해야하고 그뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 유지관리에 많은 영향을 끼친다. 이런 CSS의 문제점들을 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결해 나갈 수 있다. 하지만 CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 CSS 전처리기에 맞는 Compiler..

와이어프레임(wireframe) 제품 기획 단게에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다 Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어프레임 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉬움 아이디어를 구체화시키며 큰 그림을 잡을 때 좋음 Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어준 와이어프레임 해당 페이지가 어떻게 작동하게 될지 예상할 수 있음 High Fidelity Wireframe (Hi-Fi Wireframe) 완성본에 가깝게 작성한 와이어프레임 목업에 ..

UI (User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 시스템 → 예시) 화면상의 그래픽 요소 / 키보드, 마우스 등의 물리적 요소 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 → 예시) 운영체제(Windows, Mac OS)의 화면, 애플리케이션 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. UX (User Experience, 사용자 경험) 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험 → 제품, 서비스 그 자체에 대한 경험 → 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험 제품의 성능이 아무리 뛰어나..