로그인 여부에 따라서 접속할 수 있는 페이지를 제한하는 방법에 대해서 포스팅해보려한다. 나 같은 경우에는 '/' 경로는 홈 페이지 여서 로그인을 해도, 안해도 접근이 가능해야했고 그 외에 나머지 페이지들은 isLogin 상태가 true 일 경우에만 접근가능하도록 구현하고 싶었다. 전체 코드부터 보자 ... import { userInfoState } from "./recoil/atoms/userState"; import { useRecoilState } from "recoil"; function App() { const [userInfo] = useRecoilState(userInfoState); const isLogin = userInfo.isLogin; return ( {isLogin ? ( ) : ..
문제 프로젝트를 개발하면서 이렇게 여러개의 이미지 슬라이드를 구현할일이 생겼다. (백엔드랑 연동하기전이라 예시 데이터를 넣고 테스트하고 있었다.) 한번에 5개까지 보여줄 수 있도록 설정하고 데이터를 8~9개 정도 넣어놓고 테스트를 하고 있었다. 이때 settings 는 다음과 같았다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 5, slidesToScroll: 3, arrows: true, // autoplay: true, }; 근데 예시 데이터를 2개로 줄이고 테스트하니 다음과 같이 이상하게 중복되어 나온다. 해결 구글링을 해보니까 나같은 문제를 겪는 사람들이 있는 것 같아 보였다. react-slick 레포지터리..
문제 axios 로 post 요청을 보내는데 자꾸 api 호출을 두번하는 문제가 생겼다. 다른 api 면 모르겠지만 내가 사용하는 api 는 두번 호출하면 중복된 code 여서 유효한 code 로 동작하지 않았기 때문에 문제를 해결해야했다. 해결 구글링을 하다보니 src/index.js 에서 React.StrictMode 를 지워보라는 말에 따라했더니 중복 호출을 막을 수 있었다.
개발을 하다가 날짜를 선택하는 기능을 구현할 일이 생겼다. 어떤걸 쓸까 찾아보는데 react-datepicker 라는 게 있었다. 근데... 좀 못생겼다? 물론 커스텀을 할 수는 있지만 지금 당장은 커스텀 없이도 좀 더 예쁜걸 사용하고 싶었다. 그러다 mui x 라는 걸 찾았다. https://mui.com/x/react-date-pickers/date-picker/ React Date Picker component - MUI X The Date Picker component lets the user select a date. mui.com 대충 이런식으로 생겼다. 설치 npm install @mui/x-date-pickers // Install date library (if not already ins..
안녕하세요. 데보션영 2기 서다원입니다! 데보션영의 활동 중 하나는 바로 영들과 함께하는 밋업! 인데요. 한달에 한번씩 온라인으로 만나 세미나를 듣고 현직자분들과 Q&A를 할 수 있는 시간을 가진답니다. 하지만 이번 7월 밋업은 데보션영의 지인들도 참여할 수 있는 밋업이었어요! 주변 지인들에게 밋업관련해서 공유해주니까 다들 좋아하시더라구요🥹 이번 7월 밋업 발표는 다음과 같았는데요~ 1. 영업맨 왕대리는 어떻게 데보션 전문가가 되었을까? (왕태웅님) 2. 개발자의 성장과 오픈소스, 그리고 커뮤니티 (박정환님) 3. 컴공 후배들이 3~4학년때 가장 많이 하는 질문 Top 10 (김한성님) 4. 생생한 취업 준비 과정과 팁 (심재훈님) 대학생들이 다들 궁금해하고 관심가질만한 내용이죠? 정말 데보션은 데보션영..
안녕하세요. 데보션영 2기 서다원입니다! 오늘은 SKT T타워에서 진행된 티움 투어 체험과 SKT 본사를 방문해본 후기를 포스팅해볼까합니다.저는 데보션영 활동의 일환으로 티움투어를 진행하게 되었는데요.직접 사이트에서 예약하고 방문할 수도 있어요. 예약할 수 있는 사이트는 아래 링크를 참고해주세요!https://tum.sktelecom.com/reservation/registReservation.do 미래기술 체험관 T.um(티움)SK텔레콤 미래기술 체험관, 시설 안내, 방문예약, 전시관 정보, 체험 서비스 등 제공.tum.sktelecom.com투어 유형에는 유튜브 라이브 투어와 현장 투어가 있는데 현장 투어를 선택해주시면 될 것 같아요. 먼저 을지로에 있는 SKT T타워에 도착을 했어요.데보션영담당자님..
union type 변수에 들어올 값이 string 또는 number 이라면 아래와 같이 작성이 가능하다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 괄호를 작성하게 되면 A | B | C 처럼 여러개를 작성할 수도 있다. 저렇게 할당하는 순간 타입은 string 또는 number 중 하나로 변한다. array 나 object 를 만들 때 union type 을 쓰는 법에 대해서 알아보자. var 어레이: (number | string)[] = [1,'2',3] var 오브젝트: {data : (number | string) } = { data : '123' } 하지만 다른 점이 있다면 변수에 정의된 union 타입은 할당을 하면..
기본 타입 기본 타입을 정리해보자 string, number, boolean 등이 있다. 저렇게 변수 옆에 : 를 붙이고 오른쪽에 타입을 작성해주면 된다. (null, undefined 도 있다) let 이름 :string = 'kim'; let 나이 :number = 20; let 결혼여부 :boolean = false; array 와 object 여러 자료를 한번에 저장하고 싶을 때 array 나 object 를 쓴다. 예를 들어 string 이 들어가는 array 를 작성하고 싶으면 다음과 같이 작성한다. let 회원들 :string[] = ['kim', 'park'] 만약에 string 만이 아닌 string 또는 number 가 들어가는 array 를 작성하고 싶다면 다음과 같이 작성하는데 이건..
tsconfig 파일 생성하기 프로젝트 폴더에 tsconfig.json 이라는 파일을 생성한다. 여기에는 ts 파일을 js 파일로 변환할 때에 어떻게 변환할지 세부설정을 작성할 수 있다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target : ts 파일을 어떤 버전의 js 로 바꿔줄지 정하는 부분 module : js 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 부분 (예를 들어 commonjs 는 require 를 쓰고, es2015 는 import 를 쓴다) 그 밖에 추가로 넣을 수 있는 것들이 몇가지 있는데 다음과 같다. { "compilerOptions": { "target": "es5", "modul..
실시간 소통을 하고 싶으면 서버와 유저간 Web Socket 을 뚫으면 된다. socket.io 라이브러리를 설치해서 한번 사용해보자. 사용 방법 npm install socket.io npm 을 이용해서 설치를 완료한 후에 server.js 에 3줄의 코드를 추가한다. (const app = express() 보다 아래에 위치해야한다.) 그리고 app.listen 코드를 http.listen 으로 바꿔준다. 이전에는 express 를 이용해서 서버를 띄웠던 걸 http 라는 node.js 라이브러리 + socket.io 를 이용해서 띄우는 것이다. socket.ejs 라는 파일을 하나 새로 만든다. https://cdnjs.com/libraries/socket.io socket.io - Librarie..
채팅기능을 만들어보자 채팅메세지도 결국 게시물 발행기능과 똑같다. 새로운 점이 있다면 채팅메세지는 채팅방 게시물에 종속이 되어야한다. 댓글 만드는 법 댓글은 댓글 collection 을 하나 새로 만들어서 모든 댓글을 저장하면 된다. 하지만 그러면 그 댓글들 하나하나가 어떤 글에 달린 댓글인지 확인할 수 없게될 것이다. 때문에 모든 댓글은 부모 게시물이 무엇인지 를 명시해야한다. 따라서 게시물 collection 과 댓글 collection 을 만들고 댓글 1의 부모게시물은 게시물 2고, 댓글 2의 부모 게시물은 게시물 4이다... 이런식으로 collection 끼리 관계를 맺어야한다. 채팅방 만드는 POST api 만들기 채팅 버튼을 누르면 chatroom 이라는 collection 에 document..
원티드 프리온보딩 챌린지 7월 과제로 CSR과 SSR의 이해란 주제로 포스팅을 하게되었다! 1. CSR이란? 이것의 장단점은 무엇인가요?CSR이란 Client-side Rendering 의 줄임말이다.말 그대로 '클라이언트 쪽에서 렌더링을 한다' 라는 말인데,여기서 클라이언트는 브라우저이기 때문에 브라우저가 렌더링을 처리하는 방식이다. 서버에서 HTML을 받아와서 JS주소를 서버로 요청해 동적으로 사용자에게 최종적인 어플리케이션을 보여준다.위 그림은 CSR 의 순서이다.유저는 웹사이트에 요청을 보낸다.Edge Caching 은 HTML 파일과 JS에 접근할 수 있는 링크를 빠르게 보낸다브라우저는 HTML, JS를 다운로드 받는다.브라우저는 JS를 다운로드 받는다.모두 다운로드가 되면 JS가 실행되고, 데..
카페에서 이것저것 할일을 하다가 갑자기 받게된 전화 한통 'ai 교육원입니다. SW중심대학 공동해커톤 참가자로 선정되셔서 연락드렸어요.' 얼떨떨하고 기쁜 순간이었다! 사실 해커톤에 참여하기 전에 내적으로 힘이 많이 부족한 상태였다. 졸업을 반년 앞두고 할 건 너무 많아보이고, 마음은 급하고. 무언가 힘을 내서 할 에너지가 스스로 많이 떨어졌다고 느꼈다. 그래서 더더욱 걱정이 됐다. 이 해커톤은 내가 처음 나가보는 해커톤이고, 무려 무박 3일인데 잘 버티고 민폐를 안 끼칠 수 있을 지 말이다. 하지만 어쩌면 내가 이 대회에서 조금이라도 긍정적인 결과를 받는다면 내가 다시 힘을 낼 수 있는 원동력이 될 수도 있겠단 생각을 했다. 그러다 해커톤 당일이 가까워지고, 결국 잠을 별로 못 잔 상태로 캐리어를 끌고 ..
안녕하세요! DEVOCEAN YOUNG 2기 서다원입니다. 저는 이번 학기가 4학년 1학기였는데요. 저희 학교에서는 졸업 조건으로 4-1에 캡스톤 졸업 프로젝트를 수행해야해요. (1,2 학년 때에는 멀게만 느껴지던 졸업 프로젝트를 직접하게 되었다니, 그리고 벌써 마무리하고 후기를 쓰고 있다니 시간이 정말 빠른 것 같아요.) 이 과목은 기업과제랑 팀을 매칭해주고, 한 학기동안 과제를 수행하는 방식이었는데요. 저희는 한 기업의 AI CS 담당 챗봇 서비스를 구현하는 것이 과제였어요. 저는 팀에서 FE 개발자를 맡았고, FE 파트를 맡은 사람은 저 혼자였기에 이 부분이 정말 부담스러웠던 것 같아요. 한 파트에 사람이 두명 이상이면 같이 문제를 해결해나갈 수 있는데 만약에 제가 문제를 해결하지 못하면 팀원 모두..
안녕하세요! 데보션 영 2기 '데보션시스터즈'팀의 서다원입니다. 이번 포스팅에서는 6월 테크세미나 [웹 프론트엔드 성능 최적화 방법 및 적용 사례] 후기를 공유해보려합니다. 저는 프론트엔드 개발자를 진로로 희망하고 있는데요. 그만큼 이번 테크 세미나에 관심이 가득했어요! 확실히 채용 공고를 보면 우대 사항에 ‘성능 최적화’ 개념이 나오곤 했거든요. 저 또한 사이트의 성능이 좋아야 좋은 사용자 경험을 제공할 수 있다- 라는 것은 머리로 알고 있지만 정확히 어떻게 하는지, 어떤 사례가 있는지는 잘 모르고 있었던 것 같아요. 한국의 사용자들은 로딩 타임이 2초동안 뜨지 않으면 사이트를 나가버린다고 합니다. 정말 충격이었어요. 아무리 사이트 백엔드 상의 로직을 잘 짜놓았다고 하더라도, 프론트엔드의 성능을 최적화..
개발을 하다보면 매번 주소를 바꿔야해서 귀찮은 경우가 많다. 그래서 환경변수를 만들어보기로 했다. 사용법 오른쪽 위에 눈모양 버튼을 클릭한다. variable 에는 환경변수의 이름, Initial value 와 Current value 에는 환경변수의 값을 써주면된다. 나는 dev 라는 이름의 변수를 만들어 local 에서 개발하기 편하도록 만들고 bookmark 라는 변수에는 실제 서비스 url 을 넣어줬다. 실제로 사용할 때에는 {{변수명}} 처럼 작성하여 사용할 수 있다. ref: https://velog.io/@kkl4846/postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8-%EA%BF%80%ED%8C%81team-workspace-%ED%99%98%EA%B2%BD%..
https://stack94.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4Kakao-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 위의 글을 참고하면서 따라해보았다. https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao..
통계 페이지를 개발하려하는데 차트를 그릴일이 필요했다. 내가 사용한 건 react-chartjs-2 ! 구글링을 해보다가 유명하다고 해서 한번 써봤다. 사용방법을 정리해봐야겠다 사용방법 npm install --save chart.js react-chartjs-2 https://react-chartjs-2.js.org/examples Examples | react-chartjs-2 List of react-chartjs-2 usage examples. react-chartjs-2.js.org 난 이 페이지에서 내게 필요한 차트 모양을 찾아서 들어갔다. 예를들어 나는 Line Chart 를 찾아 들어가서 예시 코드를 살펴봤다. App.tsx에 있는 코드들을 가져와준다. tsx 코드라서 js 파일에서 쓰기엔..
상태관리 라이브러리 없이 프로젝트를 하다가 아, 이건 안되겠다. 전역으로 상태관리해야겠다! 싶은 부분이 있었다. 근데 오늘 아침 다른 개발자분 티스토리 피드를 보다가 Recoil 을 추천하시는 글을 읽고 이 참에 Recoil을 써보자 생각했다. 설치 먼저 설치한다 npm install recoil Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 컴포넌트를 사용해야한다. index.js 의 파일을 다음과 같이 수정해준다. index.js // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM..
채팅을 하다보면 내가 직접 스크롤을 내리지 않아도 새로 추가된 메세지에 대해서 아래로 자동 스크롤이 된다. 이 기능을 구현해보려고 한다. 방법 useRef, useEffect 훅을 사용하여 구현했다. const scrollRef = useRef(); useRef 훅을 사용하여 스크롤할 요소에 대한 scrollRef 라는 것을 만든다. 이 scrollRef는 스크롤할 컨포넌트를 가리키는데 사용된다. useEffect(() => { scrollToBottom(); }, [isTyping]); const scrollToBottom = () => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } };..
README에 이미지/gif(움짤)을 올려보자 만약 영상 -> gif 변환을 원하는 사람은 아래 사이트에서 gif 변환을 하고 오면된다. https://cloudconvert.com/mov-to-gif MOV to GIF | CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert MOV Converter MOV MOV is a video format that is commonly associated with QuickTime. This video extension is developed by Apple. It uses an algorithm to compress video and audio. Although cl..
문제 채팅 리스트들을 보여주고, 채팅을 삭제할 수 있는 기능을 구현 중이었다. 채팅 리스트를 클릭하면 채팅을 확인하러 상세페이지로 이동하고, 삭제 버튼을 누르면 채팅 기록이 삭제가 되어야한다. {chats.map((chat) => ( handleChatItemClick(chat.chatId)} className="border-2 border-t-gray-300 p-5 flex justify-between text-sm" > {/* 채팅 생성 시간 */} {formatDate(chat.created_date)} handleDeleteOneChat(chat.chatId)} className="px-4 py-2 overflow-hidden" > 삭제 ))} 근데 삭제 버튼을 눌렀을 때 삭제가 되긴하지만 동시에..
React에서 fetch는 JavaScript의 내장 API인 fetch() 함수를 사용하여 서버와 데이터 통신을 수행하는 방법이다. fetch 함수는 ES6부터 기본적으로 제공되는 함수이며, React 애플리케이션에서 AJAX 요청을 보낼 때 많이 사용된다. AJAX 란? AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있습니다. 기존에는 웹 페이지에서 사용자의 요청에 따라 새로운 페이지를 서버로부터 전체적으로 다시 받아오는 방식인 전통적인 동기적인 요청 방식이 일반적이었습니다. 하지만 ..
이렇게 마우스를 올려다 댔을 때 이게 어떤 버튼인지 미리 알 수 있는 문구가 나오게 하려면 tooltip 이라는 기능을 구현하면 된다. React에서 tooltip 을 구현하려면 여러 라이브러리를 활용해서 구현할 수 있는데 나는 그중에서도 react-tooltip 이라는 라이브러리를 사용해보려고 한다. https://react-tooltip.com/docs/getting-started Getting Started | React Tooltip This docs is related to V5, if you are using V4 please check here. react-tooltip.com 자세한 설명은 위에 나와있다. 본인도 공식문서를 보고 적용했기 때문에 빠르고 적용법만 보고싶은 분은 아래를 참고하시..
캡스톤 프로젝트 중에 특정 구역 내에서 스크롤을 기능할 일이 생겨서 작성해보는 포스팅! 채팅창을 만드는데 채팅창에 있는 채팅 메세지 내용들만 스크롤이 가능하도록 할 것이다. 방법 tailwindcss 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } overflow-y-scroll 을 이용해서 스크롤이 필요한 컨텐츠를 감싸준다. 기본 css 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } 마찬가지로 overflow-y : 'scroll' 속성을 추가해준다. 스크롤이 넘치지 않도록 하고..
useDebugValue 란 React Hooks 중 하나로 개발자 도구 Dev Tools 에서 컴포넌트의 상태를 디버깅할 때 사용하는 함수이다. 사용법 useDebugValue 는 두개의 인자를 받음 첫번째 인자는 디버깅에 사용할 값(value) 두번째 인자는 옵션 객체이다. 예시 import { useDebugValue, useState } from 'react'; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); useDebugValue(count, count => `Count: ${count}`); function handleIncrement() { setCount(count + 1); } fu..
useRef 란 useRef는 React에서 제공하는 Hook 함수 중 하나로, 일반적으로 DOM 요소를 선택하거나 컴포넌트에서 변경 가능한 값을 저장하는 데 사용된다. 예시 예를 들어, useRef를 사용하여 DOM 요소를 선택하는 경우 다음과 같이 코드를 작성할 수 있다. import React, { useRef, useEffect } from 'react'; function Example() { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return ; } 위의 코드에서 useRef를 사용하여 input 요소를 선택하고, useEffect를 사용하여 컴포넌트가 마운트될 때 input 요소에 자동..
useCallback 이란 React의 useCallback 훅은 성능 최적화를 위해 사용되는 훅 중 하나이다. 이 훅은 함수를 캐시(cache)하여 불필요한 함수 재생성을 방지하고, 성능을 최적화하는 데에 도움을 준다. 사용법 useCallback은 두 개의 인자를 받는다. 첫 번째 인자는 캐시할 함수이며, 두 번째 인자는 의존성 배열(dependency array)이다. 의존성 배열에는 캐시할 함수에서 참조하는 값들이 포함되며, 이 값들이 변경될 때마다 함수를 다시 생성한다. 예시 예를 들어, 다음과 같은 코드가 있다고 가정하자. import { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0)..
React에서 페이지 이동을 구현할 때, Link 와 useNavigate 이라는 개념을 사용한다. 하지만 둘의 분명한 차이점이 있는데, 사용하다보니 궁금해져서 정리해보고자한다. Link Link는 클릭할 때 바로 이동하는 로직을 구현할 때 사용된다. 원래 페이지가 새로고침되면 현재 렌더링되어있는 컴포넌트가 다 사라지고 새로 컴포넌트가 렌더링 되는데, 이때 state 들이 모두 날아간다. 하지만 Link 를 사용한 경우에는 렌더링된 컴포넌트의 state 가 유지되어서 SPA로 동작할 수 있다. 실제 해당 링크로 이동하는 것이 아니라, 에 지정된 컴포넌트를 렌더링한다. * v6 부터는 Link 로 props 를 전달하지 못한다. (이것때문에 한참 붙잡고 있었다...) 예시 예를 들어서 상품 리스트를 클릭했..
React 를 공부하다가 '비구조화 할당' 이라는 개념에 대해서 확실히 정리하고 넘어가고 싶어져서 쓰는 포스팅! 비구조화 할당이란 비구조화 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 의 표현식이다. 쓰는 이유 이는 배열이나 객체의 속성을 쉽게 꺼내서 변수에 할당할 수 있으므로 더 간결하고 가독성이 높은 코드를 작성할 수 있다 예시 예를 들어 다음과 같은 객체가 있을 때, const person = { name: 'John', age: 30, gender: 'male' }; 이 객체의 속성을 꺼내서 개별 변수에 할당하려면 다음과 같이 할 수 있다. const name = person.name; const..
