🗓️ 내일배움캠프

1일차OT를 들었다. 1주차에는 미니 프로젝트인 "팀 소개하기"가 있는데, 사전캠프 합류가 늦은 우리팀은 프로젝트를 진행하지 않아도 되는 팀이었지만 팀원들과 회의하여 팀 프로젝트를 진행하기로 했다.회의를 진행하면서 느낀 점은학교에서 팀프로젝트를 몇 번 해봤지만 교수님이

오늘은 2시에 TIL 특강을 듣고 3시에 회의를 진행했다.아침 시간에는 어제 회의 때 부족하다고 느낀 프로젝트 기획 순서에 대해 공부하여 velog에 올렸다.회의 때 현석님이 기능에 따라 파트를 적절히 분배해 오셔서 팀원들의 파트가 정해졌다.나는 홈화면, 헤더, 푸터를

오늘은 팀 소개 프로젝트 파트 분배 후, 본격적인 기능 구현이 시작되는 날이었다.내 파트는 주로 html 파트라서 이렇다 할 기능 구현은 없기 때문에 점심 먹기 전에 PR를 생성했다. 하지만, git을 다루는게 익숙하지 않아서 조금 헤맸다. 하지만 같은 팀원이신 현석님

오늘도 프로젝트 구현에 힘썼다. 내가 맡은 부분은 끝나서 해결이 어려운 팀원 분들이 맡은 부분을 도와주었다.별거 안도와줬는데 혼자서 척척 해내셔서 사실 도와줬다고 하기도 민망하다.그런데 CRUD에서 C부분이 문제가 생겨 내가 맡게 되었다. 그래서 지금 로그인/회원가입

오늘로 일주일간 내배캠에서 공부했다. 미니 프로젝트를 진행하면서 깃헙과 협업에 대해 많은걸 알게 되어서 좋았고 12시간씩 공부하는 습관을 들이게 된 것 같아서 좋았다.오늘 발표한 후 튜터님께 피드백을 받게 되었는데 폴더 구조를 잘 짜야한다. index.html는 roo

요번 주차는 개인 공부를 진행하면서 개인 프로젝트를 하는 주차이다.javascript 기초, 심화 문법에 대해 공부하였다.객체지향이다.동적 타이핑언어다.함수형 프로그래밍 지원.비동기 처리 가능클라 측 및 서버 측 모두에서 사용이 가능하다.절차지향이란? 코드 맨윗줄부터

: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.Stack : Last in, first outQueue : First in, first out내가 짜놓은 코드들은 Stack에 쌓이게 된다. 실행이 마치면 스택이 없어진다.이런 stack방식으로 코드의 순서를

: 식별자에 대한 유효범위를 의미한다. 대부분의 언어에 존재한다.: 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것이다.: 스코프 체인이 가능토록 하는 것.(외부 환경의 참조정보)callstack에 쌓일때 실행하고 있는 실행 컨텍스트의 상위 컨텍스트의 r

: 다른 코드의 인자로 넘겨주는 함수.setTimeoutforEachaction에 대한 제어권을 함수에게 위임하는 개념이다. 내가 직접 함수를 호출하는게 아닌, 콜백 함수 자체적으로 내부 로직에 맞춰 제어권을 가지고 기능을 실행하게 하는 것.호출 시점에 대한 제어권을

오늘은 알고리즘 특강을 들었다.자료구조 배열과 링크드 리스트의 시간복잡도가 어떻게 되고 시간복잡도를 최적화하는게 왜 좋은지, 배열의 장점은 조회가 빠르지만 검색 수정이 복잡하고 링크드 리스트는 검색 수정은 빠르지만 조회가 어렵다는 것을 확인했다.알고리즘 특강 이후 코드

알고리즘 특강에서 자료구조 정렬에 대해 공부하였다.정리한 내용은 알고리즘 특강에 따로 올릴 예정이다.또한 개인프로젝트인 영화 검색 사이트를 완성하였다.필수요구사항에는api 불러오기, 영화 검색 기능, 바닐라 자바스크립트 등등있었는데 검색 사이트인 만큼 검색할 때 편리하

오늘은 개인 프로젝트 제출 한 것을 코드 그로스? (다시 고치기) 하는 날이었다.일단 본인도 코드를 작성하면서 가독성이 많이 떨어지는데 이걸 어떻게 모듈화 할지 막막하고 생각하다 골치 아파서 그냥 한 js파일에 코드를 다 때려넣었었다. 하지만! 코칭 영상을 보면서 몰랐

