프론트 엔드 공부 블로그

axios fetch API 처럼 백엔드와의 비동기 처리를 가능케 하는 또 다른 방법으로 axios 가 있다. 설치 npm i axios 터미널에 해당 명령어를 입력해 axios를 설치해줘야 한다. import axios from 'axios' 사용을 원하는 파일에 import를 하면 된다. 사용 방법 const response = await axios(url, option); 위와 같은 방법으로 써도 되고, 아래와 같은 방법도 있다. const response1 = await axios(option) // option 안에 url 프로퍼티로 url 전달 const response2 = await axios.post(...) // 메서드 방식으로 http 통신 방법 설정 url - http 통신을 할 (..

react-create-app 의 디렉터리 구조를 따르고 있음. 1. OTF, TTF 형식을 WOFF 로 바꿔준다. 2. font 폴더에 변환한 폰트 파일을 넣는다. 3. font 폴더에 font.css 를 다음과 같이 작성한다. @font-face { font-family: "black-godic"; src: url("./검은고딕.woff") format(woff); } @font-face { font-family: "(사용할 이름)"; src: url("파일 디렉토리 주소") format(파일 형식); } 4. 가장 상위 파일인 index.js에서 font.css를 import 한다. import './assets/font/font.css'; 5. 하위 CSS 에서 적용이 되는지 확인한다. #head..

참조한 사이트 https://ui.toast.com/fe-guide/ko_CODING-CONVENTION https://github.com/airbnb/javascript#variables--unary-increment-decrement 새로 알게 된 점 지역 변수 및 private 변수명은 '_'로 시작한다. let _privateVariableName; let _privateFunctionName; // 객체일 경우 const customObjectName = {}; customObjectName.propertyName; customObjectName._privatePropertyName; _privateCustomObjectName; _privateCustomObjectName._privatePro..

1. setInterval 0.) 목표 현재 가리키고 있는 slide 의 index 를 currIndex 라고 한다. 이때 currIndex 를 2초마다 +1 시키고, 그에 따라 pagination 의 색이 변하게끔 만드려고 한다. 1.) 문제점 setInterval(() => { setCurrIndex((curr) => { curr++; if (curr > IMAGE_LENGTH) curr =1; return curr; }) }, 2000); 1-2-3-1-2-3 의 순서를 바랐는데... 예상과 달리 숫자가 이상하게 돈다. 2.) 문제 해결 state가 변함에 따라 setInterval도 함께 re-rendering이 되는 문제로, useEffect()를 사용하여 해결했다. 컴포넌트가 마운트 됐을 때만..

참고 : 프로그래머스 공식 블로그 https://prgms.tistory.com/113 '2021 Dev-Matching: 웹 프론트엔드 개발자(하반기)' 기출 문제 해설 프로그래머스에서는 지난 2021년 9월 4일 '2021 Dev-Matching: 프론트엔드 개발자(하반기)'의 과제 테스트가 진행되었습니다. 과제 리뷰가 제공되지 않지만, 어떻게 하면 구현을 더 잘할 수 있었을까? prgms.tistory.com 리액트 라우터 동작처럼 바닐라 JS 에서도 새로고침 없이 부드럽게 넘어가는 SPA를 만드는 법을 공부했다. 0. 페이지 구조 Home 클릭 시 메인화면으로 넘어오고, Sign Up 클릭 시 회원가입 페이지로 넘어간다. 메인화면 회원가입 화면 1. 파일 구조 2. 파일 역할 2-1. Index...

밀양 시내 노선도 프로젝트 소개 부산대학교 밀양 캠퍼스 내 교통편의 불편함을 해결하기 위한 서비스 기존 문제 밀양캠퍼스는 정해진 시간에 버스와 기차가 도착하고 출발하는데도 매번 환승가능한 시간을 따로따로 알아봐야 한다. 각 시간 마다 버스의 노선이 다르고 그에 따라 이동시간, 거리도 달라진다. 몇몇 정류장의 출발 시간만을 제공하기 때문에 그 사이 정류장까지의 이동시간이나 도착시간을 알 수 없다. 제공 기능 열차 - 버스의 환승을 돕기 위한 타임 테이블 시간표 밀양 시내 길찾기 & 지도 기능 기존 버스 시간표 디자인 수정 전체 디자인 기능 설명 1. 열차 - 버스 타임 테이블 밀양 캠퍼스는 정해진 시간에 버스와 기차가 도착한다. 기차 - 버스 환승 시 마다 버스 정류장에 있는 시간표를 캡처하거나 웹에 올라..