TIL

매일매일 공부하면서 기록하는 공간이다.아직 TIL 작성 처음 단계라서 여기에 올린 내용이 다른 곳에 올라갈 수도 있고 난잡해 보일 수도 있지만 시작하는데 의의를 두고 작성하려고 한다.미니 프로젝트를 위해 html과 css 코딩을 하루종일 했다. 하다가 질리면 프로그래머

미니 프로젝트를 진행중에 있어서 어제 개인 branch에 만들어놨던 html, css, js를 하나로 합쳐야하는 아주 복잡한 일을 해야했다. 처음엔, main.html안에 css와 js가 다 들어가있는 아주 복잡하고도 복잡한 코드가 6개 생겨버린것이다.일단, pr을 하

오늘은 방명록을 만들었다! 이렇게 만들고 보여줬는데 '방명록 작성하기' 버튼이 아래로 갔으면 좋겠다는 팀원의 의견이 있어서 아래로 내리기로 했다.당연히 "아래로 내리기"에 초점이 맞춰져있어서 html과 css의 문제라고 생각했다. 근데 css를 수정을 해도 꿈쩍도 안하

팀프로젝트 마무리가 되어서 리드미를 썼다. 나중에 또 다른 팀프로젝트때 쓰기 위해 이리저리 찾아보면서 쓰는 방법을 공유하려고 한다. 그리고 생각보다 프로젝트에 대한 README를 쓰는 법에 대한 자료는 많지 않아서 누군가에겐 도움이 되었으면 한다.Github Repos

자바스크립트 문법 강의 들으면서 마지막에 나오는 문제풀이 부분을 기록해놓고자 적는다. newUser라는 새로운 변수를 만들어서 빈 객체로 만든다. for...in을 사용해서 user안에 key가 계속 할당하게 한다. user의 key를 newUser의 key에 새롭게

개인프로젝트를 하면서, 커밋메세지를 정리해보고자 적는다. 이렇게 쓰는것이 좋다. 정리하기 편하고 상대방도 보기 편하니까! 알아두기~!~!

개인 프로젝트 영화리스트를 만드는건데, TMDB를 사용해서 데이터를 받아와야한다! TMDB 한번도 사용해보지 않아서 정말 익숙치 않아서 손에 익는데 시간이 좀 걸렸다.. 데이터는 잘 가져왔는데, 이미지가 나오지 않는 이슈가 생겨버렸다. 검사 창에는 잘 나오는데, 화면

개인프로젝트를 다 하고, 평점순으로 정렬을 하고싶어서 시도해보았다. 생각보다 오래걸렸다.먼저, 평점을 반올림하고 싶어서math.round 함수를 사용해서 반올림하는 함수를 짜고,중간에 코드를 다 붙이진않았지만, 이런식으로 정렬을 해주었는데, 정렬이 되지 않아서 진짜 다

개인프로젝트 리팩토링을 하고자 한다. 코드리뷰 동영상을 보는데, reset.css를 넣는게 좋다고 하셨다. reset.css : 모든 브라우저에서 일관된 기본 스타일을 적용하는 역할 prettier은 이미 쓰고있었는데, setting.json에 html 관련된 코드를

프로젝트 복사본 만들기 git branch브랜치 이동하기 git switch / git checkout코드 합치기 git merge 코드 임시저장 git stash과거의 커밋으로 돌아가기 git reset / git revert gitignore: 프로젝트에 원하지 않

배열을 순회해서 처리하는데 사용되는 메서드 반복문을 통해 배열의 요소에 접근하지 않고 간단히 배열의 요소들을 처리할 수 있다. 콜백함수에서 사용 가능 -> 따로 포스트 올릴예정!arr: forEach() 함수에 적용할 배열function: arr 배열의 각 요소에 적용

async , await, promise 공부 데이터를 async, await를 이용하여 refactoring 하기async,await 개념 이 부분을 async/await 로 리팩토링해야한다. fetch 함수 : browser에서 네트워크 통신을 할 수 있도록 해두

강의 5주차 듣기팀프로젝트 작업알고리즘 매일 두문제 풀고 정리알고리즘 매일 두문제 팀프로젝트 js 마무리팀프로젝트만 하루종일 했당

오늘은 회원가입 마무리 단계로 localstorage 연결 하고 탈퇴 기능 구현, 이런 저런 detail 들을 구현했다. localstorage 연결 localstorage를 본격적으로 쓰기 전에, console에 먼저 띄우게 하고싶어 이 작업부터 진행했다.js파일에

