프로젝트 설정 중 CRA에서는 tailwindcss가 작동되는데vite에서는 작동이 안된다 문서에서 시키는 대로 했는데 안됨찾아보니 vite는 설치 방법이 약간 달랐다 1. 공식 문서 방법역시 공식 문서에 있었다installation에는 없고, 검색어로 vite를 입력해야 나온다 기존 tailwind 설치 이외에도 2가지의 패키지를 설치한다npm install -D tailwindcss postcss autoprefixer Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com 2. 기존 방법 + vite.config 수정1번 방법을 찾기 전에 다른 방법을 찾아서 적용했다 이..
1. 오늘 새로운 팀에 적응하는 시간을 가짐한달동안 같이 갈 팀원들이랑 소통하는 시간을 가짐첫 느낌은 좋은 것 같다 ㅎㅎ 2. 리액트 수준별 수업 OT를 들음재밌겠다..!!튜터님 성향 상 확실히 많은 걸 배울 수 있을 것 같다아 조낸 열심히 해야지,,ㅋㅋ 아 근데 쫄려ㅠ아냐 쫄지마쫄리는데 쫄지마(?) 3. 리액트 강의를 들음개념 정리할 겸 쭉 듣고 있다이거 다 듣고 프로젝트 해야지 4. 개인 프로젝트 세팅 완료필수 요구사항, 주관식 질문 등 정리했다vite로 하니까 프로젝트 세팅은 금방했다 (딱히 더 할 것도 없음)yarn create vite todolist --template react
프로젝트 후기1. 얼마만에 순수 바닐라로만 개발을 했는지,,역체감 들었다단순하게 로딩 후 데이터를 가져오는 것도,, 아 useEffect쓰고 싶다! useContext쓰고 싶다 !! ㅋㅋ 2. 나는 항상 초반 계획을 꼼꼼하게 세우지 못해서 프로젝트 중간에 삐걱거림이 발생한다예를 들면 파트 분배가 치우쳐지거나, 컨벤션을 지키지 못하거나 등 불편하다면 불편한 상황들이 발생한다,,(근데 나만 불편해?)다들 자기 파트를 개발하는 것도 벅차하는 것 같아서하드코딩을 제한하고, 더 나은 방법을 요구하자고 말했지만 이게 '내가 상대방의 수준/힘듦을 생각하지 않고 요구하나?" 라는 생각이 들었다결국은 구현하는 방식을 제한하지 않았다 혼자하면 마음가는대로 선택하고, 실패하면 돌아가고하는 게 쉬운데그럼 나만 힘든게 아니니까..
작성한 코드를 팀원이 읽어보는 과정에서 이상한 점이 발견되었다해당 공간에 내용(객체 20개)이 들어있다 그 공간에 appendChild를 했는데 칸을 비우거나, 기존 내용을 삭제하는 코드가 없다하지만 기존 공간에 노드가 존재하면서 새로운 노드가 추가되는 것이 아니라 대체가 된다 그것도 아무런 에러 메시지 없이..! 코드 설명아래 코드는 클릭한 radio 버튼의 id에 따라 정렬된 카드를 화면에 추가하는 역할을 한다 (카드에는 영화 데이터가 들어있다) tempArr1에는 인수로 전달되는 문자열을 기준으로 정렬한 카드(노드) 배열에 들어있다이 배열을 돌면서 $main_cards에 appendChild로 추가한다($main_cards는 정렬된 카드가 들어갈 자리로, 필터링 결과 적용 전 현재 화면에 보이는 ..
window.location웹 브라우저의 현재 URL에 대한 정보를 제공하는 JavaScript의 내장 객체이다해당 객체는 현재 URL을 나타내는 여러 속성과 메소드를 가지고 있다 href현재 url 주소를 가져오기전체 url을 문자열로 반환한다 이때 프로토콜, 호스트 경로, 포트, 쿼리 스트링 등 모든 부분이 포함된다console.log(window.location.href);해당 주소로 이동window.location.href = "http://example.com"; protocol / host / hostname / port아래 코드를 가지고 설명하면http://example.com/page.html?q=123protocol http:, https:host : 호스트(도메인) + 포트 exampl..
1. 영화 데이터 가져오는 JS 코드 리팩토링첫번째 과제에서는 데이터를 가져와서 화면에 보여주기만해서 데이터를 가져오는 동작(fetch)와 카드를 만드는 동작(createMovieCard)을 한 곳에 두었다 함수가 데이터를 가져오고, 카드를 만드는 2가지 역할을 하면서나중에 고쳐야지 생각했는데 마침 이번에는 메인페이지의 카드, 헤더, 상세페이지에 개별 영화가 들어가면서 코드를 분리하는게 좋겠다고 생각했다그리고 async/await로 도전해봤다 수정 결과1. fetchMovies먼저 영화 데이터를 가져오는 함수를 만들었다 해당 함수는 fetch한 결과를 가져와 json으로 변환 후, 사용할 results를 구조분해 할당으로 담았다results안에는 영화(객체)를 담은 배열이 들어있다앗 아래 export는 ..