TodoList 마무리 1. [key] const [inputs, setInputs] = useState({ title: "", content: "", }); //input들의 초기값 선언 const { title, content } = inputs; //비구조화 할당을 통해 값 추출 const onChange = (event) => { const { name, value } = event.target; setInputs({ ...inputs, [name]: value, }); }; Q: 여기서 name과 value 둘 다 있어야 하는지? value 하나만 넘겨줄 수는 없는지? name과 value과 input의 속성을 뜻하는 게 맞는지? name말고 다른 것을 key로 쓸 ..
https://todo-list-react-puce-seven.vercel.app/ React App todo-list-react-puce-seven.vercel.app 내일 시험을 준비하기 위해 알고리즘은 하루 쉬고 오전부터 리액트를 공부했다. 정주혜 기술매니저님이 설명해주신 React 기본과 내 코드 질문과 답변을 정리했다. 처음에는 그냥 녹화 영상만 보다가 이해가 안 돼서 코드를 다 따라쳤다. 데이터를 주고받고 화면에 보여주는 흐름을 이해하는데 집중했다. 내 코드를 component 별로 화면 구성요소 별로 나눠서 리뷰를 했다. 코드 리뷰를 하는 도중에 공백 입력 방지 예외처리를 했다. key값 id를 toDos.length +1 로 하니까 삭제하고 다시 추가하면 id 숫자가 중복되는 문제가 있었다..
희망찼던 오전 ~ 오전까지만 해도 의욕이 가득했다. 프로그래머스 알고리즘 문제를 풀고 깃허브에 업로드하니 뿌듯했다. 신원님 알고리즘 리포 README랑 markdown form가 잘 만들어져 있어서 정리해놓으니 마음에 들었다. 어제 못다 한 언어 스터디 발표 준비(예외처리 - try catch finally)를 마저 했었다. 다행히 시험 준비를 위해 스터디는 금요일에 재개하기로 했다. css는 예시와 똑같이 구현하고 깃허브에 업로드하려고 했는데 오류가 났다. git status git add 폴더 이름 git commit -m “commit-message” git remote -v *원격리포연결 git remote add origin (주소) *레퍼런스 오류 나면 ..
React 우리 좀 친해지자 🥹 와 진짜 큰일났다 오전까지만 해도 이 생각밖에 안 들었다. 당장 2주 정도 후부터 프로젝트가 시작되는데 리액트의 ㄹ자도 모르겠는 상태였다. 코드를 한 줄씩 뜯어보고 강의를 다시 보고 계속 들여다보니 아주 조금씩 이해가 됐고 기능 구현까지 마칠 수 있었다. 깃허브에서 가져온 코드를 변형한 것이라서 내가 처음부터 끝까지 완벽하게 해낸 것은 아니지만 기술매니저님과 동기분들의 도움으로 ㄹ자는 어렴풋이 보이는 것 같다. 아직 갈 길이 첩첩산중 구만리이다. 중간중간 에러가 떴었는데 toDos를 todos로 적은 오타였다. 기술매니저님께서 조언해주신 'toDos.length +1' toDos 배열의 길이를 이용해서 추가할 리스트의 id값을 구하는 것이 문제 해결의 키포인트였다. 내가 ..
[항해99] REACT 강의 KEYWORD Props Drilling PropTypes https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper object literal default argument Hook const 는 변경할 수 없는 상수 인데, 어떻게 setState를 이용해서 값을 변경할 수 있는지 component lifeCycle component reRendering 조건 children으로 component 만들기 원시 데이터 타입 객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드 null과 undefined 정의와 두 키워드의 차이점 자바스크립트 파일 절대경로, 상대경로 설정하는..
🥰 웹 꾸미기 재밌어! 이제 드디어 주특기 React 입문 주차가 시작됐다! 첫 번째로 오늘 개인 과제는 간단한 form을 만들고 Netlify에 배포하는 것이었다. https://jolly-cannoli-340a48.netlify.app/ React S.A Assignment Survey This is a space for developers!Please fill out the survey below. jolly-cannoli-340a48.netlify.app 그저 웹폰트를 가져와서 색깔을 넣었을 뿐인데 예쁜 색을 보니 마음이 편안해졌다. 리액트 파비콘도 만들어서 넣었다. 리액트 로고 색감도 모양도 마음에 든다. React를 오늘 처음 만났지만 마치 나와 함께라면 어디든 갈 수 있어!라고 말하는 우주를..
👊🏻 오늘 한 일 알고리즘 문제 29 ~ 30번(30번 다 못 풀었음) 11시 ~ 3시 알고리즘 테스트 알고리즘 테스트 3번 문제 풀기 TIL 쓰기 😲 오늘 느낀 점 몸상태가 너무 별로다. 약을 먹어도 허리가 끊어질 것 같다. 자바스크립트 공부를 거의 못해서 공부를 더 하고 자려고 했는데 눈이 계속 감긴다. 알고리즘 챌린지 문제와 테스트 3번 문제에 계속 매달렸는데 해결을 못 했다. 끝까지 혼자 풀어보고 싶었는데 속상하다. 이번 주 공부 계획의 반의 반의 반도 못 지켰다. 😭 알고리즘에 집착하면 몇 시간이 금방 사라진다. 진도를 쭉쭉 빼고 싶은 마음은 굴뚝같은데 내 머리가 따라주지 않는다. 그래도 첫날 함수 호출도 못하던 때보다는 훨씬 나아진 것 같다. 처음에 html 기초 공사를 잘해야 하듯 알고리즘 ..
👊🏻 오늘 한 일 알고리즘 문제 26 ~ 28번 11시 자바스크립트 언어 스터디 운동 그리고 낮잠 TIL 쓰기 😲 오늘 느낀 점 요즘 몸 상태가 별로라는 걸 알고있었는데 계속 카페인을 들이붓다가 오늘 후폭풍을 맞았다. 운동을 하기 전까지는 괜찮았는데 운동을 하고와서 밥을 먹으니 참을 수 없이 졸렸다. 푹 자고 일어나서 개운했지만 공부를 너무 못해서 속상했다. 약을 먹어도 허리가 계속 아프고 몸에 힘이 없다. 회사에 다닐 때도 이럴 때 버티다가 결국 조퇴했었는데 이런 시기가 올 때마다 내 의지와 다르게 말을 듣지 않는 몸이 원망스럽다. 그렇게 푹 잤는데 또 졸리다. 연어와 육회...먹을 것만 계속 생각난다. 오늘은 일찍 자고 내일은 일찍 일어나서 알고리즘 시험 대비 문제도 훑어보고 열심히 많이 공부해야겠다..
👊🏻 오늘 한 일 알고리즘 문제 25 11시 자바스크립트 언어 스터디 발표 1시 ~ 3시 알고리즘 모의고사 3시 알고리즘 스터디 알고리즘 모의고사 문제 2 ~ 3번 풀기 20시 기술 매니저님께 알고리즘 질문 TIL 쓰기 😲 오늘 느낀 점 오늘 하루가 정말 쏜살같이 지나갔다. 아침에 일어나서 어제 못 풀었던 알고리즘 문제를 풀고 자바스크립트 화살표 함수를 공부했다. 11시 언어 스터디 발표에서는 객체와 관련된 개념들을 설명했다. 내가 맡은 부분은 객체를 가볍게 훑고 지나가는 느낌이었다. 그래서 나도 너무 깊게 하나의 개념을 설명하기보다 큰 그림을 그려서 보여주고 싶었다. 팀원분들의 이해를 도와줄 수 있게 잘 정리된 글(공식문서 위주) 링크들을 많이 넣었다. this와 관련해서 이야기가 오갔다. 1시에 알고..
👊🏻 오늘 한 일 10시 언어 스터디 발제 11시 자바스크립트 언어 스터디 참여 알고리즘 문제 13 - 24번 TIL 쓰기 [혼자 공부하는 자바스크립트] Ch 6-1 😲 오늘 느낀 점 어제까지만 해도 진도가 너무 안 나가서 답답하고 이렇게 푸는 게 맞는지 고민하다가 함수 찾아서 써보고 안 풀려서 절망하다가 결국 해설을 찾아보고 이해하고의 반복이었다. 그런데 오늘 계속 붙잡고 풀어보니 신기하게 점점 감이 잡혀서 신기했다. 함수를 어떻게 검색하는 것인지, 어떤 함수들을 써야 하는 것인지 점점 알 것 같다. 아직 level 1, 2 병아리 단계라서 풀 수 있었겠지만 그래도 뿌듯했다. 지금 몸 컨디션이 떨어진 게 느껴진다. 오늘은 이제 그만 자고 내일 일찍 일어나야겠다. 자려고 했는데 내일 자바스크립트 발표 준..