Homile

📌 어제 배운 내용을 바탕으로 실제 웹 접근성을 고려해보는 과제가 주어졌다. 하면서 이런점이 있으면 몸이 불편하신 분들에게 도움이 될 수 있고, 코드를 보고 '아! 어떤 내용이 담긴 코드이구나!' 라는 것을 알 수 있다는 것을 다시 한번 깨닫는 계기가 되었습니다. 📗 오늘 학습한 내용 alt 속성 속성의 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다. 느린 네트워크 환경이나 src 속성의 오류, 시각 장애인용 스크린 리더 등을 사용할 때 대체 정보를 제공한다. for 속성 for의 값과 id의 값이 같은 태그를 연결시켜준다. 크롬 플러그인 Screen Reader 웹 페이지의 내용을 읽어주는 플러그인 (alt, label, aria 등을 읽어준다.) 📘 추가로 공부할 내용 [udem..

📌 이제 first프로젝트까지 남은기간은 약 5주이다. 5주동안 정말 내가 프로젝트를 완성할 수 있는지 할 수 있다면 어떤 기능을 구현할 수 있는지 직접 겪어보는 시간이 필요할 것 같다. 기획 → 와이어프레임 → 구현까지의 과정을 한번 해봐야 할 듯 하다. 기능으로는 React Router 설정 및 회원가입, 로그인 구현은 가장 기본적이기 때문에 CRUD프로젝트와는 다르게 다시 해봐야겠다. 📗 오늘 학습한 내용 웹 접근성 누구든지 화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스 없이 키보드밖에 사용할 수 없는 등 정보 접근에 제한을 받을 수 있는 상황을 해결하고자 노력하는 것이 웹 접근성(Web Accessibility)이다. 웹 접근성을 갖추면 어떤 상황에서도 항상 동등한 수준의 정보를 제공받..

완전 탐색? 컴퓨터의 빠른 계산 능력을 이용하여 가능한 경우의 수를 일일이 나열하면서 답을 찾는 방법을 말합니다. 효율성 관점에서는 최악의 방법입니다. '무식하게 답을 찾는다'라고 하여 Brute-Force(브루트 포스)라고도 불립니다. 완전 탐색 기법 완전 탐색 기법을 이용하기 위해서는 여러 알고리즘 기법이 사용된다. 완전 탐색 기법만을 가지고는 알고리즘 문제를 풀기에는 적합하지 않습니다. 주로 사용되는 알고리즘 기법 단순 Brute-Force 알고리즘 기법을 사용하지 않고 단순히 반복문을 통해 답을 구하는 방법입니다. 비트 마스크(Bitmask) 2진수를 이용하는 컴퓨터의 연산을 이용하는 방식입니다. 재귀 함수 재귀 함수를 통해서 문제를 만족하는 경우들을 만들어가는 방식입니다. 무한루프에 빠질 수 있..

리액트 에러 발생 React server를 실행하고 있을 때, 콘솔에서 에러 코드가 나오지만 웹페이지에서도 콘솔창과 동일한 에러 코드가 나옵니다. 에러코드와 함께 해결할 수 있는 방향을 제시해줍니다. 해당 에러 코드 조각과 해결 방안을 통해 프로그램을 디버깅* 할 수 있습니다. 이렇기 때문에 항상 콘솔에 나오는 에러 코드를 확인해야 합니다. 자주 발생하는 에러 JSX 요소 규칙 JSX로 작성한 요소를 하나의 루트 요소로 감싸주어야 합니다. 이때, 쓸모없는 태그로 감싸줄 시 디자인 요소에 방해가 될 수 있습니다. 이것은 React.fragment()를 사용하여 하나의 루트 요소로 감싸주어 에러를 해결할 수 있습니다. 함수명 오타 State를 관리하는 함수를 자주 사용해야 하는 만큼 함수명이 많아짐에 따라 ..

📌 웹 표준과 SEO는 개념을 알고 있긴 하지만 살짝 알고 있을 뿐이고 기술 면접에서 자주 나오는 부분이니 열심히 암기해야 하는 학습이다.! 📗 오늘 학습한 내용 인터넷 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 웹 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 웹 표준 W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떤한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작기법 웹 표준에 맞게 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 웹 표준의 장점 유지 보수의 용이성 웹 호환성 확보 검색 효율성 ..

📌 어제 배운 내용의 React Redux를 사용한 과제를 다시 한번 복습하는 차원에서 푼다음에 파일의 전체적인 구조에 대해서 페어님과 함께 차근차근 뜯어보는 시간을 가졌습니다. 작은 쇼핑몰에서 물건을 장바구니에 담고 삭제하는 페이지였지만 많은 state와 컴포넌트가 존재하였고 어떻게 하나하나 작은 단위로 컴포넌트를 만들어야 하는지에 대해서 감을 익히는 시간이 되었습니다. 다음에 프로젝트를 하게 된다면 꼭 컴포넌트 분리를 작업 단위로 나눠서 재사용성을 높일 수 있도록 작업을 해야겠다는 마음가짐을 다시 잡는 하루였습니다!! 📗 오늘 학습한 내용 React-Redux Action을 정의하는 과정에서 Dispatch를 사용하여 Action안에서 Reducer를 실행 할 수 있도록 하는 것을 깨달았습니다. 물론..

📌 Redux 상태 관리 라이브러리를 실습하는 날이다. 어제는 prop를 남발하여 prop drilling이 생겼다는 것을 알 수 있었다. 하지만 React-Redux를 사용하게 될 경우 store(상태 저장소)에서 상태를 관리(갱신, 수정, 삭제 등)를 하고 있기때문에 위의 문제점을 해결할 수 있다는 것을 알았고, Redux를 실제로 사용해보며 손에 익힐 수 있는 시간이 되었다!! 📗 오늘 학습한 내용 Redux 상태 관리 라이브러리 (React 없이도 사용 가능) 컴포넌트와 상태를 분리하는 패턴 상태 변경 로직을 컴포넌트로부터 분리하여 단순한 함수 컴포넌트를 만들 수 있게 해준다. Redux를 사용하는 이유 모든 컴포넌트에서 prop 없이 state를 직접 꺼낼 수 있다. 상위 컴포넌트에서 하위 컴포..

📌 오늘도 어제와 같이 너무 너무 더운날이다!! 하지만 에어컨과 함께라면 공부하는데 전혀 지장이 없다 😀 😀 오늘은 Redux를 배우기전에 상태관리를 왜 하는지 학습하고 Redux를 미리 학습해볼 예정이다.(이미 학습 해본건 안비밀) 📗 오늘 학습한 내용 프론트엔드 개발 상태관리 상태: UI에 동적으로 표현될 데이터(변하는 데이터) Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 대표적인 예: 네트워크 요청 (백엔드 API 요청) 로컬: 특정 컴포넌트 안에서만 관리되는 상태 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터 (input box, select box 등) 전역: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 다른 컴포넌트와 상태를 공유하고 영향을..

📌 React에서 사용하는 styled component를 더욱 잘 사용할 수 있게 되었고, UI 패턴 구현을 할 수 있고 어떤 형식으로 이루어지는지 잘 알 수 있는 시간이었습니다. 📗 오늘 학습한 내용 Styled Component를 사용한 UI 패턴 구현 Autocomplete Component (자동완성 구현) ClickToEdit Component (input focus 구현) stopPropagation 이벤트 버블링을 해결 할 수 있다. 인벤트 버블링: 자식 태그를 감싸고 있는 부모 태그를 클릭 시 자식 태그도 이벤트에 반응하게 되는 현상. 📘 추가로 공부할 내용 [udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기) 📝 중요한 내용 useRef Styled Com..

Redux? Redux는 전역 상태 관리 라이브러리이다. Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다. Redux를 사용하는 이유 1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다. 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용 state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다. 2. 상태(state) 관리하기 용이하다. 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌..