코딩일기

2023-06-26(월) 개념학습 네이버나 구글 같은 검색 엔진을 이용해 보신 경험, 다들 있으실 겁니다. 그리고 검색했을 때 원하는 결과를 바로 찾기 어려웠던 경험 역시 한 번 정도는 있으실 겁니다. 반대로 검색하여 원하는 결과를 찾았는데 굳이 마지막 페이지까지 매번 보시는 분은 잘 없으실 거라고 생각되는데요.심지어 원하는 결과가 상위에 있다면 1 페이지조차 전부 확인 안 하고 넘어가는 경우가 대부분일 것입니다. 즉, 우리가 이렇게 열심히 공부해서 웹 페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버립니다. 이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업, SEO(Search Engine O..

크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다. 여기에서 중요한 포인트는 ‘동일한’이 아니라 ’동등한’이라는 표현을 쓴다는 것입니다. 크로스 브라우징은 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것이 아닙니다. 애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능합니다. 따라서 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있습니다. 여러분은 아마 크로스 브라우징이 되지 않아 불편했던 일을 한번씩은, 어쩌면 아주 많이 겪으셨을 수도 있습니다. 바로 한국에서 인터넷 익스플로러(Inter..

2023-06-26(월) 1. 인라인 요소 안에 블록 요소 넣기 HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉩니다. 인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지하며. 대표적인 인라인 요소로는 , 블록 요소로는 가 있습니다. 인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안 됩니다. 보통 특정 요소가 인라인 요소인지 블록 요소인지 정확하게 알지 못할 때 이런 실수를 하게 됩니다. // h1, div 요소는 블록 요소이고, // label, span 요소는 인라인 요소입니다. 나쁜 예시 1 나쁜 예시 2 2. , 요소 사용하기 요소와 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소입니다. 하지만 웹 표..

2023-06-26(월) Chapter1-1. 웹 표준의 개념 웹 표준이 무엇인지, 왜 알아야 하는지 알아보기 전에 '웹'이란 무엇인지 알아보겠습니다.웹이라고 하면 인터넷을 떠올리거나 웹페이지를 생각하는 분들이 많을텐데 그렇다면 아래에 내용은 정답일까요? 🤔 인터넷은 웹 기반으로 작동한다. ( O / X ) 정답은 X입니다. 인터넷이 웹보다 좀 더 포괄적인 개념이기 때문입니다.인터넷은 '전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망'을 의미하며, 웹 뿐만 아니라 온라인 게임, 모바일 앱,이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함합니다. 그렇다면 웹은 무엇일까요? 여러 가지로 표현할 수 있겠지만, 두 글자로 정의한다면 '공간'으로 정의할 수 있습니다. 문서, 이미지, 영상 등 다양한 ..

2023-06-22(목) 이 전까지 Props Drilling을 배우고 직접 상태를 내려 다루기 위해 컴포넌트 안에서 변경 로직이 복잡하게 얽혀있는 경우가 많았습니다. 그러나 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트를 만들 수 있게 됩니다. 이번 유닛을 통해 Redux가 무엇인지, 왜 생겨났는지, 구조는 어떤지에 대해 알아봅시다. 또한 Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리라는 대표적인 오해가 있는데, 전혀 아닙니다. Redux는 React 없이도 사용할 수 있는 상태 관리 라이브러리임을 알아둡시다. Redux 아래 사진과 같은 구조의 React 애플리케이션이 있다고 생각해 봅시다. 이 애플리케이션은 컴포넌트3, 컴포넌트6에서만 사용되는..

2023-06-21(수) ✅ useState 를 이용해 상태를 사용하는 방법을 학습합니다. ✅ [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요. ✅ 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요. ✅ 장바구니의 상품 갯수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 갯수가 업데이트되도록 구현하세요. 이번 과제는 상품리스트와 장바구니를 이동하며 장바구니 담기 버튼을 클릭 시 장바구니안에 해당 아이템이 담기는 작동을 하는 것과, 장바구니 안에서 해당 카트아이템을 삭제하고, 상품 갯수를 업데이트 하는 작동을 구현하는 것이었다. 제일 상위 폴더인 app.js에 이미 작성되어 있는 정보들을 각각의 컴포넌트에 내려줘서 문제를 해결하는 방식이다. cons..

props Drilling은 상위 컴포넌트에서 하위 컴포넌트로 props를 내려 하위 컴포넌트에 state를 전달하고자 하는 현상에서 굳이 state가 필요없는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미합니다. 위 그림처럼 d에게 state를 전달하기 위해 b,c를 거치며 props를 전달해야하는 과정입니다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않습니다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생합니다. 코드의 가독성이 매우 나빠지게 됩니다. 코드의 유지보수 또한 힘들어지게 됩니다. state 변경 시 Props 전달 과정에서 불필요하게 관여..

2023-06-21(수) 프론트엔드 개발에서의 상태 관리 상태란 무엇일까요? -> 상태는 변하는 데이터입니다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터" 입니다. 위의 쇼핑몰 홈페이지에서 상태는 어떤것들이 있을까요? 장바구니 담기 , 금액 , 선택한 수량 , 선택 여부, 현재 선택한 탭 등이 있을 수 있죠 여기서 사용자의 선택에 따라 상태가 변경되는 곳과, 변경의 영향을 받는 곳 2가지로 나누어 볼 수 있습니다. 변경되는 곳은 어디일까요? -> 선택 여부, 수량등이 있습니다. 영향을 받는 곳은 어디일까요? -> 금액, 개수 등이 있을겁니다. 전에 학습했던 Side Effect를 다시 알아봅시다. 상태를 다룰 때에 Side Effect는 주요 고려 대상입니다. 먼저 Side Effec..