개발하고 싶은 초심자

1. State(상태) : 컴포넌트 사용 중 컴포넌트 안에서 변할 수 있는(변화하는) 값 ex) ‣toggle switch의 on/off 여부 {isOn: true} {isOff: false} // boolean타입 ‣숫자 카운트 (-)minus button 3 (+)plus button 플러스 버튼을 눌렀을 때 1씩 증가하고, 마이너스 버튼을 눌렀을 때 1씩 감소한다고 하면 여기서의 state는 현재 숫자값 {count : 3} ①useState : 변수처럼 저장할 수 있는 공간을 만들어주는 함수. ② state hook 사용 방법 예시로, 체크박스에 체크했을 때 "Checked", 체크를 하지 않았을 때는 "Unchecked"라는 문자열이 나오도록 한다. ‣먼저 useState를 사용하기 위한 imp..

오늘은 고차함수에 대한 복습과 리액트에 대한 복습을 했다. 어제도 리액트에 대한 복습은 했지만, 내일부터 시작할 리액트 spa 과제를 위해 한번 더 복습을 진행했다. 고차함수에 대한 복습은 array.map(), array.filter(), array.reduce()에 대한 내용으로 공부했다. 코플릿을 풀 때마다 map과 filter가 유독 헷갈려서 정확하게 적용하고 응용하지 못했기 때문에 그 부분을 중점적으로 했다. 영상을 보며 내가 직접 예제도 만들어보았더니 다시 코플릿 문제를 보며 풀 때 도움이 많이 되었다. 이제 곧 HA를 보는 날이 일주일도 안 남았다. 처음 부트캠프를 시작할 때부터 HA를 보는 것에 대해 걱정이 많았는데, 이제 진짜 코앞으로 다가왔다. 내가 공부한 만큼 시험 문제를 받아들었을 ..

매일매일 써야 한다는 압박이 있어서인가? 날짜가 밀리면 뭔가 굉장히 불편하다. 어제는 객체와 리액트의 복습을 하고 정규표현식에 대하여 공부했다. 객체와 리액트? 갭이 너무 큰 거 같은데?라고 생각할 수 있겠지만, 같이 하기로 한 과제 제출을 위한 페어의 주말 약속이 피치 못할 사정으로 하지 못했다. 그렇기 때문에 나는 과제를 혼자 제출했고, 차후 다시 해보기로 했다. 그래서 지금까지 내가 개념적으로, 실습적으로 부족한 부분이 무엇이었느냐 라고 생각했을 때 나온 결론은 객체와 고차함수, 정규표현식과 리액트였다. 오전 시간에는 리액트에 대한 복습을 위주로 했다. react intro 과제에서 컴포넌트를 넣는 위치를 제대로 찾지 못했던 것이 떠올랐다. 이미 Intro과제는 전부 제출했기 때문에, 원래 App...

1. SPA(Single Page Application, 싱글 페이지 애플리케이션) : 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트 ‣ 옛날에는 사이트 내 다른 페이지를 이동하면 html파일로 된 전체 페이지를 전부 로딩하는 방식으로 이루어졌다. 하지만 이제는 정보량이 어마무시하게 많아지고, 트래픽 양도 많아지면서 점차 html파일로 된 전체 페이지를 매번 가져오는 것이 불필요한 트래픽의 부담을 일으켰다. 그래서 1990년대 후반에 처음으로 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가..

오늘은 리액트에 대해 배웠다. 지금까지 어렵다 어렵다 어렵다...한 것들이 많았는데 그 중에서 리액트가 최정점을 찍었다. 다른 것들은 그래도 여태까지 배웠던 것들을 기반으로 했는데 -물론 리액트도 배운 것들을 기반으로 하긴 하지만- 리액트를 배울 때에는 jsx라는 것이 나와, 지금까지 알고 있던 html을 잊고 그에 맞는 문법을 사용해야 했다. 물론 아예 html을 안 쓰는 것은 아니었지만, css와 js가 주 기반이 되어 그 안에 컴포넌트를 넣어주는 것부터 시작해 내용을 넣어주고 아이콘을 직접 넣어주는 font awesome의 사용방법...등이 눈이 핑핑 돌아갔다. 그래도 리액트는 사용하는 문법에 익숙해지면 굉장히 편하다고 느꼈다. 그 이유는 html과 css, js를 써서 할 때는 매번 저장해주고 새..

리액트와 jsx를 공부하고, 바로 intro sprint를 받아 과제를 했다. 그런데 더 알아야 할 것이 있었다. 바로 react에 font awesome 적용하기. 구글링을 하며 알아보았고, 직접 해본 것들을 블로그에 정리해보기로 했다. 사실 뒤에 나올 CDN Kit 링크를 계속 적용시키지 않고도 npm install 패키지로 다운로드를 받아 할 수 있다. 터미널로 먼저 가자. ① 먼저 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지인 @fortawesome/fontawesome-svg-core 설치한다. →npm i @fortawesome/fontawesome-svg-core ② Font Awesome 아이콘 대한 패키지를 설치해야 한다. 무료로 쓸 수 있는 것도 있고 ..

1. React : 프론트엔드 개발을 위한 자바스크립트 오픈 소스 라이브러리. * 프론트엔드 : 웹 개발에서 유저에게 보이는 뷰(view)에 대한 코드를 작성하고 개발하는 것 ✅ Why React? 리액트의 3가지 특징 ① 리액트는 선언형이다 : 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 작성할 수 있는 방법. ⇒리액트는 한 페이지를 보여주기 위해 HTML, CSS, JS를 넘나들지 않고 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍이다. * JSX : HTML 문법을 JavaScript 코드 내부에 쓴 것. HTML과 JS가 결합한 문법을 기반으로 직관적으로 코드를 작성한다. ⇒ 즉, 코드만 보고도 어떤 모습일지 어떤 기능일지 상상할 수 있는 명시적이고 직관적이다...

1. 일급 객체(first-class citizen) ‣ 대표적인 예시: 함수 - 변수에 할당을 할 수 있다 ⇒ 변수에 할당할 수 있기 때문에 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. ⇒ 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다. - 다른 함수의 인자로 전달될 수 있다 - 다른 함수의 결과로 리턴될 수 있다 2. 고차함수(higher-order function) : 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수 변수에 할당하지 않고 함수를 바로 이용할 수 있다. 어떤 고차 함수에 함수를 인자로 전달하고, 고차 함수는 함수 자체를 리턴한다. 원래 알던 개념에서 변수가 빠졌을 뿐, 동작은 동일하게 함. 고차함수는 인..