본문 바로가기

분류 전체보기129

React / 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 데이터가 들어오기 전에는 값을 출력하지 않고 다시 데이터를 요청하도록 구현하려는 기능 네비게이션에 서버에서 받아온 userdata를 활용해서 포인트와 상품 수량 출력 내가 생각한 로직 1. 서버에서 받아오는 유저 데이터는 계속해서 값이 변하기때문에 useState를 사용해서 관리한다. 2. fetch를 사용하여 서버에서 데이터를 받아온다. 3. 받아온 데이터를 state에 저장하고 각각의 데이터를 쓰임에 맞게 가공해서 변수로 선언한다. 처음 작성했던 코드 (오류 발생) useEffect(() => { fetch("http://10.58.52.169:9001/users", { method: "GET", header.. 2023. 5. 17.
React / 토큰 유무에 따른 조건부 랜더링 / token undefined가 true로 인식되는 오류 해결 토큰 유무에 따른 조건부 랜더링 token undefined가 true로 인식되는 오류 해결 구현하려는 기능 토큰 유무에 따라 조건부 랜더링으로 다른 결과값 출력 내가 생각한 로직 1. 로그인 버튼을 누르면 fetch가 실행되면서 서버로 요청을 보낸다. 2. 서버로부터 받은 토큰을 localStorage에 저장한다. 3. localStorage에 저장한 토큰을 변수로 저장한다. 4. 변수로 저장된 토큰의 값으로 토큰 유무를 판별하여 조건부 랜더링을 한다. 처음 작성했던 코드 (오류 발생) const token = localStorage.getItem("TOKEN"); const loginOn = () => { fetch("http://10.58.52.169:9001/users/logIn", { metho.. 2023. 5. 17.
wecode / 1st 팀프로젝트 회고록 (feat. rgb. team) 첫번째 팀프로젝트를 마치며 About Team [팀구성] 팀명 : rgb. Product Manager: 윤해찬(B) Project Manager: 이수빈(F) Teammates: 탁호진(B), 이원준(F), 문유현(F), 김수정(F), 이경진(F) [프로젝트 기간] 2023.05.01 ~ 2023.05.12 (총 2주) [적용 기술 및 협업 툴] ⚙️ FrontEnd JavaScript, React, HTML, CSS ⚙️ Collaboration Tool Github, Trello, Figma, Notion, Slack, Postman [프로젝트 진행 방식] 매일 오전 stand-up meeting에서 trello 툴로 작업 진행상황 및 해결 방안 공유 매주 월요일 sprint 회의를 통해 프로젝트 .. 2023. 5. 15.
wecode/ 5주차 회고록 / 1차 프로젝트를 끝내고... 위코드에서의 첫번째 팀프로젝트가 금요일 끝이났다. 금요일 최종 발표를 앞두고 팀원들 모두가 모여 마지막으로 점검을 해보는데 정상적으로 작동하는 사이트를 보니 우리가 만들어냈다는 사실이 현실로 와닿았다. 목요일 밤까지 자잘하게 터지는 오류들을 수정하고 또 수정하며 제발 무사히 끝낼 수 있기를 기도했는데 기도가 통한건지 팀원들과 매일 밤낮으로 고생하며 애쓴 노력이 빛을 발한건지 금요일 아침 무사히 기능 시연을 성공했다. 우리팀 모두가 한마음으로 달려왔기때문에 이루어낸 결과였다. 처음 구상 단계에서는 이걸 우리가 다 할 수 있을까 걱정도 했었는데 그 걱정이 무색하게 너무나도 우리의 계획대로 잘 나온 결과물을 보니 감격스러웠다. 정말 우리가 하기로 다짐했던 내용들은 하나도 빠짐없이 전부 구현해 냈다. 혼자였다면.. 2023. 5. 14.
wecode / 4주차 회고록( 1st 팀프로젝트 1주차) 벌써 위코드에서의 시간이 한달이 지났다. 3주간의 파운데이션 기간을 거쳐 두번의 팀프로젝트, 그후 기업협업으로 이어지는 약 3개월간의 과정 중, 1/3 지점에 도착했다. 이번주부터 시작된 첫번째 팀 프로젝트. 지난 금요일 팀 배정을 시작으로, 월요일에 첫 회의를 거쳐 어느덧 프로젝트의 중반부를 지나고 있다. 일요일이 약 두시간 남은 지금도 우리 팀원들과 함께 위워크 10층을 지키는 중이다. 다음주 금요일이 최종 피티날이라 다들 최선을 다해 기능 개발에 힘쓰는 중!ᕦ(ò_óˇ)ᕤ 월요일 첫회의에서 우리의 프로덕트 매니저님이 멋진 피티로 기획회의를 주도해준 덕분에 의욕적인 분위기 속에서 프로젝트를 시작할 수 있었다. 우리 팀은 신진 작가들의 작품을 특별전처럼 판매하는 온라인 아뜰리에 서비스이다. 기존의 온라.. 2023. 5. 7.
wecode 3주차 회고록 4월 29일 토요일. 위워크 10층. 오늘도 어김없이 위코드로 출근! 벌써 성실하고 부지런한 동기들이 먼저 와있다. 이번주는 그래도 지난 2주에 비해 시간이 어떻게 가는지는 느껴졌다. 역시나 엄청 빠르게 지나갔다. 이번주를 시작하면 했던 다짐들이 몇가지 있다. 1. 블로그 매일 2개 작성하기 2. 매일 예습과 복습 실천하기 3. 다른 동기들의 코드 관심있게 살펴보기 4. 코드 카타때 풀었던 알고리즘 문제 정리해서 블로그에 포스팅하기 우선 1번. 블로그 매일 2개 작성하기 하루에 3개 올리는 날도 있고 하나도 못 올린 날도 있다. 그래도 오늘까지 올린 포스팅이 총 9개니까 반이상 성공했다. 사실 포스팅 갯수에만 초점을 맞추면 충분히 하루에 2개씩 올릴 수 있지만 성격상 대충 적어서 대충 올리는게 안된다. .. 2023. 4. 29.
React/ part.3 Mock Data Mock Data 이번 글에서는 이전 글인 상수데이터에 이어 Mock Data에 대한 개념과 활용방법에 대해 다룹니다. 또한 fetch 메서드를 사용해 로컬 서버에서 Mock data를 받아와 활용하는 방법에 대한 내용이 있습니다. 1. Mock Data란? 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다. UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 때, 데이터가 들어오는 상황에 대비해 의도한 대로 UI가 구현되는지 확인하기 위해 사용한다. ⇒ Mock data를 fetch를 사용해 실제로 서버에서 받아오는 것처럼 사용한다. 2. Mock Data를 사용하는 이유 백엔드 API가 미완성인 경우 Mock Data를 사용하지 않.. 2023. 4. 29.
React /part.3 상수 데이터 상수 데이터 이번 글에서는 상수 데이터에 대한 개념과 활용법에 대해 다룹니다. 리액트를 효과적으로 사용하기 위해서는 반복되는 UI를 하드코딩이 아닌 좀더 효율적인 방법으로 구현해야합니다. 그러기 위해서는 데이터 구조, map()사용에 익숙해지는게 중요합니다. 이를 통해 되도록 반복되는 작업들을 줄이고, 코드의 간결성을 유지하면 추후 유지보수를 할 때에도 훨씬 편리합니다. 1. 상수 데이터란? 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 말한다. UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API들을 통해 가져올 필요가 없는 데이터들을 상수 데이터로 만든다. 2. 상수 데이터를 사용하는 이유 UI를 하드코딩으로 만들어두면 코드가 길어져 가독성이 떨어진다. ⇒ 유지보수의 어려움 상수 데이.. 2023. 4. 29.
React/ part.3 useEffect useEffect 이전 글인 sideEffect에 이어 useEffect의 개념과 필요성 그리고 사용방법에 대해 다룹니다. sideEffect에 대해 모른다면 해당 링크를 통해 이전 글을 먼저 읽으시기를 추천합니다. 1. useEffect란? useEffect가 하는 일은 무엇일까? useEffect Hook을 이용하여 컴포넌트가 렌더링 이후에 어떤 일을 수행할 지 리액트에게 알려준다. React는 우리가 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 호출한다. (이 함수를 ‘effect’라고 한다.) useEffect를 컴포넌트 안에서 불러내는 이유 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 변수에 접근할 수 있다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값.. 2023. 4. 26.

티스토리툴바