전체 글 (48) 썸네일형 리스트형 [TIL] react-datepicker 날짜 선택 시 현재 캘린더로 돌아오는 오류 react datepicker를 사용하면서 여러가지 자잘한 오류땜에 시간을 엄청 잡아 먹었다.1. 달력이 있는 모달을 열었을 때 설정했던 날짜로 달력이 뜨지 않고 현재 날짜가 표시된 달력이 보이는 경우2. selected한 날짜만 표시하고 싶은데, 현재 날짜에도 하이라이트가 함께 되어있는 경우3. 모달을 열고 처음 날짜를 선택한 경우 현재 날짜의 달력으로 이동하는 경우 위 세가지 모두 react-datePicker props를 통해서 해결했다const commonDatePickerProps = { locale: ko, onChange: handleCheckedDate, selected: selectedDate, inline: true, disabled: isRecentCheck.. [TIL] 반응형 테이블에서 text-ellipsis 사용하기 반응형 테이블은 cell의 너비가 고정값이 아니기 때문에 width:100%로 하고 text-ellipsis 을 넣어주었지만 overflow-hidden의 기준이 잡히지 않아서인지 적용이 되지 않았다. 그래서 구글링을 하다가 아주 오래된 2019년도의 글에서 해답을 찾았다! cell: ({ row }: any) => { return ( handleOpenDetailModal(row.original.faq)}> {row.original.faq} ); }, 해당 셀에 들어가는 요소를 display: block으로 지정해주고나머지 말줄임에 필요한 속성 width: 95% (양 사이드에 약간의 여백을 주고 싶었다) ,ove.. [Web] SSR, CSR, SSG, ISR 이해하기 Next를 공부하면서 정말 자주 나오는 개념, 근데 맨날 헷갈려서 한번 깔끔하게 짚고 넘어가보려고 한다! SSR, CSR, SSG, ISR은 웹사이트 렌더링 방식들로 각각 웹 페이지가 어떻게 생성되고 브라우저에 표시되는지에 대한 접근 방식을 설명한다. SSR (Server-Side Rendering) SSR은 말 그대로 서버 사이드 렌더링, 서버에서 초기 렌더링이 이루어진다는 뜻이다. 1. 서버에서 HTML을 pre-rendering한다. 2. 브라우저에서 pre-rendering 된 HTML이 사용자에게 보여지고, JS를 다운로드한다. (정적인 UI는 사용자에게 보여지지만 JS파일이 모두 다운로드 되기전까지는 JS가 작동하지 않는다.) 3. JS가 모두 다운로드가 되면 정상적으로 페이지 이용이 가능하다.. [프로젝트 회고] - 테오의 스프린트 16기 : 막차타 테오의 스프린트 진행 일자 : 23.10.18~23.10.23 테오의 스프린트를 알게 된건 항해커톤에서 같은 팀원이었던 연석님이 강력 추천을 해주셔서 알게 되었다. 테오의 스프린트는 구글 스프린트 방법론을 경험해볼수 있는 프로젝트이다. 구글 스프린트는 5일 만에 "아이디어 -> 스케치 -> 솔루션 -> 프로토타입핑 -> 고객테스트" 까지 완료하는 과제 해결법이다. 항해커톤에서도 이 방법이 꽤 잘 통했다고 생각해서 나도 제대로 경험해보고 싶었고, 매 달 열리는 것도 아닌데 마침 16기를 모집한다고 해서 신청해보았다. 첫째날 첫째날은 우선 아이디어를 서로 45초 동안 발표하고 팀을 구성하는 과정이 진행되었다. 투표를 진행하고 거기서 7개 정도의 아이디어를 추리고 그 안에서 다시 하고싶은 아이디어를 가진 팀에.. [후기] 스파르타 항해커톤 후기(feat. 대상🥇) - 2탄 저번 포스팅에서는 디자인까지의 과정을 회고해보았다. 2탄에서는 개발과정과 발표까지의 과정을 작성해보려고 한다! 개발 시작~! 우선 호랑에듀에서 제시했던 타입스크립트와 리액트 버전을 맞추고, 상원님이 Next.js로 프로젝트를 진행하자고 제안하셔서 아직 공부하는 삐약이 상태이지만 해보기로 했다. 그리고 상태관리는 Recoil, 서버와의 통신은 Axios를 사용, 스타일은 SCSS로 사용하기로 하였다. 또 LMS이기 때문에 그래프도 굉장이 많이 들어가다보니 라이브러리를 사용하기로 했는데, 항해99 프로젝트때 사용했던 nivo Chart라이브러리가 커스터마이징하기도 편리하고 기본 디자인도 딱히 수정이 필요없을 만큼 깔끔해서 nivo로 선택했다. 🚨 문제 발생 그런데 이 Nivo Chart가 Next.js와는 .. [후기] 스파르타 항해커톤 후기 (feat.인생 첫 해커톤) - 1탄 스파르타에서 시키는 건 다 해보자라는 마인드로 슬랙에 올라오는 건 다 해보고 있던 찰나에 해커톤을 진행한다는 공지가 올라왔다. 해커톤이 뭔지도 몰랐던 나...! 하지만 재밌을거 같아서 도전해보았다. 항해커톤 진행 일자 : 2023.09.18~ 2023.09.22 팀 빌딩 팀 구성은 우선 개인적으로 지원을 하고 그 뒤에 알아서 팀을 모으는 방식이었다. 항해14기 동기들끼리 모여서 해도 되겠지만 뭔가 쌩판 모르는 남들과 해보고 싶다는 생각이 들었다. 코딩을 하면서 새로운 사람들을 만나고 똑똑한 사람들을 만나는게 즐거워졌달까 ㅎㅎ(파워I지만 용감해짐) 하지만 아직 리더를 하긴 겁이나서 팀장으로 지원하신 분들 깃헙을 보고 재밌는 프로젝트도 하시구 팀장도 여러번 하신 분에게 용기를 내서 카톡을 보내보았다. 내가 .. [1주차] 기술 스터디 ◾️ 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태관리는 사용자의 입력이나 외부 API를 통해 나오는 데이터, 애플리케이션 내부에서 생성되는 데이터를 구조화하고 관리하는 것을 말합니다. 이러한 상태관리가 필요한 이유는 여럼 컴포넌트나 모듈 간에 상태를 공유하고 애플리케이션 내의 데이터와 UI의 상태를 일관성 있게 유지, 변경되는 상태를 추적하고 관리하기 위해 사용됩니다. Redux, Recoil, Zustand 등 다양한 상태관리도구가 있습니다. 그 중 저는 Recoil을 주로 사용합니다. 이유는 보일러플레이트가 적고 코드가 굉장히 짧고 간결하기때문입니다. ◾️ Redux가 무엇인가요, 왜 Redux를 사용하시나요? Redux란 상태관리 라이브러리 중 하나로 주로 React.. [Next.js] next/image로 이미지 최적화하기 Next.js환경에서 제공하는 next/image의 장점에 대해서 알아보자 리액트로 이미지를 렌더링할 경우 loading="lazy" 설정을 추가하여 특정 treshold를 넘어갈 경우 이미지가 로딩되도록 설정할 수 있다. 📌 next/image를 이용하여 이미지 연결하기 ◼️ 이미지 소스를 static하게 import한 경우 import Image from "next/imgae"; import example from "/public/example.jpg" // 이미지 소스 파일을 static하게 import한 경우 ◾️ 이미지 소스를 외부 링크로 연결한 경우 // 이미지 소스 파일을 외부 링크로 연결할 경우 // error !! 하지만 이미지를 외부 링크로 연결한 경우 이미지의 사이즈를 명확히 알지 못.. 이전 1 2 3 4 ··· 6 다음
