🎈외부 강의 듣기 시작

다른 사람들은 리액트 숙련강의도 이해하고 추가강의도 듣는 경우가 많았다. 나는 기본강의부터 이해를 잘 못해서 계속 스트레스를 받고 있다. 자꾸만 잠이 든다. 자바스크립트나 웹종강의 모두 2주차까지 이해하고 3주차부터는 계속 꾸벅꾸먹 졸고, 집중도 못하고 이해도 못하는 상태이다. 어제는 졸더라도 보려고 계속 진도를 나갔는데, 결국 여러강의를 들었는데도 졸면서 봐서 머리에 하나도 안 남아있었다. 진도를 따라가지 못해서 계속 고역이었는데, 그냥 내 속도와 수준에 맞춰야 겠다. 내가 집중이 되는 수준과 스타일의 강의를 들으며 성장하는 방법을 써야 겠다. -애플코딩 리액트 강의 : 할인코드 적용받아 7만원대 결재 -노마드코더 리액트 강의 듣기 시작

🎈React Lv.2 과제

사실 2명씩 짝지어서 React level2과제를 해야 하고 그러려면 리덕스를 사용하고 Ducks패턴으로 구현해야 하고.. 뭐 그런 조건을 갖추어야 하는데, 아직 무슨 말인지도 이해가 안가서...그냥 짝에게 양해를 구하고 일방적으로 배우는 방식으로 가야 할 것 같다. 짝이랑 같이 과제를 해야 한다는 것때문에 지난주부터 엄청 괴로웠다. 강의는 소화를 못하고 과제는 해야하고, 민폐가 될까 너무 미안하고...

❗해결됨

✅빈폴더 만들어 둔 게 있어서 터미널에 yarn create react-app 새폴더명(나중폴더)쳤더니 나는 한참 다운로드되고 'cd 나중폴더명, yarn start 화면에 나옴'요렇게 될 걸로 생각했는데 에러뜸. 구글링에서 이렇다고 함. 알고보니 yarn create..를 yarn creaate라고 씀.ㅎㅎ 잘 쓰니까 다운로드됨

✅왜 계속 에러나나 했는데 요렇게 'set좋아요'를 먼저 썼어야 함.

❓해결 필요

🟩애플코딩샘이 요렇게 하면 '글수정'버튼 누르면 여자코트로 바뀐댔는데 안됨-> ram에 가서 ['여자코트',..]로 내용 바꿈.하지만 array를 수정했지 변수에 있던 화살표는 수정안됨. 얘는 신규랑 기존state가 같다고 생각해서 state변경 안해줌.

🟩(강의 내용 적었는데 아직 이해 안간 부분)state직접 수정하는 게 아니라 카피본 만들어서 인덱스 맞춰서 수정해야 함. 이때 [...]을 써줘야 동작 함. why?복사를 했기 때문에 copy는 기본state랑 다른데도 수정 안됨. 글제목이 변수에 저장되어있던 건 화살표밖에 없음,copy에 let글제목에 있던 화살표가 복사됨. 변수1,변수2화살표가 같으면 변수1==변수2비교해도 true나옴. 여자코트로 바꾼 후에 console.lg(copy==글제목)찍으면 true나옴. array.object는 reference data type이라서 그럼. [...글제목]:...는 괄호 벗겨주세요라는 문법->[]그 다음에 다시 괄호 씌어주세요->완전히 독립적인 사본(이러면 화살표도 달라짐), 이제는 새로운 state라고 생각해서 수정 잘 됨.

*state변경함수 특징 기존state==신규state의 경우 변경 안해줌 *array/object특징 arry/object 담은 변수엔 화살표만 저장됨 let arr =[1,2,3]; [1,2,3]을 arr에 넣어주세요가 아님 [1,2,3]은 RAM의 미지의 공간에 있는 것이고 화살표만 *state가 array/object면 shallow copy(deep copy)를 만들어서 수정해야 함

State

State란 컴포넌트 내부에서 바뀔 수 있는 값 UI(엘리먼트)로의 반영을 위해서

Props

컴포넌트 끼리의 정보교환 방식 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 컴포넌트 간의 정보 교류 방법 props는 반드시 위에서 아래 방향으로 흐름(단방향) props는 반드시 읽기 전용으로 취급하며, 변경하지 않음

리렌더링 발생 조건

페이지가 갱신되는 상황 리렌더링이 많으면 계속 깜빡거려서 불편-SPA 깜빡임 없음

❗모르다가 해결된 것

