코드스테이츠 수강 TIL/Section 1
2021. 08. 20 금요일 한 섹션을 마무리하면서 내가 해왔던 것들과 앞으로 해 나갈것에 대해 적어보고자 한다. 5주동안 바쁘게 달려왔고, 코딩 잘 하고싶다는 생각만 하면서 지금까지 온 것 같다. 사실 내가 얼마나 성장이 되있는지 나 스스로는 잘 모르겠다. 이번에 배워온 것들을 간단하게 회고해 보면서 내가 뭘 했고, 뭐가 부족하고 앞으로 어떻게 해나가야할지 다짐하는 시간을 가지려고 한다. 지금 까지 내가 해온 것 ✅ 블로그 하루하루 배운 것 간단하게 정리, 복기하기 javascript, HTML, CSS, DOM, React 우선 블로그는 살면서 처음 해보는 것이기도 하고, 내가 필요한 정보를 찾기위해 블로그를 찾아보는 것만 해봤지 이렇게 직접 글을 쓰고 관리하는 것이 쉬운일이 아니라는 것을 느꼈다...
2021. 08. 19 목요일 1. Today's Key points! 오전9시 ~ 오후 6시 Section1 HA 시험 오늘은 하루종일 시험만 쳤고, 어제 오늘 시험치느라 피로가 쌓인듯 하다. 시험을 치기 전에는 통과못하면 어떻하지라는 걱정을 하기도 했다. 근데 내가 배워온 것 그대로 활용해서 푸니까 다 통과가 됐다. 뭔가 신기하기도 했고, 뿌듯했다. 코드를 짜면서 이게 될까..? 제발 되라.. 하면서 테스트 실행을 했을 때 모든 테스트에 통과했다는 문구가 뜨면 짜릿하다. 물론 아주 깔끔하고 간결한 코드는 아니었겠지만, 뭔가 잘한 것 같은 느낌이 들기도 하고 많이 성장했구나 하는 느낌이 들기도 했다. 앞으로 얼마나 더 성장할 지 기대된다.
2021. 08. 18 수요일 1. Today's Key points! Section 1 Hiring Assessments 이벤트 함수 이벤트 객체 사용하지 않고 파라미터 전달하기. 알고리즘. compressString 2. 정리해보자. 오늘은 섹션1을 마무리하고 섹션2로 가기위한 시험을 쳤다. 내일은 아침부터 6시까지 시험이 또 있다. 오늘 친 과제형 시험은 무사히 통과했다. 처음에 많이 해멨는데, 침착하게 하나씩 해결해나가니까 됐다.(사실 3번 갈아엎었다..) 그리고 풀면서 하나 배운 점이 있다. 보통 리액트에서 이벤트함수로 핸들링을 할 때 이벤트 객체를 사용해서 state를 관리했는데, 이벤트 객체를 사용하지 않고 하는 방법을 깨달았다. onClick 이벤트 속성으로 예를 들면, onClick = ..
2021. 08. 17 화요일 1. Today's key points! React 3가지 특징 SPA React Twittler 2. 정리해보자! React 3가지 특징 : 1) 선언형 코드 작성(프로그래밍). 2) 컴포넌트 기반 개발. 3) 어디에나 쓸 수 있다. -> 가독성이 좋고 재사용할 수 있고 자바스크립트 기반이며 가벼운 라이브러리이다. Component : 하나의 기능 구현을 위한 코드 모음집 SPA(Single Page Application) : SPA의 가장 큰 장점은, 자바스크립트를 사용해서 웹 문서에 여러 interaction을 부여한 웹 어플리케이션 형태로 사용할 수 있다는 점 이다. 그러기 위해서 중요한 점은 JavaScript 파일과 HTML을 받아와서, 대부분의 동작은 JavaS..
2021. 08. 12 목요일 1. Today's Key points! SPA RouteBrowser, Switch, Route, Link React Twittler SPA Sprint 2. 정리해보자! SPA란? Single Page Application의 약자로 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다. SPA 장점 : SNS를 예로 들면, 올라오는 사진에 '좋아요'를 누르고, 댓글을 달고, 궁금할 땐 검색을 하기도 한다. 이렇게 애플리케이션과 사용자 사이에 수시로 상호작용이 발생하는데, 이때 페이지 전체를 렌더링 하는 것이 아..
2021. 08. 13 금요일 1. Today's Key points! State, Props react-router-dom { BrowerRouter, Switch, Route, Link } React Twittler 2. 정리해보자! State란? 변할 수 있는 값. 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값. 즉, 변화가 필요한 데이터는 State로 관리한다. State가 변경되면 컴포넌트가 리렌더링 된다. Props란? 외부로부터 전달받은 값. 자료형 타입은 객체. UseState란? state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. 새로운 state를 선언할 때 [state, setState]라고 선언해야 한다. 전달인자는 하나만 전달할 수 있다. 변환하는 두 번째 요소는 첫..
2021. 08 .11 수요일 1. Today's Key points! JSX React React Twittler 알고리즘. convertListToObject 2. 정리해보자! JSX란? JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 하지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그래서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이것을 'Babel' 이라고 하는데, JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 한다. 컴파일 후 JavaScript를 브라우저가 읽고 화면에 렌더링 할 수 있다. JSX를 이용..
2021. 08. 10 화요일 1. Today's Key points! 고차함수 배열 고차함수 메소드. filter, map, reduce 코플릿 알고리즘. firstReverse(이건 쉬워서 패스), letterCapitalize 2. 정리해보자! 고차함수란? 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 특징? 변수에 할당할 수 있다. 다른 함수의 인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 콜백함수란? 다른 함수의 인자로 전달되는 함수. 콜백함수에서 리턴 값이 함수이면 콜백함수 또한 고차 함수가 된다. map : 엘리먼트 하나하나에 연산 하는 메소드. filter : 걸러주는 메소드. 요소 하나하나 검사해서 true인 것은 배열에 남기고, false인 것..
2021. 08 .09 월요일 1. Today's Key points! DOM 이벤트 객체 validator(sprint 과제) Algorithm, powerOfTwo, firstCharater - 알고리즘은 따로 카테고리를 만들어서 정리해보고자 한다. 2. 정리해보자! DOM이란? HTML문서의 구조와 관계를 객체(Object)로 표현한 모델. 즉, HTML을 javascript object로 표현하는데, 이것을 이용해서 엘리먼트의 속성값을 얻어내거나, 변경할 수 있다. 다시 간단하게 말하자면 'javascript를 읽는 기준 모델'이라고 할 수 있을 것 같다. 초기 웹 브라우저에서 정보를 보여주는데, 그 정보를 바꾸려면 통신요청을 해야했고, 이 과정에서 많은 비용과 시간이 필요했다. 그래서 이 비효율..