전체 글

[ReactJS] 백에서 GET method를 통해 받아온 데이터를 구조 분해 할당할 때 값이 읽혀지지 않는 문제 - Uncaught TypeError: Cannot read properties of undefined (reading '0')

🚨 문제 상황 팀 프로젝트 중 백엔드 서버에 필요한 데이터를 요청하여 받은 후, 이 정보를 가공해서 화면에 렌더링해주는 작업이 여러 번 있었다. 이 때 자주 골치를 아프게 했던 에러가 하나 있어 포스트로 남긴다. const ReservationPage = () => { const [lectureData, setLectureData] = useState({}); // 백에서 상품 디테일 데이터 수신 useEffect(() => { fetch(`/data/reservationData.json`, { method: 'GET', }) .then(response => response.json()) .then(data => { setLectureData(data); }); }, []); if (lectureData..

위코드 1차 팀 프로젝트 'HealthEat' 회고

프로젝트 소개'피리마켓' '필리' 사이트를 모델링 한 프로젝트로, 약과 건강식품을 판매하는 커머스 사이트를 백지 상태에서 구현하였다.건강을 먹다는 의미로 사이트의 이름을 'HealthEat(헬스잇)'으로 지었다.기간 : 2022.11.14 ~ 2022.11.25➡️ 프로젝트 깃허브 레포지토리 바로가기➡️ 프로젝트 노션 페이지 바로가기 팀 소개프론트엔드 3명우석민 : Nav 바, 스토어 페이지 구현이상윤(나) : 메인 페이지, 상품 상세 페이지 구현이혜원 : 로그인 페이지, 회원가입 페이지 구현백엔드 2명이은영 : 찜하기 기능 구현조상원(PM) : 로그인, 제품조회 기능 구현  개발 도구 및 적용 기술 (+트렐로)프론트엔드JavaScript(ES6)React.jsSassReact-router-domFont..

[ReactJS] setState의 비동기 처리로 인한 버그 해결하기

🚨 문제 상황 setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에 나의 의도대로 코드가 동작하지 않는다. function handleBtnActivateById(event) { setIdValue(event.target.value); console.log(idValue); isIdVaild = idValue.indexOf('@') !== -1 ? true : false; handleBtnActivate(event); } 위의 사진처럼, 입력창에 입력된 값이 (콘솔창에서) 한 글자씩 덜 출력되는 것을 확인할 수 있다. 💡 문제 해결 및 과정 구글링의 통해 알아보니, setState의 Batch Update라는 비동기적 특성으로 인해 이런 문제가 생기는 것임을 알 수 있었다..

[ReactJS] React에서 이벤트 리스너를 연결하고, event 객체를 활용할 때 주의해야 할 점

🚨 문제 상황 React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하기 위해 위와 같은 코드를 작성하였다. 하지만 'event is deprecated'라는 이해할 수 없는 에러가 발생하였고 코드 역시 실행되지 않았다. 💡 문제 해결 및 과정 바닐라 JS에서 특정 요소에 이벤트를 연결해주려면 우선 해당 요소에 해당하는 DOM 객체를 DOM 트리에서 찾아야 한다. 그러고 난 후, 이 객체에 원하는 이벤트를 addEventListener 함수를 통해 연결해주면 된다. 혹은 인라인 방식으로 특정 요소에 해당하는 HTML 태그에 이벤트 속성을 바로 부여해주는 방법도 있다. React에서 특정 요소에 이벤트를 연결해주려면 바닐라 JS에서의 인라인 방식처럼 JSX로 변환된 코드의 태..

[ReactJS] React로 요소에 클래스 추가 및 제거하기 (부제 : React에서 직접 DOM을 조작하지 않도록 하자)

🚨 문제 상황 인스타그램을 클론 코딩하는 과정에서 바닐라 JS로 DOM 요소에 접근한 후 클래스를 추가하고 제거하는 데 classList의 add, remove 메소드를 활용하였다. 그러나 이 코드를 React로 변환하는 과정에서도 classList를 그대로 사용하였더니 정상적으로 동작하지 않는 문제가 발생했다. 그래서 console.log()를 통해 React에서도 classList 함수가 제대로 동작하는 지 한 번 실험해보았는데, 클래스가 제대로 제거되고 추가됨을 확인할 수 있었다. 하지만 제대로 동작하는 코드와 달리 화면에 보이는 결과는 그렇지 않았다. (대상이 되는 클래스가 opacity: 0.6 스타일 속성이 부여된 클래스라, 결과를 화면에서 바로 확인할 수 있는 상황이었다.) // SyLogi..

CSS 레이아웃 - Position과 Block 정리

CSS 레이아웃의의 중요한 개념인 Position과 Block에 대해 정리해보고자 한다. 참고로 말로 풀어서 글처럼 작성하지 않고, 항목별로 개념을 분류하여 정리하였다. CSS - Display 속성 : Block과 Inline CSS의 display 속성은 화면에 여러 요소들을 어떻게 배치할 지 결정한다. 웹페이지의 레이아웃(layout)을 결정한다고 해도 무방하다. div { display: block; } ✨ Block VS Inline Block block 태그 옆엔 다른 요소가 올 수 없다. block은 높이(height)와 너비(width)를 가진다. block은 Box이고, 여백과 관련된 3가지 중요한 특징을 가진다.(inline도 가지고 있는 특징이다. 상하 margin만 제외하고) : m..

Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유

HTML 요소는 Semantic 요소와 Non Semantic 요소로 구분할 수 있다. 여거서 Semantic 요소란 의미가 부여된 요소를 의미한다. 웹 개발자가 웹 사이트를 구축할 때 각 요소가 가지는 '의미'를 HTML 태그에 직접 부여하여 코드를 작성하는 것이 중요하다. 하나의 예시를 통해 그 이유를 간단히 짚어보자. 웹페이지에 이미지를 불러오는 2가지 방법으로 ' 태그를 사용하는 방법'과 ' 태그에 background-image 속성을 추가하는 방법'이 있다. (다른 방법도 있겠지만 여기선 이 두 가지만을 고려하기로 한다.) 여기서 태그는 그 이름에 '이미지'라는 의미가 담겨 있는 Semantic Tag이다. 이런 Semantic Tag를 이용하여 코드를 작성하면 태그 이름만으로 이 요소가 어떤 ..

개발자 도구란 무엇인가?

개발자 도구 (DevTool) 란? 개발자 도구란 개발자들이 홈페이지를 수정하고 발생한 문제의 원인을 쉽게 파악하기 위해 브라우저에서 제공하는 도구이다. 윈도우나 맥에서 F12를 클릭하면 열 수 있으며, 웹 개발자들은 보통 개발자 도구를 열어놓고 작업을 하는 경우가 굉장히 많기 때문에, 웹 개발자가 개발자 도구의 사용법을 잘 아는 것은 중요하다. 개발자 도구에는 여러 개의 패널이 존재한다. 이 각 패널의 기능을 잘 숙지하여 적절한 상황에 알맞은 패널을 활용하도록 하자. 이번엔 가장 많이 쓰는 패널 4개의 기능에 대해 정리를 해보고자 한다. Elements 패널 HTML과 CSS 코드를 분석하고 실시간으로 이를 수정할 수 있는 패널이다. 사이트의 구조를 파악하는 데 용이하다. (CSS 코드를 확인할 수 있..

코드숨(CodeSoom) 리엑트 11기 마지막 회고 및 후기.. (부제 : 나는 실패했다)

무거운 마음을 갖고 마지막 코드숨 회고를 써보려 한다.결론부터 말하자면.. 나는 6주차의 벽을 넘기지 못하고 포기했다. 사실 포기했다는 것 자체가 많이 부끄럽고 창피해서 그동안 회고를 쉽게 쓰지 못하고 있었다.그러다 코드숨 리엑트 동기 분들 중 깃허브에서 나를 팔로우하신 한 분이 얼마 전 언팔하신 것을 보고비록 창피하지만 도망치지 말고 이렇게 후기를 적고 공유하는 것이코드숨에서 나를 지켜봐 오신 (언젠가 어디에서 또 어떻게 뵙지 모를) 여럿 분들에게도그리고 이번 실패를 수치만이 아닌 성장의 발판으로 삼고 싶은 나 자신에게도좋을 것 같다는 생각이 들어 어렵게 글을 쓴다.  나는 웹 개발에 관한 기초 지식이 많이 부족한 상태였지만 강한 열정을 갖고 코드숨을 신청했다.물론 1주차부터 매 순간이 고비의 연속이었..

주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자

(이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 말씀 올립니다.) 🖌 서론 스터디에서 발표를 준비하며, 기술 면접의 단골 질문인 웹 브라우저의 동작 원리에 대해 처음으로 공부하게 되었다. 그리고 이 주제가 왜 단골 질문으로 꼽히는지 이해할 수 있었다. 이 주제는 깊이 들어가기 시작하면 정말 끝없이 들어갈 수 있는 내용인 것 같아 보였다. 그렇기에 면접관이 면접자의 역량을 파악하는 데 이만한 질문이 없겠구나 싶은 생각이 들었다. 만일 CS 지식이 부족하다면, 이 주제를 처음 공부할 때 아마 내용이 많이 낯설고 어렵지 않을까 싶다. (사실 내 이야기다.) ..