본문 바로가기

Learn

 (80)
Cookie & Session Cookie 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없습니다. 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문 쿠키 옵션 종류 1. Domain www.google.com과 같은 서버에 접속할 수 있는 이름 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송 2. Path 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송 3. MaxAge o..
웹 접근성 웹 접근성 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것 웹 접근성을 갖추면 얻을 수 있는 효과 사용자층 확대 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보 다양한 환경 지원 접근성을 향상시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대 사회적 이미지 향상 회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 ..
웹 표준 웹 표준 W3C에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다 웹 표준의 장점 유지 보수의 용이성 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과 웹 호환성 확보 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과 검색 효율성 증대 웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출 홍보를 위한 ..
Redux Redux란? 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 상태 관리를 해줄 목적으로 사용 저장소를 따로 만들어 상태를 원하는 곳에서 쓸 수 있게 해줌 Redux의 구조 Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달 Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경 상태가 변경되면, React는 화면을 다시 렌더링 Redux의 3원칙 1...
상태 관리 React 컴포넌트의 상태 React의 상태는 컴포넌트의 변경 가능한 데이터 저장소 변경 가능하다는 것은 상태 값을 변경할 수 있다는 것 상태를 관리하기 위해선 React의 구조 부터 알아야 한다! React로 사고하기 1단계: UI를 컴포넌트 계층 구조로 나누기 2단계: React로 정적인 버전 만들기 3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기 4단계: State가 어디에 있어야 할 지 찾기 5단계: 역방향 데이터 흐름 추가하기 전역상태와 로컬상태 전역상태 : 여러 컴포넌트에서 관리되는 상태 -> 다른 컴포넌트와 상태를 공유하고 있기 때문에 앱 전반에 영향을 미친다. ex) 다크모드 , 언어번역모드 로컬상태 : 특정 컴포넌트 안에서만 관리되는 상태 -> 특정 컴포넌트 안에..
React Custom Component 추가로 배운 개념 Array.prototype.includes() includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별 arr.includes(valueToFind[, fromIndex]) //valueToFind //탐색할 요소.> 참고: 문자나 문자열을 비교할 때, includes()는 대소문자를 구분 //fromIndex (Optional) //이 배열에서 searchElement 검색을 시작할 위치입니다. //음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다. //기본값은 0입니다. let arr = [a,b,c,d] arr.includes(a) // true arr.includes(b) // true arr.includes(z) // false arr.inclu..
CDD CDD (Component Driven Development) 재사용 할 수 있는 UI 컴포넌트를 만들어 둔 다음 용도에 맞게 재사용 하는 것. 컴포넌트를 하나의 조각이라 생각하고 큰 틀에 맞춰 끼워나간다고 생각. Styled Components CSS in JS 라는 개념이 대두되면서 나온 라이브러리 CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 그 중 가장 인기 있는 것이 Styled Components Styled Components 사용법 // 터미널에서 입력 후 npm install --save styled-components // 사용할 파일로 불러오기 im..
피그마 클론 만들기 (chatGPT) 피그마를 사용해 요즘 핫하디 핫한 chatGPT를 만들어 봤다. 아쉬운 점 1. 인풋박스를 구현하지 못했다. 시간이 없어서 이렇게 마무리했지만 인풋박스까지 만들 예정이다. 2. 조금씩 삐뚫어지는 모습. 좀 더 세밀하게 만들 필요가 있다. 3. ai가 입력하는 모습을 구현하지 못했다. 어떻게 할지 생각해 볼 필요가 있는 부분. 4. 원래 chat GPT에서는 채팅을 추가할 때마다 목록이 추가 되는데 구현하지 못했다. 배운 점 1. 스크롤이 제멋대로 되서 어려웠지만 박스안에 가둬두고 고정시키면 해결 된다. 2. 화면 전환을 위해 다양한 프레임이 필요하다. 3. 컴포넌트와 인스턴스의 관계를 좀 더 명확히 알았다. 인스턴스를 복제하고 다시 만들더라도 이미 컴포넌트에 속해있어 연결된 화면으로 넘어가졌다. 4. 링..

티스토리툴바