전체 글

2년차 프론트엔드 개발자의 2023년 회고

이직 첫 회사에서 1년 3개월의 경력을 마무리로 새로운 회사로 이직을 했다. 이직을 한 이유는 많은 사용자가 사용하고 있는 플랫폼에서 더 많은 성장을 하기 위해서였다. 개발팀은 크게 웹개발팀, 앱개발팀, 백엔드팀 이렇게 나뉘어 있었고 나에게도 프론트엔드 사수가 생겼다는 점이 많이 설렜다. 경력직으로 이직한 것은 처음이라, 생각보다 많은 부담을 가지고 첫 출근을 했었고 주니어 동료 한 명과 먼저 인사를 나눴다. 자기소개나 온보딩등 신규입사자가 잘 적응할 수 있도록 회사문화가 잘 갖추어져 있어 빠르게 적응할 수 있었다. 회사 문화중 매달 선정된 책을 읽고 회사의 업무에 적용할 수 있는 점을 독후감형식으로 남기는 문화 덕분에 1년에 한두 권 책을 읽을까 말까 했던 내가 벌써 9권의 책을 읽었다! 회사의 업무는..

React | Next.js 환경에서 나이스(PASS) 신원인증 구현하기

나이스에서 제공하는 개발 가이드에 있는 내용은 보안상 백엔드, 서버에서 처리하는 것이라 생각하시면 됩니다. 프론트에서는 서버에서 나이스에게 요청하여 발급받은 암호화 토큰을 가지고 신원인증 창을 열어주고, 사용자가 신원인증을 완료하고 난 후 받은 데이터를 서버에 주어 서버에서 해당 정보를 복호화하여 유저의 신원인증 정보를 얻을 수 있습니다. 자 그럼 프론트에서 할 일은 암호화 토큰을 요청하여 나이스 인증창을 띄어주고, 유저가 성공하고 리턴받은 토큰을 다시 백에 전달해주면 됩니다. 그래서 저는 신원인증에 사용할 빈 페이지 두개를 만들었습니다. 1. auth page: 서버(나이스)에서 전달받은 토큰을 가지고 나이스 폼 제출하여 본인인증(pass) 창을 띄어주는 페이지 2. complete page : 본인인..

React | 서버없이 메일 보내기 및 구글스프레드시트에 저장

포트폴리오 사이트나 회사 소개 홈페이지를 보면 하단에 contact us라고 적혀있는 연락하기 폼을 많이 보았을 것 같아요. 메일 주소에 mailto를 사용하면 구현은 가능하지만 컴퓨터 메일 앱이 켜지면서 직접 보내는 형태이기 때문에 서드파티 앱을 한번 거쳐야 하기 때문에 사용자 경험이 그리 좋아 보이진 않았기에 페이지 내에서만 해결하려고 했습니다. 기능을 찾아보던 중, EmailJS는 월 200건만 무료로 보낼 수 있기에 다른 방법을 찾아보던 중 google에서 제공하는 기능을 사용해보고자 합니다! - 백엔드(db) 없이 프론트엔드로만 구현 - 각 정보를 입력하고 submit 버튼을 누르면 스프레드시트에 데이터 저장 및 지정한 메일로 메일이감 - form 액션으로 요청하는 것이 아닌 fetch, axi..

css | 부모의 너비를 무시하고 자식의 요소를 화면 전체 너비로 설정하기

PC 버전을 구현할 때, 메인의 너비를 1024px로 설정하고 margin:0 auto; 를 사용하여 가운데 정렬하여 작업을 하는 도중, 메인 콘텐츠의 중간 요소의 너비를 화면 전체로 구현하고 싶었습니다. .넓히고자하는요소 { width: 100vw; margin-left: 50%; transform: translateX(-50%); } 해결법은 간단했으며, 전체 풀로 채우고자 하는 요소에만 css를 추가하면 됩니다. 결과화면 https://www.milindsoorya.com/blog/css-to-ignore-parent-padding

알고리즘문제 | 다중포인터 패턴

