profile
수리의 프론트엔드 개발 공부 블로그 입니다 :D
태그 목록
전체보기 (165)TIL(60)코드캠프(55)팀프로젝트(21)회고(17)JavaScript(7)React(5)graphql(4)git(3)component(3)REST(3)custom(3)https(3)useState(2)prev()(2)SSR(2)vscode(2)component-lifecycle(2)useEffect(2)에러기록(2)API(2)자바스크립트(2)promise(2)import(2)Props(2)layout(2)Symbol(1)refresh-token(1)http(1)cookies(1)옵셔널체이닝(1)Graphql-codegen(1)public API(1)코드켐프(1)browser(1)이미지(1)memoization(1)yarn(1)gitbash(1)Class Component(1)color(1)callback(1)kakaomap(1)react hook form(1)프론트엔드(1)Shallow Routing(1)getDocs(1)csrf(1)Firebase(1)Recoil(1)await(1)Functional(1)async await(1)react-day-picker(1)nullish(1)async(1)return(1)검색(1)Presenter(1)export(1)&&(1)unflatten(1)useApolloClient(1)포트폴리오(1)PromiseAll(1)conditional rendering(1)object method(1)Debouncing(1)asPath(1)frontend(1)observable(1)main(1)progress(1)Backend(1)login(1)생성자함수(1)query(1)hoisting(1)결제(1)Image Upload(1)error(1)template literals(1)test code(1)XSS(1)@media(1)pathname(1)Optimistic UI(1)const(1)let(1)var(1)docker(1)distructiong Assignment(1)regex(1)동적라우팅(1)context(1)fontawesome(1)useLazyQuery(1)local storage(1)원시자료형(1)useRef(1)Sort(1)참조자료형(1)CSS(1)html(1)구조분해할당(1)react-calender(1)Timestamp(1)critical rendering path(1)HoF(1)flatten(1)master(1)Functional Component(1)isSubmitting(1)object.key()(1)HoC(1)조건부렌더링(1)Crawling(1)github(1)toString(1)db(1)JSX(1)computed property(1)ssg(1)install(1)rendering(1)Recursive Functions(1)mutation(1)CRUD(1)EL(1)useForm(1)권한분기(1)Throttling(1)react-calendar(1)algorithm(1)closure(1)container(1)scope(1)Pagenation(1)react-quill(1)typescript(1)password(1)routing(1)pick(1)정규표현식(1)usequery(1)cors(1)scrapping(1)math(1)global state(1)session storage(1)이벤트루프(1)stateLifting(1)

Number, Math

toString() : 2진법, 16진법 등 진법을 바꾸는 매소드 문자를 숫자로 바꾸는 매소드 괄호안에 숫자를 쓰면 그 숫자의 진수로 바뀐다. Math : 내장객체 isNaN() : NaN인지 판별 parseInt() parseFloat() Math.random : 0~1 사이의 무작위 숫자 생성 Math.max() / Math.min() : ...

3일 전
·
0개의 댓글

Symbol

심볼은 유일한 식별자를 만들떄 사용 : 유일성 보장 property key : 심볼형 id의 유일성이 보장된다. Object.keys(user) // ['name', 'age'] Object.values(user) // ['Suri', 4] Object.entries(user) // [Array(2), Array(2)] Object mathod들은 ...

3일 전
·
0개의 댓글

Object method / Computed Property

Computed Property Object method Object.assign : 객체 복사 객체를 const cloneUser = user 라고 복사했을때, cloneUser의 값을 변경하면 원본의 값도 바뀐다. 복사맞아?? 이렇게 복사하면 빈객체가 user를 병합하므로, 새로운 객체가 되어 값을 변경해도 원본이 유지된다. 라고 복사하면 성별...

3일 전
·
0개의 댓글

생성자 함수

생성자 함수 비슷한 객체를 여러개 만들어야하는 상황에서 사용 붕어빵틀이나 와플팬이라고 생각하면 됨 빠르고 일관성있음 첫글자는 대문자로! new 연산자를 이용해서 호출 new를 안붙이면 그냥 함수가 실햄되므로 undefined 나옴.

3일 전
·
0개의 댓글

Error: Cannot read property 'replace' of undefined

문제점 배포를 하고나서 로컬에서는 뜨지 않았던 에러가 떴는데, replace 메소드를 썼나 찾아보았는데 없었다. 살펴보니 로그인을 하지 않았을때 유저 정보가 필요한 페이지에 들어가면 이 오류가 생겼다. 어쩐일인지 useAuth가 안먹히는 상황(로컬에서는 잘되는데..) > Cannot read property 'replace' of undefined:...

6일 전
·
0개의 댓글

$regex has to be a string

