TIL

리액트 입문하기 전 자바스크립트 다시 복습하였다Object.keys() 객체의 키만을 추출하여 배열로 반환합니다.Object.values() 객체의 값만을 추출하여 배열로 반환합니다.Object.entries() 객체의 키와 값을 쌍으로 하는 배열을 반환합니다.Obje

어제 JS 복습 후 오늘 react 입문을 시작하였다 밑에 내용을 정리하면서 다시 리마인드한다react 프로젝트를 좀 더 쉽게 실행하기 위해 사용한다실행 명령어Vite 역시, CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구이다 CRA보다 속도가 빠르기 때문에

react 입문차 강의를 듣고 react 개인과제를 하는 중 많은 고난과 역경을 겪고 있다. 개인 과제를 하는 중에 많은 오류가 나왔는데 그 중 하나가 useState에 기본 값을 안 넣었을때 발생하는 오류였다. 처음에는 무슨 오류인지 몰랐는데 input요소의 valu

React 입문주차 후 개인과제를 하면서 많은걸 배우고 느꼈다.props로 onclick 이벤트를 전달 할 경우 return문으로 프로퍼티를 전달한다업데이트 할때 새로운 값이 아닌 기존에 있던 것을 수정할 경우 return 값에 기존에 있던 값들을 넣어준다 맵에 들어가

react 개인과제가 끝나며 다시 개인과제를 되돌아 보면서 뭐가 부족한지를 돌아 보았다react 수준별 수업을 들으면서 함수 컴포넌트가 왜 그렇게 불리는지 더 자세히 알게되었고 useEffect를 수업 듣기전이지만 먼저 내용을 들으면서 사전 지식을 쌓을 수 있었다 이제

react 입문 주차가 끝나고 숙련주차를 시작함에 있어 style component와 react hook에 대해서 배웠다 입문 주차에서보다 더 깊게 배울 수 있었다useEffect와 useRef를 배우면서 useEffect는 외부 API를 사용할때 사용한다고 챌린지 수

props를 전달할때 부모에서 자식으로 계속 전달하는 방법 prop drilling을 사용하지 않고 더 편하게 UseContext를 사용한다 추후 redux를 배울때 참조하게 될 개념이다리랜더링 발생 조건에는 3가지가 있다컴포넌트에서 state가 바뀌었을 때컴포넌트가

오늘은 redux 초반 부분을 들었다 아직 redux에 대해 이해를 잘 못하겠어서 일단 강의를 한 번 다 듣고 다시 들을 예정이다.챌린지 과제로 Vite와 CRA를 사용하지 않고 babel과 webpack을 사용해서 react 환경을 셋팅하는것을 해보았다 세상 Vite

리액트 숙련주차 강의를 다 들었다. 숙련주차를 들으면서 리듀스에 관해 완벽하게 이해하지 못했지만 몇번 더 들어서 마스터 할 예정이다 리액트 라우터 관련해서는 이해가 쉬웠지만 리듀스는 좀 더 공부를 해봐야 할 거 같다챌린지 수업에는 useEffect와 useState를

오늘 react 숙련주차 개인과제를 하면서 벽에 부딪혔다포켓몬 도감 컴포넌트 작업을 하는 중에 있어 props를 전달하는 부분에서 큰벽에 부딪쳤다벽에 부딪친 부분은 onclick 부분을 props로 전달할때 값들이 정확하게 안맞아서 추가랑 제거 부분이 막혀서 머리를 감

react 숙련주차에 개인과제를 하면서 props drilling을 끝내고 context API를 사용하여리팩토링을 진행하였다 중간에 작업을 하면서 context에 대해 완벽하게 이해를 못 한 상태에서 작업을 진행했지만 어떻게 쓰는지와 왜 사용하는지에 대해 더 알게 되

오늘 react 개인과제를 진행에 있어 Router를 사용할때 한가지의 에러가 있어서 찾아 보았다처음에 Route를 사용할때 밑줄친 부분처럼 사용하면 잘 넘어가졌지만 밑줄 친 위에 부분을 사용하면 해당 오류가 뜨는걸 볼 수 있었다queryString을 사용해서 넘길려면