문제설명 오름차순으로 정렬된 int arr을 받는 sumZero라는 함수가 있다. 해당 함수는 두개의 요소의 합이 0이 되는 첫번째 쌍을 배열로 반환하며, 합이 0이 되는 요소가 없다면 undefined를 반환한다. 예시 arr return [-4,-3,-2,-1,0,1,2,3,10] [-3,3] [-2,0,1,3] undefined [1,2,3] undefined 💡문제풀이 function sumZero(arr) { let leftIdx = 0; let rightIdx = arr.length - 1; while (leftIdx < rightIdx) { let sum = arr[leftIdx] + arr[rightIdx]; if (sum === 0) { return [arr[leftIdx], arr[ri..

React | Kakao Map Api를 사용하여 주소로 지도 그리기

kakao api는 키를 발급받아야 사용가능하며, 키를 발급받았다는 전제하에 작성하였습니다. kakao든 google이든 하루에 무료로 제공되는 횟수는 정해져 있으니 확인해 보고 본인에게 맞는 서비스를 선택하면 될 것 같아요. *kakao api 키 발급하기 가이드 및 map api 전체 가이드 테스트용 도메인: http://localhost:3000 https://apis.map.kakao.com/web/guide/#ready 1. 루트경로에 .env 파일 생성하여 키값 세팅하기 # .env NEXT_PUBLIC_KAKAO_APP_KEY=de100000010f46c4a290000000 kakao에서 받은 api key는 .env 파일에 넣어 사용합니다. 2. 지도 화면 출력하기 kakao에서 제공하는 ..

알고리즘 문제 | 빈도수세기_anagram

문제설명 2개의 문자를 인자로 받으며 두번째 문자열이 첫번째 문자열의 anagram인지 확인하는 validAnagram 함수이다. (서로 가지고있는 문자의 개수가 똑같은지 확인) 예시 str1 str2 return aaz zza true awesome awesom false texttwisttime timetwisttext true 🤔 문제 풀이 (before) function validAnagram_before(str1, str2) { let obj1 = {}; let obj2 = {}; //1. 길이 비교 if (str1.length !== str2.length) { return false; } //2. str1, str2의 요소를 객체로 카운팅하기 for (let e of str1) { if (ob..

알고리즘문제 | 빈도수세기

문제설명 2개의 배열을 인자로 받는 same이라는 함수가 있다 첫번째 배열의 요소에 제곱된 값들이 두번째 배열에 있다면 참을 반환해야 한다.(순서는 상관없으며 빈도수는 같아야함) 예시 arr1 arr2 return [1,2,3] [4,1,9] true [1,2,3] [1,9] false [1,2,1] [4,4,1] false 🤔 문제 풀이 function same(arr1, arr2) { // 1. 배열의 길이 비교 if (arr1.length !== arr2.length) { return false; } // 2. 배열 1의 요소에 제곱을 한 값이 배열 2에 있는지 indexOf를 사용하여 있다면 // 배열 2에 해당하는 요소를 삭제 / 없다면 false반환 for (let i = 0; i < arr1..

프론트엔드 개발 면접 질문 및 답변 (61개)

⭐️ 주소창에 naver.com을 입력하면 (https://velog.io/@khy226/브라우저에-url을-입력하면-어떤일이-벌어질까) 1. www.naver.com 의 IP 주소를 찾기위해 DNS 서버를 방문합니다. 2. 캐시에서 DNS기록을 확인한후, 만약 요청한 URL이 캐시에 없다면, ISP(Internet Service Provider)의 DNS 서버가 DNS 쿼리로 IP 주소를 찾습니다. 3. 브라우저가 해당 IP 를 가지고 있는 서버와 TCP 연결을 합니다. 4. 브라우저가 해당 서버에 HTTP 요청을 합니다. 5.서버가 요청을 받고 response 를 다시 HTTP 에 실어보냅니다. 6. 브라우저가 해당 응답을 받아 HTML을 파싱하여 브라우저 내에 출력합니다. ⭐️ HTTP와 HTTPS..

자주 사용하는 git 명령어 모음

작업시 사용하는 명령어 # 변경사항 스태시에 올리기 & 커밋 & 푸시 git add . git commit -m "커밋메세지" git push origin 작업 브랜치 # master 브랜치 rebase 하기 (작업 중 마스터,디벨롭 브랜치의 푸시된 변경사항을 작업중 브랜치에 적용할 때) git rebase -i master # commit 되돌리기 (변경사항 살아있음) git reset commit주소 # commit 되돌리기 (변경사항 삭제) git reset --hard commit주소 Branch branch 조회 # 로컬, 원격 저장소의 branch 출력 git branch -a # 원격 저장소의 branch 출력 git branch -r branch 삭제 # 로컬 브랜치 삭제 git branc..

Next.js 에서 Next/Image를 사용하여 이미지 처리하기

Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-elementeslint@next/next/no-img-element nextjs에서는 react에서 사용하는 것과 동일하게 img 태그로 이미지 처리를 하게 되면 eslint가 경고를 띄웁니다. 를 사용하면 LCP속도가 느려지므로 next.js에서는 를 사용하여 이미지 최적화를 하라는 경고입니다. 위 문구를 무시하고 사용할 수는 있지만 근본적인 해결방법은 아닙니다. 그럼 어떻게 바꿔서 사용하면 될까요? 사용법..

Next.js | Next.js + Styled-Components 초기 세팅 (next 13)

styled-components는 CSR로 작동하기 때문에 SSR인 next-js에서는 styled이 적용되도록 따로 설정이 필요합니다. (설정을 하지 않으면 스타일이 적용되기 전에 렌더가 되어 화면이 보이는 현상이 나타납니다..🤦🏻‍♀️) 1. 설치 npm i styled-components npm i -D @types/styled-components babel-plugin-styled-components 2. next.js에서 사용하도록 설정하기 1) .babelrc 생성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, // SSR을 위한 설정 "fileName": true, // 코드가 포함된 파일명을 알..

Next.js | Next.js + typescript 초기 세팅 (next 13)

1. 설치 및 실행 설치 npx create-next-app --typescript # or yarn create next-app --typescript # ... What is your project named? (프로젝트 이름) Would you like to use ESLint with this project? (eslint를 쓸건지 => yes) 실행 # 개발자 모드 npm run dev 2. ESLint, Prettier 세팅 1) 설치 npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier eslint-config-prettier : prettier와 충돌할 수 있는 eslint 규칙들을 꺼줍니다. eslint..

React | web3를 사용하여 메타마스크(Metamask) BSC 네트워크 변경 및 추가하기

들어가며 메타마스크 지갑 연결 부분은 아래 포스팅에 설명되어 있습니다. 본 글은 전 글에 이어 chain id를 가지고 네트워크를 변경 및 추가하는 내용만을 정리하였습니다. https://3d-yeju.tistory.com/90 React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기 서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수 3d-yeju.tistory.com BSC (chain id: 56), Binance Smart Contract의 네트워크를 추가해 보겠습니다. 네트워크를 추가하는..

React | axios interceptors header에 token값 설정&추가하기, 삭제하기

이번 프로젝트에서는 jwt 방식을 사용하여 로그인을 진행하였기에 헤더의 값을 유동적으로 설정해야 했습니다. 간단하게 jwt 로직을 설명해 보자면, 1. 로그인을 하면, 서버에서 accesstoken 과 refresh token을 받습니다. 2. 개인정보가 들어간 데이터들은 api를 요청할 때 header에 token 정보를 함께 담아 요청을 하는데 서버에서는 이 토큰값으로 개인에 맞는 데이터들을 뽑아서 전달해 줍니다. 3. 로그인했을 때에는 header에 토큰 값이 들어가진 상태로 api를 요청을 해야 하며 로그아웃 상태일 때에는 토큰 값이 없는 상태로 api를 요청해야 합니다. 저희는 프로젝트에 공통값(header, 에러)들을 한 곳에서 처리하기 위해 axios interceptors을 사용했었는데요 ..

React | web3-react를 사용하여 메타마스크(Metamask) 서명 요청하기

서론 메타마스크 지갑 연결 부분은 아래 포스팅에 설명되어 있습니다. 본 글은 전 글에 이어 서명 부분만 추가한 프로세스를 정리하였습니다. https://3d-yeju.tistory.com/90 React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기 서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수 3d-yeju.tistory.com 라이브러리 설치 ethers 라이브러리는 web3.js와 같이 이더리움 네트워크를 조회하고 조작할 수 있는 인터페이스를 제공합니다. npm i ethers 지갑 연..

React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기

서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수에 전달할 변수들을 전달해야 합니다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있으며 이더리움 노드들은 JSON-RPC로만 소통할 수 있는데 web3.js는 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있게 해주는 라이브러리입니다. web3-react란? react 앱에서 Context를 이용해 web3의 Dapp과 관련된 특정 주요 데이터(사용자의 현재 계정, chain id, web3 provider 등)를 최신상태로 유지해..

1년차 프론트엔드 개발자의 2022년 회고

나에게 2022년은 프론트엔드 개발자로 커리어 변경을 하면서 많은 성장을 한 해이다. 첫 회사 1월, 가상자산과 블록체인 기술 관련 사업을 하는 회사에 입사를 하였다. 회사에는 퍼블리셔와 백엔드 개발자 사수 두 분이 계셨고 함께 입사한 동기 2명(BE 1명, FE 1명)과 총 5명이 개발팀이 되었다. 우리에게 당장에 주어진 업무는 1,2월 동안 안드로이드 앱으로 운영되고 있는 서비스를 웹으로 고도화하는 작업이었다. 프론트엔드 사수가 없어 직접적으로 물어볼 수도, 참고할 만한 코드도 없었던 상황이었기 때문에 나와 프론트엔드 동기 둘이서 프로젝트 초기 세팅부터 라이브러리 사용, 깃 규칙등을 정하여 작업을 진행했다. 당시에는 속도도 느렸을뿐더러, 실제 서비스를 배포하는 것은 처음이라 세세하게 신경 써야 하는 ..

TypeScript 환경에서 React Query 사용하기

도입 계기 입사 후 첫 프로젝트에서는 서버에서 받아오는 비동기 데이터들을 redux를 사용하지 않고 state로 관리하였고 그렇게 사용하다 보니 생기는 불편함이 몇 가지 있었습니다. 1. 컴포넌트 간에 데이터를 Props로 넘겨주어 사용하는 경우가 다반수였습니다. 2. 하나의 컴포넌트에서 사용된 api가 다른 컴포넌트에서도 필요할 때 api를 요청하는 부분이 중복으로 사용되는 경우가 있었습니다. 3. 비동기데이터가 컴포넌트 마다 흩어져있어 한번에 관리하기 어려웠습니다. 새롭게 시작하는 프로젝트에서는 비동기 데이터를 잘 관리하고 싶었고 전역상태관리로만 사용했던 redux를 미들웨어를 사용하여 써볼까 했지만 큰 기업들에서react-query를사용하고 있는 추세였기에react-query와을 선택하였습니다. R..

React | Swiper.js를 사용하여 카드 슬라이드 구현하기 (Slides per view)

Preview 카드 형식의 컴포넌트들을 swiper를 사용해 슬라이드 형식으로 구현하였고 반응형을 적용하였습니다. Swiper 라이브러리에 관한 기본적인 설명은 아래 글을 참고하여 주세요. https://3d-yeju.tistory.com/86 { fetch(`/data/swiper/swiper_card.json`) .then(res => res.json()) .then(res => { setSwiperList(res.data); }); }, []); return ( {swiperList && swiperList.length > 0 ? ( { swiperRef.current = swiper; }} slidesPerView={1} breakpoints={{ 800: { slidesPerView: 2, },..