카드 클릭 시 페이지 이동detail 안에 전체적인 UI 구현 (html, css)카드 정보 불러오고 세부 ui 정하기(영화 제목, 감독, 배우, 개봉년도, 개봉일, 평점 등등 )로고(초승달), 별점 아이콘 디자인별에 마우스 호버 시 이 얼마나 채워지는지 보이게호버 한

그전에 javascript의 탄생 이유를 알아야 한다.브라우저에서 쓰려고 만들어진 것.웹 페이지를 동적으로 만들기 위해! html문서를 조작하면 움직(기능)이게 하고 싶어서 만들어진 것이다.사용자가 브라우저에 주소를 입력한다. (즉, 클라이언트가 서버에 요청(reque

벌써 내배캠을 시작한지 3주차 마지막날이다.팀 프로젝트를 시작한지는 2일차.팀원 모두 힘을 내서 작업을 하고있다! 오늘 나는 리뷰 작성 creat 부분을 진행해서 하루만에 기능 구현을 마쳤다. 디자인적 부분은... 추후에 수정 가능하니, read, update, del

오늘 create 부분을 거의 99% 완성 시켰다.input에 넣은 value들을 받아와서 객체를 배열에 저장하게 되었는데 문제가 발생했다.우선 localStorage에는 모든 리뷰데이터를 reviews에 넣기로 해서 아래와 같이 코드를 짰다.하지만 이렇게 작성한 lo

오늘은 프로젝트를 전체적으로 마감을 하려고 노력했다.나는 이미 기능 구현이 끝났기 때문에 개인 공부(알고리즘, 자바스크립트 문법)를 하며 정해진 마감기한까지 기다렸다.다행히 어려움을 느낀 수정, 삭제 기능이 거의 완성을 앞두고 오류가 생겨서 그 쪽을 살펴보니..희안한

오늘은 프로젝트 마감과 발표가 있었다.우리 팀은 간신히 마감시간 직전에 프로젝트를 마감할 수 있었다.다들 너무 열심히 해주셔서 성공적으로 프로젝트를 완성할 수 있었던 것 같다.아쉬운 점이 한 두가지가 아닌데 고치고 ReadME를 쓰는 건 내일이나 주말에 진행해야겠다.프

변수와 상수, 변수의 종류, 변수의 범위let 과 const 는 블록 단위 scope이다.var는 함수 scope를 가지기 때문에 블록 안에 선언을 해도 바깥 영역에서도 사용이 되기 때문이다. 호이스팅 문제 : 변수들을 위로 올리는 과정에서 문제가 생길 수 있다.va

주말에 푹 쉬었는데 어제 밤부터 몸살기운이 생겨서 오늘은 컨디션이 엄청 저조했다..왜 푹쉬고나서 몸살이 걸린건지 모르겠지만.. 그래도! 주말동안 하려고 했던 일을 못했기 때문에 오늘 열심히 공부했다.오늘 특강 들으면서 메모한걸 적어둬야겠다. 일단 과제로 markdown

React는 UI Library다.웹과 네이티브에서 사용할 수 있는 Library다.프레임워크? 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 자원을 지원하는 기술의 조합Spring Framework: java 기반의 웹(백엔드) 프레임워크Vue.

변수의 이름은 명사!함수의 이름은 동사! (ex. handleClickBtn)모든 이름은 이름으로 유추 가능하게 해야한다!단수형과 복수형 사용에 유의하자. 배열(리스트) > 복수형 작성JavaScript변수명, 함수명은 camelCase상수명은 SCREAMING_SN

오늘은 아침에 알고리즘 코드카타를 한 뒤 챌린지반 과제인 피카츄 놀이터를 하루종일 구현했다!어려웠던 부분은 아직 useRef()를 쓰는 법을 강의를 듣지 않았는데 사용하느랴 애썼던 것과키보드를 누를때마다 애니메이션이 작동했으면 하는데, 작동하지 않아서 setTimeou

오늘은 알고리즘 특강, 개인과제 발제, 리액트 심화 특강 이 있는 날이라 몰아치는 날이었다.알고리즘은 OT겸 과제를 내주었는데 class를 이용해서 메소드인 length나 map과 같은 함수를 구현하는 과제이다. 개인 과제로는 가계부?를 만드는 프로젝트인데 props,

오늘은 알고리즘 숙제를 풀고 강의를 보고 배운내용을 정리했다.hook에 대해서 공부하고 redux를 공부하는 중이다. 조금 복잡하고 어렵지만 그래도 모르는걸 알아가는게 재밌기도하다. 오늘 배운 것을 정리한 내용은 다른 포스팅으로 올렷다! 내일은 프로젝트를 시작해야겠다

redux는 전역상태관리를 한다.store에 state을 저장하고 값이 필요한 컴포넌트가 dispatch를 통해 action을 보내면 action안에 있는 값type, payload(선택값)을 보고 store에서 알맞은 행동을 실행 후 값이 변경되게 된다!그러면 use

오늘의 TIL 1. redux 복습 겸 공부 정리 2. 기능 구현 데이터 입력 데이터 화면에 불러오기 router로 화면이동 styled component로 조건부 스타일링하기

스타일 좀 꾸미고 input 유효성 검사등록될때 등록한 날짜의 값에 맞게 월을 바꿔주고등록할때마다 리렌더링..이것만 했는데 하루가 다지났다..어째서?

챌린지 반 과제로 내준 memo app 만들기가 아직 다뤄보지 못한 redux로 되어있어서 개인과제를 ㅁ우선시 하느랴 오늘에서야 부랴부랴 했더니 결국 기한내에 만들지 못하고 개인과제도 진전이 더디다 ㅠㅠ하지만 리덕스의 사용방법에 대해 익혔으니 개인과제에서 redux

오늘은 상세페이지 수정, 삭제, 모듈창까지 props-drilling으로 다 끝내고 contextAPI로 까지 refactoring 완료했다!세부적으로는 유효성 검사도 하고 vite.config.js에 scr 경로를 절대경로로 설정해서 @/components/... 식

이것은 따로 프로젝트 시리즈에 read me까지 빠방하게 적어서 올려두겠다.. 일단 기능 구현을 완성시킨것에 자축..오늘 zustand에 대해 배웠다. 한 눈에 봐도 redux보다 사용하기 간단한 느낌이 들었다. zustand에서 useStore 여러 값을 꺼낼 때는,

오늘 memo App을 다 만들고, money history도 다 만들어서둘다 read me까지 작성하고? 프로젝트 좀 더 다듬고.. money history는 배포까지 했다.github page에서 error 메세지는 없이 화면에 그냥 404라고만 적혀져있고 .. r

그래서 회의 결과! 우리는 음악을 공유하는 커뮤니티 사이트를 만들기로했다!일단 오늘ㅇ은 내가 react-router v6로 routing 작업을 했다.또.. 와이어 프레임을 만들었다.이제 내일은 디자인을 정하면 된다!!!!!!

오늘 한거 ui 완성3시간 특강..이제 기능 구현을 하려고 하고있다 redux로 값을.. 저장하고? supabase로 저장하려고 하고있다.

redux에 state로 저장하는 comment들은 id값을 uuid로 정해줬고supabase에서 불러오는 값은 테이블에 저장될 때 고유한 id가 있을거라key={comment.id}로 정해줬는데? 오류가 뜬다. 왜일까??이건 supabase측에서 내가 저장한 comm

우선 오늘은 개인 프로젝트 발제 날이었다.전에 만들었던 계좌 기입 프로그램에서 이제 회원가입으로 유저마다 각자의 화면을 띄워주는 기능으로 발전 시키면 된다.오늘은 프로젝트를 clone 받아서 새로운 repository에 remote했다.또, 전에 layout 시스템을

오늘은 강의를 듣고 프로젝트를 진행하였다.axios와 tanstack query, 그리고 zustand에 대해 강의를 들었다.그리고 오늘 프로젝트 header를 바꿨다 원래는 가운데에 로고와 사이트명을 집어넣었는데 로그인한 사용자 프로필을 오른쪽에 넣어야돼서 왼쪽으로

auth.api.js이렇게 회원가입, 로그인을 axios로 받아오고회원가입.jsx회원가입에서 mutateAsync로 값을 생성해주었다.이렇게 해서 로그인 화면으로 넘어가면, 로그인을 하게 되는데여기서 tanstack Query의 onSuccess를 사용해서로그인이 성공

지도api카페 추천RTKApp Router는 next.js의 새로운 라우팅 시스템이다.회사에서 이미 Pages Router로 만들어 둔것이 있기 때문에 Pages Router를 아직 지원 하지만 App Router를 쓴다.다양한 정의가 있지만, 일반적으로 다음의 특징이

카카오맵 지도 api를 이용해서현재 react-kakao-maps-sdk 라이브러리를 사용해서 map를 이용하고 있다.일단 현재 구현한건지도 움직일 때마다 중심 좌표에 마커 표시 : debouncing을 이용해서 움직이고 나서 잠시 뒤에 마커가 움직이게 해놨다.검색한

app 디렉터리 아래에서 폴더 구조가 그대로 url 경로가 된다.예외사항 : app 디렉터리 아래에 폴더로 존재해도 url 안되는경우(폴더명) : url 경로에서 해당 폴더 제외, 하지만 라우팅 시스템 안에 존재한다.localhost/(폴더명)/page.tsx로 되면

typescript와 next.js에서 tailwind와 cva를 이용해서 컴포넌트를 재사용하는 법에 대해 배웠다.이렇게 사용되는데, variants는 안에 props에 넣은 값의 이름이 일치하는 것을 찾아 className에 이름에 해당하는 값을 넣는것이다.따라서,

axios로 받아옴types 폴더 > country.type.ts 파일 생성console.log로 api 데이터 구조를 확인 후 type을 다 지정해줬다.css를 그동안 스타일드 컴포넌트로만 진행해서 이 기회에 tailwind를 써보았다.간편하고 직관적이라서 반응형으로

typescript를 시작하니 정말 모르겠는 것들이 많다.select box를 라이브러리로 쓰고 싶어서 라이브러리를 설치한 후 사용하였다.근데.. option을 받아오는 타입을 공식 문서 찾아서 적용했는데,여기서 option을 Option으로 받아오면 된대서 했는데..

개인 프로젝트 공부무한스크롤링 구현하기

우리는 여러 논의를 통해 여행 스케쥴러를 만들기로 했다. 저번 주에 일주일 가량 기획과 끝없는 회의를 통해서 프로젝트의 뼈대와 기획의 초석을 세웠다.디자이너님과 첫 협업인 만큼 기존과는 다른, 새로운 방식으로 진행되어 맞춰가기 바쁜 지난 주였다.빼곡히 채워진 우리의 의

supabase 프로젝트는 있다는 가정하에 진행하겠다.우선, 프로젝트에 들어가서project settings > Authentication > Auth settings로 들어가면 아래와 같은 화면이 뜬다.여기서 Auth settings에서 원하는 옵션을 체크하면 된다.

바깥 빨간 박스를 page component로 만들었다. props로는 title과 isSocialHidden 두개만 받고 그 안에 children을 넣을 수 있게 했다. 작은 박스가 children이 된다.title은 상황에 따라 바꿀 수 있고 social login

회원가입 기능을 완성 하고 나서, 이제 email을 입력하면 해당 email이 회원인 유저인지 신규유저인지 확인해야되는 로직을 작성하고 있었던 때였다..이렇게 유저의 email로 유저가 있는지 없는지를 보는 로직을 세웠다.로직에는 전혀 문제가 없어보였고 console.

supabase에서 비밀번호를 틀리면 틀렸다는 응답 값을 보내서 client에서 여러가지로 구분짓고 싶었는데 그냥 로그인 성공을 제외한 모든 status가 냅다 catch로만 잡힘.api > auth > login > route.ts비번이 맞을 때 > 로그인 성공! 2

카카오에서 소셜로그인 기능을 구현하기 위해선 비즈앱 정보에서 사업자 등록이 필요하다!아래는 사업자 번호가 없는 개발자들이 비즈앱 설정을 할 수 있는 방법을 설명해준 kakao dev Talk에 올라온 답변이다. 사업자등록번호가 없는 개인이나 단체가 제공하는 서비스의 앱

이렇게 하면 소셜 로그인이 완료된 후 알아서 배포된 주소로 redirect 시켜준다. 버셀에 배포된 뒤 소셜로그인 확인해보니 localhost:3000으로 계속 리다이렉트 되길래 url 설정 문제인지는 알겠는데 어디서 설정하는지를 몰랐다..

앱 온보딩은 사용자가 앱을 처음 실행했을 때 핵심 정보를 전달하고, 앱의 사용 가능한 기능을 소개하는 과정이다. 온보딩 페이지-설명 참고위 설명과 같이 사실 앱에 온보딩이 주로 들어가지만 우리는 논의를 통해 웹에서도 간단한 온보딩 페이지를 만들어서 유저가 진입했을 때

유저가 로그인 하고 나서 분기점이 필요할 때 이 글을 읽는 것을 추천한다..나의 프로젝트의 경우 로그인 후 첫 유저 대상으로 여행 취향에 대해 정보를 수집하는 과정이 필요했다.주의) 들어가기에 앞서 코드에 대한 설명만 나온다. supabase와 kakao develop

login에서 이런 저런 작업을 하고 build를 해보니 오류가 생겼다.분명 코드 몇줄 추가하지 않았는데..근데 이게 터미널이 작아서 오류가 주르륵 뜨길래 윗줄만 보고 해결하려 했어서 오래걸렸다.알고보니 내가 useSearchParams를 hooks 폴더에서 사용했는데