📚 TLDR서비스를 개발하다 보면, 새로운 기능을 만드는 만큼이나, 기존의 코드를 다시 보고 다른 사람이 짠 코드를 살펴보는 시간이 많아졌습니다. 가벼운 해커톤이나, 동아리 프로젝트처럼 기간을 정해두고 하는 프로젝트성 개발과 달리 완성을 시키고 계속 유지보수 해나가야 하는 개발을 하다 보니 '아.. 리팩토링 해야 하는데..'라는 생각이 절로 들게 됩니다. 이제 와서 생각해 보면, '컨벤션을 좀 더 꼼꼼히 할걸', '코드리뷰 할 때, 이런이런 부분에 대해서는 의견을 나눠볼걸'과 같은 생각이 들긴 하지만, 그것도 1년 정도 한 프로젝트만 개발하고 코드를 보고 또 보면서 서비스를 발전시키다 보니 느껴지는 부분이지 그때의 제가 생각조차 못할 부분이지 않나 싶기도 합니다. 여러 후회와 그 후회를 바탕으로 발전시..

TLDR이번에는 Tab Navigation을 서비스를 개발하며 개선한 부분에 대해서 얘기해보려고 합니다. 그저 "탭의 상태" 에 따른 표시되는 UI가 변경되는 정도의 컴포넌트로 인식하고 있었지만, 사용자측면을 고려하고 베타테스트를 진행하면서 저 "상태"를 자연스럽게 관리하는 것에 대해 고민하고 개선한 내용과 그 로직에 대해 공유하려고 합니다. 초기 로직 : UI와 그 기능에 집중처음 개발한 Tab Navigation은 UI와 Highligt Animation 등에 더 신경을 많이 썼습니다. 다른 페이지에서도 활용 될 수 있게끔, 탭의 갯수와 상관없이 UI를 적용할 수 있게끔 고민했고, 탭의 상태는 크게 신경쓰지 않았습니다.컴포넌트의 Props를 통해 tab의 정보를 배열로 받았으며, tab navigat..

TLDR웹뷰형태의 앱을 서비스하게 되니, React에서 앱으로 데이터를 주고받을 수 없을까? 하는 생각이 들었습니다. 저희 서비스에서는 웹뷰로 표시될 앱을 외주를 맡기고 앱동작이 아닌 거의 모든 UI와 상태들이 웹에서 관리되고 있었기 때문에, 데이터를 전달해서 기능과 UI를 다르게 서비스하는 기능이 필요했습니다.이번 포스팅에서는 저희 서비스에서 웹과 앱간에 데이터를 주고받기 위해 사용한 두 가지 방식에 대해 소개해드리려고 합니다. URL params웹뷰로 연결된 앱에서는, URL 을 통해 앱에 웹을 표시합니다. URL 뒤에 약속된 params에 데이터를 남긴다면 데이터를 전달하거나 그에 맞춰서 UI를 변경할 수 있습니다.저희 서비스에서 앱에서 사용자의 몇몇 액션에 따라 페이지에 팝업이 떠야 하는 경우가 ..

TLDR이번 포스팅에서는 Sub Domain을 연결하는 방법에 대해 작성합니다. 이전 게시글 중 [React + Vite + Nginx + Docker + AWS] 를 활용하여 배포 해봅시다! 을 통해 AWS EC2에 react 빌드 파일을 nginx와 docker를 설정해놓은 상태에서, Route53/ Cloudflare을 활용하여 https 연결과 배포를 진행한 상태입니다.도메인 연결 및 배포 설정과 관련된 Route53 및 Cloudflare를 활용했던 방법에 관한 정보는 추후에, 포스팅하여 연결될 수 있게 수정될 예정입니다. 아직 Cloudflare가 free 버전이고 어디까지 활용될 것 인지, 지식도 부족하다고 생각하여 https를 어떻게 배포할 것이고 장단점에 관련된 내용까지 담아 소개해 드리..

개요웹 프론트엔드 개발자 설탕시럽입니다.개발 기간이 예상보다 길어지고, 이래저래 수정사항이 많았지만 결국 QA 기간까지 왔습니다. QA 진행을 위해서는, 이제 로컬환경이 아닌 배포된 환경이 필요했고 AWS를 활용하여 배포하기로 했습니다. 어쩌다 보니 제가 aws를 활용하여 React 배포를 맡았지만, vercel, firebase hosting과 같이 쉽게 배포를 도와주는 툴이 아닌 aws를 통한 배포는 처음이었습니다. 처음 하는 김에 Docker를 활용해보고 싶은 호기심도 있어서, 우당탕탕 React + Vite + Nginx + Docker + AWS 환경에서 배포하는 과정에 대해 공유하려고 합니다 DockerDocker란 무엇일까요? aws에서는 다음과 같이 설명하고 있습니다Docker는 애플리케이..

