나의 개발일지 나의 개발일지

과제를 제출했다..! 수정페이지까지 마무리 하게 되어서 너무 기쁘다..뿌듯하다..!!!!!!!!!!!!!!!!!!!!! 도와주신 민경님, 연재님, 주형님 그리고 찬수님...!!정말 감사합니다ㅜㅜㅜㅜ **꼭 기억하고 싶은것 오류.. 수정페이지를 만들면서 원래 있던 카드의 값을 수정페이지로 넘겨서 수정페이지에서 그려줘야 했다. 카드에 입력했던 값들 중에서 id값을 가져와서 id값이 카드값과 같으면 리턴해주는 식으로 제작했다. 그래서 인풋에 각각의 값을 넣어주어야 했는데 인풋의 value={}이런식으로 했더니 오류가 났다. 찬수님이 리액트에서는 value가 아니고 default value로 써주어야 한다고 말씀해 주셨다ㅜㅜ! 그래서 default value={}로 써주니까 오류가 안나는 것..잊지말자!!! 엄..

오늘의 과제 진행! 과제 요구 사항은 다 완료해서 수정하는 것까지 해볼 수 있을 것 같다! 너무너무 좋다ㅜㅜ 오늘의 최대 삽질!!!!!!! addDicList가 리덕스에 디스패치를 해주는 함수인데 버튼에서 온클릭 했을 때 addDiclist와 histoty.push를 같이 실행 시켰어야 했다. (디스패치 해주고, 페이지 전환) 근데 계속 history.push만 실행되고 addDicList는 실행이 안됨... 왜그런가 한참 찾았는데...addDicList에 ();를 안써줌....ㅠㅠ 나레기 정신차려라 제발...ㅜ +인풋에 값이 비어있을 때는 alert을 띄워줬다!!

과제 진행 **알아둬야할 css**(한참 걸림..) overflow ex)박스 안에 어떤 콘텐츠가 있는데 콘텐츠가 박스보다 큰 상황일떄 원하는 요구사항에 맞춰서 overflow를 사용. overflow: visible; //박스를 넘어가더라도 콘텐츠가 보이게 overflow: hidden;//박스 안에 들어간 내용만 보이게(박스보다 커서 박스를 넘어간 콘텐츠는 보이지 않게-hidden) overflow: scroll;//박스 안에 모든 내용을 들어가게 해주고 박스를 넘어가는 영역은 스크롤로 볼 수 있게 overflow: auto;//자동설정 max-heigh:50vh//최대 높이를 화면비율의 50%까지로 맞춘다. +더 공부해봐야 할 것 스크롤바가 너무 못생겨서...꾸며보고 싶었다.. 찾아보니 방법이 나오..

**리덕스 리액트에서 데이터는 단방향으로 흐른다. (부모의 state를 자식은 props로 받아옴) 이때 자식은 부모의 state를 수정할 수 없다. 그래서 필요한 것이 리덕스이다. 리덕스-전역상태관리 전역데이터 저장소. 부모컴포넌트, 자식컴포넌트 모두에게 포함된 것이 아니고 완전히 별도로 있는 데이터 이 데이터를 부모, 자식이 가져다 쓰면 된다. 부모가 a라는 데이터를 가지고 있을 때 자식 컴포넌트 1,2,3,4가 있다. 4 컴포넌트만 a라는 데이터를 필요로 한다면 1,2,3컴포넌트는 오직 4에 전달하기위해 데이터를 가지고 있는 것이다. (props drilling) 이 때에도 a데이터를 전역데이터 저장소에 넣어놓고 4컴포넌트만 가져다 쓰면 된다. 전역상태관리가 리덕스만 있는 것은 아님(리액트 훅도 존..

DOM과 Virtual DOM DOMHTML 요소들(input, button, div ..)을 "부품"이라고 하면 그것을 개발자가 마크업해서 "주문서"를 브라우저로 보내면 브라우저가 input은 텍스트 등을 입력받게하고, 버튼은 이벤트를 감지하게 하는 등의 완전한 기능을 가진 "실제 제품"을 생산하는 것이라고 볼 수 있다.HTML 문서 그 전체 구조에 맞춰 제품들(input, button, div ..)이 배치되고, 여기에 개발자가 추가적으로 명령을 보내 속성이나 디자인, 배치 등을 조작할 수 있도록 된 상태이다. DOM은 Javascript가 만들어 낸 객체일까?->X DOM은 특정 언어에 종속된 것이 아니다. 따라서 Javascript가 만들어 낸 객체가 아니라, Javascript가 제어해야 할 대..

SPA(Single Page Application) MPA(Multi Page Application) 한개의 페이지로 구성된 application 여러개의 페이지로 구성된 application 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드. 매번 전체 페이지가 다시 렌더링 된다. CSR(Client Side Renderin) SSR(Server Side Rendering) SPA(Single Page Application)문제점: 페이지 내에서 다른 링크를 클릭하면 다시 서버에서 해당 주소의 HTML을 받아서 페이지 전체가 업데이트 되어야 함.→사용성이 떨어짐1998년 XMLHttpRequest API가 개발이 되어서 HTML문서 전체가 아니..

과제) 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요? 리액트에서는 가상돔 개념이 있다. 특정 페이지에서 데이터가 변했다고 가정했을 때 1.변화된 버전을 가상돔으로 바꾼다. 2.가상돔끼리 비교한다. 3.바뀐 부분만 적용한다.(바뀐 부분만 실제 돔에 적용) getElementsByClassName등은 진짜돔을 건드리게 된다. 만약 가짜돔에서 input요소를 만들었는데 진짜돔에 업데이트를 안한 상태라고 가정해보면, 진짜돔에 적용되는 getElementsByClassName를 사용해도 input값은 찾을 수 없을 것이고 오류가 나게된다. +react 페이지에서 설명하는 ref 일반..

2주차 알고리즘 문제를 풀어보면서 잘 알지 못했던 함수 등 검색 할 때 ES6, ES5등의 문구가 많이 보였다. ES에 대해 공부하고 정리해보자. ES: ECMA Script Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 ES의 탄생배경 1. 1993년 NCSA사에서 사용자들의 접근이 용이한 UI 를 추가한 Mosic Web Browser를 출시한다. 2. 모자이크 웹개발팀을 이끌던 Marc Andreessen은 netscape설립을 하게되고 조금 더 UI요소가 더해진 Netscape Navigator를 출시한다.(정적 웹사이트) 3. 동적 웹사이트를 만들고 싶었던 Marc Andreessen은 scripting언어를 추가하기로 했다..