✅yarnstart하고 나서 yarn add styled-components를 입력하고 싶은데 이 화면 나오면 타이핑 안됨. yarn build쳐야 하나?

->질문방에서 두분이 알려주심 yarn start를 하고나서 추가는 어렵고 컨트롤+c로 리엑트 실행시킨걸 꺼준다음에 yarn add styled-components 설치 후 다시 yarn start->크롬에 새 창이 열림 터미널 하나 더 띄워서 설치

✅실수로 VS꺼서 다시 켜서 yarn start누르니 에러 구글링: create-react-app을 하지 않은 상태에서 yarn start입력했거나 앱을 설치한 위치에서 yarn start해주지 않으면 발생하는 오류 내 육안으로는 내가 작업하던 파일이 잘 켜져 있는 것 같았는데 터미널 포니 상위폴더임 cd 프로젝트명 눌러서 위치바꾼뒤 yarn start누르니 성공

❓궁금한 거

🟩리액트 하다가 터미널에서 컨트롤+c 누르면 뭐가 꺼지는 거지? 🟩튜터님은 import sty...요만큼만 쳐도 아래에 뭐가 뜨는데 나는 안뜬다. 자동으로 추천되어 styled form "styled-components"가 나옴. 뭔가 설치가 덜 된 느낌 🟩스타일이 된 컴포넌트를 만들 수 있는데 const StBox=sty... css입력해주면 됨(: ;). 전에는 JavaScript 방식(:"")이라 키밸류 조합. css는 문자열이 들어가야 해서 백틱으로 감싸줌. 이해가 가실껍니다.->나는 이해가 안 됨.실제 html태그처럼 쓰임

🥇항해99 주특기 시험

지난 번 과제는 추가, 삭제, 취소 등 기능이 복잡했는데 이번에는 todo list에 추가만 하는 것이라 내가 도전해볼 만 했다. 수업에서 배웠던 스타일 활용+애플코딩 기초 강의+지난번 과제에 썼던 코드+챗gpt의 도움으로 완성해서 냈다. 지난번 과제 때도 이해가 부족한 채로 다른 분들 코드와 챗gpt도움으로 했던지라, 이번 과제도 내가 100프로 이해한 건 아니긴 한데, 어쨌거나 제출했다는 게 만족스럽다. 깃허브에 올리고 vercel통해 배포한 걸보면 느리지만 쬐끔씩 성장하는 것 같긴 하다.

❗이제 아는 것

✅▪App.js의 요소에 className붙여주고 App.css에 스타일 지정해 주는 것

❓❗알긴 아는데 확실히는 모르는 것

🟩리액트 화면을 웹에 띄우는 법 ▪처음 띄울 때

폴더 만들어 열기 터미널에 yarn create react-app 새폴더명(나중폴더) 한참 다운로드됨 cd 나중폴더명, yarn start 화면에 나옴 cd 나중폴더명 엔터 주소(위치?)가 나중 폴더로 바뀜 yarn start 엔터 크롬에 localhosst:3000창이 열림

▪다음 날 다시 작업할 때(이미 다운로드된 상태) ▪크롬창 실수로 껐을 때: Ctrl+Shift+T
🟩깃허브 repository 에 코드 올리는 법 🟩versel통한 배포

❓여전히 모르는 것

🟩추가하기 기능 구현 🟩state관련해서 어떨 때는 users이고 어떨 때 user가 들어가는지 🟩key활용 🟩map,filter활용 🟩깃허브 커밋 🟩깃허브 Read.me활용 🟩깃허브 모심기 🟩깃허브와 벨로그 연동하여 깃허브에 TIL쓰기

react 주특기 수업을 시작한지 한주가 좀 안 되었고, 첫 개인과제 제출일이었다. 강의는 다 이해를 못했지만, 수업에 나온 예시코드 붙이고 다른 팀원꺼 참고해서 수정하면 어떻게든 할 수 있을 줄 알았다. 그런데 제출시간인 어제 5시까지 정말 뭐하나 된 게 없었다. 수업예시 코드부터가 계속 에러가 떴다.

결국은 챗gpt한테 내가 원하는 화면 자세히 말하고, 다른 팀원분꺼 참고해서 코드를 쓰긴 했는데 이해는 하나도 안갔다. 게다가 github올리고 배포하는 것도 할 줄을 몰라서 인터넷을 봤는데, 이리 저리 따라해도 잘 안되서 결국 팀원분께 도움을 청했다. 팀원분들이 하신 방법으로 해도 계속 오류가 나서 거의 한시간 걸려 성공하도록 도와주셨다. (너무 감사) 이래저래해서 과제제출시간이 1시간30분지나 과제를 제출했다.