React 개인과제 포켓몬 도감을 마무리했다.전체적으로 마무리를하고 튜터님 챌린지 수업때 부족했던 부분을 Qna하는 과정을 가졌다이후 내일 수업에 들을 useSyncExternalStore을 선행하고 useRedux의 개념을 좀 더 깨달았다.내일부터는 팀프로젝트 뉴스피

React 포켓몬 개인과제가 끝나고 바로 팀프로젝트를 시작했다.이번에 시작하는 팀프로젝트는 뉴스피드를 만드는 거였다.오늘은 프로젝트 초기 셋팅과 와이어 프레임을 만들었고 회의를 통해 어떤 기능과 추가 기능을할지 정하고 각자 어떤 기능을 개발한건지에 대해 정하였다.처음에

오늘 팀프로젝트를 시작하기에 앞서 회의를 진행하면서 깃허브 프로젝트 셋팅과 규칙들을 정했다프로젝트 셋팅하면서 기본 Router와 Page, Component를 셋팅하고 전부다 간격을 맞추기 위해 Prettier를 설정했다.오늘 supabase를 사용할때 데이터를 못불러

오늘 팀프로젝트를 계속 진행하면서 있던 오류들을 돌아볼 예정이다메인 화면 작업을 하면서 supabase 데이터를 받아오고 있는 중에 값을 전달 받지 못하는 오류가있어 팀원들이랑 얘기하다가 환경변수를 사용하는 .env 환경변수 마지막에 세미클론이 있어서 값을 불러오지 못

드디어 팀 프로젝트가 끝났다...저번주 수요일부터 시작해서 오늘 끝났는데 하루도 빠짐없이 늦게까지 작업을 하느라 힘들었던 팀 프로젝트였다 그래도 팀 프로젝트가 끝난거에 대해 뿌듯하면서도 아쉬움이 많이 남는 프로젝트였다.프로젝트에 대한 자세한 내용은 따로 velog에 작

React 심화주차에 들어왔다팀 프로젝트가 끝나고 바로 각자의 개인프로젝트가 시작 되었는데 너무 일정이 타이트 한 거 같다매주 프로젝트에 팀별 반마다 있는 개인과제 강의, 과제 할거는 많지만 점점 따라가지 못하는 나의 모습이 보인다...이번 심화주차에는 axios랑 t

react 심화주차 개인과제중 통신 API 통신에서 에러가 발생해 진행에 어려움을 겪었다.외부 api 통신 js를 만들어서 사용할때 데이터 자체를 못불러오는 일이 있었다어디 부분에서 오류가 나오는지 코드를 확인해 보았다Auth.js에서 export해주는 부분이 asyn

오늘 개인과제에 있어 useMutation을 커스텀해서 사용시 결과 값을 어떤거를 받아오고 어떻게 사용하는지에 어려움을 겪었다여러가지 방법을 시도해보았는데 다 실패했다.login() 파라미터로 logins를 넣어본다 -> xresponse.data를 mutation안에

리액트 심화주차 개인과제 트러블슈팅MBTI 테스트를 하고 결과에 넘어가는 부분에서 데이터 값을 불러와서 값을 계산을 할때 못불러오는 현상 발생처음 에러가 발생했을때 useMutation으로 불러온 값이 못불러오는줄 알았지만 console.log를 찍었을때 데이터 값이

심화주차 개인과제가 어제를 끝으로 오늘부터는 팀프로젝트가 시작되었다프로젝트 시작에 앞서 3가지 주제에서 어떤거를 정할지 회의를 하였다유튜브지도설문조사위 3가지 주제 중에 우리 팀은 지도를 사용하여 반려견 산책경로랑 애완동물 관련 내용을 검색해서 지도화면에서 보여줄 예정

어제 지도 API를 이용하여 애완동물 산책코스랑 동물병원 카페 등 정보를 제공하고 검색할 수 있는 프로젝트를 기획하였다.카카오 지도 API를 사용하기로 정하고 셋팅을 하는데 .env파일에 앱키를 넣어서 사용할때 키 값을 못받아 오는 현상이 있어서 지도를 못불러 왔다검색

