프론트엔드 가보자GO 프론트엔드 가보자GO

저번주에는 리액트 입문과정으로 순수바닐라자바스크립트만을 사용해서 웹사이트를 만들었을때보다 강의도 이해하는데 큰 어려움도 없었고 재미도 있었다 역시 입문이라 그랬나보다,,ㅎㅎ껄껄 이번주에는 숙련과정으로 드디어 리덕스를 배웠는데 확실히 리액트를 사용할때 데이터를 관리하기 위해서는 리덕스가 필수인 개념은 이해가 간다 하지만 강의를 듣고 돌아서면 리덕스를 직접 적용할때 너무 어려워서 길을 한참 헤맸다.. 기한에 맞춰 과제를 겨우 끝내고 복습할 시간은 주말밖에 없기 때문에 드디어 주말동안 리덕스를 다시 공부하면서 이제서야 조금씩 개념이 이해가 되고 있는것 같다... 공부 방법에 대해 항상 고민하면서 매니저님께도 상담 요청했는데 유튜브에 리덕스 튜토리얼 영상도 많이 나와있으니 여러번 반복해서 코드 작성해보는것이 좋..

💡두가지 형태의 모달창 만들기 모달버튼 A : 닫기, 확인버튼이 있고, overlay를 클릭했을 때 모달이 닫히지 않는 형태 모달버튼 B : 닫기 버튼만 있고, overlay를 클릭했을 때 모달이 닫히는 형태 css는 styled-components 적용 👉모달 상태 설정하기 const [isModalA, setIsModalA] = useState(false); const [isModalB, setIsModalB] = useState(false); 1. useState 훅을 사용하여 isModalA와 isModalB라는 두 개의 상태를 설정한다 2. 초기값으로 false가 설정 ▷boolean 값 설정이유 : 모달이 열려있는지를 나타낸다 👉모달 열고 닫는 이벤트 추가 //Modal A const open..

📌React Router Dom란? : 페이지를 구현할 수 있게 해주는 패키지 ex) https://www.tistory.com/ ( / 뒤에 오는 주소가 route) 👉 패키지 설치 명령어 yarn add react-router-dom 👉 React Router Dom 순서 1. 페이지 컴포넌트 생성 → 다중 페이지 src폴더 > pages폴더 > ex)Home.jsx , About.jsx, Work.jsx 2. Router.js 파일 생성 , router를 구성하는 설정 코드 작성 src폴더 > shared폴더 > Router.js 3. App.jsx에 import 및 적용 👉코드 작성법 1. 페이지 컴포넌트 생성 → 다중 페이지 src폴더 > pages폴더 > ex)Home.jsx , About.j..

📌Redux란? : 를 사용할 수 있게 도와주는 패키지(라이브러리) 리덕스는 전역상태 관리 라이브러리 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성 useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다. ✅ 리덕스를 사용하면State를 공유하고자 할때 부-모 관계 컴포넌트를 거치지 않아도 된다. ▷컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 👉 리덕스 설치 명령어 yarn add redux react-redux 👉리덕스 설정 순서 1. 리덕스 패키지 설치 2. 폴더구조 생성 src폴더 > redux폴더 >config, modules 폴더 3.파일 생성 ㆍconfig 폴더 > co..

🤓오늘 공부한 내용 📌useState 기본 적인 hook 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 형태 : const [state, setState] = useState(초기값) ⇒ [state, setState] 는 useState가 return하는 값이 배열이고, 그 배열을 구조분해할당으로 받은 것 👉setState를 사용하는 방식 // 기존에 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); ▷함수형 업데이트 방식 ( )안에수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성 // 함수형 방식 예시) // 현재 number의 값을..

📌CSS-in-Js방식 : 자바스크립트 코드로 css 작성 → 컴포넌트 꾸미기 가능 (styled Components 패키지 사용) *이전 스타일링 방식 : 컴포넌트 생성→ css파일 생성 후 import → html태그마다 className부여→ 작성 👉styled-components 사용방법: VScode-styled-components 플러그인 설치→ vscode 터미널 (yarn add styled-components) 패키지 설치 →styled import 👉styled-components 사용 예시) import "./App.css"; import { styled } from "styled-components"; //import 필수 const StBox = styled.div` width: ..

이번주는 드디어 주특기 리액트를 배웠다 리액트도 입문, 숙련, 심화 3단계에 걸쳐서 배우게 되는데 이번주는 입문주차라 그런지 저번 자바스크립트 수업때보다 이해하기가 훨씬 쉽고 재미있었다. 그래도 자바스크립트 기본 문법들을 알아야 수업내용을 이해할 수 있기때문에 자바스크립트 기초가 더 탄탄해야 할 것 같다. 기본 강의 말고도 혼공스 책도 열심히 공부하고 꾸준히 직접 프로젝트를 만들면서 속도는 느리지만 조금씩 이 로직들이 이해가 가는게 신기하고 재밌는것 같다. 내가 살면서 코딩을 할 일이 있을까 생각했는데 공부를 하면 할 수록 지식이 쌓이고 있다는 성취감과 재미가 있어서 놓지않고 계속 하게되는것 같다. 출발이 남들보다 느리다고, 실력이 뒤쳐진다고, 내용을 이해하기 어려워 답답하고 초조했던 지난 한달보다 지금..

💻구현해야 할 기능 Todo 완료 상태 변경하기 (완료 ↔ 진행중) ▷Todo의 isDone 상태가 true : 버튼의 라벨을 취소 isDone 상태가 false : 완료로 조건부 렌더링해야함 ▷Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현 🤓오늘 공부한 내용 📌Todo 완료,취소버튼 추가하기 1. Todo의 상태에 따라 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현하기 위해 📌Working섹션에는 완료버튼을, ✅Done섹션에는 취소 버튼을 추가해줘야한다. 2. 완료,취소 버튼을 클릭하면 수행하는 함수 추가 👉clickChangeButtonHandler 버튼핸들러는 해당 Todo 항목의 isDone 상태를 토글하는 역할 ("토글"..