4전 4전

프론트엔드 개발을 진행하다 보면 사용자가 데스크톱으로 접속했는지, 모바일 기기로 접속했는지,어떤 브라우저를 사용해서 접속했는지 등을 확인하고 이에 따라 다른 UI를 제공해야 하는 경우가 있습니다. 이때 웹 브라우저의 User Agent를 활용하여 이를 알 수 있습니다.| User Agent User Agent는 사용자가 웹사이트에 접속할 때 브라우저가 서버로 보내는 문자열입니다. 이 문자열에는 브라우저의 정보, 운영 체제, 기기 정보 등이 포함되어 있어 이를 파싱 하면 사용자의 접속 환경을 알 수 있습니다. 자바스크립트에서는 브라우저의 navigator객체를 통하여해당 문자열을 확인할 수 있습니다.console.log(navigator.userAgen);또한 기기나 브라우저로 출력되는 User Agent..

보통 vite를 사용하여 리액트 프로젝트를 할 때 환경변수를 import.meta.env.VITE_DEVELOP 이런 식으로 불러와서 사용할 수 있습니다. 하지만 이런 식으로 불러오는 것은 기본적으로 클라이언트에서 사용되는 거라 서버에서 불러와지지 않습니다. 따라서 process.env를 통하여 가져와야 하는데 그냥 사용하면 환경변수가 적용이 안되게 됩니다. https://vitejs.dev/config/#using-environment-variables-in-config vite.js 공식문서에 따르면 vite는 설정을 마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 .env파일을 로드하지 않는다고 합니다. 따라서 필요시 loadEnv 헬퍼를 사용해 .env 파일을 불러온 후 사용..

최근에 대한민국 철봉 지도라는 프로젝트를 진행하면서사용자가 지도에 철봉 위치를 등록하면서 주변 사진을 이미지로 업로드하고,업로드한 이미지를 다른 사용자들이 확인할 수 있는 기능을 구현하였습니다. 이때 저희 서비스 특성상 고화질 이미지를 제공할 필요성이 크지 않고,거리뷰를 통해 확인할 수 있는 기능을 제공함으로써 서버의 부담을 줄이고, 로딩 속도를 올리기 위해이미지를 리사이징 하여 용량을 줄이기로 결정하였습니다.| Canvas API를 통한 이미지 리사이징먼저 축소하고자 할 비율과 파일을 받아 Promse를 리턴하는 resizeFile함수를 만들어 줍니다.const resizeFile = async (file: File, scale: number): Promise => { return new Promis..

단축평가란 표현식을 평가하다가 결과가 확정되면 나머지 과정을 진행하지 않고 결과를 반환하는 것을 말합니다. 이를 통해 자바스크립트에서 평가를 최소화하고, 조건부 로직을 간결하게 작성할 수 있습니다. | OR (||) OR연산자는 왼쪽 피연산자가 falsy값 일 때 오른쪽 피연산자의 값을 반환합니다. 반대로 왼쪽 피연산자가 truthy값이면 왼쪽 값을 그대로 반환합니다. let name = null; let user = name || "yi"; console.log(user); // yi 출력 이처럼 name이 null이므로 falsy값이기 때문에 "yi"라는 오른쪽 값을 반환합니다. | AND (&&) AND연산자는 왼쪽 피연산자가 truthy값 일 때 오른쪽 피연산자의 값을 검사하여 반환합니다. 반대로..

리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은 부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다. 이를 "bubbles", "propagates"라고 합니다. | 예시 import React from 'react'; import './style.css'; export default function App() { return ( { console.log('1'); }} > console.log('2')}>children ); } 이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고, 자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다. 그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고, 자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩..

타입스크립트에서 함수에 타입지정을 해서 사용할 수 있습니다. | 타입지정 먼저 아래처럼 간단한 함수가 있다고 해보겠습니다. function 함수(x){ return x * 5; } 함수(2) // 10 이런 함수에는 파라미터와 리턴 값에 타입 지정을 해줄 수 있는데 아래 코드처럼 타입을 지정해 주면 됩니다. function 함수(x :number) :number{ return x * 5; } 함수(2) // 10 이때 파라미터 타입 지정은 파라미터 옆에 적으면 되고, 리턴값의 타입 지정은 함수명() 오른쪽에 적으면 됩니다. 또한 함수를 만들 때 리턴값이 없는 함수를 만들 수 있는데 이럴 때 void라는 타입을 사용할 수 있습니다. // 리턴값이 없을 때 void타입 function 함수(x :number..

자바스크립트에서 좀 어렵다고 생각하는 개념 중 클로저라는 것에 대해 알아보려 합니다. 그나마 쉽게 말하면 코드에서 함수가 선언될 때 그 유효범위(렉시컬 범위)를 기억하고 있다가, 함수가 외부에서 호출될 때 그 유효범위의 특정한 변수를 참조할 수 있는 개념이라고 합니다. | 예시 function count() { let a = 0; return function () { return a+= 1; } } const count1 = count(); console.log(count1()); // 1 console.log(count1()); // 2 console.log(count1()); // 3 이처럼 함수가 외부에서 호출되면 그 변수를 참조하여 값을 증가시킵니다. 또한 다른 변수로 또 호출하면 변수에 있는 값..

이번 패스트캠퍼스X야놀자 부트캠프 프론트엔드 과정의 HTML/CSS 과제에 대해 이야기해보려 합니다. 과제 주제 : 자신이 원하는 사이트 레이아웃 클론 1. 클론 한 사이트 클론 한 사이트 https://www.pinkfong.com/ko/index.html Pinkfong Official Website www.pinkfong.com 클론 할 사이트로는 핑크퐁 공식 사이트를 골랐는데 이유는 먼저 레이아웃이 크게 복잡하지 않고, 깔끔한 스크롤 애니메이션이 적절하게 있어서 골랐습니다. 2. 구현한 내용 레이아웃 구성 레이아웃 구성으로는 크게 header, main, footer로 나눠서 작업을 하였습니다. - header 먼저 헤더는 logo, navigation, sotial의 3가지 부분을 dispaly..