전체보기 (16) 썸네일형 리스트형 [React] KaKao 지도 API / 카카오맵 사용하기 KaKao 지도 API를 사용하여 내 웹 사이트에 카카오맵을 적용해보겠습니다. Kakao 지도 Javascript API 키 발급 및 웹 플랫폼 추가하기 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오맵은 Javascript 키를 발급받고 플랫폼(사이트 도메인)을 등록해야 사용이 가능합니다. 위 사이트에서 카카오 계정으로 로그인 해주세요! 로그인 후 우측 상단 '내 에플리케이션' 클릭 전 이미 예전에 만들어 놓은 애플리케이션이 하나 있네요!'애플리케이션 추가하기' 를 클릭하여 새로운 애플리케이션을 생성해보겠습니다. 앱 이름, 사업자명.. [React] 파비콘(Favicon) 설정하기 (With. 티스토리) 파비콘이란 웹 사이트나 웹 페이지의 브라우저 탭에 표시되는 작은 아이콘입니다. 웹 사이트를 대표하는 아이콘이므로 통상적으로 로고를 많이 사용합니다. 리액트 프로젝트를 처음 생성하면 \public\favicon.ico 파일과 함께 사진에 보이는 파비콘이 기본으로 설정됩니다. 이 파비콘을 내가 원하는 이미지로 바꿔보겠습니다! 이미지 확장자 변환 무료 Favicon 생성기, 이미지 변환-Wizlogo 무료로 몇 초 안에 귀하의 웹 사이트에 대한 즐겨 찾기 아이콘을 생성하십시오. 이미지 파일 (GIF, JPG 및 PNG)을 업로드하고 즐겨 찾기 아이콘 (ICO) 또는 앱 아이콘으로 변환하십시오. wizlogo.com 리액트에서 파비콘(이미지)의 확장자로 jpg, png 파일도 사용 가능하지만 ico 파일이 기본.. [React] 폴더 구성하기 + 파일 예시 폴더 구성에는 프로젝트 또는 회사마다 폴더 구조를 다르게 설정하므로 정답은 없습니다.참고하셔서 프로젝트 스타일에 맞게 구성하시길 바랍니다.📁 project\ js App.js (실제 보여질 컴포넌트, 라우팅 구성) js Index.js (Root DOM Node에 App 컴포넌트를 렌더링) ⬇️ src\⬇️ app\ js store.js (Redux Store 생성)⬇️ auth\ (인증 관련 폴더) js register.js (회원가입 처리) js RequireAuth.js (기능 처리 후 페이지 유지)⬇️ assets\ (이미지 폴더) ⬇️ images\ 🖼️ logo.png 🖼️ main.jpg ⬇️ icons\ 🖼️ search.svg 🖼️.. [React] React Bootstrap 사용 방법 Bootstrap은 레이아웃, 폼, 버튼, 모달 등을 제공하여 웹 사이트 개발을 보다 쉽게 할 수 있도록 도와주는 CSS, JS 프레임워크이다. 해당 포스터에서는 리액트 용 react-bootstrap을 사용 해보자! 아래 사이트에서 로그인 없이 무료로 사용이 가능하며, 단순히 코드를 복사 붙여넣기 하여 편하게 사용할 수 있다! React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 사용해 보기 제공되는 기능도 많고 결과 화면도 미리 보여줘서 골라 사용하기 편하다! 홈페이지 상단 'Components' 탭을 클릭하면 여러 컴포넌트를 볼 수 있다. 예제.. [JS] 프로그래머스 코딩테스트 Lv.0 부터 풀어보자! 코딩테스트 연습 | 프로그래머스 스쿨 개발자 취업의 필수 관문 코딩테스트를 철저하게 연습하고 대비할 수 있는 문제를 총망라! 프로그래머스에서 선발한 문제로 유형을 파악하고 실력을 업그레이드해 보세요! school.programmers.co.kr 해당 링크에 접속 후 로그인을 하면 무료로 JavaScript 코딩테스트를 진행할 수 있다. (다른 언어도 가능) 풀고 싶은 문제를 클릭하면 아래와 같은 창이 뜨는데 만약 언어가 다르다면 오른쪽 상단 언어 버튼을 클릭하여 JavaScript로 바꿔주면 된다. 문제를 보고 코드를 작성한 뒤 하단에 코드 실행 버튼을 클릭하여 정상 실행이되면 제출 하면 된다. (실행 되는 코드를 작성하지 못하면 다른 사람의 풀이는 볼 수 없다. 단, 처음 회원가입을 하면 1,000 점.. [React] a태그와 Link, useNavigate()의 차이 페이지를 이동하는 HTML a태그와 react-router-dom에서 제공되는 Link 컴포넌트, useNavigate() 훅의 차이점에 대해 알아보자! 차이점 a태그 : 새로고침이 일어난다. Link, useNavigate() : 새로고침이 일어나지 않는다. 새로고침이 무슨 상관 있을까? DB에 실시간으로 값을 저장하지 않는 이상 state값이 초기화 되기 때문 사용법 npm install react-router-dom import { Link, useNavigate } from 'react-router-dom'; const navigate = useNavigate(); {/* a태그 */} Cart {/* Link */} Cart {/* useNavigate() */} navigate('/cart').. [Git] 리액트 프로젝트와 깃허브 연동하기! 1. Visual Studio Code 새 창에서 리액트 프로젝트를 생성합니다. - 터미널창에서 cd 명령어를 통해 프로젝트를 만들 폴더로 접근합니다. - npx create-react-app 프로젝트명 으로 프로젝트 폴더를 생성합니다. 2. 깃허브에서 프로젝트와 연동할 repository를 생성합니다. - 로그인 후 왼쪽에 New 버튼을 클릭합니다. - Repository name을 입력하고 Create repository 버튼을 클릭하여 생성합니다. 리액트 프로젝트명과 repository name은 일치하지 않아도 됩니다. 3. 리액트 프로젝트와 생성한 repository와 연동 - repository를 생성하면 다음과 같은 화면이 나옵니다. 화살표가 가르키는 곳을 클릭하여 코드를 복사 합니다. * .. [React] 개발 환경 세팅 설치할 라이브러리styled-components : CSS 문법을 그대로 사용하면서 스타일된 컴포넌트 형태로 만들어주는 라이브러리styled-reset : 기본 css를 초기화react-icons : 다양한 아이콘을 쓸 수 있는 라이브러리react-router-dom : 라우팅(사용자가 원하는 경로로 보내는 과정) 라이브러리@reduxjs/toolkit react-redux : 전역 상태 관리 라이브러리react-bootstrap bootstrap : 레이아웃을 복사 붙여넣기 식으로 개발 가능한 css, js 라이브러리 전체 설치npm install styled-components styled-reset react-icons react-router-dom @reduxjs/toolkit react-redu.. 이전 1 2 다음
