study/TIL

웹 접근성(Web Accessibility) 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것. 장점 사용자 층의 확대 장애인, 고령자 등 정보 소외 계층도 사이트를 자유롭게 이용할 수 있다. 따라서 사이트의 이용자를 늘릴 수 있고 새로운 고객층을 확보할 수 있다. 다양한 환경 지원 정보 소외 계층이 아니더라도 운전중인 경우, 마우스를 사용할 수 없는 경우 등 정보에 접근하기 어려운 상황일때도 웹사이트를 자유롭게 사용할 수 있으므로 서비스의 사용 범위가 확대된다. 사회적 이미지 향상 기업이 정보 소외계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다. 1. 웹 콘텐츠 접근성 지침 1) 인식의 용이성(Perceivable) - ..

1. 웹표준 W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미함. 사용자가 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있게 하는 웹페이지 제작 기법을 담고 있다. HTML, CSS, JavaScript 등의 기술을 다룬다. 이 기술들은 각각 화면의 구조, 표현, 동작 등을 담당한다. => 웹 표준에 맞추어 웹페이지를 작성하면 어떤 브라우저를 사용해도 동일한 결과물을 얻을 수 있다. 장점 유지보수가 용이 구조 / 표현 / 동작이 분리되면서 유지보수가 용이해지고 코드가 경량화 되어 트래픽 비용이 감소하는 효과 발생 웹 호환성 확보 웹표준을 준수하면 브라우저의 종류, 버전, 운영체제나 사용 기기 종류에 관계 없이 항상 동일한 결과가 출력됨 검색..

리덕스 미들웨어 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있다. 주로 비동기 작업을 처리할때 사용한다. 예시) 특정 조건에 따라 액션 무시하기 액션을 콘솔에 출력하거나 서버쪽에 로깅하기 액션이 디스패치 되었을때 이를 수정해서 리듀서에게 전달되게 하기 특정 액션이 발생했을 때 이에 기반해 다른 액션이 발생하게 하기 특정 액션이 발생했을 때 특정 자바스크립트 함수 실행하기 미들웨어 만들어보고 이해하기 1) 리덕스 미들웨어의 템플릿 리덕스 미들웨어를 만들때에는 다음과 같은 형태의 템플릿을 사용한다. const middleware = store => next => action => { // 하고싶은 작업... } // 화살표가 여러개지만 function..

1. Redux Redux는 자바스크립트 상태관리 라이브러리이다. React뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 다양한 프레임워크와 함께 작동할수있도록 설계되었다. https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 1) Redux 설치하기 Redux를 사용하기 위해서는 redux, react-redux를 설치해야한다. npm install redux react-redux; 2) Redux가 상태를 관리하는 순서 Action ➡ Dispatch ➡ Reducer ➡ Store 상태가 변경되어야 하는..

1. 상태 관리 1) 전역 상태 관리 상태 : 변하는 데이터. UI에 동적으로 표현될 데이터를 말함. Side Effect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인. ex) 네트워크 요청, API 호출... 컴포넌트는 Side Effect를 최대한 배제하고 만들어야함. 입력이 가짜 데이터(fake data)라도 표현할 수 있어야 한다. => presentaion component 하지만 로딩중인 상태처럼 side effect에 의존적인 상태가 있을 수 있다. 애플리케이션을 만들때는 이러한 상황을 모두 고려해야함. (1) 리액트로 앱을 설계하는 방식 https://ko.reactjs.org/docs/thinking-in-react.html React로 사고하기 – React..

1. Component Driven Development (CDD) 조립해나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어나가는 개발 방식. BBC나 UN 등이 이 방법을 활용하고 있다. 재사용할 수 있는 컴포넌트를 개발할 수 있고, 상향식 개발에 적합한 방식이다. 1) 구조적인 CSS 작성 방법의 발전 구조화된 CSS가 필요해진 이유 프로젝트의 규모나 복잡도가 커짐 함께 작업해야할 팀원 수가 늘어남 모바일, 태블릿 등 다양한 디바이스의 디스플레이를 커버해야함 => 효율적으로 CSS를 작업하기 위해 구조화된 CSS가 필요해졌다! (1) CSS 전처리기(CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움을 주는 도구. CSS를 작성할때 발생하는 반복적인 작업들을 변수와 함수, 상속 등..

요약정리한 파일을 잃어버렸다가 다시 찾아서 지금 업로드함 1. Command-Line Interface 입력소스 : 컴퓨터에 새로운 명령을 전달하는 모든 소스. (키보드, 마우스, 카메라, 마이크 등) 출력 : 입력 소스에 의해 또는 작성된 프로그램에 의해 사용자가 인식할 수 있도록 하는 일 (모니터에 화면 출력, 음악 재생시 스피커에서 소리가 나는 것 등) 모니터와 스피커는 출력소스. I/O(Input/Output) : 컴퓨터를 조작하기 위한 입력과 출력. 리눅스의 터미널은 키보드 입력과 모니터 출력으로 모든 작업을 할 수 있다. 리눅스 터미널은 GUI 이전부터 컴퓨터 조작을 위해 사용되었기 때문에 GUI로 가능한 모든 작업은 CLI로도 가능하다. 다만 키보드 입력시 모니터에 글자로 출력하기때문에 GU..

1. Figma의 특징 실시간 협업 기능 웹 브라우저 기반으로 다양한 OS 지원 자동 저장 및 버전 관리 기능 구글 폰트를 활용한 무료 폰트 지원 오토 레이아웃 기능 프로토타이핑 기능 2. 피그마 단축키 복사 : Command + C 붙여넣기 : Command + V 잘라내기 : Command + X 복제하기 : Command + D 혹은 Option 누른 상태로 드래그 여러 요소 동시에 선택 : Shift 누른 상태로 클릭 그룹 : Command + G 프레임으로 묶기 : Command + Option + G 그룹, 프레임 해제 : Command + Shift + G 간격 측정 : 요소를 선택한 상태에서 Option / Alt 누르고 다른 요소에 마우스 올리기 오토 레이아웃 추가 오토 레이아웃 적용할 ..

1. UI와 UX 1) UI(User Interface) 사용자 인터페이스를 말함. 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다. 화면상의 그래픽 요소들 외에도 키보드나 마우스 등의 물리적인 요소들도 컴퓨터와 상호작용하기 위한 시스템임으로 UI라고 볼 수 있다. GUI (Graphical User Interface, 그래픽 사용자 인터페이스) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 화면. 예시로는 컴퓨터 운영체제의 화면(Window, Mac OS), 또는 애플리케이션들의 화면이 있다. 프론트엔드에서의 UI는 대부분 GUI를 의미한다. 2) UX(User Experience) 사용자 경험. 사용자가 어떤 시스템이나 제품, 서비스 등을 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 말..

1. JSON JSON : JavaScript Object Notation. 데이터 교환을 위해 만들어진 객체 형태의 포맷. 전송 가능한 조건(transferable condition) 수신자(reciver)와 발신자(sender)가 같은 프로그램을 사용한다. 또는 문자열처럼 범용적으로 읽을 수 있어야 한다. 객체를 string으로 변환하기 객체는 string 타입으로 변환될 경우 객체 내용을 포함하지 않음. => 객체를 JSON 형태로 변환하거나(JSON.stringfy) JSON을 객체형태로 변환해야한다.(JSON.parse) JSON.stringfy() : 객체를 JSON으로 변환한다. const message = { sender : 'Harry', receiver: 'Anne', message: ..