본문 바로가기

전체 글277

[React] map() 함수 설명과 예제 map() 함수는 array 타입에만 사용 가능 var ex = [2,3,4]; ex.map(function(){ console.log(1) }); # 1,1,1 출력됨 -> 콜백함수의 파라미터가 없다면 ex 요소의 개수만큼 반복된다. var ex = [2,3,4]; ex.map(function(a){ console.log(a) }); # 2,3,4 출력 됨 -> 콜백함수의 첫번째 파라미터는 ex의 첫번째 요소부터 마지막 요소까지 할당되며 반복된다. var ex = [2,3,4]; ex.map(function(a, i){ console.log(i) }); # 0,1,2 출력 됨 -> 콜백함수의 두번째 파라미터는 인덱스에 해당해서 0부터 1씩 증가한다. 2023. 12. 14.
[React] 동적인 UI 만들기 (모달창) 동적인 UI 만드는 순서 html css로 미리 UI 디자인을 다 해놓고 UI의 현재 상태를 state로 저장해두고 state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 function Modal(){ return ( 제목 날짜 상세내용 ); } -> 1. 모달창 디자인 let [modal, setModal] = useState(false); -> 2. UI(모달창)의 현재 상태를 state로 저장 {modal == true ? : null} -> 3. 삼항연산자를 통해 modal 변수가 true 값일때만 띄우고 아닐 때는 null을 준다. setModal(!modal)}> {title[0]} setGood(good+1)}>👍{good} 2월 17일 발행 -> 태그 클릭 시 !modal 값을 넣어.. 2023. 12. 14.
[React] Component 문법 Component란? -> React는 긴 HTML 태그들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. -> 모든 UI 요소를 컴포넌트(Component)로 구성합니다. 컴포넌트는 재사용 가능하고 독립적으로 동작하는 UI 요소를 나타냅니다. 여러 컴포넌트를 결합하여 복잡한 UI를 만들 수 있습니다. (ChatGPT) 예시 function App (){ return ( (생략) ) } function Modal(){ return ( ) } # 또는 const Modal = () => { return ( ) } -> 만드는 법 : function을 이용해 함수를 하나 만들어주고 그 함수의 return ()안에 축약을 원하는 HTML을 담으면 된다. 화살표 함수 형태로 만들어도 된다. Co.. 2023. 12. 14.
[React] Fragment 문법 React에서 Fragment란? -> 불필요한 부모 엘리먼트를 생성하지 않고 여러 엘리먼트를 그룹화하는 데 사용되는 기능이다. # 병렬구조로 짤 수 없다. return( ) -> 위 코드는 오류가 난다. return() 내부는 하나의 태그로 시작해서 나머지를 감싸야 한다. return( ) # 또는 return( ) -> 위 같이 작성해야 한다. 리액트에서는 태그도 허용한다. 2023. 12. 14.
[AWS] Docker Image로 수작업 배포 하는 방법 먼저, https://www.docker.com/get-started/ 에서 설치하고 실행 후 로그인한다. -> Docker 로그인 할 때 이런 문제가 발생하면 터미널에 wsl.exe --install 실행 ECR(Elastic Container Registry)에 도커 이미지 업로드 가능하게 AWS 설정 -> AWS의 IAM의 유저에 위 권한 추가 후 ECR로 이동(region 확인) -> 리포지토리 생성 클릭 - 프라이빗 체크 - 빈칸엔 AWS lambda의 서비스명-dev로 작성 후 생성 -> 만든 리포지토리 체크 후 작업 탭에 권한 클릭 - 권한 편집에서 명령 추가 - IAM 개체텝에서 IAM 사용자명 검색 후 체크 -> 20개 모두 체크 후 저장한다 -> 다시 정책 JSON 편집 클릭 - ecr.. 2023. 12. 14.
[AWS] AWS의 S3 생성하는 법 이미지, 동영상들은 AWS의 S3(스토리지 개념)에 저장한다. 저장 후 해당 이미지, 동영상의 url 주소는 AWS의 RDS(데이터베이스 개념)에 저장한다. 버킷 = 폴더 같은 개념 -> AWS S3 검색 후 버킷 만들기 클릭 -> AWS 리전 선택, 버킷 이름 작성 -> ACL 활성화됨 체크 -> 체크 풀고 버킷 만들기 클릭 버킷 목록에서 방금 만든 버킷 들어가기 -> 업로드 클릭 -> 파일 추가 후 업로드하기 -> 올린 파일 클릭 - 권한 - ACL(엑세스 제어 목록) 편집 - 모든사람(퍼블릭 액세스) 객체에 읽기 체크 - 변경사항 저장하면 완료. 2023. 12. 14.
[MySQL] MySQL 테이블에 있는 데이터 csv, json 파일로 옮기는 방법 -> 해당 테이블 우클릭 - Table Data Export Wizard 클릭 -> 필요한 컬럼만 선택 후 Next 클릭 -> 저장할 Path 선택, 확장자 csv or json 선택한 후 Next 클릭 - finish 클릭 -> 잘 옮겨진 모습이다. 존재하는 테이블이 아닌 select 한 결과를 저장하는 법) -> 나온 결과에 위 사진의 Export 아이콘 표시를 클릭하면 된다. 2023. 12. 13.
[React] object, array 자료형일 때, state 값 변경 하는 법 let [title, setTitle] = useState(["남자코트 추천", "강남 우동맛집", "파이썬독학"]); -> 버튼을 클릭 시, 위 state를 변경하려고 한다. 변경 하는 법) { let copy = [...title]; copy[0] = "여자코트 추천"; setTitle(copy); }}>버튼 -> array, object 자료형 데이터를 다룰때는 기존값은 보존해주는 식으로 하는게 좋은 관습이라서 복사 후 변경한다. -> [...변수명] 으로 복사(deep copy) 해야 된다. 자세한 설명은 따로 글 작성 예정 2023. 12. 13.
[React] onClick 함수 사용법 {title[0]} console.log(1)}>👍{good} 2월 17일 발행 -> 위 코드에서는 화살표함수를 이용했지만, function(){}도 가능하고 따로 함수를 정의하고 {}안에 함수명을 기입해도 가능하다. -> onClick 안에는 함수만 들어갈 수 있다. 2023. 12. 12.
[React] 터미널에 warning 메세지 안뜨게 하는 방법 -> error가 아닌 warning은 실행에 문제가 없지만 안보이게 하고싶다면, /* eslint-disable */ -> 파일 상단에 위 코드 작성하면 더 이상 뜨지 않는다. 2023. 12. 12.