FE 프로젝트 일대기9 HTTPS연결 시 404error발생 안녕하세요. 그님스의 프런트 김승주입니다. AWS에 인증서를 받은 후 HTTPS로 연결도 잘 되고 이것저것 테스트를 하다가 네트워크에 404에러가 발생되었습니다. 분명 페이지는 잘 동작이 되는데 404라니?? 알고보니 React의 SPA(Single Page Application)로 인하여 AWS측에서 요구하는 login파일이 없어서 발생했습니다. SPA는 현재의 HTML파일인 index.html을 바탕으로 하나의 페이지에서 동적으로 다시 작성합니다. 즉, HTML, JS 등 필요한 코드를 하나의 페이지에 불러오거나, 동적으로 불러들여서 업데이트를 하는 방식입니다. ReactSPA를 이용하면 HTML파일은 index.html하나 뿐입니다. 하지만 AWS S3, CloudFront에서는 별도의 HTML을 .. 2023. 3. 14. 스케줄을 가져올 시 두 번 요청 안녕하세요. 프론트 쪽의 김승주입니다. 저는 Main페이지를 담당하여 작업을 하였습니다. useEffect를 이용하여 처음 랜더링이 될 시 스케줄을 가져와 화면에 띄워주게 했습니다. 하지만 이때 불필요한 데이터 요청을 한다는 사실을 알게 되었습니다. 문제의 코드입니다. const Main = () => { (...) useEffect(() => { const userId = window.localStorage.getItem("userId"); const getnickName = window.localStorage.getItem("nickname"); const getprofilImg = window.localStorage.getItem("profileImage"); const getEmail = wind.. 2023. 3. 14. [FE] github actions 배포용 환경변수파일 생성하기 env 깃헙액션 시크릿활용하기 기존 env는 gitignore에 등록되어있어 깃헙에 올라가지 않도록 설정되어있지요. 그렇다면 배포용 main 레포지토리는 어떻게 환경변수를 관리할까요? 저희 팀은 깃헙의 액션스 시크릿을 활용했습니다! .env파일을 삭제하고 깃헙 액션스 시크릿에 등록하면 코드상 바뀌어야 할 부분은 없는데요, 다음 코드는 process.env를 이용한 예시입니다. export const instance = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, }); axios instance를 적극적으로 이용하고있는 저희 팀은 이렇게 baseURL을 생성했습니다. axios 통신시에 baseurl 뒤에 추가적인 주소를 붙일 땐 templete literal을 이용하여 `${p.. 2023. 3. 14. [FE] UT 피드백1-흐릿한 아이콘 문제 FIGMA 피그마 아이콘 svg export 로해결! 저희 팀은 월요일부터 유저테스트를 시작했습니다. 팀장님께서 우리팀이 가장 먼저 배포해서 많은 피드백을 받고 고쳤으면한다고하셔서 기한을 맞추기 위해 다들 최선을 다해서 다같이 노력한 결과 결국 가장 먼저 배포를 해냈어요! 생각보다 많은 분들께서 피드백을 주셨고, 현재 총 74개의 구글폼 응답을 받았습니다! 미리 내부테스트를 많이 해보았고 내부 QA를 받아 지난 주에 빡세게 고쳐보았지만 예상했던 것과 같이 CSS 피드백이 많았어요 🥺 이건 디자이너님께서 따로 작성해주신 디자인 수정할 사항들.. 이중에 몇가지는 담주 월요일까지 해볼 예정이에요. 전 개인적으로 너무나 심각하다고 생각했던,, 네비게이션바 아이콘문제는 가장 먼저 해결하고싶었어요....!!! 흐릿흐릿.. 저..저저 픽셀 깨지는거 좀 보소 분명 PNG.. 2023. 3. 10. [FE] react-datepicker시차문제 trouble shooting (datepicker한국시간표현) Gnims는 일정관리 웹앱인 만큼 초기 기획단계에서 많은 의견이 오고갔던 주제.. 달력을 넣을 것이냐... 현업에 계셨던 디자이너님께서 달력은 정말 공수가 많이 드는 작업이기에 디자이너님과 프론트엔드에서 고통스러울 것이라는 조언을 주셔서 오랜 논의 끝에 datepicker라이브러리를 이용하기로 했습니다! yarn add react-datepicker 로 라이브러리를 설치한 다음, https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com Datepicker 공식사이트에서 여러가지 설정을 할 수 있습니다. 그러나 공식사이트에서도 찾을 수 없었던 몇가지 추가 설정이 있어요..! 우선 제 코드를 먼저 슥 보시겠어요.. 2023. 3. 4. [FE] 저희팀에게 귀여운 로고가 생겼어요 [로고 자랑글, 진행상황 보여드립니다! 그리고 저희 노션 대공개!] feat. 리액트 네비게이션바 조건문으로 레이아웃설정하기 디자이너님께서 작업해주신 귀여운 저희 로고입니다! 예쁘죠? 로고가 있는거랑 없는게 차이가 꽤 크죠! 확실히 귀여워졌군요.. 저희팀의 노션에도 이렇게 로고를 적극활용하고있습니다 ㅎㅎ 혹시 저희의 노션이 궁금하신 분이 계시다면!!! 👉🏻 https://mountainous-promise-a24.notion.site/99-_Gnims-_-67a550352fb543b2b880f2998a5d2af2 메인페이지입니다!! 닉네임과 프로필이미지가 뜨고, 이미지에선 보이지 않지만 아래에도 예쁜 네비게이션바가 있습니다 ㅎㅎ 메인페이지에서 일정카드를 누르면 이렇게 상세보기를 할 수 있습니다. 현재는 제가 신정님께 같이 가자는 초대요청을 보내두었고, 아직 수락을 안해주셨군요!! 그렇다면 제가 한번 H2console을 이용해 .. 2023. 2. 24. [FE]Gnims팀이 tailwind Css를 쓰는 또 하나의 이유! [tailwind css custom] 안녕하세요! 지난번 게시글에서 tailwind css를 도입하게된 이유로, tailwind의 가장 큰 장점인 작업속도가 빨라진다는 점을 소개드렸었는데요! 2주간 경험하며 느낀 점은 코드의 class명이 길어지어져 깔끔해보이진 않지만, 확실히 속도가 나고있습니다! 또 다른 이유로는 CSS를 커스텀하여 패키지화할 수 있다는 점이 있습니다. tip! 테일윈드는 공식문서가 굉장히 잘 정리되어있습니다! 그래서 모든 내용을 외울 필요 없이 공식 문서에서 (command+K) 로 검색해서 바로바로 찾아 쓸 수 있어요 😃 또, 참고하기에 쉽게 깔끔하게 정리되어있어 바로바로 찾기도 쉽습니다. tailwind css custom tailwind.config.js 의 extend 내에 많이 이용할 것 같은 css 코드를 옮.. 2023. 2. 18. Recoil을 선택한 계기 매주 프로젝트를 하면서 redux만 썼었는데, 이번 프로젝트에서 다른 라이브러리를 사용하고 싶었습니다. 다양한 라이브러리 중에 recoil을 쓰게 된 이유는 그전에 써왔던 redux랑 비슷한 면이 있어서 빠르게 익힐 수 있으며, redux보다 가볍고 최근에 많이 쓰는 추세라 적용했습니다. Recoil이란? recoil은 상태관리 라이브러리이며, 페이스북에서 고안한 Flux패턴 기반으로 설계 되면서 안정적인 전역상태 관리를 해줍니다. Recoil의 장 / 단점 - 장점 1. 다루기 쉽습니다. * redux의 복잡한 코드를 간결하게 표현합니다. * 간단한 개념들 * 코드가 직관적이다. * 낮은 진입장벽 2. 데이터 흐름 그래프 * react의 내장된 selector을 활용하면 추가적인 미들웨이 없이 쉽게 비.. 2023. 2. 8. [FE]Tailwind CSS -React세팅 짧고 간결하게 정리하기! Gnims의 Tailwind Css 도입기! Styled component만 써오던 저희 입장에서, styled component가 그리 편하지만은 않다는 의견이있었습니다. 그리고 동환님께서 요즘은 tailwindcss가 그렇게 핫하다는 정보를 가져오셨습니다! 단위가 꽤 큰 프로젝트이면서 디자이너님과의 첫 협업이기때문에! 기획단계에 tailwindcss를 익혀서 css작업속도를 내면 좋을 것 같다는 의견일치로 tailwindcss를 이용하기로 했습니다! (Tailwindcss장점 중 하나가 css작업의 속도가 빨라진다는 것 😊) 설치 순서 1. install Tailwins css 우리 팀은 yarn 을 사용하기로 통일하였기 때문에 $yarn add tailwindcss 명령어 이용. 2. 추가 설치(필.. 2023. 2. 6. 이전 1 다음