팀프로젝트 작업중 코드를 합치는 부분에서 중복 코드 합치기에 어려움을 겪음 코스팀과 코드를 합치기전 각자 생각하던 방식이 달라서 어떻게 작업을 해야할지 뇌정지가 왔음ex) 코스팀 : 카테고리 클릭시 해당 페이지로 넘어가는 걸로 이해 검색팀 : 하나의 페이지에서 M

프로젝트 배포에 있어 vercel을 사용하는데 저번에 발생했던 오류가 또 다시 발생하였다단순 소문자 차이로 배포가 안되는 현상 발생 해당 파일을 찾아서 수정 후 업로드 하여 해결하였다.배포 프로젝트 확인 했을때 지도 API가 뜨지 않아서 확인해 보았을때 카카오 API

심화주차 플러스가 지나고 팀프로젝트 아웃소싱이 끝나고 각자 팀마다 발표를 시작하였다.발표가 끝나고 서로 아쉬운점 좋은점을 말하면서 KPT회고를 끝냈으며 나는 개인적으로 상태관리랑 코드 가독성에 대해서 아쉬운점이 많았다.이제 타입스크립트에 대해서 배우게 되는데 앞서 챌린

기존에 작업했던 Toast 라이브러리를 타입스크립트로 바꾸는 과정에서 해당 오류가 발생오류를 해결하는 과정중 해당 문장이 필요하다는걸 확인 후 문제 해결index.html파일에 jsx -> tsx로 바꾸어주지 않아 오류가 생긴 사소한 이슈가 있었다이제 타입스크립트와 n

회고록 오늘은 Next.js를 배우면서 4가지 주요 렌더링 기법을 정리할 생각이다. CSR(Client Side Rendering) 특징 순수 React 사용했을 때 100% 브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링하는 방식

지난 시간 배웠던 4가지 렌더링을 실제로 작업해보면서 어떻게 렌더링이 진행되는지 몸소 느낄 수 있었다SSG 렌더링은 정적 페이지에 사용하며 따로 설정이 없을경우 디폴트이다 그리고 작업을 할 때 콘솔 같은 경우 서버에만 한 번 나타나는걸 까먹어서 데이터를 왜 못불러오는지

타입스크립트와 Next 개인과제로 Riot Game 웹 사이트를 만들기로 했다.Next 프로젝트를 생성하여 각자 페이지로 이동하게 셋팅을 하였다.Riot 홈페이지에서 API 사용법과 key를 확인 할 수 있었다.https://developer.riotgames

라이엇 게임즈 API를 사용하는 와중에 챔피언 목록이 useState 배열에 안담기고 객체로만 계속 나오는 현상이 발생 함불러오는 API 형태의 타입이 잘못 설정되어 있어서 타입 재 설정후 객체를 배열 형태로 변경후 useState에 포함하였다타입 설정시 잘못된 타입이

외부 API 데이터를 불러와서 이미지 사용시 Image 태그를 사용하여 작업하는 중 타입을 지정해줘도 값을 못불러오는 에러 발생문제를 찾던 중 next config 파일에서 경로가 이상하다는 것을 알고 수정하여 정상작동 되는지 확인문제해결 후 hostname과 path

오늘은 배운 정보를 한번 더 리마인드 할 예정이다next Images 태그는 svg, gif, webp, png 는 최적화해 주지 못하며이미지를 최적화를 해주지만 최적화가 무조건적으로 좋은것은 아니다varcel 배포시 1000개의 이미지까지는 무료이지만 이후에는 비용이

챌린지반에서 간단 기술면접을 했는데 이에 대해 정리해 보았다const: 상수로 관리되며 재할당이 불가능하다 let: 재할당이 가능하다 var: 위치가 어디에 있든 재할당이 가능하며 스코프에 영향을 받지 않는다.클로저는 함수가 생성될 당시의 외부 변수 및 상태를 기억하고

로테이션 챔피언 데이터를 가져오는 단계에서 값을 비교하여 배열에서 데이터를 뽑아오는데 성공하였음map을 사용할때 key값으로 고유 id값이 없어서 어떻게 해야하는지 고민하던 중 로테이션 데이터 값에 고유 값을 확인 후 다시 배열에 담음 -> 배열에 key값을 담을 경우

