스크롤을 반복적으로 할 경우 '깜박임' 현상 발생scrolling 중 반복하여 setTimeout()을 호출.첫 setTimeout()이 끝나는 시점에서 수많은 scrolling 호출이 들어가면서 스크롤이 깜빡이는 현상 발생.timer 변수는 함수 밖에서 선언해야한다.

styeld Component가 SASS보다 좋은게 뭘까? 하면서 반신반의로 사용해 보았다. 근데 겁나 좋다.. ㅋㅋㅋ요렇게 해당 태그에 props를 전달해주면 해당 페이지에서 바로 props를 받아 적용해 버릴 수 있다.이거 외에도, 컴포넌트의 css를 그대로 재활용

익숙치 않은 git rebase.. 적어두고 계속 보면서 사용하자.merge 할 때마다 이력이 남는다.history가 중요할 때 사용.선형적인 이력 관리가 가능최신화된 main 뒤에 붙는다.불필요한 커밋 메세지가 없어 깔끔한 이력관리 가능. git rebase -i m

이번 프로젝트를 진행하면서 가장 사용해 보고 싶었던 것이 전역 상태관리였다. redux 보다 더 간단히 사용해 볼 수 있는 ContextApi를 써보았다.사실 프로젝트 구조를 보면 contextApi를 쓸 필요가 없었다 ㅎㅎnavbar에서 바로 모달로 로그인을 시키기

aws 사이트 로그인 후 '인스턴스 시작하기' 버튼을 클릭 해 ubuntu 프리티어 서비스를 선택해준다.과금 되는 부분은 조심하면서🙀 서브넷 설정 + 우발적 종료방지 기능 check태그 추가 클릭 후 키, 값 둘다 입력규칙 추가 클릭포트 범위 설정소스 (위치 무관)

동적 라우팅을 통해 카테고리를 클릭 할 때 마다 다른 상품들, 표지 이미지를 변경시켜 주었다. 리스트 페이지에 처음 들어갔을 때 전체에 스타일이 적용되어 있어야 하고 새로고침을 하여도 내가 클릭한 카테고리가 selected 되있어야 한다!처음 이 기능을 구현하고자 할

⚡️ 카테고리 클릭 시 대표 이미지와 카테고리에 맞는 상품 리스트가 출력되어야 하는데, 백엔드와 통신 이후 이미지 값을 가져오지 못하고 componentDidMount / componentDidUpdate 에서 fetch를 진행할 경우, 계속해서 백엔드에 요청을 보내는

API(백엔드에서 주는 기능 하나하나) 시스템을 구현하기 위한 아키텍처(구조) 중 가장 널리 사용되는 형식GET/beverage/1 : 1번 음료 조회 요청 ( 데이터 요청) HTTP method / URI 내가 원하는 Resource 요청.URI = 해당 사이트의

Input: 0,1,0,3,12Output: 1,3,12,0,00이 앞에 연속으로 있으면 인덱스의 0번째가 바뀌기 때문에 slice()를 사용해도 걸러지지 않는 부분이 있었다.slice()를 사용하고싶다면 배열을 앞이 아닌 뒤에서부터 돌렸어야 한다.

React로 클론코딩을 진행한 후 , 코드 리뷰를 통해 더욱 퀄리티 높은 코드를 작성하도록 노력하자!다음 프로젝트에서는 이부분 더 신경써서 코딩하기!!💪배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식before할당한

바닐라 js로 구현한 instagram 클론 프로젝트 => React로 바꿔보기!!⚡️ 본격적으로 React를 사용해보면서 특히나 어려워했던 기능들/코드들을 기록해보려 한다. ( 다음엔 어려워하지말자!! )MOCK 데이터를 활용해 component 재활용! (스토리,유

nums = 1,1,,12,2,3,k = 2return 1,2nums = 1k = 1return 1꾸역꾸역 복사하고~ 자르고~ 해서 완성한 코드가 팀원분 것을 보니 반토막이 나있었다 ㅋㅋㅋㅋㅋㅋ객체를 문제 풀 때 더 적용해 보려 노력해야겠따🧐

숫자로 이루어진 배열인 nums를 인자로 전달합니다. 숫자중에서 과반수(majority, more than a half)가 넘은 숫자를 반환해주세요.과반수라는 문제 조건을 따르지 않고 가장 많은 수의 length를 구하는데 w집중해 코드가 많이 길어져버렸다 ㅎㅎ; 문제

댓글의 좋아요 클릭시 모든 좋아요 상태가 바뀌어버림각 댓글들의 idx값을 알아와야 하는데 계속 헛손질만 하면서 시간을 날려버림 ...ㅠspred 연산자(...)를 만들어 기존의 replys를 복사.deleteReply() 함수 처럼 수정할 부분만 수정한 객체를 갈아끼워

로마자에서 숫자로 바꾸기1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다.로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27

프로젝트를 하면서 그동한 생소해서 써보지 못했던 함수들을 정리해보려고 한다.공식문서를 보면 '모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.' 라는 문구가 있다.concat() 메서드는 주어진 배열이나 값들을 기존 배열에

strs은 단어가 담긴 배열입니다.공통된 시작 단어(prefix)를 반환해주세요.예를 들어strs = 'start', 'stair', 'step'return은 'st'strs = 'start', 'wework', 'today'return은 ''처음엔 두번째 요소의 pr

React로 댓글 생성 컴포넌트를 만들던 도중영어로 입력할때는 정상적으로 작동하는데, 한글로 입력할 때에만 이벤트가 두번 실행되는 에러를 발견했다.아무리 봐도 코드에 잘못된 부분을 찾지 못해 한참 시간을 허비한 끝에 해결했다!!onKeyUp => onKeyPress로

String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요.str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환)예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길기

라우팅이란 경로를 찾아주는것!하나의 HTML로 여러 경로들을 보여줄 수 있다. <=> MPA이 때 한 페이지에서 여러 경로들을 보여줄 수 있는 방법이 Routing기술이다.React는 프레임워크가 아닌 라이브러리이기 때문에 라우팅 기능이 포함되지 않았다.react