그거 제출하고 식사하고는 내내 누워있었다. 처음에는 잠깐 휴식할 생각이었는데, 나중에는 '나는 못하겠다'는 생각에 사로잡혀서 괴로하면서 자다 깨다를 반복했다.

java script도 그렇고 react 수업도 나한테는 너무 어렵다. 들어도 모르겠다. 나는 너무 수준이 낮고 팀원들은 잘해서 수준차이가 나서 맘껏 묻기가 불편하다. 이렇게 못해도 편하게 물을 수 있는 선생님이나 동료가 있었으면 좋겠다. 나만 못 따라가서 괴롭다

그렇게 괴로워하다가 새벽에 이르러서 생각이 좀 바뀌었다.

내가 지난 주부터 많이 바쁘고 힘들었지. (왕복3시간반 아이 병원, 고소당함, 친구결혼축가) 내가 강의를 찬찬히 듣고 이해하고 따라갈 마음의 여유가 없었지. 내가 도저히 이해할 수 없는 수준인 게 아니라 내가 집중하기 어려운 사정이 이었지.

다시 힘을 내서 수업들어보고, 모르는 건 용기내서 팀원분들께 물어보고, 아니면 질문방, 아니면 기술매니저님께 도움을 받아보자! TIL도 쓰자. 기본부터 다시 해보자.

리액트 강의 다시 들어야지.

문자의 길이

s.length

split let reverse = n.toString().split('').reverse() return reverse.map(str=>parseInt(str)) 배열로 바꾸는 메서드-split('')

숫자인지 확인(인자가 숫자가 아니면 true를 반환)

isNaN(s) == false 또는 !isNaN(s)

또는

||

영문자 소문자, 숫자, "-", "_" 로만 구성된 길이 2 ~ 10자리 사이 문자열

/^[a-z0-9_-]{2,10}$/

4-4-4-4 체크

/^[0-9]{4}[-\s.]?[0-9]{4}[-\s.]?[0-9]{4}[-\s.]?[0-9]

/[a-zA-Z0-9]/ 영문자 대소문자와 숫자로만 구성

typeof Number(s) === "number"

문자열을 숫자로 변환할 때 주로 사용됩니다.

Number()와 parseInt()는

해당 문자열이 숫자인지를 판단한다.

isdigit( ) :

찾으려는 문자열 indexOf

function findKim(seoul) { return "김서방은 " + seoul.indexOf('Kim') + "에 있다"; }

변수나 연산 등을 삽입할 수 있게 되었다.

${name}의 구매가는 ${price * num}원 입니다. console.log(name + "의 구매가는 " + (price * num) + "원 입니다"); console.log(${name}의 구매가는 ${price * num}원 입니다.)

parsInt(str) n.toString().split('').reverse() return reverse.map(str=>parseInt(str))

역순으로

reverse let reverse= n.toString()

배열들을 재배치

map //은 .map(str => parseInt(str)) 문자열을 정수열로->따옴표날라감.

.join('') result.push(alphabet.join(''))

toUpperCase toLowerCase()

Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다

ES5/ES6 문법 차이

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되되었다. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 대규모 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였다. let, const도 이 때 나왔다.

-단축어 비주얼스튜디오 열 때 Ctrl+S 저장 드래그+Shift+Alt+F 정렬 드래그+Ctrl+/ 주석

-bootstrap이란? 예쁜 CSS를 미리 모아둔 것 가장 유명한 꾸러미: 부트스트랩

-부트스트랩 컴포넌트5.0: 단추, 리스트 등 아주 많은 것들이 있어서 갖다 붙이면 그럴싸한 페이지 만들 수 있다. https://getbootstrap.com/docs/5.0/

-디스플레이 플렉스:내용물 정렬할 때 편함. 네줄이 함께 다님

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

-배경에 이미지 넣을 때 쓰는 세줄

코드     background-image: url('');
        background-position: center;
        background-size: cover;를 입력하세요

기술 매니저님께 항해99 최고령인 나의 나이에 대한 얘기를 하니 장진환(프론트엔드)이라는 분이 삼십대에 개발을 시작하여 처음에는 500개 중 두곳만 합격하였지만 지금은 대단한 개발자가 되었다는 얘기를 해주셨다. 그런데 이름을 잘 못 적었는지 검색해서 못찾겠다. 그 분에 대해 궁금하다. ```