Homile

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

📌 웹 표준과 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..

📌 오늘은 스터디원과 페어가 되었다!!! 조금은 편안하게 페어활동을 할 수 있을 것 같다!! 내가 잘 하지 못하는 css의 영역이기 때문에 이전날 css를 최대한 공부해서 다행이다...😀 📗 오늘 학습한 내용 Styled Component를 사용한 UI 패턴 구현 Modal 구현 Toggle 구현 Tab 구현 Tag 구현 [udemy] React 완벽 가이드 강의 className도 prop으로 넘겨줄 수 있다. 📘 추가로 공부할 내용 [udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기) 📝 중요한 내용 Styled Component 사용 ``(백틱)으로 감싼다.

📌 CDD에 대해서 학습하는 날이다.. 요즘 비가와서 그런지 기분이 한층 다운된 상태로 유지하고 있다... 조금 더 힘내서 기운을 되찾아서 열심히 해보자!!! 📗 오늘 학습한 내용 CDD (Component Driven Development) 기획자가 이전에 요청 받았던 기능을 똑같이 사용하도록 요청했다. 이때, 팀에서 같은 UI 컴포넌트를 공유한다면 고민하지 않고 컴포넌트를 재새용 할 수 있는 방법론이 CDD이다. 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 하는 것. CSS in JS 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업할 팀원 수도 많아지면서 CSS를 작성하는 일관된 패턴이 없어서 효율적으로 작업하기 위해 구조화된 CSS가 필요해졌다. 위의 문제점을 해결하기 위해 나온것이 CSS ..

📌 오늘은 피그마를 하는 날이다!!!!!!!!!!!!!!!!!! 페어분이랑 마켓컬리를 피그마로 클론해보았다! 📗 오늘 학습한 내용 와이어프레임(wireframe) 선으로 틀을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목저으로 만든다. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어 프레임 Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다음어주는 프레임 High Fidelity Wireframe (Hi-Fi Wireframe) 와이어프레임을 완성본에 가깝게 작성한 프레임 프로토타입 실제..

📌 장마철이 시작하고 거의 매일 비가 온다고 하네요... 비 오는건 좋지만 나가고 싶지 않으니 집에서 코딩만 ㅎㅎ 그럼 오늘은 UI. UX에 대해서 알아보는 시간이네요!! 화이팅!! 📗 오늘 학습한 내용 UI (User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 화면상의 그래픽 요소외에도 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. GUI (Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 말한다. 운영체제의 화면, 애플리케이션의 화면이 GUI이다. UX (User Experience, 사용자 경험) 사용자가 어떤 시스템..