리액트바오

HA시험을 무사히 통과했다. 조마조마 했는데 휴 정말 다행이다. 이제 곧 section2로 넘어갈텐데 오늘인 목요일, 그리고 내일 금요일은 section1에서 어려웠던 부분을 다시한번 짚어보면서 다음주 화요일부터 시작될 section2를 준비하려고 한다. section2는 엄청 어렵다고 들었는데 두근두근 내가 잘 할 수 있을깡??.... 오늘은 먼저 노션을 깔끔하게 정리해보고싶다. 그동안 여러 페어를 만나면서 노션을 잘 활용하는 사람들을 많이 봐왔다. 나도 한 눈에 무엇이 어디에 있는지 알기 쉽게 정리해보려고 한다.

TIL 2021. 9. 30. 14:59

어제 DOM에 대해 공부하고 오늘은 지난 과제인 '유효성검사'를 혼자 다시 풀어보는 시간을 가졌다. 추석연휴가 길어서 얼마나 다행인지 모른다. 제대로 공부하지 못한채 진도에 맞춰 달려오다가 연휴기간동안 다시 차근차근 공부해 볼 수 있어서 정말 만족스러운 시간을 보내고 있다. 이렇게 쉬는날 보충하는것도 좋지만 이런 연휴가 매번 있는것도 아니니 다음주부턴 정규시간에 주어진 학습 내용을 더 잘 이해할 수 있도록 집중을 잘 해야겠다고 마음먹었다. 습관적으로 인스타그램 들어가지 않기, 수시로 카카오톡 확인하지 않기, 갑자기 다른 생각이 떠오르면 따로 키워드만 메모해두고 나중에 생각하기!ㅋㅋ 유효성 검사(Form validation) 웹사이트 회원가입에서 가입 과정을 거치다 보면, 사이트에서 원하는 조건에 맞게 반..

TIL 2021. 9. 25. 00:59

DOM에 대해 공부했다. DOM(Document Object Model)Document는 일단 html이라고 생각하면 된다. html를 자바스크립트가 이해할 수 있는 object형태로 바꾼 형태를 DOM이라고 한다. javascript를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다. DOM 과 자바스크립트는 다르다. DOM은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용할 수 있게 연결시켜주는 역할을 담당한다. 자바스크립트가 DOM을 통해웹페이지에 접근할 수 있다. 즉, DOM을 가지고 있는 언어 중에 자바스크립트가 있는 것이고, 다른 언어(java, C, C#)도 DOM을 가지고 있지만, 자바스크립트의 DOM이 전통적으로 오래 쓰여왔고 안정적이다. HTML DOMjavascript H..

TIL 2021. 9. 25. 00:29

배열 코플릿을 처음부터 다시 풀어보았는데 처음 풀때보단 조금은 더 잘 풀 수 있었다. 문제를 풀면서 헷갈리거나 어려웠던 문제는 다시 풀어보기위해 따로 기록해두었다. 그 중 23번 문제를 기록해보려한다. 배열 23번 문제 문제 배열과 인덱스를 입력받아 해당 인덱스의 요소를 제외한 배열을 리턴해야 합니다. 입력 인자 1 : arr 임의의 요소가 담긴 배열 인자 2 : n number 타입의 인덱스 출력 인덱스에 해당하는 요소를 제외한 배열을 리턴해야 합니다. 주의 사항 배열의 길이보다 큰 인덱스를 입력받은 경우, 배열 그대로를 리턴해야 합니다. 입출력 예시 let output = getAllElementsButNth(['a', 'b', 'c'], 1); console.log(output); // --> ['..

TIL 2021. 9. 24. 23:53

React Twittler SPA과제를 다시 해보았다. 'MyPage 컴포넌트의 자식 컴포넌트로 Footer 컴포넌트가 있어야 합니다.' 라는 문제를 해결하기위해 해당하는 위치에 을 추가했지만 계속 오류가 났다. 알고 보니 import로 Footer컴포넌트를 불러오지 않은것다. 계속 고민하다 발견했기에 이 경험을 통해 앞으로는 컴포넌트를 불러올때 import로도 불러왔는지 다시 한번 확인하게 될 것 같다. function App () { return ( Home MyPage Dashboard {/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */} {/* 경로를 설정하고 */} {/* 컴포넌트를 연결합니다. */} ) } export default App; Home 컴포넌트 Route ..

TIL 2021. 9. 21. 13:41

지난주엔 npm install에서 계속 오류가 나서 그곳에 신경쓰느라 페어와 함께 과제를 풀어가는 동안 영혼이 조금 나가있었다. 오늘은 그래서 지난주에 배우기 시작한 리액트 과제를 다시한번 혼자 풀어보는 시간을 가졌다. 물론 아직도 어려운것은 마찬가지이지만 고차함수를 다시 정리해보고 코플릿을 통해 고차함수에 조금은 익숙해지니까 리액트에서 사용하는 map이 이해가 되었다. 리액트에 익숙해지고 언젠간 잘 하게 되길 바라며 열심히 익혀야겠다. React Twittler Intro 과제 TODO : 메세지 아이콘을 작성합니다. TODO : dummyTweet로 전달되는 데이터의 갯수를 보여줍니다. TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 엘리먼트 footer가 포함되어야 합니다. TODO: ..

TIL 2021. 9. 19. 23:00

토요일이니 지금까지 학습한것들중 보충해야할 부분을 공부하기로 했다. 난 고차함수를 다시 한번 읽어보고 코플릿 문제를 풀었다. 고차함수는 함수를 리턴하는 함수이며 함수를 인자로도 받을 수 있다고 한다. 여러 문제를 풀어보니 조금 익숙해져가는것 같다. 내장 고차함수 map map은 하나의 데이터를 다른 데이터로 맵핑(mapping) 할 때 사용한다. filter filter는 조건에 맞는 데이터만 분류(filtering) 할 때 사용한다. reduce reduce는 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용한다. Today's Key🔑 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이 추상화이다. forEach, find, filter, map, reduce, sort, som..

TIL 2021. 9. 18. 22:01

React State & Props에 대해 학습하는 날이다. 양이 많길래 전날 밤 미리 좀 읽어둔것이 도움이 되었다. 개념은 이해하기 쉬웠지만 적용하는것이 어색하고 어려웠다. 그래서 페어와 함께 과제를 수행하는 시간에도 서로 버벅이다 결국 페어시간 이전에 학습했던 연습문제를 함께 풀어보는 시간을 가졌다. 연습문제를 풀어보니 아주 조금? 감을 잡을 수 있었다. 주말 그리고 추석연휴 동안 리액트 과제를 다시 풀어보며 공부해야겠다. Props 1. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 2. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으..

TIL 2021. 9. 18. 13:57