본문 바로가기

전체 글

카페추천 웹사이트(마커생성과 버튼 스타일 수정, 지도 크기 조절) 뒤로가기 링크를 버튼으로 변경 import React, { useEffect, useRef } from "react"import styles from './CafeDetail.module.css';import { Link, useParams } from "react-router-dom";const { kakao } = window;export default function CafeDetail() {    const { id } = useParams();    const container = useRef(null); // 지도 데이터 접근    //카페 데이터 (예시 데이터)    const cafes = [        { id : 1, name: "그릿비", region: "울산", category: .. 더보기
챌린지 1번째 도전 몫 구하기  function solution(num1, num2) {     var answer = num1 / num2;         return answer; } num1에서 num2를 나누게 되면 실수로 출력이 된다.(소수점 까지 출력)이걸 바꾸기 위해서는function solution(num1, num2) {    var answer = Math.floor(num1 / num2);        return answer;} Math.floor(num1 / num2)를 쓸수도 있지만 알고리즘 문제에서는  function solution(num1, num2) {    var answer = ~~(num1 / num2);        return answer;} 이렇게 사용할 수 있다. ~ 한개가 부정.. 더보기
카페추천 웹사이트(카카오맵 API 연동) 오늘은 카카오맵 API를 연동해서 카페위치를 알려주는 코드를 완성해보겠습니다. CafeDetail.js코드import React, { useEffect, useRef } from "react"import styles from './CafeDetail.module.css';import { Link, useParams } from "react-router-dom";const { kakao } = window;export default function CafeDetail() {    const { id } = useParams();    const container = useRef(null); // 지도 데이터 접근    //카페 데이터 (예시 데이터)    const cafes = [        { id .. 더보기
카페추천 웹사이트(카페 리스트 디자인 및 상세 페이지 구현) 저번에 하다가 만 디자인을 시작 해보자!!! CafeList.js 컴포넌트 코드import React, { useState } from "react";import styles from './CafeList.module.css';import { Link } from 'react-router-dom';export default function CafeList() {    const [selectedRegion, setSelectedRegion] = useState("all");    const [selectedCategory, setSelectedCategory] = useState("all");    // 카페 데이터    const cafes = [        { id : 1, name: "그릿비", .. 더보기
카페추천 웹사이트(이미지 클릭 시 페이지 이동, 카테고리 기능 구현) 저번에 메인페이지 이미지 슬라이드까지 하고 마무리 했는데 이번엔 이미지 클릭시 카페 추천 리스트 이동과 카페 추천 리스트에 드롭박스를 넣어 카테고리를 선택하면 선택된 카테고리에 알맞는 카페가 뜨도록 구현 해보겠다. App.jsimport './App.css';import CafeMain from './component/CafeMain';import CafeList from './component/CafeList';import { BrowserRouter, Route, Routes } from 'react-router-dom';function App() {  return (    BrowserRouter>      div className="App">        Routes>          Route .. 더보기
카페추천 웹사이트 (메인페이지 이미지 슬라이드 효과 넣기) 자동슬라이드를 넣긴했지만 이미지를 좀 잘라서 써야할 것 같다. 코드 공유 Header.module.css* {    margin: 0;    padding: 0;    box-sizing: border-box;}a {    text-decoration: none;    color: black;}li {    list-style: none;}img {    display: block;    width: 100%;}.header {    text-align: center;    margin-top: 40px;}.header > h1 > a{    color: white;}.bgImg {    display: flex;    justify-content: center; /* 수평 중앙 정렬 */    back.. 더보기
카페추천 웹사이트 디자인 (Figma) Figma를 이용하여 기초적인 디자인을 만들어 보자   기본적인 틀만 이렇게 잡고 개발에 들어가려고 합니다. 오늘은 메인페이지만 개발해보겠습니다.   메인페이지만 간단하게 만들었지만 추가해보고 싶은 것 1. 사진을 슬라이드로 만들기 더보기
코딩앙마 React공부 (마치며) 네트워크 환경 느릴때 처리개발자도구 > 네트워크 > 저속 4G로 놓고 테스트 초기값이 [] 이므로, 배열 length가 0일때 Loading… 을 출력해보자단어 추가시 통신중일때는 저장버튼 클릭하지 못하도록isLoading 상태 생성isLoading이 false일때(로딩중 아닐때) 단어 출력단어 출력전에는 로딩중이므로 setIsLoading(true)해줌단어 출력후에는 로딩완료이므로 setIsLoading(false)해줌버튼은 로딩중일때는 Saving... 이라고 투명도 준 버튼으로 출력되도록 수정함 더보기