post-thumbnail

React : Scroll blinking현상 해결

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

2021년 9월 23일
·
0개의 댓글
post-thumbnail

Oneted 클론 팀 프로젝트

gitHub레파지토리저번 정육각 팀 프로젝트 때 class형 컴포넌트를 사용하여 프로젝트를 사용하였다면, 이번 프로젝트 때에는 함수형 컴포넌트를 사용하였고 SASS 대신 styled component를 사용하였다. 👍class형 컴포넌트와 SASS에 익숙해져 있었던

2021년 7월 31일
·
0개의 댓글
post-thumbnail

Styled Component | props 전달

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

2021년 7월 25일
·
0개의 댓글
post-thumbnail

git | rebase

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

2021년 7월 25일
·
0개의 댓글
post-thumbnail

React : ContextApi 사용법 (useContext)

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

2021년 7월 23일
·
0개의 댓글
post-thumbnail

EC2 서버에 프로젝트 업로드하기

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

2021년 7월 18일
·
0개의 댓글
post-thumbnail

React | 정육각 클론프로젝트 후기

github레퍼지토리 정육각 클론 페이지 바로가기 2주간 React를 배우고 드디어 프로젝트를 시작하게 되었다! 기쁘게도 내가 제안한 사이트인 정육각이 선정되어 기간 동안 재미있게 진행할 수 있었다.💪 선정 이유 비록 이전에도 인스타그램 클론 코딩을 진행해보긴

2021년 7월 18일
·
0개의 댓글
post-thumbnail

React 동적 라우팅 활용한 클릭 이벤트

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

2021년 7월 15일
·
0개의 댓글
post-thumbnail

React : 조건에 맞게 fetch를 하고싶을때(feat.무한루프)

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

2021년 7월 9일
·
0개의 댓글
post-thumbnail

REST API

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

2021년 7월 8일
·
0개의 댓글
post-thumbnail

0을 배열의 마지막쪽으로 이동시키기

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

2021년 7월 8일
·
0개의 댓글
post-thumbnail

instagram 클론코딩 ver2(코드 리뷰)

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

2021년 7월 3일
·
0개의 댓글
post-thumbnail

React - instagram 클론코딩 ver2

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

2021년 7월 1일
·
2개의 댓글
post-thumbnail

가장 많이 중복된 숫자 k개 찾기

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

2021년 7월 1일
·
0개의 댓글
post-thumbnail

과반수가 넘은 숫자를 반환하기.

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

2021년 6월 29일
·
0개의 댓글
post-thumbnail

React - 댓글 좋아요 클릭 오류

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

2021년 6월 28일
·
0개의 댓글
post-thumbnail

로마자에서 숫자로 바꾸기

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

2021년 6월 28일
·
0개의 댓글
post-thumbnail

React - Concat(), spred syntax

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

2021년 6월 25일
·
0개의 댓글
post-thumbnail

공통된 시작 단어(prefix) 찾기

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

2021년 6월 25일
·
0개의 댓글
post-thumbnail

React 한글 입력 시 Event가 두번 실행

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

2021년 6월 24일
·
0개의 댓글