스파르타코딩클럽 내일배움캠프 4기 React 트랙 수료 후기

내일배움캠프 4기 React 트랙을 수료한 지 3개월 정도 지난 시점에서 캠프에 참여하며 느꼈던 부분을 후기글로 작성해보려 한다. 나도 코딩 국비지원 고민하면서 후기글 검색을 엄청 했었기 때문에 같은 고민을 가지고 계신 분들에게 조금이라도 참고할 수 있는 정보가 되면 좋겠다! 1. 내일배움캠프를 참여하기 전 백그라운드 일단 나는 비전공자, 노베이스 상태로 내일배움캠프에 참여했다. 대학교를 졸업하고 전공을 살리고 싶지는 않고, 내가 하고 싶은 게 뭘까 고민하다가 코딩에 관심을 가지게 되었다. 뉴스에서 개발자가 연봉도 많이 받을 수 있는 굉장히 유망한 직업으로 소개하길래 개발자는 어떤 일을 하는 걸까 궁금함에서 시작해서 관심을 가지게 되었던 거 같다. 2. 개발자가 되기로 결심한 이유 코딩에 관심을 가진 후..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 6. 19.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.13_최종 발표회 및 수료식

최종 발표회와 함께 내일배움캠프 React 트랙이 마무리되었다. 앞으로 취업 지원 기간이 남아있긴 하지만 동기들과 함께 배우면서 코드 짜는 게 재밌었기 때문에 아쉽기도 하다~ 최종 발표회 저녁 7시부터 2시간 동안 진행된 최종 발표회. 협력사에서는 오신 경우는 거의 못 봤고 주로 내배캠이나 항해99 선배님들이 부스에 방문해서 프로젝트에 대한 질문을 해주셨다. 현업에서 일하는 방식이나 이력서 작성 방법 등 유익한 얘기를 많이 해주셔서 즐거운 시간이었다! 혹시 나도 나중에는 저렇게 현업에서 일하면서 후배들에게 멋있게 조언을 해줄 수 있는 위치가 될 수 있을까 잠시 상상을 해보기도 했다 ㅋㅋ 근데 기술적 질문에 대해 답을 한다는 게 정말 쉬운 일이 아니라는 걸 느꼈다. 오늘은 프로젝트 준비하느라 준비가 너무 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 14.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.11

setState를 props로 넘길 때 type 지정하기 해당 setState에 마우스를 올리면 타입이 뜬다. 이걸 복사해서 type 값으로 넣어주면 된다. interface를 하나 만들어서 setState에 복사한 내용을 넣는다. 그리고 Dispatch와 SetStateAction은 따로 import를 해주어야 한다. 그리고 props에 이 interface를 이용해서 타입 지정을 한다. 회고 typescript any 제거 프로젝트🫠 102개에서 겨우 88개로 줄였다..... 오전에 분양모음집 확인하는데 갑자기 아파트 매매 실거래가 불러오는 API가 404가 떠서 심장이 철렁했다. 나 분명히 아무것도 안 건드렸는데 뭐지...? 하다가 다행히 국토교통부에서 점검(?)으로 인해 API 제공이 중단될 수 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 11.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.10

그동안 최종 발표를 준비하면서 정신이 없어서 TIL을 올리지 못했다.🥹 그래서 며칠간의 최종프로젝트 업데이트 사항을 기록하려고 한다! [내일배움캠프] 4기 React 최종 발표회 브로셔 제출 협력사에게 전송되는 브로셔를 제작해서 제출했다. 분양모음집은 B반 7조에 위치해 있음! 브로셔 보면서 다른 조들 결과물도 구경했는데 다들 너무 고생한 거 같고 멋진 결과물을 만들어 낸 거 같다~~ 최종 발표회 브로셔 링크 https://teamsparta.notion.site/4-React-a7747b99fec74a3993086cc0b1460460 관리자 페이지 업데이트 기존에는 관리자 페이지에 DB 업데이트 버튼 3개만 있었는데 발표를 준비하면서 관리자 페이지를 더욱 발전시켰으면 좋겠다는 의견에 따라 DB 업데이트..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 11.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.06

Today I Learned CSS 작업 마무리 Vercel deploy 중 npm error 발생 integrity checksum failed when using sha512: wanted sha512.... 해당 에러가 vercel build 단계에 자꾸 발생하는데 블로그에서 알려주는 npm 캐시를 청소하는 방법으로 해결했다. npm cache verify npm cache clean --force rm -rf package-lock.json npm install 참고 https://bonita-sy.tistory.com/entry/npm-install-시-npm-ERR-code-EINTEGRITY-에러-해결-방법 좌우 스크롤 생기는 문제 해결하기 width와 height를 100vw, 100vh로..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 7.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.05

Today I Learned 청약캘린더 CSS 작업 FullCalendar 커스텀 CSS 적용하기 너무 예뻐진 거 같다 🥰❤️ Overriding Properties Use the Chrome DevTools or equivelant to pinpoint the element you want to customize. Then, view its active CSS statements. For example, if you want to customize the day-of-week headers at the top of dayGrid view, you’ll see this CSS: .fc .fc-col-header-cell-cushion { display: inline-block; padding: 2px 4..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 6.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.04

Today I Learned lighthouse로 성능 개선하기 마이페이지 CSS 수정 styled-components 페이지에 따라 조건부 스타일링하기 관심 카테고리 설정을 할 때 같은 컴포넌트를 재사용하고 있는데 어떤 페이지에서 사용하는지에 따라 스타일링을 다르게 주고 싶었다. 회원가입 페이지의 경우에는 해당 컴포넌트 container의 padding과 box-shadow 값을 없애고 싶었다. 어떻게 할까 고민하다가 router 정보를 props로 전달하고 삼항연산자로 처리하는 방식으로 해결했다. const router = useRouter(); ... 일단 컴포넌트 내에서 Next.js에서 제공하는 useRouter의 pathname 정보를 해당 styled-components에 props로 전달한..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 5.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.03

Today I Learned 로그인 모달, 회원가입 페이지, 마이 페이지 CSS 작업 input 태그 A component is changing a controlled input to be uncontrolled. 에러 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 이 에러는 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 4.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.02

Today I Learned 회원탈퇴 기능 구현 NextAuth.js에서 useSession으로 provider 정보 받아오기 Users DB 구조 변경 NextAuth.js에서 useSession으로 provider 정보 받아오기 pages/api/auth/[...nextauth].js 에 서버를 만들어서 로그인 과정을 처리하는데 이 파일에서 callbacks라는 비동기 함수를 이용해서 session에 유저의 정보를 추가할 수 있다. async jwt({ user, token, account }) { if (user && account) { token = { ...token, provider: account.provider }; } return token; }, JWT callback의 파라미터 중 a..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 3.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.01

Today I Learned 아파트 매매 실거래가 데이터 예외 처리 아파트 매매 실거래가 데이터 필터링해서 표 만들기 table 태그로 표 만들기 API로 불러온 아파트 매매 실거래가 데이터를 필터링해서 표로 만들었다. table 태그는 처음 써보는 거였는데 생각보다 어렵지 않았다! : 표를 생성하는 가장 상위 태그 : 표의 제목을 나타내는 태그 : 행을 나타내는 태그 : 열을 나타내는 태그 이렇게 4개의 태그로 표를 만들 수 있다. Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 그리고 콘솔에 워닝 메시지가 떠..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 1.
• textsms