📕1. 문제 발생 사이드 프로젝트를 진행하면서 랜딩 페이지를 구현할 일이 있었는데,초기에 내가 생각했던 방식은 5가지의 각 기능에 대한 설명을 Swipe 하면서 넘기는 방식이었다. 쉽게 구현하기 위해, 널리 잘 알려져있고 특화 프로젝트 때 사용해본 경험이 있는 라이브러리인Swiper.js를 사용해서 랜딩 페이지를 구현하고자 했는데 Swipe를 할 때, 컴포넌트가 겹치는 오류가 발생했다. 오늘은 이 문제에 대해 같은 경험을 겪고 있는 사람들을 위해 해결 방법을 적어보려고 한다.내가 겪은 문제는 아래와 같다. 내가 의도한 것은 위의 사진처럼1번 ~ 5번 페이지를 각각 스와이프하는 방식이었는데,1번 페이지는 잘 나타나는 것이 보이지만2번 페이지는 이렇게 1번 페이지랑 겹치고 5번 페이지까지 스와이프를 ..
📕 0. 글을 쓰는 이유 : 그동안 리액트를 사용해 SSAFY 공통 프로젝트, 특화 프로젝트, 신한은행 해커톤, 총 3번의 프로젝트를 진행했음에도 리액트의 특성, 장단점조차 제대로 설명하지 못하는 스스로의 모습을 보며 한 번쯤 글로 정리할 필요를 느꼈음. 📕 1. 리액트(React)란? : 메타에서 개발한 오픈 소스 자바스크립트 라이브러리로 주로 웹 페이지나 웹앱의 프론트엔드 개발에 사용. 📕 2. 리액트(React)가 가지고 있는 특징 • 리액트는 '프레임워크'가 아닌 '라이브러리' : 당연히 프레임워크라 생각했는데, 라이브러리라고 한다. 리액트는 Framwork라 부를 수 있는 기준인 라우팅과 상태관리 기본 제공을 충족하지 못하기에 '라이브러리'로 불림. 라이브러리이기 때문에 다양한 라이브러리나 프레..
📕 0. SSE를 사용하여 실시간 알림 기능을 구현했던 이유 신한은행 X SSAFY 해커톤 대회를 진행할 때, 우리가 만든 어플에서 '부모'와 '아이'가 서로 상호작용할 때 실시간 푸시 알림을 보내야 하는 상황이 생겼는데, FCM(Firebase Cloud Messaging)나 웹소켓 방식을 사용하여 구현하기엔 절대적인 시간이 부족하기도 했고 내가 구현할 프로젝트에서는 실시간성과 단방향 통신만 갖추면 됐으므로 상대적으로 구현하기 쉬운 SSE(Server Sent Event)를 선택했음. 📕 1. SSE(Server Sent Events)란? • SSE는 양방향인 웹소켓과 달리, Client가 Server로부터 데이터만 받을 수 있는 단방향 방식. • 일반적인 HTTP 요청은 [요청-응답] 과정을 거치며 ..
📕 0. 기술 블로그 포스팅 이유 요즘 SSAFY에서 진행하는 특화 프로젝트와 신한은행 해커톤 대회 2개의 프로젝트를 동시에 진행중인데, 2개 프로젝트 모두 달력을 사용하기 때문에 달력 기능에 대해 정리해보려고 한다. 이번에 달력을 구현하면서 'mui-DatePicker' , 'react-calendar', 'react-datepicker', 총 3개의 라이브러리를 번갈아가면서 사용했었는데 오늘은 그중에서 가장 괜찮았다는 생각이 들었던 'react-datepicker'라는 라이브러리에 대해 정리해보려고 한다. 'react-datepicker' 는 주간 다운로드 수가 150만에 근접할 정도로 많은 사람들이 사용하며, 업데이트가 꾸준히 되는 좋은 라이브러리이다. 다른 달력 라이브러리보다 직관적이고 다양한 옵..
리액트로 프로젝트를 진행하다가 이미지를 업로드해야 하는 기능을 구현할 일이 생겼다. 정말 간단할 줄 알고 무턱대고 코드 복붙하면서 덤볐다가 조금 다쳐서 이번 기회에 한 번 정리를 해보려고 한다. 📕1. 두 개의 이미지 저장 공간 만들기 이미지 업로드 기능을 구현하기 위해서는 2개의 state가 필요하다. 하나는 이미지 썸네일(미리보기) 기능 구현을 위한 state, 다른 하나는 업로드한 파일 그 자체를 저장할 state. 이번 프로젝트에서는 상태 관리 라이브러리로 'Zustand'를 사용하기 때문에, 이미지 미리보기 기능을 구현할 picture와 file이라는 2가지의 저장 공간을 활용할 것이다. ( 원래는 useState로 2개의 state를 만드는 게 정석이겠지만, 이번 프로젝트 특성상 store에서..
📕 1. 서론 • 이번 주부터는 첫 번째 프로젝트를 위해 필요한 리액트 공부를 본격적으로 시작했다. • '코딩애플' 강의를 한 번 쭉 봤는데, 이해가 잘 안 돼서 한 번 더 돌려봤음. • 그리고 내가 '필요한' 부분만 TIL로 정리해뒀고, 금요일과 토요일에는 프로젝트 때 적용을 잘하기 위해 아주아주 간단한 Todolist를 구현하면서 CRUD의 흐름을 연습했음. 📕 2. 공부한 내용 정리 📙 1) 유튜브 '생활코딩'의 리액트 강의 정리 리액트는 사용자 정의 태그(=컴포넌트)를 만드는 기술 컴포넌트 사용법 1. function App() 밖에 새로운 함수를 만든다. - 이때 이 함수의 이름은 대문자로 시작하고 return 뒤에 원하는 것을 작성해줌. function Article() { return Wel..