탈퇴기능에서 입력한 사용자 ID가 없으면 경고메세지를 출력하게 하고 싶은데 그게 안됨. 처음 코드 이렇게 for문안에 if-else를 사용해서 넣었는데, 경고메시지가 출력이 되지 않았다. 사용자를 탈퇴시킬 때 "해당 ID의 사용자를 찾을 수 없습니다" 메시지가 의

팀프로젝트 마무리하고 발표프로그래머스 문제 풀었다!! 자바스크립트 강의 마저 들을 예정깃허브 잔디 만드는 중이라 진짜 매일 문제푸는중 보고 있으면 뿌듯하답니다

재훈님의 회고를 보고 적는거지만 재훈님처럼은....못적겠어서 그냥 느낀점만 적으려고 한다.일단 최고의 팀 그저 갓들만 모인 주시조같이는 제일 오래 있었는데 친해진건 끝나기 몇주전... 다들 너무 실력자들 + 열정맨들 이셔서 감사했고 배운것이 참 많았다!! 그래도 다들

드디어 리액트 강의!!! 룰루 팀 다시 만들고 이름정하고 했다. 팀 이름은 SEVENTEEN다들 막 팀 노션 세븐틴으로 꾸몄다...세븐틴 팬들 같아서 한줄소개도 ㅋㅋㅋㅋㅋㅋ대왕 컨셉이에요..👍잘부탁드립니다(꾸벅)그리고 리액트 강의를 들었다. 1주차는 오늘 다 들을 예

개인프로젝트 시작했는데 맨날 npm으로 리액트를 하다보니 yarn을 하나도 모르겠어서....폴더 이해에만 하루종일 결렸다..jsx 처음보는 사람~ 저요~🙌그리고 js를 거의 매일 세달동안 쓰다보니 리액트 다 까먹었다... 물론 조금 달라지는건데 그래도 멘탈이 나가던데

예시코드를 가지고 과제를 하는 거기 때문에 clone 해야지하고 했는데, 깃허브 브랜치 연결이 당연히 예시코드가 있는 튜터님의 브랜치.. 큰일날뻔fork 하는 방법도 있지만 제일 쉬운 방법이 있다. 과제를 할 내 개인 레포지토리를 만든다.그리고 git clone을 사용

오늘 수업시간에 스탠다드 반에서 진행했던 개인과제 리뷰를 다시 정리하고자 적는다 느슨한 비교보다는 엄격한 비교 쓰는걸 습관으로 할 것 둘다 가능하기는 한데 느슨한 비교를 할 경우 나중에 문제가 생길 경우가 있다. 그러니 엄격한 비교를 사용할 것. c언어는 ==를 사용해

피드백 받은 개인과제 리팩토링을 진행했다. 처음에 id를 그냥 배열의 길이 title.length 로 넣었는데, 이러면 todo가 2개가 있을 경우 삭제후 새로 추가한 todo와 두번째 todo의 id가 겹칠 수 있다고 하셨다. 튜터님이 Uuid를 사용해서 고유 id값

알고리즘 강의 듣고 문제 풀기개인과제 발제 듣기타임어택 준비 타임어택! 타임어택 못푼 계산기 다시 풀기개인강의 다 듣기 개인과제 시작! 알고리즘 과제스탠다드 과제 PS) 과제가 너무 많아!!!화이팅...

조건이 있는 filter() 18세 이상의 학생들만 선택하기 렌더링시, alert 나오게 하기 이렇게하면 학생 이름을 클릭하면 alert에 나이와 점수가 입력된다.

리액트 강의 다듣기스탠다드 과제 끝내기개인과제 초기세팅알고리즘 문제 풀기개인과제 반절하기 코드 관련해서 업데이트 예정 ps) 과제가 마치 like 백두산

stylecomponent를 쓸때,이렇게 쓰고 저장을 하면 라이브 서버에 아무것도 출력되지 않아서 당황했다... 알고보니 스타일을 지정하지 않아서 그런것혹시 아무것도 화면에 안뜬다면 스타일을 지정했는지 확인해볼것stylecomponent를 쓸거면 무조건 첫글자는 대문자

key값이 uniqe해야 하는 이유 > 불필요한 리렌더링을 막기 위해서! key={uuidv4()}는 리렌더링 될 때 마다 key 에 매번 다른 값을 넣어주고 있기 때문에 이곳에 정의하면 안됨! CamelCase 컴포넌트명이 아닌 이상 대문자로 시작하는건 안됨!

