결론 : 리스트에서 toggle해서 컴포넌트에 전해주는 방식으로 코딩해야 개별 선택이 된다. 안됐을 때 :( 컴포넌트에서만 toggle하는 것으로 설계 : 리스트에서 뿌려진 모든 버튼이 선택됨 됐을 때 :) 리스트에서 toggle하고 컴포넌트에 props로 전달하는 방식으로 설계 : 정상 작동 postRestaurant.jsx (컴포넌트) import { useState } from 'react'; import { Link } from "react-router-dom"; const posts = ({posts, loading, reverse}) => { return( { loading && loading ... } { posts.map((post,index) => ( {post.id} {post.titl..

도큐먼트가 뷰포트의 width 100%를 차지하지 않는 현상.. 1차, 2차 프로젝트 개발에서 모두 이 현상을 겪었다. = 작업 환경 설정 시 필수 셋팅이 필요한 사항 해결 방법은 아래와 같다. 1. 헤더 안에 메타 태그를 작성한다. 2. html, body 태그에 max-width:100%, overflow-x:hidden 속성을 준다. html, body { max-width:100%; overflow-x:hidden; }

테스트용 기능을 만들때 css 전처리는 생략하는 작업이 되어버리기 때문에, 대체할 수 있는 플러그인을 찾다가 PostCSS를 발견하였다. create-react-dom으로 리액트 개발환경을 구축했을 때 생성되는 플러그인이며 css 파일명에 .module을 붙여주면 이용이 가능하다. 사용법은 아래와 같다. // color.css @value makerBlack: black; @value makerWhite: white; @value makerDarkWhite: #f5f5f3; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; @value makerGreen: #385461; @value makerblue: #1cb6e0; // size.css..

컴퓨터를 옮겨가며 react 프로젝트를 작업하면 항상 뜨는 에러가 Permission denied였다. 리액트가 노드 모듈스를 참고해서 빌드해야하는데 권한이 없는 것이다. 터미널에 아래 명령어를 입력하여 권한을 풀어줘야 한다. $ sudo chmod +x node_modules/.bin/react-scripts

유저의 회원 정보를 받는 작업들을 하며 이미지 데이터 처리에 대한 궁금증이 있었다. 찾아보니 클라우디를 이용해서 이미지를 서버에 저장하지 않고 storage에 따로 저장할 수 있었고 특히 이 서비스가 미디어를 디바이스와 채널에 맞게 최적화할 수 있다는 장점이 있어 많이 쓰이고 있다는 것을 알게되었다. Cloudinary - 사용자 이미지 업로드, 저장, 관리 기능을 제공해주는 SaaS 업체 - 사진의 Resizing & Transformation 기능 지원 - Filtering 적용 기능 지원 공식 문서를 살펴보면 사용법은 아래와 같다. If you want to implement your own upload functionality, Cloudinary provides a secure and compr..

list 순차적인 선형적 자료구조 ArrayList, LinkedList, Stack, Vector set 수학적 집합을 구현하기 위한 자료구조 중복되지 않는 유일한 값들의 집합, 배열과 유사 구분 List Set 객체 동일한 값의 중복이 가능한가? O X 요소의 순서에 의미가 있는가? O X 인덱스로 요소에 접근할 수 있는가? O X map 키와 쌍으로 이루어진 컬렉션, 객체와 유사 key(식별자)의 중복은 허용하지 않으나 value의 중복은 가능 구분 Object Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌값(ES6) 객체를 포함한 모든 값 이터러블 X O (삽입 순서를 기억함) 요소 개수 확인 (object).length map.size 1) 실행 시 key가 모두 동일한 type이며 모..