프론트엔드

참고자료 https://velog.io/@edie_ko/React-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-API-key-%EC%88%A8%EA%B8%B0%EA%B8%B0.env-%EC%9D%B4%EC%9A%A9 React | 환경변수 사용하여 API key 숨기기(.env 이용) 리액트 프로젝트를 하면서 API key를 발급받아 사용하는 일이 잦다.카카오 developer 혹은 google developer와 같은 API key들은본인의 고유한 key이므로 그냥 깃헙에 올리면 안된다.React CRA 기반으로 작업을 velog.io

https://kkt102.tistory.com/69 [JavaScript]github.io(깃허브를 이용한 페이지)에 카카오맵 API 사용하기 안녕하세요. 사진찍는 초보개발자입니다. 오늘은 간단하게 카카오 API를 이용하여 웹 페이지에 카카오 맵을 띄우는 방법을 소개하겠습니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용 kkt102.tistory.com

참고자료(배포 방법) https://codingapple.com/unit/react-build-deploy-github-pages/ 만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌 (리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 codingapple.com https://velog.io/@byjihye/react-github-pageshttps://codingapple.com/unit/react-build-deploy-github-pages/ [React] 프로젝트 GitHub Pages 배포하기 React 프로젝..

참고자료 Tailwind CSS 자동 완성이 작동하지 않음(이것을 보십시오) | Tailwind CSS Intellisense VS 코드 - YouTube

미리보기 사용방법 1. MUI 설치 1.1 작업 폴더에서 터미널을 켠다 VSC단축키(Ctrl + ` (esc 밑에 있는 거)) 1.2 아래 코드를 순서대로 터미널에 입력한다. npm install @mui/material @emotion/react @emotion/styled npm install @mui/material @mui/styled-engine-sc styled-components npm install @fontsource/roboto npm install @mui/icons-material // 참고 링크 //https://mui.com/material-ui/getting-started/installation/ 2. 컴포넌트 만들기 2.1 ChatTest.jsx 파일을 생성하고 아래 코드를 ..

1. 위치 2. 정렬 3. 크기 4. 디자인

import React from 'react'; import styled, { css } from 'styled-components'; const sizes = { desktop: 1024, tablet: 768 }; // 위에있는 size 객체에 따라 자동으로 media 쿼리 함수를 만들어줍니다. // 참고: https://www.styled-components.com/docs/advanced#media-templates const media = Object.keys(sizes).reduce((acc, label) => { acc[label] = (...args) => css` @media (max-width: ${sizes[label] / 16}em) { ${css(...args)}; } `; ret..

import React, { useState } from "react"; const App = () => { // 초기 데이터 객체 리스트 const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); //입력한 텍스트 state const [InputText, setInputText] = useState(""); //추가 할 데이터 객체의 Id state const [nextId, setNextId] = useState(names.length+1); // 리스트 길이 +1로 설정 //이벤트 객체의 입력한 텍스트 감지 함수 cons..