🥬 상추의 공간

활동 내용활동 기간: 23/02/09 ~ 23/03/06주 2회 총 8회차 진행1~4회차 - 제시한 React 키워드를 클래스 전에 학습해오고 관련 미션을 수행5~8회차 - 팀 프로젝트 진행 활동 자료팀 프로젝트 Github 저장소미션 정리 글미션 Github 저장소 팀 프로젝트에서의 역할, 기여한 부분, 성과팀장을 맡았고, 이전에 팀 프로젝트 경험이 있어서 활발한 소통이 이루어지고 협업을 진행하는데 많은 도움을 준 것 같다.소통을 중요시하게 생각해서 톡방에 자주 진행 상황을 여쭤 보았고, 구현한게 있으면 PR을 올려달라고 했다. 이렇게 계속 팀원들 간 코드를 업데이트를 했고, 그 덕에 프로젝트 진행하면서 충돌과 같은 문제가 발생한 일이 별로 없었던 것 같다.그리고 막히는 점, 궁금한 점을 계속해서 물어..

학습 키워드props, state, event handling, useState, useEffect 미션 저번 미션을 통해 만든 회원가입 폼을 학습 키워드 기반으로 다음과 같이 기능을 추가해야 한다.이메일, 비밀번호, 비밀번호체크, 이름, 나이를 useState로 작성하고, input 컴포넌트에서 이벤트를 통해 state를 변경useEffect를 사용해 비밀번호 재확인이 올바르지 않으면 올바르지 않다는 문구 추가 심화 미션필수 항목을 입력하지 않았을 때와 비밀번호 재확인이 올바르지 않을 때 가입하기 버튼이 클릭할 수 없도록 비활성화클릭했을 때 폼 내용이 모두 지워지는 초기화 버튼 만들기 결과물    코드먼저, 클래스 시간 때 멘토님이 몇가지 팁을 알려주셔서 그것에 대해 적용을 했다.멘토님은 파일 확장자를..

미션1 : CRA를 사용하지 않고 리액트 프로젝트를 만들어보세요.1. Node.js가 있는지 확인아래 명령어를 통해 Node.js가 있는지 확인한다.node -v 2. package.json 생성npm init -y-y는 yes라는 의미다.처음에 폴더명을 한글로 했더니 에러가 나서 영어로 고쳐줬다. 한글로 작성하면 안되나 보다.해당 명령어를 입력하면 기본적인 세팅이 되어있는 package.js 파일이 생성된다. 3. webpack 설치npm install --save-dev webpack npm install --save-dev webpack-cli npm install --save-dev webpack-dev-server위 명령어를 입력하면 package.json에 다음과 같은 코드가 생성된다.그리고 ..

학습 키워드현재 진행하고 있는 클래스는 학습 키워드를 미리 주고, 스터디 전까지 미리 학습해와서 관련 미션을 수행하는 식으로 진행된다. 이번 회차의 사전 키워드 다음과 같았다. 그리고 키워드에는 없지만 props를 알아야 이번 미션을 해결할 수 있다.CRA, 번들링, npm(npx), 함수형 컴포넌트, JSX  미션이번 미션은 주어진 요구사항에 맞춰 회원가입 폼을 만드는 것이다. 그 중에 가장 요점은 공통적인 input 부분을 컴포넌트로 분리해서 재사용하기였다. 결과물해결 과정처음부터 컴포넌트로 분리해서 작성하려니 막막했다. 그래서 먼저 하나의 완성된 코드로 작성하고나서 공통되는 부분을 컴포넌트로 분리했다.  1. 일단 완성된 폼 코드를 작성해보기완성된 폼 코드를 작성해보니 공통된 부분과, props로 ..

미션VSCode, Node.js, git 설치 및 github 계정 만들기해당 과정은 이미 되어있어서 통과했다. CRA(Creat React App) 활용해서 프로젝트 생성create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구다. 아래 명령어를 통해 실행시킬 수 있다.npx create-react-app [폴더이름] 위 과정이 완료되면 지정한 이름의 프로젝트 폴더가 생성된 것을 확인할 수 있다.해당 디렉토리로 이동하고 아래 명령어를 입력하면 react 개발 전용 서버를 구동시킬 수 있다.npm start 심화 미션실제 면접 질문에서 자주 물어보는 내용이다. 아래와 같은 내용의 면접 질문을 받았을 ..