배포 (5) 썸네일형 리스트형 리액트 토이 프로젝트 - 기억력 게임 개선하기 지난번에 리액트를 이용한 토이 프로젝트인 '기억력 게임'을 만들어보았습니다. 2023.10.04 - [코딩/ReactJS] - 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 42서울과 42경산의 기억력 테스트를 간단하게 맛볼 수 있도록 하기 위해서 순서에 맞춰 카드를 클릭하면 승리하는 게임을 리액트로 만들어보았습니다. 물론 에꼴42에서 주관하는 기억력 테스트 bebutae.tistory.com 위 포스팅을 작성한 당시에는 시작 버튼도 없고, 카드를 선택해도 색상 변경이 되지 않는 문제가 있었습니다. 그래서 개선을 해보았습니다. 개선 후의 버전은 1.20버전이며, 시작하기 버튼이 생겼고, 선택.. 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 42서울과 42경산의 기억력 테스트를 간단하게 맛볼 수 있도록 하기 위해서 순서에 맞춰 카드를 클릭하면 승리하는 게임을 리액트로 만들어보았습니다. 물론 에꼴42에서 주관하는 기억력 테스트와 다른점이 많습니다. 에꼴42에서는 여러개의 카드 중 몇개의 카드만 순서대로 반짝이고, 반짝였던 카드를 순서대로 클릭하면 승리합니다. 하지만 제가 만든 기억력 테스트는 화면에 표시된 카드 모두에 순서가 부여되고, 부여된 순서에 맞춰 카드를 클릭하면 승리합니다. 저는 이 토이 프로젝트에서 리액트를 사용하였고, 스타일 컴포넌트로 스타일을 주었습니다. 마지막으로 useEffect와 useState 훅을 이용해 코드를 작성하였습니다. 시작하기에 앞서 리액트 프로젝트를 생성하고, 스타일 컴포넌트를 설치하겠습니다. npx crea.. ReactJS 프로젝트에서 빌드가 뭔지 알아보자 1. 개요 웹브라우저는 HTML, CSS, JS만 해석 가능 그러므로 웹브라우저는 리액트의 JSX 문법을 해석 할 수 없음 빌드란 JSX파일을 HTML파일로 변환하는 과정임 2. 빌드 방법 npm run build 리액트프로젝트 폴더에서 위 명령어 실행하면 build 폴더 생성됨 거기에 App.js에서 열심히 코딩한 JSX코드가 HTML, CSS, JS파일로 변환되어 담기게 됨 build 폴더의 내용물을 서버에 올리면 배포까지 끝나는 것 참고로 public 경로에 있는 파일들은 빌드해도 그래도 남아있음 구글 클라우드로 nodejs 프로젝트 배포하기 1. 개요 구글 클라우드에 내가 만든 서비스 업로드하고 배포하기 그럼 localhost말고 딴데서도 접속 가능함 2. 셋팅 runtime: nodejs env: flex manual_scaling: instances: 1 resources: cpu: 1 memory_gb: 0.5 disk_size_gb: 10 server.js랑 동일한 경로에 app.yaml생성 3. 구글 클라우드 설정 클라우드 컴퓨팅 서비스 | Google Cloud 클라우드 컴퓨팅 서비스 | Google Cloud 데이터 관리, 하이브리드 및 멀티 클라우드, AI와 머신러닝 등 Google의 클라우드 컴퓨팅 서비스로 비즈니스 당면 과제를 해결하세요. cloud.google.com 위 링크로 접속하고 무료로 시작하기 눌러서 로그인 + .. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 인스타그램 게시글에는 링크를 걸 수 없습니다. 프로필에는 링크를 걸 수 있는데 하나만 걸 수 있습니다. 그래서 블로그와 유튜브, 마플샵 등 다양한 페이지를 운영중인 경우 여러 페이지 중 하나의 페이지만 링크를 걸 수 있습니다. 예를 들면 아래와 같이 인스타그램 프로필에는 하나의 링크만 걸 수 있습니다. 하지만 저 링크에 접속하면? 이렇게 네이버 블로그와 굿즈샵, MBTI 테스트 페이지의 링크가 걸려있는 페이지로 접속할 수 있습니다. 오늘 웹 프로그램이을 통해 만들어볼 페이지가 바로 이렇게 여러개의 링크가 모여있는 멀티링크 페이지.. 이전 1 다음
