분류 전체보기 139

svg 이미지 (폰트어썸)

어제, 폰트어썸에 있는 아이콘을 사용했다. 클릭했을 때 자동으로 맨 위로 올라가는버튼을 만들기 위해서 사용했다. 폰트어썸 이미지를 import할 때 svg라는 알파벳?이 있는데 그냥 알파벳이구나~ 하고 넘겼다. 오늘은 div태그에 border: 3px solid red;를 적용하고그 div태그 사이에 아이콘을 넣었고아이콘 뒤에는 회색 원형 div가 있었다. 그러면 당연히 빨간색 직사각형 안에 아이콘이위치해야 한다고 생각하는데 빨간색 짧은 선 우측에버튼이 위치해 있었다......;; 그 때 튜터님께서"왜지? svg 이미지라 그런가??" 라고 하셨다. 버튼이 저렇게 위치했던 이유는버튼을 div로 감싸주지 않아서 였다.(버튼이 div없이 혼자 있으면top, right, right, bottom이런 값을 아무리..

질문 2024.11.01

아이콘(svg 이미지)을 클릭해서 다른 링크로 이동하는 방법

요즘 콘서트나 뮤지컬 티켓을 예매하는'티켓링크' 라는 사이트의 클론코딩을하는 중이다. 어려운 부분은 남겨놓고할 수 있는 부분만 하는 중인데생각보다 쉽게 끝낼거라고 생각했던 부분이생각보다 시간이 좀 걸렸다...... 블로그, 유튜브, 페이스북, 인스타, X(구 트위터)아이콘 뒤에 회색 원을 위치했고아이콘을 클릭했을 때,내가 입력한 링크로 이동을 시키려고 했다. 아무리 생각해도 어떻게 넣어야할지 모르겠어서튜터님을 찾아뵀다. 폰트어썸은 div, p, span 처럼 FontAwesomeIcon icon={faMessage} size="xl" />태그명으로 되어있는게 아닌FontAwesomeIcon이라고 되어있어서(내가 사용하려고 했던)Link태그를 사용할 수 없었고 대신a태그를 사용할 수 밖에 없었다. 근데a태..

리액트에 폰트어썸(아이콘) 적용하는 방법

클릭하면 상단에 자동으로 올라가는버튼을 만들고 있었다. 그냥 '올라가기'나 '↑' 이렇게 입력하고font-weight: bold; 로 할까..?? 싶었는데그러면 너무 맛없는 화면이 될 것 같아서폰트어썸에서 제공하는 아이콘을 사용하기로 했다. html은 폰트어썸 링크를 호출해 줬는데React는 어떻게 해주면 될까 하고 검색해보았다.많이 달랐다. 이 블로그 저 블로그 들어가보고이것도 설치해보고 저것도 설치해보고 했었는데안 돼서 정리해본다.얼마나 삽질을 했으면 이 시간에 와카타임이 10시간정도가 나온다 ㅋㅋㅋㅋㅋㅋ 그래도 알아가는게 있어서 행복하다 : )   1. svg 기반 아이콘을 사용할 수 있게 해주는 패키지 설치터미널에 yarn add @fortawesome/fontawesome-svg-core 입력 ..

axios (interceptor, Custom Instance, interceptors)

Interceptor:1. 요청 및 응답 시 필요한 작업을한 번에 처리할 수 있음2. 요청 헤더 추가3. 인증 관리4. 로그 관련 로직 삽입5. 에러 핸들링 Custom Instance 만들기1. baseURL을 설정하여 서버 주소가 변경돼도한 곳에서 수정하면 모든 요청에 반영되도록할 수 있음 Interceptor의 필요성1. HTTP 요청과 응답을 가로채서특정 작업을 수행할 수 있게 함2. 모든 요청에 공통적인 헤더를 추가할 수 있음3. 응답에 대한 공통적인 에러 처리 가능 Interceptor가 흐름을 가로채는 상황1. 요청(request)이 전송되기 전2. 요청 또는 요청을 보내기 전3. 요청이 출발하기 전4. 응답(response)의 then또는 catch가 처리되기 전

axios (DELETE, PATCH, PUT)