심화 프로젝트를 진행하고 있으며 심화 프로젝트의 팀프로젝트 시작함에 있어 어떤 주제로 할건지 팀원들끼리 회의를 진행하였다.회의를 진행하면서 프로젝트 주제를 정하고 와이어 프레임을 제작하였다.이번 팀 프로젝트 주제는 챌린지 커뮤니티 사이트이며 유저의 챌린지 만들어서 등록

프로젝트 초기 셋팅에 있어 리액트 쿼리를 쓰기 위해 Provider을 만들어 전부 사용 할 수 있게 감싸주었다Supabase도 client와 server에서 사용할 수 있게 각자 나누었고 이번에는 댓글 기능과 검색기느을 맡았다 다른 팀원분들중에 샤드인을 이용하여 캘린더

최종 프로젝트를 시작함에 있어 주제선정과 기획을 하는 날이였다.우리 최종 프로젝트의 시작은 요즘 성인들이 단어의 뜻과 맞춤법에 대해서 많이 모르고 틀리는 문제가 있는것을 생각하여 문장을 풀 수 있는 서비스를 만들기로 하였다주제를 정하고나서 각자 프로젝트명, 어떤 기능들

프로젝트에 사용할 게임중 마이크로 말하는 부분을 텍스트로 변환해주는 API를 정리해 보았다특징: 실시간 스트리밍 음성 인식을 지원하며, 마이크에서 입력된 음성을 즉시 텍스트로 변환 가능합니다.언어 지원: 다수의 언어와 방언을 지원하며, 한국어도 지원됩니다.무료 사용:

최종 프로젝트를 시작함에 있어 정신이 없어서 회고록을 많이 못썼지만 오늘부터 다시 열심히 작성할 예정이다.오늘은 오디오 관련 성능을 개선과 타이머를 개선하였다

최종 프로젝트 중간 점검에 앞서 각종 버그를 체크를했다.내가 개발한 기능중에서 오디오 기능중 마이크 녹음 버튼을 눌렀을때 녹음중이라는 텍스트 대신 정확도 계산이라는 텍스트가 나오는 현상이 있어 이 부분을 삼항 연산자로 녹음할때는 녹음중이라는 부분이 API 통신중에는 정

오늘은 코드 리뷰를 통해 전체적으로 수정할 부분을 수정하였다.코드가 한눈에 간결해진게 보였으며 어떤 부분이 에러가 생길지 더 잘보이게 되었다.hook은 use\~~를 붙이자console.log는 앞으로 해야 할 거에 대한 내용을 위주로 적어둔다 (불필요한 console

게임이 끝나도 마이크 입력 값이 있을경우 점수가 계속 누적되어 넘어갈때 Supabase에 최대 점수인 100점을 넘어서 저장되는 이슈가 생겼다해당 이슈가 발견되고 문제를 찾아본 결과 마지막 결과보기에서 클릭시에 데이터가 올라가는 걸로 로직을 작성했지만 마지막에서 계속

점수를 넣어주는 부분을 확인하여 연속적으로 클릭되어도 지정한 시간안에서 한번만 실행되게 작업을 하기 위해 찾아보던 와중 Lodash를 활용하여 throttle을 사용하는 방법이 있어서 사용하게 되었다.해당 코드를 이용하여 작업을 진행햇지만 몇가지 오류가 발생하였다thr

게임이 끝난 후 데이터를 슈퍼베이스에 담아줄때 어떤식으로 넣을까 고민을 하다가 배열안에 객체형식의 데이터를 하나의 스트링으로 변환하여 데이터에 넣어주었다.데이터를 슈퍼베이스에서 불러오게 된다면 유저가 플레이했던 모든 오답을 불러오게 했다.들고온 배열에 map을 이용하여

이전에는 웹 사이트를 만드는 거에 흥미가 있어 관련 전공을 나와 웹퍼블리셔라는 직업을 가지고 2년 7개월이라는 기간 동안 일을 했었다.심적으로 지쳐 웹 퍼블리셔 일을 그만두고 쉬고 있던 와중에 뜬금없이 하나카드에서 하나의 메시지가 왔었다.문자 메시지의 정체는 바로 내일