profile
Whatever you want
태그 목록
전체보기 (65)TIL(16)JavaScript(14)WeCode(13)React(6)array(3)lush clone(3)위코드(3)function(3)훈훈한연들(2)object(2)useLocation(2)for loop(2)State(2)pathname(2)onClick(2)nextjs(2)제주도코딩베이스캠프100제(2)variable(2)position(2)GNB color(2)String(2)boolean(2)제코베(2)error(2)westagram(2)null(2)display(2)함수호출(1)Function Component(1)typescript error(1)Carousel(1)회고(1)페이지 이동(1)component(1)semantic tag(1)반복문의 종류(1)packages.json(1)npm err(1)terminal(1)동기(1)link(1)public(1)npm(1)instance(1)git push(1)push(1)드림코딩(1)git rebase(1)논리연산자(1)Undifined(1)Symbol(1)merge(1)encodeURIComponent(1)http(1)CRA(1)Westagram clon(1)비교연산자(1)전역 변수(1)debugging port change(1)arguments객체(1)Request(1)Response(1)dot notation(1)머치스퀘어(1)new Fucntion(1)객체(1)iterate(1)onMouseEnter(1)Index(1)특수문자(1)다양성(1)RIDIBOOKSLBOOKSL(1)instanceof(1)componentdidupdate(1)bracket notation(1)MPA(1)project회고(1)getServerSideProps(1)기업협업(1)매개변수(1)Prototype(1)게터 세터(1)useEffect(1)useState(1)DecisionDaddy(1)for ~ in(1)number(1)비동기(1)node.js(1)parameter(1)class(1)while(1)git remote change(1)지역 변수(1)배열 요소(1)e.preventDefault()(1)npm install(1)console log(1)Link 컴포넌트 에러(1)variable data type(1)query(1)nested for loop(1)조건문(1)break(1)문자열(1)반복문(1)2차 프로젝트(1)인스턴스(1)iteration statement(1)continue(1)next(1)let(1)var(1)실시간 시계(1)object literal(1)conflict(1)Router error(1)npm error(1)304 error(1)keybordevent(1)key(1)장바구니(1)삼항연산자(1)homebrew(1)clickevent(1)authorization(1)개발자도구(1)RIDIBOOKSL(1)함수(1)setInterval(1)setTimeout(1)lushClone(1)DOM(1)if문(1)code 1(1)선택자(1)원시 데이터 타입(1)RIDIBOOKLS(1)CSS(1)함수선언(1)html(1)clone(1)구조분해할당(1)레파지토리 연결(1)헌트(1)hook(1)@property(1)함수반환(1)dropmenu(1)정적메서드(1)CSR(1)SSR(1)장바구니 수량변경(1)splice(1)getStaticPaths(1)생성자 함수(1)로컬스토리지(1)Pop(1)tsconfig.json(1)nvm install(1)부모클래스(1)onchange(1)split()(1)custom hook(1)클래스(1)Overriding(1)산술연산자(1)getter(1)setter(1)extends(1)Fetch(1)Chrome Devtools(1)addEventListener(1)spa(1)최근검색어 저장(1)node version manager(1)github(1)상속(1)getStaticProps(1)React Router v6(1)JSX(1)toggle(1)slice(1)semantic web(1)ssg(1)next js(1)RIDIBOOKS CLONE(1)useNavigate(1)중첩반복문(1)페이지 이동 props 전달(1)팀프로젝트(1)styled component(1)HHYYY(1)node update(1)Truthy(1)Falsy(1)Props(1)componentDidMount(1)TS18003(1)private(1)for ~ of(1)Javasciprit(1)URL 인코딩(1)url 특수문자(1)element(1)Slick library(1)do while(1)static(1)node install(1)git(1)객체 데이터 타입(1)룰렛(1)typescript(1)argument(1)new 연산자(1)상품수량 수정(1)Event(1)
post-thumbnail

node js install using nvm

노드 버전의 문제가 계속 일어나서 다시 노드를 재설치하기로 마음을 먹었다.새로운 노드 버전을 설치 전에 nvm을 통해서 노드를 설치하면 노드 버전 관리하기 좋다고 해서 homebrew 설치부터 시작했다.lsbom -f -l -s -pf /var/db/receipts/o

2022년 9월 6일
·
0개의 댓글
·
post-thumbnail

[npmError] npm ERR! code 1

npm ERR! code 1npm ERR! path /Users/...npm ERR! command failednode 버전을 업데이트 하고, 프로젝트를 클론받고, npm install 하는데 에러가 발생했다.검색 해 보니 package.json 파일 안을 수정해야 한

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

[TypeScript] error TS18003

error TS18003: No inputs were found in config file ...기존 프로젝트 안에서 타입스크립트를 설치하는 과정에 오류가 생겼다.분명히 npm install -g typescript를 해서 설치했고, npm typescript -v 버

2022년 8월 12일
·
0개의 댓글
·
post-thumbnail

[GIT REMOTE CHANGE]

stack overflowgit remote url 을 변경해야 하는 경우vs code 편집기에 들어가서 remote 위치를 확인한다소스관리 할 레파지토리 주소를 복사해서 붙여넣는다.생성한 레파지토리에 커밋하고 푸쉬한다.

2022년 8월 1일
·
0개의 댓글
·
post-thumbnail

[NEXT JS] Custom hook? 코드 리팩토링

custom hook은 반복되는 로직을 재사용하는 방법으로 꼭 함수명을 use로 시작하고, 그 안에 함수를 작성한다.그 안에 useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현한다.다른 페이지에서

