오늘은 실습교육시간에 배운 CRA에 대해 정리하고 프로젝트 초기 세팅을 해보려고 한다! CRA란? Create React App : Set up a modern web app by running one command. [출처 : React 공식 문서] CRA란 리액트 프로젝트를 시작할 때 기본 개발 환경설정을 간편하게 해 줄 수 있는 방법이다. CRA를 사용하면 바벨, 웹팩 등 복잡한 설정들을 세팅해 주고 필요한 기본 패키지등을 설치해주기 때문에 매우 간편하게 리액트를 사용할 게 있게 해 준다! 일단 프로젝트를 생성할 폴더를 설정하고 터미널을 열어 npx create-react-app "프로젝트명" 을 입력하면 설치가 완료된다.( 중간에 y를 눌러주면 계속 진행된다.) 근데 나는 설치도중 오류가 발생해서..

어찌어찌 1차 프로젝트가 끝이 났다.... 후회도 많이 남고, 아쉬움도 많이 남는 거 같다. 개인적으로 가장 큰 아쉬움은 아무래도 계획한 기능을 구현하지 못한 것이 아닐까 싶다. 처음 계획한 기능 중 로그인 성공 시 일반유저의 헤더 변경, admin계정의 헤더 변경 기능을 끝내 구현하지 못하고 프로젝트 제출을 하고 말았다.... 이 과정에서 나는 내가 쏟은 시간과 기능구현율은 반드시 비례하지 않는다는 것을 알게 되었다. 너무 아쉬웠고, 제출하는 순간에도 팀원들에게 미안한 마음이 많았다. 나의 프로젝트 과정을 돌이켜보니, 나의 실수를 알 것 같았다. 처음 계획한 핵심기능구현을 첫째 목표로 설정하고, 이행할 것! css 또는 자잘한 기능구현은 나중일 인 것 같다. 결국 앞 글에서 기술한 2023.11.08 ..

내가 담당했던 로그인창과 회원가입창을 어느정도 구현을 완료하니, 눈에 보이지않던 이상한 코드들이 눈에 띄기시작했다. 그리하여 오늘은 코드를 리팩토링을 진행하려고 한다 기능은 잘되서 얼렁뚱땅 넘어갔지만 인터넷검색중 html안에 script문으로 기능을 구현하게되면 내 로컬에서는 잘되다가도, 안될수도 있고, 무거워지는 문제도 생기며 여러가지문제가 생긴다고 배웠다. (추가: HTML 코드가 js에 의존적인 웹사이트라면 사용자가 의미없는 화면을 볼 수 있다. 즉, 의미있는 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다) 그래서 script문 자체를 javascript로 옮겨버리기로 결정했다! import "../../index.css" function validateForm(e) { e.preventDe..

어제 회원가입창의 동적요소를 구현완료하고 오늘은 이미 만들어놓은 로그인창의 동적요소를 구현하였다. 일단 내가 생각한 기능은 회원가입창과 마찬가지로 형식제한이나 글자수 제한을 넣고 싶었다. 그리고 로그인에 성공하면 메인화면으로 이동하는 기능까지 계획했다. 일단 회원가입창에 구현했던 이 코드를 불러와서 var password = document.getElementById("password").value; if (password.length < 8) { alert("비밀번호는 최소 8자 이상이어야 합니다."); return false; } 여기서 alert문을 빼고 const loginId = document.getElementById('loginId'); const loginPw = document.getE..

나는 프로젝트 초기 때 스크럼에서 정한 대로 짱구굿즈쇼핑몰 만들기 프로젝트 중이다. 벌써 시작한자 2주 차에 들어섰는데 이제야 비로소 기본적인 html, css를 완성하고 기능구현에 들어가게 됐다. 내가 맡은 페이지는 로그인창과, 회원가입 창인데 팀원 중에 피그마를 능숙히 다룰 줄 아는 분이 계셔서, 와이어프레임을 쉽게 짤 수 있었고, 그나마 처음 써보는 tailwindCSS , vanillaJS를 공부하는데 시간을 할애할 수 있었던 것 같다.(아직 한참 감이 안 오긴 한다) vanillaJS에 대해 공부한 것을 짧게 정의와 장점, 단점을 정리해 보자면 바닐라 자바스크립트(Vanilla JS)는 외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트이다. 장점은 라이브러리나 프레임워크를 사용하지..

git push, git pull, git commit, git add, npm run, npm install 저번 글에 이어 본격적으로 git lab에서 프로젝트를 클론한뒤 필요한 작업에 대해 정리해보려고 한다. (사실 프로젝트 초반에 작업환경을 자꾸 바꿔야 해서 git에 대해 자주 접한 게 많은 도움이 된 거 같았다.) 일단 깃을 클론 했다면 내가 작업했던 브랜치로 이동하여 git pull로 작업상황을 가져와야 한다. -git pull 먼저 $git checkout 브랜치명 으로 브랜치 이동후, $git pull origin 브랜치명 하게 되면 내가 마지막으로 작업하고 푸시해놓았던 작업상황을 가져온다. 다음으로는 작업상황을 가져왔다면 npm run으로 작업 결과창(브라우저)을 띄우고, 결과를 보며 작..