한 쿼리를 불러오는데, data는 계속 undefined인데 따로 별다른 에러는 뜨지 않았다.쿼리문은 잘못쓴 곳이 없어보였고,graphql에서 data를 불러와보려고 하니 그래서 Network의 Preview를 보니 처음보는 에러가 있었다.errors: \[{messa

7일 전
·
0개의 댓글

asPath / pathname

문제점 레이아웃(최근 본 목록)이 보여주지 않을(보여주고싶은) 페이지를 설정하는데 문제가 생겼다. 보여주고 싶은 페이지를 아래와 같이 적고 이렇게 설정하니 안나왔다😅 "/market" 은 안나오고 "/marktet/"은 나왔다 그런데 "/market/[useditemId]/"는 또 안나왔다. 해결 console에 router를 찍어보니 asPa...

2022년 6월 29일
·
1개의 댓글

Application error: a client-side exception has occurred (see the browser console for more information).

Application error: a client-side exception has occurred (see the browser console for more information). 배포를 하고 로그인이 필요한 특정 페이지에 들어가보니 위와같은 에러가 났다. 구글검색을 통해 알아낸 방법은 쿠키를 삭제하는 것! 그렇다면 또 쿠키가 쌓이면 이 페이지엔...

2022년 6월 29일
·
0개의 댓글

git master -> main

프로젝트를 새로 시작하려고 셋팅을하고, 레파지토리를 만들어서 git도 셋팅하고, 하던대로 git push origin master를 하고나서 깃헙에 들어가봤더니 잔디가 안심어졌다?? 보니까 이상태였던 것. 이제 master가 아닌 main이 default이고 여기에 push를 해야했는데... 근데 내 vsc에는 master라고 쓰여있었는데?? 그래서 ...

2022년 6월 17일
·
1개의 댓글

팀프로젝트 마지막 회고

프로젝트 발표가 끝났다 프로젝트 발표가 끝났다고해서 프로젝트가 모두 마무리되었다는 뜻과 일치하지는 않지만, 코드캠프에서의 공식적인 팀프로젝트 일정은 끝이 났다. 다른팀 발표하는 모습을 보면서 많은 생각이 지나갔다. 프로젝트 기획 회의하던 날의 막막함, 하나하나 기능

2022년 6월 5일
·
1개의 댓글

팀프로젝트 Day 19, 20, 21

팀프로젝트 막마지에 이르면서 이것저것 바빴다. 무언가를 구현하기보다는 안되는 기능을 찾아서 수정했고, 디자인을 수정했다. 기능구현 과정에서 잘 되었던 기능이 잘 작동하지 않는 경우가 있었다. 또 디자인이 틀어진 경우도 있어 여러 곳을 손봐야했다.

2022년 5월 31일
·
0개의 댓글

팀프로젝트 Day 18 회고

D-5오늘할일드롭다운 디자인메인페이지 디자인 정리무료페험 툴팁

2022년 5월 27일
·
0개의 댓글

팀프로젝트 Day 17 회고

오늘할일모달정리드롭다운 디자인메인페이지 마무리

2022년 5월 26일
·
0개의 댓글

팀프로젝트 Day 16 회고

오늘할일 페이지네이션 메인페이지 CRUD 수업때는 이해하지 못했던 페이지네이션을 오늘 해보면서 이해했다. 시간이 생각보다 오래걸렸는데, 이유는 목록번호 때문이었다. 생각한대로 목록번호를 뽑기가 쉽지않았는데.... 새로고침하면 음수값도 나왔기 때문이다. useEffe

2022년 5월 25일
·
0개의 댓글

팀프로젝트 Day 15 회고

오늘 할 일 어제 안되었던 주소수정! 덕분에 어제 또 못한 메인페이지 일정 퍼블리싱+패치 에러일지 TIL 주소수정이 되지않았다. addressId를 받아오라는 메시지가 떳지만, 이부분은 반환값에만 있는 것이었다. api에서 addressId를 필수값으로 만들고, fetch해온 값을 넣어주니 다음엔 address가 undefined라는 에러가 떴다. 이미...

2022년 5월 24일
·
0개의 댓글

팀프로젝트 Day 14 회고

오늘 할 일 CRUD!!! 메인페이지에 일정추가(색상값받아서) 에러일지 이미지 등록을 마치고, 수정을 하려고 하는데 문제가 발생했다. 수정할때 이미지를 새로 등록하지 않으면 깨진 이미지가 나왔다. default 이미지를 그대로 사용하라는 코드를 보냈는데도 그렇게 나와서 콘솔을 찍어보니, 이미지 url이 'h'였다. 이 'h'가 무엇이고, 왜 하필 h일까...

2022년 5월 23일
·
0개의 댓글
post-thumbnail

checkbox를 이용한 color 선택 구현

프로젝트를 생성하면서 메인 색상으로 쓸 색을 사용자가 고르도록 하는 팔레트를 만들었다. > - 색상을 map으로 뿌려준 후 한개만 선택 선택이 되었을때는 선택 되었다는 표시 선택된 색상을 string으로 받을 value 필요 라이브러리 사용하지 않고 구현하고 싶음 UI는 디자이너님이 만들어주신 figma 그대로 아래와 같이 구현하였다. 구현방법...

2022년 5월 21일
·
0개의 댓글

팀프로젝트 Day 13 회고

오늘 할 일 프로젝트 생성 페이지 C 색깔 선택 기능 추가하기 간단하게 생각했던 색깔을 고르는 기능이 생각보다 너무 복잡했다. 색깔이 하나만 선택되게해야하므로 체크박스의 형태가 되어야했다. 라이브러리를 써볼까 하다가 태그나 카테고리로 체크박스 형태로 만든 코드를 참고하여 완성했다. https://velog.io/@owlsuri/react-color-%E...

2022년 5월 21일
·
0개의 댓글

react-day-picker custom

react-day-picker 설치 range를 선택할 수 있는 daypicker를 이용하기 위해 https://react-day-picker.js.org/basics/selecting-days 이것을 사용하였다. 커스텀을 위해 node_modules에 있는 style.css 파일을 만져봤으나 적용이 되지 않아서, react-calendar를 사용할때...

2022년 5월 20일
·
0개의 댓글

팀프로젝트 Day 12 회고

오늘 할 일 달력 커스텀 마무리 프로젝트 등록 페이지 디자인 끝내기 지도추가 매일 무언가를 하고 있지만 진도가 나가지 않는 느낌이다. 삽질했다... 오늘 멘토님이 오랜만에 오셔서 개발의 90%는 삽질이라고, 그런데 그게 다 공부가 되는거라고 말씀해주셨다. 믿는 수밖에.

2022년 5월 20일
·
0개의 댓글