2022년 7월 29일
·
0개의 댓글
·
post-thumbnail

[NEXT JS] Data Fetching

클라이언트에서 렌더링을 하는 방식으로 유저가 페이지에 들어오면 클라이언트가 서버로 데이터를 요청한다. 그 사이 빈 html로 먼저 렌더가 되고, 그 후에 서버로부터 데이터를 받아 페이지를 그려낸다. 데이터(HTML, JS)를 받을 때까지 화면은 빈화면만 띄워진다.그래서

2022년 7월 26일
·
0개의 댓글
·
post-thumbnail

[NEXT JS] 최근검색어

검색창에 입력한 검색어 및 키워드를 클릭 시, 최근 검색어에 저장하고 불러오기로컬스토리지에 저장된 검색어들을 배열에 저장하고,브라우저가 모두 랜더링된 상태에서 실행하도록 설정 \* 로컬스토리지에서 배열을 가져올 때는 JSON.parse(localStorage key)로

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

[NEXT JS] encodeURIComponent()

검색 페이지에서 특수문자 입력 시, 입력한 특수문자 전부 검색 결과 페이지에 받아오기.검색 페이지에서 입력한 검색어를 쿼리로 검색 결과 페이지로 넘겨준다.검색어에 \`\*\*\*cut_query검색창에 입력한 값은 url에 있는 것과 같이 !@그러나 화면에 찍히는 값은

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

[React] GNB 현재 위치 표시-추가

pathname이 일치하면 GNB tab color 유지하기전 글에서 보다시피 GNB에 따른 페이지 이동 시, color 변경은 해결되었지만 문제가 있었다.예를 들어 검색페이지가 있고, 검색결과페이지가 있다면 이 둘 모두 GNB에 있는 검색탭이 변동없이 color가 유

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

[React] GNB 현재 위치 표시

현재 사용자가 어느 페이지에 있는지 표시하기 위해 페이지 이동 할 때마다 GNB color 변경페이지 이동은 Link로, color 변경은 onClick 으로 단순하게 생각했었다.페이지에 머무르는 동안에는 GNB color를 유지해야 하고, 페이지 이동 할 때마다 co

2022년 2월 6일
·
0개의 댓글
·
post-thumbnail

리액트-디버깅포트주소

디버깅포트주소

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

useNavigate() & useLocation()

제품 상세 페이지에서 "결제하기" 를 눌렀을 때, 결제페이지로 이동하면서 데이터를 전달해야 한다.다음주 월요일까지 프론트에서 주문정보를 보내서 서버에 저장되고 난 다음에 결제하는 외부 API 호출한 후, 결제를 하고.. 또 결제정보를 서버로 보낼 수 있도록 해야한다..

2022년 1월 15일
·
1개의 댓글
·
post-thumbnail

[에러]-Link to

에러를 읽으면 답이 보인다.그렇지만 어디에 에러가 났는지 정확하게 알 수가 없는 경우도 있다.Link component에 관련해서 에러가 두 번이나 났다.경로가 잘못 지정되면 하기와 같은 에러문구들이 뜬다!.properties of nullLink error이 경우에는

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

React Router, SPA,MPA

React Router 화면 전환하는 Router CSS 전처리기 Sass SPA 란? single page application : 페이지가 1개인 애플리케이션 페이지 수만큼 html 파일이 존재 (mpa방식)하지만 리액트 프로젝트에서 .html 파일은 1개

2021년 12월 30일
·
0개의 댓글
·
post-thumbnail

[REACT] TypeScript CRA Error

리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구 (Toolchain)CRA뿐만 아니라 Next.js / Gatsby 등이 있다.TypeScript 과제를 수행하기 위해 초기세팅을 혼자서 했다.로컬 컴퓨터에서 폴더을 만들어서 react 설치 후 깃허브와 연

2021년 12월 22일
·
0개의 댓글
·
post-thumbnail

[LUSH 프로젝트] - 장바구니 상품수량 변경 추가구현

구현기능상품수량수정TableBody.js구현 영상최근까지는 functional component를 사용했어서 오랜만에 class component를 쓰려니 헷갈렸다. useState의 편리함을 다시금 알게된..?현재 백엔드서버 없이 추가구현하고 있기 대문에 백엔드에서

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

동기 / 비동기

동기 비동기

2021년 12월 12일
·
0개의 댓글
·

[깃허브] 커밋푸쉬 그리고 잔디

내 깃허브에 잔디가 안심어진 이유 기업협업 나간 이후 약 1달 동안의 잔디가 심어지지 않은 걸 바로 일주일 전에 알았다. 그동안에는 커밋 & 푸쉬를 열심히 했고, 그리고 프로젝트에 잘 반영되었기에 의심하지 않았다. 하지만 한번이라도 봤어야 했다. 의심되지 않았어도

2021년 12월 5일
·
0개의 댓글
·
post-thumbnail

[초보개발자의 회고]

위코드의 2개월과 기업협업 1개월이 끝나 현재 시점에서 되돌아 보는 회고 내가 생각하는 나 다른사람을 배려하고 존중하자 위코드에서의 나 팀원들에게 피해주지말고 책임감을 갖고 적극적으로 참여하자 위코드의 커리큘럼을 잘 따라갈 수 있을까 하는 생각이 제일 컸습니다. 전

2021년 12월 3일
·
4개의 댓글
·

[기업협업프로젝트] Error handling

Error handling > title / option 을 입력하는 input 창에 값이 안 들어갔을 경우에 비어있는 input창에 Error message 띄우기

2021년 11월 29일
·
0개의 댓글
·