개요안녕하세요. 웹 프론트엔드 개발자 설탕시럽입니다. 이번 글에서는 Intersection Observer를 활용하여, 사용자의 화면을 기준으로 컴포넌트에 변화를 주는 방법에 대해 소개해드리려고 합니다. scrollEvent를 활용한 방식이 아닌 Intersection Observer를 활용하여, 스크롤이 기준이 아닌 유저가 보는 화면을 기준으로 UI를 수정할 수 있는 방식입니다. 요구사항여러개의 아티클 Item이 세로 스크롤로 나열되어 있습니다.유저에게 잡히는 메인 Item은 투명도 조절 없이, 그 외 Item은 불투명하게 화면에 표현하여 메인 아티클을 강요합니다.위와 같은 요구사항을 만족시키기 위한 방법으로 Lazy Loading에 많이 활용되는 Intersection Observer를 활용하면 좋을..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. React의 함수형 컴포넌트에서 상태관리 함수 "useState"에 대해 학습한 내용을 공유하려고 합니다. useState? useState는 React에서 상태 관리를 위해 React Hooks에서 제공되는 함수입니다. 이전까지는 클래스 기반 컴포넌트에서 this.state 를 통해 상태를 관리했었지만, 함수 기반 컴포넌트가 활성화 되고 React Hooks를 통해서 클래스 기반 컴포넌트처럼 상태를 관리할 수 있게 되었습니다. useState는 배열을 반환하며, 반환하는 배열의 값은 다음과 같습니다. 첫 번째 원소 : 상태값을 저장할 변수 두 번째 원소 : 해당 상태값을 업데이트할 때 사용하는 함수 const [state, setStateFn] = use..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 React가 더욱 편리할 수 있게 도와주는 JSX에 대해서 알아보겠습니다. 이전 학습내용 React의 특징과 장점, 적용 예제까지! https://sugarsyrup.tistory.com/entry/React%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0%EC%99%80-HTML%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 개요 이전 아티클에서 HTML에서 React와 ReactDOM을 불러와서, React.createElement를 활용해 웹페이지를 구성하는 방법을 알아봤습니다. createElement보다 편리한 방식으로 JSX를 사용할 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 10주 동안 100여 명 정도 되는 사람들과 React와 TypeScript에 대해 함께 학습하게 되었는데 (NomadCoder) 진행하는 김에 학습하는 내용을 꾸준히 정리해 보려고 합니다! 이번 주제는 React를 학습하는 이유와 JSX를 활용하지 않는 React 문법 작성법에 대해 알아보겠습니다. 왜 React를 학습해야 하는가? 제가 처음 React를 학습하게 된 이유는 많은 회사에서 사용된 검증된 라이브러리라는 점이 가장 큰 메리트로 느껴졌습니다. 강의에서도 비슷한 내용과 그 외 추가적인 이유와 함께 리액트를 왜 학습하고 그 장점에 대한 소개가 있었습니다. 개발자에게 중요한 자원중 하나는 시간! 학습한 내용이 몇년뒤에 잊히는 게 아닌 꾸준히 사용할 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 프로젝트 내 axios를 활용한 중복 코드 제거를 위해 Axios Custom Hook을 만든 경험을 공유하고자 합니다. axios에서 중복되는 설정과 로직을 React의 Hook을 통해 묶어서 관리하고, 앞으로 재사용할 때에도 편의성을 주기 위해 이 과정을 거쳤습니다. 이번 글은 Writing a custom Axios hook in TypeScript for API calls in your React application 를 많이 참고해서, 참고한 김에 번역을 했습니다. 내부 코드의 일부만 프로젝트와 저에게 맞게 수정했고 텍스트는 모두 번역/의역 한 내용임을 미리 밝힙니다. 개요 Axios는 HTTP client에서 브라우저와 Node.js에서 API ..

개요 안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 엄브렐라 프로젝트에서 Session 방식과 JWT Token 인증 방식 로그인이 무엇이고, 왜 JWT Token 인증방식으로 로그인 구현했는지와 코드를 함께 공유하려고 합니다. 로그인 시스템에서 사용자를 식별하여, 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 보안절차. 웹에서 HTTP를 활용한 데이터는 stateless 특징상 누가 요청하는지 시스템에서 알 수 없다. 로그인이라는 절차를 통해 파일 및 프로그램 등의 컴퓨터 시스템의 접근 권한을 관리할 수 있기 때문에 보안에서 중요한 역할을 한다. 따라서 로그인을 하지 않았거나 권한이 없는 유저에 대해 접근 및 동작제어를 확실하게 해야 한다. 권한 없는 자원에 대해 접근이 불가능한 구..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 프로젝트 내 로그인 폼을 구현하는 과정에서 react-hook-form과 yup라이브러리를 사용한 방식을 공유하려고 합니다. react-hook-form과 yup을 도입하게 된 계기 기존의 react에서 을 통해 내용을 받을 때는 불편한 점이 있었습니다. 입력값을 처리하는 과정에서 onChange와 같은 함수와 react의 상태로 처리하게 되면서 불필요한 렌더링이 발생하는 문제가 있었습니다. 그 외에도 onSubmit함수와 유효성 처리, 에러 처리 등 필요한 기능만큼이나 함수와 상태가 늘어났고 react-hook-form을 도입하기 전까지는 매우 비효율적으로 처리될 수 밖에 없었습니다. react-hook-form은 이전에도 몇번 도입시킨 적은 있으나, 이..