이노베이션캠프
-
오늘의 집 클론 코딩 : 파일구조이노베이션캠프/웹프로젝트-3(클론코딩) 2023. 7. 27. 17:57
파일 구조 clone-front-team4 ├── node_modules ├── public ├── src ├── .env ├── .gitignore ├── package.json ├── README.md └── yarn.lock 📁 src └─ src ├─ api ├─ assets ├─ component ├─ pages ├─ App.js └─ index.js 📁 api └─ api ├─ auth.js ├─ index.js ├─ posts.js └─ user.js - 서버 연결 url에 따라 구분했다 - 각 파일별로 /api/파일이름/... 인 url 들의 axios 요청들이 모아져 있음 - index.js 안에는 axios.create 를 통한 interceptos를 사용함 이걸 통해 요청할 때마다 헤..
-
[TIL] 옵셔널 체이닝(optional chaining)이노베이션캠프/리액트 연습주차 2023. 7. 11. 17:32
* 문제상황 : 강의에서 옵셔널 체이닝을 쓰면 된다고 하는데, 뭔지 몰라서 찾아봄 * 옵셔널 체이닝 '?.' 이란? - 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있음 - ?. 연산자는, 참조자가 nullish(null 또는 undefined)라면, 에러가 발생하는 대신 표현식의 리턴 값은 undefined로 단락됨. 함수 호출에서 사용될 시, 주어진 함수가 존재하지 않으면 undefined를 리턴함 * 현재 상황에 적용하여 이해 - 비동기로 이루어지는 상황을 해결하기 위함 *참고 자료 https://coding-farmer.tistory.com/4 옵셔널 체이닝(optional chaining)의 개념 및 장점을 알아보자 목차 지난 게..
-
[TIL] git clone 하기이노베이션캠프/리액트 연습주차 2023. 7. 11. 00:38
1. 문제상황 - git을 클론해서 쓰라는데 어케하는 건지 모름 2. 시도한 방법 - 해결과 동일함 3. 해결 - git bash가 깔려있어야함 - clone하려는 git 리포지토리의 주소가 있어야함(당연함;;) 1) clone하려는 git 리포지토리 주소 복사 https://github.com/--------/-------.git 2) clone할 폴더에 들어감 3. 오른쪽 마우스 클릭해서 git bash here 클릭 4. 나오는 git bash 창에 아래 명령어 붙여 넣기 git clone //아까 복사해놓은 거 넣으면 되는 거임 끝~ 쉽다!! * 참고자료(고대로 씀. 감사합니다) https://ittrue.tistory.com/91 [Git / Github] 깃허브 클론 (clone) 하는 방법 ..
-
정리하고 싶기엔 너무 많아져버린.... 내용들 모음이노베이션캠프/리액트 연습주차 2023. 7. 10. 22:19
1. 스타일 컴포넌트 이름 짓기 2. filter(css) 3. fontawsome 4. useState 하나로 여러 값 관리하기 5. 숫자 3자리마다 콤마 넣기 6. 특정문자 제거하기 7. 모달창 만들기 8. 상속적용하기 (inherit) 9. 스타일 컴포넌트에서 hover, action 등 사용하기 10. Boolean 과 boolean의 차이 1. 스타일 컴포넌트 이름 짓기 https://heycoding.tistory.com/71 [React] Styled-components Naming Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방..
-
[WIL] 4주차이노베이션캠프/WIL 2023. 7. 10. 12:19
Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 1. Fact : 이번주 있었던 일, 내가 한 일 - Level3 완료! (with 용진님) https://reactlevel3.vercel.app/ React App reactlevel3.vercel.app - 리액트 숙련주차 완강! 2. Feeling: 나의 감정적인 반응, 느낌 - 일단 하면 된다,, : level3 과제는 용진님과 나, 각자 진행을 했었다. 솔직히 level2에서는 용진님의 도움을 많이 받았었는데, 이번에는 혼자 진행을 하려니 쉽지 않았었다.. 그래도 하니까 뭐가 되긴 하더라..!..
-
[WIL] 3주차 (6/26~7/2)이노베이션캠프/WIL 2023. 7. 5. 15:28
Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 1. Fact : 이번주 있었던 일, 내가 한 일 - 리액트 Level2 통과 ! (with 용진님) - 리액트 숙련주차 20강까지 수강! 2. Feeling : 나의 감정적인 반응, 느낌 - 번아웃 : 오늘의 할 일이 엄두가 안 날 때? : 코치님께서 해주신 말씀 중에, 번아웃이 있었다. 코치님은 번아웃을 이렇게 정의했다. "번아웃이란, 오늘 할 일을 감당할 수 없을 때, 오늘 공부해야할 내용을 가늠할 수 없을 때 옵니다." 이번주는 이 말이 너무 절절하게 공감가는 주였다.. 지금.. 너무 공부해야할 ..
-
[TIL] [CSS] Html 요소 우측 정렬하기 (margin: auto)이노베이션캠프/리액트 연습주차 2023. 6. 27. 13:32
* TIL 작성방법 1. 어떤 문제가 있었는지? 2. 내가 시도해본 것들 3. 해결 4. 알게 된 점 1. 어떤 문제가 있었는지? - 버튼만 오른쪽으로 옮기고 싶음 - 아래 사진 참고 2. 내가 시도해 본 것들 https://www.daleseo.com/css-align-right/ CSS로 HTML 요소 우측 정렬하기 (Flexbox/Grid) Engineering Blog by Dale Seo www.daleseo.com - 위의 글 참고함 - 어차피 버튼이 속한 div에 flex가 설정되어 있어서 flex 방법을 사용하기로 함 3. 해결 /*부모 div*/ .inputTodoBox{ display: flex; } /*자식 button*/ .inputTodoBox > button{ margin-lef..
-
[TIL] yarn 설치 성공기...이노베이션캠프/리액트 연습주차 2023. 6. 27. 11:36
TIL작성방법 어떤 문제가 있었는지 내가 시도해본 것들 해결 알게 된 점 1. 어떤 문제가 있었나? yarn start react-app //만들 리액트 이름 위와 같은 오류 발생했음. 2. 내가 시도해 본 것들 +) 모두 친절한 프로그램 동기분이 도와주셨음을 분명히 명시합니다. 이렇게 정리하는 것 또한 그 분이 친절히 자료를 정리해서 주셔서 할 수 있었습니다 * 계정 이름을 바꿈 Hong Ye Won -> HongYeWon 이 방법을 시도해 본 이유 : - 항상 공백으로 문제가 났었고, 이번에도 오류 메세지가 그렇게 떴기 때문임 * 사용자 명을 바꾸기 위해 사용한 방법 (1) 사용자 이름 공백에 대한 리액트 공식 문서 https://github.com/facebook/create-react-app/is..