우주먼지 개발 log

1. useParams 사용법 현재 경로에 있는 dynamic parameter를 읽을 수 있게 해주는 클라이언트 사이드의 Hooks 이다. 공식문서 : https://nextjs.org/docs/app/api-reference/functions/use-params 'use client' import { useParams } from 'next/navigation' export default function ExampleClientComponent() { const params = useParams() // Route -> /shop/[tag]/[item] // URL -> /shop/shoes/nike-air-max-97 // `params` -> { tag: 'shoes', item: 'nike-ai..

1. 전역상태 관리의 필요성- 상태란? 일종의 데이터 저장 변경 관리하는 데이따 리액트의 UI 렌더링에 필요한 정보들의 의미하기도 함. 상태가 변경되면 UI가 리렌더링됨 **가장 기본적인 방법** //useState function TestComponent() { const \[value, setValue\] = useState("초기값"); console.log(value); _//_ **\=> 초기값** _return_ null; } 그럼 데이터 흐름이 양방향 인 것? -> ex) Vue 리액트의 데이터 단방향 흐름의 단점 망할 프롭스 드릴링 fxxx function HomePage () { const [selectedMemeberName, setSelectedMemberName] = useState..

Loader나 Spinner들입니다. 코드도 제공되니 사용해보시는 것을 추천드립니다. https://cssloaders.github.io/ 예쁜게 많지는 않지만 기본적인 것으로..

웹사이트에서 아주 쉽게 해당 코드의 위치를 찾는 툴 공유드립니다. https://www.locatorjs.com/

진영튜터님 로그인 인증 관련 세션 https://github.com/yoojinyoung/lecture-authentication/tree/main/src 1. ID/PW 입력 없는 로그인 기능 구현 2. 로그인 여부에 따른 라우트 구분 구현 3. ID/PW 입력과 API 응답을 통한 로그인 기능 구현 4. localStorage를 사용한 새로고침 시 인증 풀림 대응 위 네 가지가 세션 시간 동안 구현한 것들을 흐름에 따라 살펴볼만한 내용들이구요 아래 두가지는 main 브랜치의 코드를 보시면서 추가로 익혀볼만한 내용들입니다 1. redux-thunk를 사용한 로그인 기능 구현 2. 새로고침 시 인증 풀림 대응 시나리오 이거는 못들어서 코드 봐야함 빠른시일내에 !!!

이런 코드를 줄여보자. const signInWithGoogle = () => { const googleProvider = new GoogleAuthProvider(); return signInWithPopup(authService, googleProvider); }; const signInWithGithub = () => { const githubProvider = new GithubAuthProvider(); return signInWithPopup(authService, githubProvider); }; const socialGoogleLoginhandler = async (event) => { event.preventDefault(); await signInWithGoogle() .then((r..

재상 튜터님 지난 세션 >.< 다시보기 1부 : React 로 사고하기 2부 : 컴포넌트를 분리하는 기준과 방법 앗 녹화본도 있음 : 다원님 / 재상 튜터님 감사 1부 : https://www.youtube.com/watch?v=DkFaVMeX588 2부 : https://youtu.be/An4kMXbwDlM

대기업 개발자가 퇴사하고 부트캠프를 한 이유? (마케팅 각이다^-^) 솔직 : 업을 좀 바꾸고 싶은데 (embedded 개발 -> 웹 개발 (frontend) ) 혼자서 공부는 할 수 있지만 목적이 필요하잖아? 제일먼저 포트폴리오가 필요하겠지? 그런데 대기업 문화에 찌들어 혼자 뭘 구해서 하는 방법을 잃어 버렸음. 요새는 사이드 프로젝트도 알아서 찾아서 하고 하더라 하지만 요새 사이드 프로젝트도 구하기가 어렵다고 하더이다. 경험이 없는 사람을 동료로 받아주지는 않거든요! 그래서! 스파르타 내배캠 과정! 안하면 아쉬웠던 3가지 정도 이유가 있습니다. (잘 가르쳐줘서 이런건 식상하고 다른곳도 다 잘 가르쳐줄테니 적지 않습니다~) 1) 팀프로젝트의 기회 (그것도 다양한 사람들과, 여러번) 알아서 찾아서 진행하..

계획 계획 갑자기 P가 J가 되지는 않지만~ P를 일 시키는 것도 결국엔 계획이었다. 나는 약간 산만한 경향이 있기 때문에 집중해서 하나 하나 처리하려면 계획을 조금더 작은 단위로 작성할 필요가 있었다. 큰 덩어리일 때 보다 하나 하나 클리어해 가는 맛이 있다. 그래서 남들 할일 계획표에 비해 세부적인 경향이 있다. 헤더에 알람 받는 부분 구현 이라고 적고 그 안에 다시 - DB에 알람이 있으면 읽어와서 useState로 저장(useQuery) - DB에 알람이 들어오면 List에 추가 (invalidateQueries) - 알람 클릭시 게시물로 이동 및 알람내역에서 삭제 (useMutation) - 알람이 있으면 종 UI 변경 - dropdown 바깥 클릭시 닫힘 적용 등등을 자세히 명시해둔다. 이렇게..

생각나는 것은 많은데 이력서는 쓰기 싫은 'ㅇ'; 나에 대한 처방전 why ? 1) 목적이 없고 -> 숙제라는 목적보다는, 이력서 준비라는 목적보다는, 목표하는 회사를 정해서 지원서 제출을 목적으로 해야겠다 -> 세부적인 할일을 안 적어둔 것도 크다. 나라는 애는 안적으면 안한다~ * 2) 사실 하고싶은 말은 많은데 공간이 너무 한정적이어서 틀이 정해져 있어서 -> 자유 양식 블로그 주절주절 먼저해보기~ 3) 그동안 못놀아서 뽀로로야! -> 낮, 밤! 활용! 하루종일 놀지는 말자 ~ 단기 목표 목요일 23:59 인텔리픽 1차 이력서 제출 할일 가고싶은 회사 하나만 찾아 이력서 양식보기 프로젝트 작성 부분 보강 TIL / 회의록 한번 훑어보기 자기소개 부분 러프한 버전 하고싶은 이야기 키워드 별 정리 !!..