김철용 기록소

랜덤고양이 이미지를 보여주는 페이지를 추가했습니다. useEffect 함수를 사용해서 페이지 접속시 고양이 사진을 불러오도록 해뒀습니다. 클릭시 새로운 고양이 사진을 불러올 수 있는 onClickImg 함수를 만들었습니다. img 태그와 button 태그 둘 다 onClick 함수를 적용해줬습니다. 사용자는 이미지를 클릭해도, 버튼을 클릭해도 새로운 고양이 이미지를 얻을 수 있습니다. 사실 https://cataas.com/ 이 사이트의 gif 이미지를 불러오는 api를 사용하고 싶었는데이 사이트는 api가 반환해주는 것이 이미지 자체라 사용하지 않았습니다.useEffect를 사용해보고 싶었는데, api가 이미지 자체를 반환해주면 useEffect 사용 없이 state에 초기값으로 넣어버리면 그만이기 때..

리팩토링 contents는 onChange 이벤트에서 event 타입이 달라 묶지 못했습니다. onChangeWriter 함수와 onChangePassword 함수를 onChangeInputs 함수 하나로 대체할 수 있게 되었습니다. 무한 스크롤 기능 추가 react-infinite-scroller 라이브러리를 사용해서 기능을 추가했습니다. useQuery에서 제공하는 fetchMore 함수를 사용, 무한 스크롤 컴포넌트의 loadMore 함수를 구현했습니다. fetchMoreResult의 타입 에러가 발생하는데, 아직 해결하지 못했습니다. prev의 타입과 같아야 한다고 생각하는데, fetchMoreResult가 중괄호 안에 위치하는 property라 뭔가 문제가 발생하는 것 같습니다.

본 포트폴리오는 인프런 강의 " [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스 "에서 실습 과제로 진행하는 포트폴리오입니다. 실습을 시작한 시점부터 현재까지 기록한 내용이 없기 때문에 지금까지의 주요 내용들을 정리할 것입니다. 이후부터 코드를 추가하거나 수정하게 되면 블로그에 그 내용을 기록할 예정입니다. 파일 구조 boards 폴더에는 자유게시판과 관련된 파일들이 위치합니다. /boards는 자유게시판 목록을 보여줍니다. /boards/new는 게시글 작성 화면을 보여줍니다. /boards/[id]는 게시글 상세 화면을 보여줍니다. /boards/[id]/edit은 게시글 수정 화면을 보여줍니다. src 폴더에는 여러 곳에서 사용가능한 함수나 쿼리, 타입을 위치해둔 commons와 컴포넌트들을 ..

캐러셀(carousel)은 슬라이드쇼 같은 방식으로 콘텐츠를 표시하는 UX이다. 캐러셀은 회전목마를 의미하는 영단어인데, 캐러셀 메뉴를 보면 왜 이런 이름이 붙었는지 알 수 있다. 부스트코스 프로그래머스 11번가 쿠팡 아무 사이트나 들어가봐도 캐러셀 메뉴가 있는 것을 쉽게 찾아볼 수 있다. 이 캐러셀을 리액트에서 scrollIntoView를 사용해서 제작해본다. 아래 코드와 같이 캐러셀의 모양을 우선 잡아준다. 'display: flex' 속성으로 이미지 요소들을 가로로 쭉 펴준다. 'overflow: hidden' 속성으로 부모 요소를 넘어간 요소들을 보이지않게 숨긴다. 'gap' 속성은 이미지 요소들 끼리의 간격을 설정할 수 있게 해준다. 'align-items: center' 속성은 이미지 요소들을..

api를 사용해서 이미지를 가져올 때, 이미지가 없어서 엑스박스로 처리되는 경우를 볼 수 있다. 이럴 때는 onError 이벤트를 사용해서 엑박 이미지에 대한 처리를 해줘야 한다. 먼저 엑박 이미지를 대체할 이미지를 찾아서 쓰거나 만들어서 준비해둔다. 이제 아래와 같이 코드를 추가해서 엑박 이미지 대신 대체 이미지가 사용되도록 해준다. 이제 리액트앱에서 확인해보면 엑박 대신 대체이미지가 사용된 것을 볼 수 있다.

react-youtube 패키지로 간단하게 리액트에서 유튜브 영상을 삽입할 수 있다. npm install react-youtube 프로젝트에서 터미널에 위 명령어를 입력해서 react-youtube 패키지를 우선 설치해야 한다. 설치가 완료되면 다른 컴포넌트들과 동일하게 import해서 사용하면 된다. import Youtube from 'react-youtube' 컴포넌트의 속성은 아래와 같은 종류들이 있다. '' id={string} // defaults -> '' className={string} // defaults -> '' iframeClassName={string} // defaults -> '' style={object} // defaults -> {} title={string} // d..

웹페이지 링크 : https://cheolyong-kim.github.io/movieApp/ React App cheolyong-kim.github.io Nomad Coder 사이트의 'ReactJS로 영화 웹 서비스 만들기' 강의를 보고 만든 앱이다. https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co YTS 사이트에서 제공하는 API를 사용했다. 강의에서는 api에서 데이터를 가져다 쓰는 방법과, 리액트 라우터를 사용하는 방법 정도를 알려주기 때문에 css를 비롯해 기능을 추가한 웹페이지 제작은 학습자 본인이 끝마쳐야 한다. 간단한 데이..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/42840?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(answers) { var supo1 = [1, 2, 3, 4, 5]; var supo2 = [2, 1, 2, 3, 2, 4, 2, 5]; var supo3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; var check = [0, 0, 0]; for (var i = 0; i < answers.length..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/135808 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(k, m, score) { var sortedScore = score.sort((a, b) => a- b); var answer = 0; while(sortedScore.length >= m) { var appleBox = sortedScore.splice(-m); answer += appleBox[0] * m; } return answer; } 메모 ..