https://velog.io/@mageboy 로 이사합니다!

Intro - 맨처음 - 는 not directory, or directory임 그다음 세개 rwx x 3 는 각각 read permission, write permission, execute permission 임 3번 반복하는 이유는 처음에는 사용자와 그룹 나머지에 대한 권한 차이임 그니까 helloworld.js는 나는 r w 가 가능 하고 나머지는 r 만 가능하다는 뜻 read: 파일의 내용을 보는것! execute: 파일을 실행만 하는 것! user, group, and other user user는 파일의 소유자. 기본적으로 파일을 만든 사람이 소유자가 됨. group group에는 여러 user가 포함될 수 있음. 그룹에 속한 모든 user는 파일에 대한 동일한 group 액세스 권한을 가짐..

✍ 오늘 공부에 대해 리액트에서 상태를 컨트롤할 수 있는 리액트 리덕스에 대해 배움 확실히 props들을 전달하여 문법을 적는것보다 상태 관리가 편리하고 쉽다. 내가 전에 했던 공부들을 왜 할까 싶었는데 그 과정속에서 불편함을 개선할 수 있는 부분들을 점차 배우니까 점점 재밌어진다. 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 오랜만에 재밌는 스프린트와 공부 했음! 💦 부족했던 것(Lacked) : 페어와의 소통??? 🕯 바라는 것(Longed for) : HA 화이팅! 📄오늘의 띵언 매일 행복 할수는 없어. 하지만 행복한 일은 매일있어.

Intro - React에서 State는 Class component안에서 관리함. 그런데. 근데 이러면 상태관리가 매우 복잡해지겠지? 그래서 나온게 리덕스 Redux의 기본 개념 : 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. 데이터를 저장하는 '하나의 공간'이 있다. 2. State is read-only usestate처럼 action이라는 객체를 통해 변경가능 3. Changes are made with pure functions 리듀서와 관련 Store 컴포넌트와 별개로 상태가 관리되는 오직 하나의 공간. Action 자바스크립트 객체임. { type: ‘ADD_TO_CART’, payload: request } -type..

- Redux 스프린트에서는 컴포넌트와 상태를 분리하는 패턴을 배움. 뭔가 구현해내는 것보다 원리와 구조, 즉 설계를 알아가는데 포커스를 두자. 참고로, Redux에 대한 대표적인 오해 중 하나가, Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리로 오해하는데, Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리입니다. Before you learn 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이에 대한 이해 props와 state의 개념 props의 특징과 전달 방법, 규칙 이해 React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다. React에서 하위 컴포넌트에서 이벤트가 발생했을 경우, 부모 컴포넌트의 상태를 변경하는 방법에 대한 이해 rea..

intro React가 상태 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된 구조적으로 아름다운 코드를 작성할 수 있음. - 상태란? UI에 동적으로 표현될 데이터 프론트엔드 개발에서의 Side Effect Side Effect란? 함수(또른 컴포넌트)의 읩력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청 API 호출 React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것이다. 만약 그림과 같이 이라는 컴포넌트를 만든다면, fetch와 같은 API 요청이 없이도 이 컴포넌트는 작동되어야 한다. 어떤 데이터가 들어오는지 상관하지 않고 설사 데이터가 가짜 데이터라 할지라도 컴포넌트..

Read Me 소요시간 : 1 min Achievement Goals 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다. Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다. Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다. Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다. Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

1. 태그 셀렉터(Type Selector) 규칙: 태그이름 설명: 지정된 태그명을 가지는 요소를 선택합니다. HTML CODE Q. Select the bento boxes CSS CODE bento { } 2. ID 셀렉터(ID Selector) 규칙: #id이름 설명: id값을 선택하는 셀렉터입니다. id는 html에서 중복되어 사용할 수 없습니다. Q. Select the fancy plate CSS CODE #fancy { } 3. 자손 선택자( Descendant Selector ) 규칙: A B 설명: A안의 모든 B를 선택함. 띄어쓰기 하나 있음. ID 셀렉터 등 여러 요소와 결합시킬 수 있음 HTML CODE Q. Select the apple on the plate CSS CODE pl..

flex flexible-box를 사용할 수 있는 display 속성이다. 각각의 요소들을 item으로 보고 item들을 효과적으로 정렬하고 배치할 수 있도록 도와주기 때문에 flex를 잘 이해하고 습득하면아주 효과적인 웹 페이지를 만들 수 있다. flex는 두 가지 관점에서 볼 수 있는데 하나는 부모 역할을 하는 container 입장이고, 두 번째는 각각의 container 안에서 자식 역할을 하는 item 입장 이다. 먼저 container 입장에서 사용할 수 있는 속성을 알아보자. Container 1. flex-direction flex-direction은 안에 있는 item들을 정렬할 때 가로로 정렬할지 세로로 정렬할지를 선택할 수 있다. 정방향 가로정렬이 기본값이다. .container { ..

intro 지금까지 React를 공부하면서 익히셨던 내용을 돌이켜보면 React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었음. DOM 지식이 필요 없다고 생각하실지도 모르겠지만 React로 모든 개발 요구 사항을 충족할 수는 없음 아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우가 있음. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있음. 아래 예시 코드처럼 작성하시면 주소값을 활용할 수 있음. const 주소값을_담는_그릇 = useRef(참조자료형) // 이제..

Motivation - Styled Component Styled Component(이하 SC)는 React 라이브러리임. CSS의 성능 향상을 위해 탄생함 이를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있음 예를 들어 SC를 이용하면 애플리케이션 내에 다른 웹페이지로 이동하는 기능을 가진 Button 을 하나 만들때 아마도 아래 코드와 같을거임. const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; `; 이는 기존의 학습했던 것과 거의 같음. - SC의 특징은 아래와 같음 Automatic crit..