Redux DevTools 확인 설치 [Redux DevTools 설치] (https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?page=1&hl=ko&itemla

😂하나의 js파일에 initialState, action, reducer 를 모두 관리하는 것이 ducks 패턴의 기본!(비밀이지만 이거 내 구조임)이렇게 하지 말라셨다.. 한 파일안에 넣기아니면! RTK(reduc-toolkit) 사용하기 RTK(redux-tool

오늘은 개인과제 재제출과 과제6번이 같은 시간에 마감이라 최대한 집중했더니 간신히 끝냈다 허허 개인과제에 대한 해설이다. Memoization > 함수의 결과를 캐싱하여 동일한 입력에 대해 다시 계산하지 않도록 하는 최적화 기법 캐싱 자주 사용하는 데이터를 임시저

발제 첫날이라, 팀원들과 개발의 방향성에 대해 토의하였다. 필수 구현기능을 먼저 다 구현하고 선택 구현기능은 상황에 따라 추가하기로 하였다.배포: verselDB : Supabase사용하여 만들 예정이다. 둘다 안써봐서 새로운 것을 배우는 것에 기대감이 있다 👍내가

모달 사용하는 부분이 있어, react-modal을 이용하였다 isOpen={true} / isOpen{false} 로 모달창의 켜짐과 꺼짐을 담당하는 속성으로 state를 이용하여 관리하면 쉽게 on,off 되는 모달창 구현 가능하다. 이렇게 스타일 적용하면! 모달이

supabase를 공통으로 사용하지만, 코드가 달라서 merge할때 꼬이게 되어버린 사건이다...supabase를 사용하려면, .sppabaseClient.js를 생성하여 이렇게 넣어준다. 이 부분은 git에 올려져도 되니 괜찮다! env파일은 import.meta.e

id값을 고유한 키로 바꿨더니, auth에는 잘 저장이 되는데, usertable로 데이터가 자동업데이트가 되지 않는 현상이 발견되었다. email 말고 또 다른 고유한 값의 id가 있어야지만 나머지 기능이 작동하기 때문에 고유한이라는 말만 듣고 uuid를 생성해버렸

redux 타임어택을 진행했는데, 생각보다 오래 걸려서 redux에 대해 자세하게 정의하고자 적는다. JS의 상태관리 라이브러리이다. React에서 state는 자식 컴포넌트들 간의 데이터 전달이 다이렉트로는 불가능하다. 자식 컴포넌트들 간의 데이터를 주고 받을때는 상

하나의 버그를 발견했다!zustand를 사용하여 초기상태를 설정했는데, 초기 로그인 상태를 false로 두고 사용자가 로그인 상태이면 true, 로그인상태가 아니면 false를 반환하도록 코드를 구현했다. 하지만 로그인하고 새로고침 하면 로그인이 유지가 되지 않았다.

배포 과정이 헷갈려서 정리해놓기프로젝트에서 json-server를 활용했는데, 배포할때, 리액트 파일은 vercel로 배포하고 json-server는 glich로 따로 배포해야하는데 이 과정이 헷갈렸다. json-server는 --watch db.json --port

이번 팀프로젝트를 하면서 새로운 도전을 시도하는중이다. 매번 쓰던 version의 router가 아닌 새로운 버전의 router를 써보기로 하였는데, 이게 익히기전엔 이해하기가 어렵다가 알고나니 유용하더라. React Router v6에서 도입된 새로운 개념으로, 중첩

20240619

zustand 라이브러리에서 사용하는 두 가지 미들웨어 persist와 immer에 대해 설명드리겠습니다. persist persist는 zustand 상태를 로컬 스토리지(localStorage) 또는 세션 스토리지(sessionStorage)에 저장하여 페이지를

페이지당 항목 수(Items per Page): 한 페이지에 표시되는 데이터 항목의 수 총 데이터 개수(Total Count): 전체 데이터의 총 개수전체 페이지 수(Total Pages): 전체 데이터를 페이지당 항목 수로 나누어 얻은 총 페이지 수 페이지 번

설문 조사를 통해 음식 추천 사이트Today-s-menu 오늘 뭐먹지?개발 기간 : 2024.06.17~2024.06.21설문조사 게시글 검색/ post 레시피 CRUD레시피 코멘트 CRUDAuth가 포함된 로그인 / 회원가입 프로필 / 닉네임 변경 기간 내에 프로젝트

타입스크립트 관련하여 처음으로 주어진건, Todolist 같은 사이트인데 API를 받아와서 나라들을 sort하는 사이트사실 JS와 다를건 없지만 type 지정 때문에 그냥 모든게 낯설다.. 처음 보는 TS..그래도 다행인건 모든 type에 대해서 알고 있어서 사실 감만

개인과제를 최종 확인하던 도중, favorite country에서 country로 되돌리면 카드들이 원래 위치가 아니라 맨 아래로 내려간다는 것을 발견했다. isFavorite을 type에 추가해서 사용해도 되었지만,한줄만 쓰면 해결되는 문제였다.countries 배

📦src ┣ 📂api ┃ ┗ 📜countriesApi.ts ┣ 📂components ┃ ┣ 📜CountryCard.tsx ┃ ┗ 📜CountryList.tsx ┣ 📂types ┃ ┗ 📜Country.ts해당되는 구조에 맞게 type 설정 제너릭을 사용하여

프레임워크와 라이브러리 프레임워크? > 개발자가 기능 구현에만 ‘딱’ 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 ‘기술의 조합’

문제 다른 분들 컴퓨터에서는 문제가 나오지 않는데, 내 컴퓨터에서는 map에서 에러가 난다. 확인해보니 데이터가 들어왔다가 다시 초기화가 되는것 같다. 왜 그런건지는 모르겠어서 해결하는데에 많은 시간이 들었다. 왜냐? 나한테만 나는 에러니까,, 라우터는 주어진 부분

디테일 페이지를 만드는 곳에서 나온 트러블 슈팅를 했더니 id에서 에러 나길래이제 위와 같은 별도의 라우터 컴포넌트와 useParams 훅 사용 필요없이 상세 컴포넌트의 props 로 params 접근이 가능그래서 params로 바꿨다.처음에는 useState , us

이런식으로 나타나게 하고 싶다면, pokemone ID를 항상 세 자리 숫자로 표시하도록 형식을 지정하는 기능을 한다. pokemon.id.toString(): pokemon.id를 id를 숫자로 조작할 수 있게 문자열로 변환한다. .padStart(3, "0") 변환

라우터가 없는 NEXT에서 header를 만들때 어떻게 만들어야하는지 막막했다. 일단 라우팅이 되는 과정은 알겠는데, APP파일이나 라우터 파일이 없으니 헷갈렸다. header는 여기저기 다 쓰이기 때문에 molecules라는 폴더를 src에 만들어서 페이지를 만들어주

라우터가 없는 Next.js 환경에서 특정 경로(/meeting)에서는 푸터를 sticky로 설정하고, 나머지 경로에서는 fixed로 설정하고 싶어했다. 이를 위해 기존 Footer 컴포넌트를 수정하고, CVA를 사용하여 변형을 적용했다.position을 sticky와

Next에서 user 정보를 가져오는 부분을 구현할때 hydration 에러가 났다.리액트에서 하던대로 해서 에러가 생길거라고 생각하지 않았는데 왜document, window를 사용하지 않아서 더욱이 왜 에러가 나는지 알지못했다단순히 div, span 관련 에러라고

주요 : 기획일시 : 2024.07.16참여 인원 : 개발팀 전원(총 5명) + 디자이너 팀명 : 5조사마 (제출은 하셔야 합니다 못 말리는 아가씨) 👓 🕴️실시간 채팅실현 가능성 여부API 가능 여부 확인휴가지를 찾아주기사용자들이 좋아하는 풍경, 날짜, 활동, 여

IA 경쟁사 분석 레퍼런스 기능정리

https://developers.naver.com/docs/serviceapi/search/image/image.md사용해서 검색 가능! 유튜브 API 추가해당 키워드에 맞는 유튜브 영상 뽑아오기지도 API 추가시장의 위치 마커api들 정상 작동 확인supa

이제 기획이 끝난거지만 그리고,,, 아직 최종프로젝트 시작 일주일도 안되었는데 그냥 막바지인 기분,,, 카카오톡 소셜 로그인을 냅다 시작하려고 했는데, 코드만 짜면 되는데 감이 111도 안잡혀서 그냥 ui 부터 후딱 만들었다... 소셜 로그인 오래걸릴거라곤 생각했는데

회원가입을 퍼널 형식으로 만들었다. 퍼널이란? 쉽게 말해, 토스 회원가입 형식이라고 생각하면 된다! 한 페이지마다 한개의 input이 있는거다. 퍼널형식을 채택하기까지 고민이 많았다. input이 포함된 모든 페이지를 만들어하는가 input을 하나씩 받아오면 어떻게

로그아웃만 하면 자꾸 400 에러가 난다. getUser route의 문제인걸 단번에 알았는데, user가 없을때 적어놓은 400에러를 반환하는 것이다. 이렇게이런식으로 수정하면 500에러가 계속 나서, console을 계속 찍어보니, console은 계속 나오지도 않

리디렉션이 안되서 6시간이나 한사람 나야나 결국엔 코드 3줄 추가로 해결했다...하지만 이 코드는, 서버 응답을 사용한 리디렉션으로 서버로부터 소셜 로그인 URL을 받아와서 사용자를 해당 URL로 리디렉션하게 하는 코드이다.예를 들어, 서버에서 OAuth2를 동적으로

1차 배포를 오늘 진행했다. 최종 제출전에 type이랑 다 맞는지 확인해야하고, 만약의 사태를 위해 배포를 진행했다. 일단, 로 나오는 모든 에러는 성공하지만, vercel 배포 과정에서 외부데이터를 fetch하는 과정에서 에러가 났다. 서버사이드로 써놓으신 코드가 f

이쯤되면 그냥 진짜 마이페이지 이미지 변경이란 변경은 다해본거 같지만, 매번 다른 방식으로 변경해서 매번 나는 에러들;; 프로필 변경이 되지 않는 문제가 발생했다. 이미지 url은 들어오는데 이미지가 변하지 않는 문제가 있었다. 처음에는 class method를 할때,

오늘 한 일 디자이너님께 ui 전체 싹 다 컨펌 ui 수정 미들웨어 처리 소셜 로그인 카카오랑 구글 배포 주소로 옮기기! UT 다가오는중,,, 그리고 발표도,, 발표자 나,,,,그리고 한번에 성공한 배 포 우헤헤 자랑스러움

MVP 중간발표가 있었다. 일단 너무나도 좋은 결과물과 ppt를 발표자인 내가 어떻게 잘 보여줘야할지에 대한 걱정이 많았다. 발표만 하면 너무너무 떠는 사람이라.....아무것도 눈에 보이지 않는 사람,,, 아무튼 준비한대로 무사히 발표를 마쳤고! 이글을 빌어, 발표에

비회원으로 둘러보기 기능을 추가해야해서 미들웨어를 건들였다! 슈퍼베이스 ssr 공식문서 에 나오는 미들웨어를 통해 관리하고 있었는데, 필요에 의해 비회원으로 둘러보기 기능을 만들어서 수정했다. 일단, layout이 변경되는 경우가 있어서 쿠키를 무조건 건들여야하는 상

kakao developers에 가서 -> 내가 만든 애플리케이션을 클릭! -> 앱 설정 -> 앱키 -> Javascript키를 복사하여 env.local에 넣어주고 시작해야한다.이 과정을 했다면 다음은 공식문서 살펴보면 된다. 카카오 지도를 사용하는데, 지도가 잘 나

이메일과 닉네임에서 중복확인이 되지 않으면 다음 단계로 넘어가지 않게 하려고 했다. 중복확인이 안되면 안넘어가지기는 하는데, 이메일 중복확인을 누르는 순간 닉네임 중복확인이 같이 되어, 닉네임 페이지로 가면, 아무것도 입력하지 않았는데 중복확인 메시지가 뜨는것을 확인할

작성중

관심 전통시장을 연결하는 와중에 튜터님께서 관심 전통시장 페이지에서도 좋아요 삭제가 있었으면 좋겠다고 하셔서 이때다 싶어서 낙관적 업데이트로 구현해 보았다. 낙관적 업데이트란? 낙관적이라는 말이 긍정적으로 보는 마인드 라는 의미를 담고 있듯이, 낙관적 업데이트는 서버

작성중

어제 최근 본 전통시장 구현 완료 후, 오늘은 전체적인 ui 작업 수정과 짜잘한 에러들 수정 후에 발표 준비! 최종프로젝트 d-1 떨리고도 떨리지만 아쉽고도 아쉬운 약간 이 시원섭섭한 느낌 전체적인 ui 작업 발표 ppt 만들기 리드미 (기가막힘)짜잘한 에러들 확인