전체 글

응 맞다! styled-component는 웹표준을 향상시킨다. 왜 그럴까? styled-components가 웹표준을 해치지 않는 이유는, 결국 styled-components가 생성하는 스타일 코드는 일반적인 CSS와 동일하기 때문이다. 생성된 CSS는 HTML 문서 내의 태그에 포함되며, 웹 브라우저가 이를 해석하여 렌더링한다. 아주 똘똘한 녀석이다 난 아직 styled-component 사용이 어색하니 오늘 과제한 내용을 포스팅 해보겠다. styled-component가 뭔데? styled-component는 리액트에서 css스타일을 작성하고 관리하기 위한 라이브러리 이다 기존의 css를 사용하는 방법과 달리, 'styled-components' 는 javascript 코드내에서 css 스타일을 ..

웹표준이란? 2000년대 초에는 인터넷 익스플로러에서는 작동이 되어도 사파리나 파이어폭스 같은 다른 브라우저에서는 작동이 되지 않는 등 브라우저간 호환이 되지 않아서 댓글을 못 다는 정도가 아니라 화면이 아예 정상적으로 나오지 않는 일도 있었습니다. 이를 막고, 웹을 정상적으로 구동시키기 위해서는 개발자들이 각 브라우저마다 따로 개발을 해주어야만 했습니다. 이런 수고를 없애고 웹 개발의 형식을 통일시킨 것이 바로 웹 표준이라고 합니다 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있습..

최근에 redux를 배웠는데, Reducer 부분에 잠깐 등장했던 switch 문법에 대해서 다뤄보려고 합니다. 정말 간단한 포스팅입니다. 쉬어가기... Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수입니다. 다음은 Reducer에서 switch 구문을 활용한 예시입니다. 아래 보이는 것처럼 Reducer는 Action 객체의 type 값에 따라 분기하는 switch 조건문을 사용하고 있습니다. const count = 1 // Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다. const counterReducer = (state = count, action) => { // Action 객체의 type 값에 따라 분기하는 swit..

코딩 입문자들이 코딩을 어려워 하는 이유는 크게 2가지라고 생각한다 첫번째, 긴 코드를 볼때 어디서부터 읽어야 할지 모른다는 점 두번째, 오류가 있을때, 어디서 오류가 생겼는지 모른다는 점 이 두가지 원인때문에 몇시간이고 머리를 싸매면서 괴로워하는데,,, 그러다가 번아웃이 쉽게 온다아ㅏ 그리고 나는 코딩을 못하는 구나... 크흡 라고 말하며 좌절감에 눈물을 훔치게 된다. 이미 코딩을 좀 하는 인간들은 이해를 못하겠지만, 나처럼 아직 노하우를 터득하지 못한 사람들에게 조금이라도 코딩을 수월하게 만들어줄 이야기를 해보려고 한다 앞서 두가지 문제를 해결하는 방법은 무엇일까? 첫번째, 긴 코드를 볼때 어디서부터 읽어야 할지 모른다는 점 => 순차적으로 읽는다 두번째, 오류가 있을때, 어디서 오류가 생겼는지 모른..

Redux 란? Redux는 리액트 애플리케이션에서 상태를 관리하기 위한 상태관리 라이브러리 입니다 Redux를 사용하면 전역 상태를 관리할 수 있으며, 이는 여러 컴포넌트에서 사용되는 데이터를 쉽게 공유하고 업데이트 할 수 있도록 해줍니다 Redux의 핵심개념은 "store", "reducer", "action" 입니다 store은 애플리케이션의 전역상태를 저장하는 객체이며, action은 상태를 업데이트 하기 위한 객체입니다 reducer은 action에 따라 상태를 어떻게 업데이트 할지 정의하는 순수함수 입니다 Redux를 사용하면 컴포넌트에서 store에 있는 데이터를 읽고, action을 dispatch 하여 상태를 업데이크하고, reducer를 통해 새로운 상태를 반환받을 수 있습니다 이를 통..

일주일동안 공부한 내용은? CDD 과제 복습 + git 다루는법을 익힘 1. props와 state의 차이점 정리 props로 state를 전달할 수 있다 props는 전달해주는 매개 (state, state 변경함수, 함수, 변수 모두 전달가능) 2. React Custom Component 만들기 (자동완성, autocomplete) 전체적인 구조를 그림으로 그려보기 구조파악 3단계 3. localStorage로 만드는 최근 본 상품 저장하기 useEffect 안에 JSON.stringify와 JSON.parse 사용하기 4. Git 다루는 법 공부중 코딩애플 강의 들으면서 Git branch 만들기 Git 다양한 merge 방법 ( 3 way, fast-forward, rebase&merge, sq..

React Custom Component 중에서 가장 난이도가 높았던 autocomplete이다. 상당히 코드가 길고 관련있는 함수와 state들이 섞여있어 처음부터 감을 잡기가 어려웠다. 하지만, 포기할 수는 없지 될때까지 하는 스타일인 나는 하나하나 코드를 뜯어보며 이해하기로 했다 어떤 리액트 코드를 볼때, 그 코드를 보고 바로 구조를 잡기란 쉽지 않다. 그래서 3가지 기준을 가지고 구조를 파악한다 첫번째, 컴포넌트끼리 tree 구조를 만든다 두번째, state가 어디서 정의되어서 어디로 흐르는가? 세번째, 함수가 어디서 정의되어서 어디로 흐르는가? 이 3가지 기준을 고려하면서 간단한 그림을 그려보았다. (쉽지는 않았다... 애썻다 내자신) 코드는 너무 기니까, styled component와 rea..

요즘에 과제를 하면서 점점 코드가 길어지니까 어지러워지는 느낌이예요. 특히 코드가 길고, 파일이 여러개 있을때는 전체적인 구조를 파악하는 것이 중요한데요. 오늘 과제는 그림도 그려보면서 전체적인 구조 파악에 중점을 둬서 보도록 하겠습니다 구조파악 3단계 1. 컴포넌트 기준으로 tree 구조 작성 2. state가 어디서 정의되고, 내려오고 있는지 3. 함수가 어디서 정의되고, 내려오고 있는지 1,2,3 번을 보여주는 간단한 그림을 그려봤습니다 컴포넌트만 속속 골라서 부모 자식관계에 따라 tree 구조도를 그려보았습니다. (크롬 익스텐션 사용하는 것도 좋음) 자식컴포넌트 어떻게 찾냐구요? 리턴문에 가서 찾는다! App 이라는 부모 컴포넌트에서 자식 컴포넌트인 ItemListContainer, Shoppin..