티스토리

슈의 연구소

검색하기

블로그 홈

슈의 연구소

shu-lab.tistory.com/m

지식과 정보를 공유하는 슈의 연구소

구독자: 0

방명록 방문하기

반응형

주요 글 목록

[React] 깃허브페이지 github page 404에러, url 새로고침 404에러 문제해결 안녕하세요. 슈입니다.오늘은 깃허브페이지 github page 404에러, url 새로고침 404에러 문제해결 방법에 대해 알려드릴게요.react 는 spa 싱글페이지 앱이라 gitgub page 에서는 이를 제공하지 않는데요.저도 한참을 헤매이다가404.html 을 만들어서 해결했습니다. 다른거 다 손대지 마시고404.html 파일을 하나 만드세요. npm run build 하면 build 폴더가 저절로 생기잖아요?build 안에다가 404.html 파일을 만드시고index.html 파일 안에 내용 그대로 복사해서 404.html 에다가 붙여넣기 하면돼요..그리고 그걸 github 에 올리면 됩니다.너무 쉬워서 당황..이렇게 쉽게 해결될지 모르고구글링 엄청하고 고생했네요.. 오늘은 이렇게 깃허브페이.. 공감수 1 댓글수 0 2024. 6. 16.
프론트엔드 기술 면접,인터뷰에 자주 나오는 예상질문과 답변 정리 공유! 안녕하세요 슈입니다. 오늘은 프론트엔드 신입 개발자 기술 면접, 인터뷰를 대비하기 위해 자주 나오는 예상질문과 답변을 정리 해놓은것을 공유해드릴게요!!HTML의 기본 구조를 설명하세요.답변: HTML 문서는 선언으로 시작하고, , , 태그로 구성됩니다. 에는 메타데이터, 스타일시트 링크, 제목 등이 포함되고, 에는 실제 콘텐츠가 포함됩니다.CSS의 박스 모델에 대해 설명하세요.답변: CSS 박스 모델은 요소를 네 부분으로 나눕니다: 콘텐츠(content), 패딩(padding), 보더(border), 마진(margin)입니다. 콘텐츠는 실제 내용, 패딩은 내용과 보더 사이의 공간, 보더는 요소의 테두리, 마진은 요소와 다른 요소 사이의 간격을 나타냅니다.Flexbox와 Grid의 차이점을 설명하세요... 공감수 1 댓글수 1 2024. 6. 13.
[React] 누르면 맨위로 움직이는 스크롤 버튼 만들기 top 버튼 안녕하세요. 슈입니다.오늘은 리액트로 누르면 맨위로 움직이는 스크롤 버튼 만드는 법을알려드릴게요.흔히 top 버튼이라고 하죠?위에처럼 생긴 버튼 누르면 쉽게 화면 가장 위로 움직여주는 버튼입니다. 저는 따로 ScrollBtn.js 라는 파일을 만들어서그안에 코드를 적어줬어요.반응형으로 만들었습니다!!화면 크기에 따라 버튼의 크기나 위치도 바뀔거에요.import React, { useEffect, useState } from 'react';import { SlArrowUpCircle } from "react-icons/sl";import styled from 'styled-components';const Div = styled.div`/* 미디어 쿼리: 화면 가로폭이 1000px 미만일 때 */@media.. 공감수 0 댓글수 0 2024. 6. 13.
[python] 파이썬 크롬드라이브 설정,세팅 | 크롤링 크롬드라이버 파이썬 크롬드라이브 설정,세팅 하는법크롤링 크롬드라이버chrome_driver.py 로 파일 만들어서 사용하시면 됩니다. # 서비스 환경별 크롬 드라이브 구분from user_agent import generate_user_agentfrom user_agents import parsefrom selenium import webdriverfrom selenium.webdriver.chrome.service import Servicefrom webdriver_manager.chrome import ChromeDriverManagerimport warningswarnings.filterwarnings("ignore")# pip install selenium# pip install -U user_agent# p.. 공감수 0 댓글수 0 2024. 6. 11.
[python ] 엑셀 파일 csv 한글 깨질 때 , 인코딩하기 안녕하세요. 슈입니다.파이썬에서 크롤링으로 엑셀 파일저장하고 싶어서csv파일로 저장한뒤 확인하려고 엑셀 열어보니한글이 다깨져있으신 적 있나요?그럼 인코딩을 꼭 해주셔야 합니다!! df.to_csv("저장할 경로/파일명.csv", encoding="utf-8-sig", index=False) 위와같이 수정해주시면쉽게 문제해결 할 수 있으실거에요! encoding="utf-8-sig" 만 추가해보세요. 엑셀 파일 csv 한글 깨질 때 , 인코딩하기 알려드렸는데요.도움이 되시길 바랍니다. 공감수 1 댓글수 0 2024. 6. 11.
[React] css 스타일 주는법 , styled-components 를 이용한 스타일 안녕하세요. 슈입니다.오늘은 react 에서 css 스타일 주는법을 알려드릴게요.javascript 로는 주로 css 파일로 했었는데react 로 넘어오고 나서는 styled -components 를 이용해서 스타일을 적용해주고 있어요.먼저 비쥬얼스튜디오의터미널창을 열고npm i styled-components를 통해서 라이브러리를 다운받아줘요. import styled from 'styled-components';그다음 원하는 컴포넌트의 상단에 위에처럼 임포트해줍니다. 그다음 import React from 'react';import styled from 'styled-components';const Div = styled.div`#title{ line-height:2; font-size:2.. 공감수 0 댓글수 0 2024. 6. 10.
[React] 부드러운 화면전환 페이지전환 하는법 | framer-motion 을 통한 AnimatePresence React 리액트에서 화면이 바뀔때마다,화면전환, 페이지전환 될때마다서서히 나타나는 부드러운 효과를 주고싶다면??framer-motion 을 통한 AnimatePresence 를 사용하는 방법을 알려드릴게요. 먼저 비주얼스튜디오의 터미널에 npm i framer-motion 를 입력하고 다운받아줍니다. import {AnimatePresence} from 'framer-motion';그다음 App.js 파일로 가셔서 윗부분에framer-motion 라이브러리에서 AnimatePresence 를 import 해줍니다. App.js 파일에 여러 페이지가라우트로 걸려있겠죠?그 Routes 밖으로전체를 감싸줍니다. // App.js 파일function App() { return ( .. 공감수 1 댓글수 0 2024. 6. 6.
[React] 카카오맵 API 넣는법 , 카카오맵 지도 좌표 구하는법 경도,위도 안녕하세요. 오늘은 제가 헤매이던 카카오맵 api 넣는 방법 알려드릴게요.카카오맵 넣는건 쉬우나 제가 원하는 위치의 경도와 위도를 구하는 법이잘 안나와있어서 찾는데 오래걸렸어요.여러분은 고생하지 마시라고 제가 바로 알려드립니다! 1. 먼저 아래의 카카오 개발자 홈페이지 들어가셔서로그인 해주시고요 .내 어플리케이션 새로 하나 만들어주세요.https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 2. 그럼 내 어플리케이션 클릭하면왼쪽에 메뉴가 보일거에요.우리는 홈페이지 만들거니까플랫폼 클릭해줍니다. 3... 공감수 1 댓글수 0 2024. 6. 5.
[React] 리액트로 게시판 만들기. Quill 을 이용한 텍스트 에디터 블로그 게시판 안녕하세요. 오늘은 리액트에서 게시판 만들때 사용하기 좋은텍스트 에디터 라이브러리를 알려드릴건데요.Quill을 사용하면 편하게 세팅해서 사용할 수있어요.react에서 다양한 라이브러리를 제공해서 편한 거같아요.먼저 비주얼스튜디오의 터미널에 npm i quill 을 해서 quill 라이브러리를 다운받아줘요. 그 다음원하는 컴포넌트에 quill을 import 해줘요.import Quill from 'quill';import 'quill/dist/quill.snow.css'몇가지 테마가 있는데저는 snow를 사용했어요. 개인적으로 이게 보기좋고 제일 예쁜거같아요. const quillElement = useRef(null); const quillInstance = useRef(null); use.. 공감수 1 댓글수 0 2024. 6. 4.
[React] 리액트에 사진 올리는법 이미지 import 하는법 자바스크립트와 다르게 리액트에 이미지,사진을 올릴때는import 를 해줘야합니다.처음에 저도 react를 배울때 이미지 import 하는게 어색했는데이젠 이게 더 편리하다는 생각이 들어요.먼저 컴포넌트의 가장 위에import 사진 from '../img/사진.jpg'라고 import 해줍니다.from 뒤에오는건 자신의 사진 경로에요.저는 src파일 밑에 img 폴더를 만들어서 그 안에 사진.jpg 라는 파일을 넣어놨어요.그리고나서 import 한 이름 을 src 괄호 {} 안에 똑같이 넣어줍니다.그럼 사진이 불러와질거에요! 주의할 점은 src="사진" 하면 안됩니다.import 한 사진을 불러올때는 { } 괄호를 써야해요. 공감수 0 댓글수 0 2024. 6. 3.
[React] Link 로 페이지 이동 Routes , Route 사용하는법 React 에서 Link 로 페이지 이동 Routes , Route 사용하는법 Link 로 페이지 이동하고 싶다면 메인페이지 서브페이지이렇게 사용하는데여기서 to = ' 이 안에 적을 주소' 이안에 적을 주소 는 App.js 에서 만들어 줘야 합니다. function App() { return ( }/> }/> );}export default App; 이런 식으로요!그리고 Routes와 Route 를 사용하려면비주얼 스튜디오의 터미널에npm i react-router-dom routes route이렇게 3개를 연달아 다운받아준뒤 Import 해줘야합니다.그리고 마지막으로 index.js 로 이동해서 아래와 같은 부분에const roo.. 공감수 2 댓글수 2 2024. 5. 31.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.