DELETE1. 데이터를 삭제하는 기능 2. await axios.delete("url 주소" * id);  1. PATCH: 전체 데이터를 새롭게 교체하는 방식 const { default: axios } = require("axios");axios  .patch("https://api.example.com/users/1", {    email: "newalice@example.com",  })  .then((response) => {// 서버 응답    console.log(response.data);  })  .catch((error) => {// 에러 처리    console.error(error);  }); 2. PUT: 일부 데이터만 수정할 때 사용하는 방식const { default: axi..

axios (GET, POST)

axios:1. node.js와 브라우저를 위한Promise 기반 https 클라이언트2. http를 이용해서 통신하기 위해 사용하는 패키지3. fetch와 기능이 겹침4. response.json() 할 필요가 없음5. await("url링크");만 해도 됨6. import axios from 'axios'; 사용하는 이유 1. fetch API 같은 내장 함수보다 코드가 간결 2. 비동기 요청을 관리하는 데 좋음 3. then()과 catch()`로 쉬운 결과처리 가능 4. 기본 설정 기능: 공통 URL이나 헤더 같은 설정을 쉽게 지정 가능 5. JSON 자동 변환: 서버에서 받은 데이터를 JSON 형태로 쉽게 변환 가능 json server 변경 사항이 생기면 터미널을 껐다가 다시 켜줘야 함 동기 ..

json server

json-server:1. 간단한 DB와 API 서버를 생성해주는 패키지2. 백엔드에서의 실제 DB와 API 서버가 구축될 때까지프론트엔드 개발에 임시적으로 사용할 mock data를 생성하기 위함3.프론트 엔드에서는 백엔드가 하고있는 작업을 기다리지 않고프론트엔드의 로직과 화면을 구현할 수 있어효율적으로 협업을 할 수 있음supabase나 firebase를 사용하지 않는 이유1.백엔드가 없는 환경에서 실제 서비스 구축에 유용하지만,실무와의 연관성을 생각한다면,json server가 더 적합할 수 있음설치 방법1. 터미널에 yarn add json-server 입력사용 방법1. src 폴더에 새 파일 생성2. json 형식으로 데이터 입력3. JSON Server started on PORT: 4000 입력

HTTP

HTTP (HyperText Transfer Protocol)1. 통신 규약2. 웹 상태에서 데이터를 주고받기 위한 프로토콜3. 클라이언트와 서버 간의 요청과 응답을 정의4. 상태 코드와 헤더를 포함한 다양한 요소를 가짐5. 클라이언트 - 서버 모델을 기반으로 동작6. 클라이언트가 요청을 보내면 서버가 응답을 반환7. 응답은 텍스트 기반의 메시지로 이뤄짐HTTP의 특징1. 무상태성 (이전 정보를 기억하지 않음)2. 확장성 (확장 헤더를 추가해 기능 확장 가능)3) 유연성 (다양한 데이터 형식 전송 가능)HTTP의 메시지 구조요청(Request)과 응답(Response)으로 나뉨요청 메시지: 클라이언트가 서버로 데이터를 요청할 때 사용1. 요청 라인: 메서드(GET, POST 등), URL, HTTP 버전..

promise all, async / await

순차 처리(Sequential Processing):순차 또는 연속적으로 두 가지 이상의 처리를 행하는 형태병렬 처리(Parallel Processing):복수의 처리를 병렬 시키거나 동시에 처리하는 방법async/await1. Promise 객체를 더욱 간편하게 다룰 수 있도록 도와줌2. async함수는 항상 Promise를 반환3. await 키워드는 Promise가 이행될 때 까지 기다림4. 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 향상됨async1. 항상 Promise를 반환2. 내부에서 명시적으로 return문으로 값을 반환하면자동으로 Promise.resolve()를 통해 감싸져서 반환됨fetch1. fetch(url, [options])2. url: 접근하고자 하는 주소3. op..

동기, 비동기, promise

동기 (Synchronous Processing):1. 요청과 그에 따른 응답이 순차적으로 일어나는 방식2. 요청을 보내면 그 응답이 올 때까지 대기한 후다음 작업을 진행3. 일의 순서가 중요한 경우4. 처리 순서가 보장되지만,응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에비효율 적일 수 있음 비동기 처리 (Acyncronous Processing):1. 요청과 그에 따른 응답이비순차적으로 일어나는 방식2. 요청을 보내고 응답을 기다리지 않고,다음 작업을 계속 진행함3. 일의 순서가 중요하지 않은 경우,효율적인 일 처리를 위해  처리  Promise:1. 자바스크립트에서 비동기 작업의 완료 또는 실패를처리하기 위해 사용되는 개념2. 비동기 작업이 성공하거나 실패했을 때각각의 결과를 처리하는 데 ..