스파르타코딩클럽 내일배움캠프 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_FullCalendar 커스텀 CSS 적용하기

Today I Learned청약캘린더 CSS 작업 FullCalendar 커스텀 CSS 적용하기너무 예뻐진 거 같다 🥰❤️ Overriding PropertiesUse 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 4p..

• 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