리액트 7

항해99 3기 후기

* 항해 새기수 열릴때마다 이 글 조회수 높아지는데 말이죠, 최근 기수랑 저 달리던 3기까지는 많이 다를 수 있습니다! 왜냐하면 저희 기수도 1기, 2기의 문제점을 보완해서 이전 기수랑 꽤 달랐고 들리는 소문으로는 최근에는 들어갈때부터 뭔가 테스트 보신다면서요..? 저흰 그런거 안하고 ㄹㅇ 코딩 1도 안써보신 분들 많았구 저도 프론트 1두 모르는 상태로 시작함 ㅋㅋ 그래서 이 글보다는 최대한 최신 후기를 찾아보시는걸 ㅊㅊ드립니다 두둥둥장. 토요일에 백신 3차 맞고 기절했다가 드디어 후기 씀. 음~ 목챠.. 1. 이거 왜 했음? 2. 협업 어땠음? 3. 실전프로젝트 어땠음? 4. 취업 어케됨? 5. 항해 하면서 뭐 얻음? (400마넌 값을 함?) 목차 이럭게 됨. 하나하나 써볼거임. 시작. 1. 이거 왜 ..

React styled-component 형제버튼들 중 하나만 클래스 줄 때

상황 -리액트로 styled-component를 사용하여 버튼 커스텀 styled-component를 사용하지 않고 일반적인 버튼태그() 로 사용하는 경우, 그리고 버튼태그에 기본클래스, 선택한 태그에 넣을 클래스 이 두가지만 있거나 선택한 태그에 넣을 클래스만 필요한 경우에는 아래와 같이 하면 된다. const 함수 = (e) => { const siblings = t => [...t.parentElement.children].filter(e => e != t); siblings(e.target).map((x)=>{ x.setAttribute('class',''); }); e.target.classList.add("on"); } const siblings = t => [...t.parentElement..

[항해뀨 3기] 4주차 회고

벌써 4주차라고..??? 와... 이번 주차에는 수요일까지 리액트 심화반 강의를 듣고 목-금 매운맛 과제 빡세게 하다가 제출, 토요일에는 과제 개선! 오늘은..좀 쉬었다 ㅎㅎ..ㅋㅋ.. 깃허브 https://github.com/jjubbu/React-Calendar GitHub - jjubbu/React-Calendar: 항해 99 3기 3주차 과제 (매운맛) - 달력 만들기 항해 99 3기 3주차 과제 (매운맛) - 달력 만들기. Contribute to jjubbu/React-Calendar development by creating an account on GitHub. github.com 사이트 https://seona-react-calendar.web.app/ React App seona-rea..

14_[항해99 3주차 React 심화]_2021.10.09

오늘의 공부 배열에서 하나 삭제할때 .splice(삭제할 요소의 index, 1) 여기에서 1은 index에서부터 몇번째까지 삭제할지의 설정이며 index값에 맞는 요소는 1번째로 계산된다. 오늘의 작업 리액트 캘린더 개선 - 상세 창에서 일정 하나 삭제시 하위 일정들이 사라지는 문제 해결 - 일정 추가창에서 일시/내용 중 하나라도 입력값이 없을경우 alert 창이 뜨고 dispatch 되지 않음! - 완료된 일정만 보기/진행중인 일정만 보기 버튼 눌러서 토글 const list = useSelector(state => state.schedule.list); let onlyIngList = list.filter((event)=>event.done ===false); let onlyDoneList = li..

TIL 2021.10.09

[항해뀨 3기] 주특기 회고의 날 W.A. 기반 TIL

기본 질문 ▶ s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요? 리액트는 SPA(Single Page Application), 즉 한개의 페이지로 이루어져있어서 S3서버에서는 index.html 파일 하나만 있다고 인식한다. 이를 해결하기 위해서 s3설정시 에러가 났을때의 문서를 index.html로 해놓으면 오류가 발생해도 index.html로 돌아가 제대로 동작한다. ▶ 리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요? 리액트는 한개의 페이지로 이루어져있어 index.html 자체에 넣을 수 있는 OG태그는 사용에 한정이 있으나, react-helmet 을 이용하면 각 페..

[항해뀨 3기] 2주차 회고

저번주차 회고에는 팀프로젝트가 기대된다고 적었지만.. 아쉽게도 이번주차는 팀프로젝트가 아니었다!! 개인별로 주특기 강의를 듣고 개인 과제를 하는 2주차. 나는 당연하지만..React! 팀이 나누어져있긴하지만 서로 돕기 편하다는 것 외엔 큰 의미가 없었다. 앞선 기수분들은 어떤지, 다른 주특기분들은 어떤지 모르겠지만 리액트쪽은 팀에 큰 상관없이 서로 대화 좀 해본 사람들끼리 질문이 오고가는듯? 내 경우에도 같은 팀원분들보다 이전에 휴게실에서 대화 좀 해본 분들이나 내가 직접 가서 도움을 드리겠다 한 경우 외엔.. 음, 팀원사이에서 질문이 오고간적이 별로 없는듯하다! 내가 궁금한것이 생기면 보통 검색으로 90퍼센트는 해결하고 그 외에는 실무관련이나 좀 더 깊은 정보였기에 슬랙에서 여쭤봤다. 아무튼, 이번 주..

스파르타 코딩클럽 React 리액트 기초반 1~3주차 후기

정리보단 후기로 들어오는 사람이 있을거같아서 후기부터 조신하게 적고 정리는 따로 글을 생성하겠습니다.. 리액트를 공부하기위해 필요한 지식은 다음과 같습니다. HTML CSS Javascript (바닐라 = 순수 자바스크립트) "필요한 지식 아무것도 몰라요" 생활코딩의 WEB1부터 듣는걸 추천드립니다. https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 자바스크립트의 경우, es6버전의 자바스크립트에 대해 핥아먹어보는 ..