슬롱주리 Selon Julie

JSX는 컴포넌트에스 return하는 코드 리액트는 이 코드를 실제 DOM으로 렌더링함 제한 사항 1. 루트 레벨에서 여러 JSX요소들이 나열되어 있으면 오류가 발생 ->루트 JSX요소는 1개 여야함 return( Hi there This does not work :-( ) 그 이유는? 자바스크립트에서도 둘 이상을 반환할 수 없기 때문 아래코드는 불가능 return( React.createElement('h2', {}, 'Hi there') React.createElement('p', {}, 'This does not work :-(') ) 해결 가능 방법 1. 혹은 다른 태그로 감싸기. div수프문제가 있음. 불필요한 div가 너무 많아지고, css스타일을 망칠 수가 있음. 2. [] 배열에 넣기. 하..

디버깅 에러 메세지 이해하기 디버깅, 리액트 앱 분석하기 리액트 DevTools 사용하기 에러 메세지 이해하기 에러가 나오면 내용을 스스로 이해하고 풀기 어떤 파일에, 어떤 line에 에러가 났는지 확인하고 에러 메세지 제대로 읽기 디버깅, 리액트 앱 분석하기 내 머리: 문제점을 발견하고 논리적으로 그와 관련된 코드들을 좁히면서 확인해보기 콘솔: 개발자 도구 - Console - warning을 확인하기 (warning이 있다해도 앱이 실행되지만, 힌트를 얻을 수 있음) breakpoint: 개발자 도구 - Sources - 해당 js파일을 선택함 - 줄 번호를 선택해서 breakpoint를 정하기 - 화살표를 이용해서 한 줄씩 실행해보기 리액트 DevTools 사용하기 크롬 확장 프로그램 React D..

리액트란? 생활코딩 | React 2022년 개정판 - 4. 컴포넌트만들기 리액트는 사용자 정의 태그를 만드는 기술이다! React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "components"라고 하는 작고 격리된 코드 조각에서 복잡한 UI를 구성할 수 있습니다. 리액트는: Javascript 라이브러리 리액트를 쓰는 목적: UI 구축 UI 랜더링: "JSX(JavaScript syntax extension)"라는 특수 구문을 사용 JSX는 React를 사용하기 위한 요구 사항이 아닙니다. JSX 없이 React를 사용하는 것은 빌드 환경에서 컴파일을 설정하고 싶지 않을 때 특히 편리 *JSX는 JavaScript의 모든..

과제 개요 과제 주관: 위닝아이 작업 기간: 2022/10/17 ~ 10/20 참여 인원: 3명 기술 스택: HTML5, React.js, Styled-components, Chart JS, Antd, Recoil 깃허브: https://github.com/leejulie09/chart-bulletinboard 구현 사이트: https://grand-begonia-ec0fd5.netlify.app/ 담당 역할 Chart.js를 사용한 차트 구현, Netlify 배포 구현 사항 및 배운 점 1. VS Code에서 Ctrl + Space 누를 시 IntelliSense로 코드 힌트를 지원함 맥북에서 작동이 안될 시 아래 글 참고 참고) Ctrl+Space does not work on macOS 11 Big..

과제 개요 과제 주관: 룰루랩 작업 기간 : 2022년 10월 14일 ~ 2022년 10월 17일 참여 인원: 3명 기술 스택: HTML5, React.js, Styled-components 구현 사이트: https://634ca9c56fb7466ea1818a84--gentle-fenglisu-25d07c.netlify.app/ 깃허브: https://github.com/leejulie09/hospital-reservation 담당 역할 예약 조회 페이지 구현 사항 및 배운 점 1. useState사용을 위해서 어떤 것이 변하는 데이터인지 고민하기 - 1. 가지고 오는 데이터 - 2. 검색 필드 - 3. 검색 조건에 맞는 데이터 - 4. 검색 결과가 나오는 창 2. 검색 필드의 입력 값을 받기 const..

Github repository https://github.com/leejulie09/sensor-mgmt-program 구현 사이트 devdoper.github.io 초기세팅 컨벤션을 통일하고 시작하여 프로젝트의 통일성을 높임 prettier설치하였지만 포메팅에 문제가 있어 root에 [.vscode 폴더 생성 - 내부에 settings.json파일 생성] 후 아래 붙이고 에러를 해결함 { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.tabSize": 2, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "javascript...

Github: https://github.com/ebchoi/play-keyboard 구현 사이트: https://leejulie09.github.io/ 과제 역할: 초기세팅, 첫번째 페이지의 카드 뷰 구현 초기세팅 -타입 스크립트 기반으로 설치 *CRA설치 > 해당 프로젝트 폴더이동 후 React router설치 > Styled-components설치 > .eslintcache 파일 .gitignore에 추가 > prettier설치 > Github에 업로드 -typescript에서는 설치시 javascript 설치 때와 명령어가 다르기 때문에 주의 -local에는 master, remote에는 main으로 되어있어 remote에 push가 되지 않을 때 git checkout master git bra..

문제 1. 처음에 get으로 사진 정보를 받아왔음 2. 저장을 누르면 handleSave에서 getImgUrl로 불러온 imgUrl을 put에 보내주고 있음 3. 그런데 handleImageChange가 일어난 적 없는 경우(사용자가 사진을 업로드하지 않은 경우) setImgFile이 실행된 적 없기 때문에 imgFile이 비어있기 때문에 4. handleSave 내에서 getImgUrl 함수를 읽는 부분에서 에러가 발생함 (imgUpload에 append해줄 imgFile이 없으니까) 해결 1.그러면 getImgUrl을 실행할 때 File이 없는 경우는 그냥 undefined를 리턴해주면 handleSave 내부에서 받은 getImgUrl의 리턴값이 undefined인 경우, 사용자가 사진을 업로드한 ..

문제 기존코드는 사용자가 프로필 사진을 선택할때마다 URL로 변경해주는 /upload/image API를 타서 POST 요청을 날려주고 있다. 2022.08.20 - [React] - 로컬에 있는 이미지 파일 업로드 하기 원하는 방향 '저장'버튼을 눌렀을때만 API 요청을 보내줄 수 있도록 수정 난관 1. API를 저장할때 함수에다가 주니까 그 관련 (로컬에서 파일선택하는 코드)와의 연결성이 떨어져서 작동이 안됨 ->post 요청에서 then 체이닝을 불필요하니 빼고, url값을 찾아서 return해줌 (상태 업데이트가 아니라 리턴하게 바꿔줌) 중간에 response를 꼭 콘솔 찍어보기. url을 response어디쯤에 들어가있음. 이 데이터를 정제해서 return해줘야함 이전코드 const handle..

문제 put 요청을 보내고도 저장 후 새로고침을 하면 프로필 사진과, 성별이 반영이 안됨. 사용자 이름은 반영이 됨. put요청을 정상적으로 보내지는 것을 확인 get요청시 img태그 src에 unknown으로 값이 제대로 나오지 않음 useEffect(() => { axios .get(`${process.env.REACT_APP_BASE_URL}/my/profile`, { headers: { Authorization: `Bearer ${process.env.REACT_APP_AUTH_TEST_TOKEN}`, }, }) .then((res) => { console.log("res", res); const data = res.data.data.profile; const profileData = { name..