전체 글

반려동물의 하루 일지를 기록하는 웹 서비스를 기획중인 JellyDiary 젤리 다이어리 줄여서 젤다 에서는 매일 작성 되는 일지를 달력 형식으로 보여줄 필요성이 있었다. 프론트엔드 멘토링을 통해 직접 구현하는 것을 추천하지만 실무에서는 이미 만들어진 라이브러리를 가져다 쓰는 경우가 대부분이라고 한다. 그래서 이번 프로젝트에서도 잘 맞는 라이브러리가 있으면 사용해 보고자 여러 레퍼런스들을 찾아보았다. 리액트와 타입스크립트로 캘린더 라이브러리 사용해 보기 우선 아래와 같이 와이어 프레임을 짜 보았다. 내가 필요 한 기능은 1. 월(Monthly) 형식의 달력 포멧을 제공할 것 2. 일 별로 추가되는 일지를 달력에 리스트로 보여줄 수 있을 것 3. 일지 추가 버튼을 생성하고 일지를 추가하면 달력에 추가 할 수..

스크롤은 동작하지만 좁은 범위에서 스크롤이 일어나야 해서 스크롤 자체의 UI는 보이지 않게 처리하고 싶었다. 이때 사용할 수 있는 방법을 정리해 보고자 한다. 1. 스크롤 생성 overflow-y: scroll; 2. 스크롤 바 안보이게 하기 scrollbar-width: none; 간단히 스크롤바의 너비를 없애서 보이지 않게 처리해 줄 수 있다. 스크롤은 가능하지만 보이지 않게 처리해서 모바일 화면과 같은 작은 범위의 상황에서 활용 가능할 것으로 보인다.

협업 프로젝트를 진행하며 여러 오류들과 만나고 있다. 이번에는 리엑트 - 타입스크립트 프로젝트를 진행하며 다른 사람의 코드를 머지했을 때 만날 수 있는 Property 'div' does not exist on type 'JSX.IntrinsicElements'. 오류에 대한 설명과 해결 방안에 대해 작성해 보도록 하겠다. 오류가 발생하는 환경은 1. React 2. Typescript 3. Vite 프로젝트를 시작하거나 수정되지 않은 템플릿을 사용했을 때 발생한다고 한다. 이에 대한 해결 방안은 1. tsconfig.json 파일 수정 "moduleResolution": "Node" 2. VS Code Typescript WorkSpace 버전 선택 3. npm Dependency 재설치 npm i 나..

리엑트에서 기본적으로 토글 버튼은 두가지 상태를 가지는 버튼이라고 생각하면 된다. 이는 삼항연산자나 조건문을 가지고 '토글' 상태를 반대로 변경 시키며 구현할 수 있고, 여기에 애니메이션 효과를 추가하여 우리가 아는 토글 버튼의 모양으로 만들 수 있다. 인라인 스타일 형식에서는 해당 애니메이션을 구현하기어렵고, true/false 의 boolean 값으로 두가지 상태를 가지게 구성하여 현재 상태에 따라 스타일을 다르게 주어 생성할 수 있다. 또한, 해당 토글 버튼을 컴포넌트로 만들어 필요할 때마다 불러내어 사용 가능하다. false true 토글 버튼 React code import React, { useState } from "react"; import { ToggleContainer } from "...

리엑트에서 화면 스크롤 이동이 가능하다. 1. scroll to top 함수 만들기 스크롤을 화면 가장 상단으로 올리는 부분은 scrollTo 를 사용하여 위치를 가장 상단인 0으로 지정한 뒤 이동시킬 수 있다. const scrollToTop = () -> { window.scrollTo({ top:0, behavior: 'smooth' }) }; behavior 옵션은 auto 와 smooth 로 설정 가능하며 auto는 바로 이동, smooth는 말 그대로 부드럽게 이동시킨다. 2. useRef 저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 훅이다. useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태 값을 저장한다. 또한, 객체 내부에 있는 'current'..

같은 네트워크에 프론트단과 백단 서버를 같이 운영 중이라면 한번쯤은 만날 CORS관련 오류를 해결하는 방법을 정리해 보고자 한다. (우선 개발 서버에서만 가능하고, 배포 후에는 다른 방법을 써야하는 경우도 있다.) 프록시 설정을 위해 미들웨어를 사용하기도 하는데 오늘은 간단한 방법으로 package.json 을 수정하여 처리하는 방법을 소개해 보고자 한다. 1. Axios 란? node.js와 브라우저를 위한 Promise 기반 HTTP클라이언트이다. 리엑트에서는 GET, POST, PUT, DELETE 등의 메소드를 지원하기 때문에 쉽게 사용이 가능하다. 주로 백엔드 서버 단으로 API를 호출할 경우에 사용하며 config를 미리 지정해 놓고 인스턴스를 생성해 재사용성을 높일 수 있다. 2. CORS ..

todolist 앱 개발 멘토링 중 백엔드와 연결을 하는 와중에 axios로 RESTAPI 호출을 하며 정말 다양한 오류들을 만나고 있다. 그 중 가장 먼저 해결 해야 했던 부분이, 정말 간단하게 axios를 사용해서 값을 useState로 넣어주려 했는데, 비동기 통신으로 데이터를 받아와 버리니 웹이 뜨자마자 오류가 폭발했다. 자바스크립트는 비동기통신을 하기 때문에 요청을 보내고 기다리지 않는다. 그렇기 때문에 이를 동기화 하여 통신하게끔 처리해 주어야 하는데 그때 async, await이 사용된다. 동기 통신(Synchronous)은 요청을 완료 하길 기다렸다 결과값을 받아와서 사용할 수 있기 때문에 순차적으로 진행이 필요할때 사용하게 된다. axios 하지만 axios는 promise 기반 비동기통..

반려 동물 특화 SNS 개발로 프로젝트 주제를 정했다. 평소 SNS에 피로감을 느끼고 있었고, 마침 프로젝트 팀원의 반려동물이 팀 내에서 인기 스타였기 때문에 자연스럽게 반려동물 관련된 웹 소셜 네트워크로 주제가 정해지게 되었다. 이번 프로젝트는 기록을 많이 남겨봐야지. 가장 먼저 만난 이슈는 라우팅 처리였다. 이번 프로젝트에서는 빈 페이지가 안보이게 에러 페이지도 처리하고자 했다. 우선 피그마로 디자인을 짜봤다. 지정되지 않은 경로는 function App() { return ( ); } export default App; *을 이용하여 처리해 줄 수 있다.

리엑트에서 Select 문을 사용하는 방법을 알아보자. 선택지1 선택지2 빌트인 브라우저 컴포넌트를 이용할 수 있다. 선택리스트는 옵션으로 추가가 가능하다. export default function Picker() { return ( 휴대폰 기종을 선택하세요 iOS Android ); } value 값으로 선택된 값을 전달 가능하다. onChange 함수를 적용해서 선택한 값을 업데이트 가능하다. export default function FruitPicker() { const [selectedFruit, setSelectedFruit] = useState('orange'); // useState를 사용해서 기본 값을 지정가능하다. return ( Pick a fruit: setSelectedFruit..

화살표 함수에서의 this 는 항상 정적으로 상위를 가리킨다.! 사용시 주의할 것