오늘은 매번 정리해야지 정리해야지 했던 map함수에 대해 제대로 정리해보려고 한다. map함수 반복되는 컴포넌트를 렌더링 하기 위하여 자바스크립트 배열의 내장 함수인 map()을 사용한다. 쉽게 예를 들어, 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만들고 싶을 때 사용해 볼 수 있다. const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); console.log(squared); 이런 식의 예시를 들어볼 수 있다. map 함수의 파라미터로는 변화를 주는 함수를 전달해 준다. 이를 변화함수라고 한다. 현재 이 변화함수 square는 파라미터 n을 받아와서 이를 제곱해 준다. a..

오늘은 Router기능에 대해 정리해보려고 한다. 2차 스터디(개인 페이지 만들기)에도 사용하려고, 눈여겨봤던 기능이다. Router란? Router라는 개념은 네트워크 상에서 통신 데이터를 보낼 경로를 선택하는 과정이다. SPA환경의 웹 애플리케이션에서는 말 그대로 요청에 따라 알맞은 페이지를 변환해 주는 과정으로 이해하면 된다. SPA의 단일 페이지라는 이점을 살려, MPA(Multi Page Application) 환경과는 달리 페이지자체를 반환하지 않고 데이터만 불러와 렌더링 해주기 때문에 사용자 입장에서 훨씬 빠르다고 느낄 수 있다. 또한 클라이언트에서 렌더링을 다루기 때문에 CSR(Client Side Rendering)이라고도 불린다. React Router 설치하기 React Router ..

오늘은 개인 프로젝트에서 사용할 라이브러리 설치 방법에 대해 마저 정리하려고 한다. 1. styled-components CSS-In-Js라고 불리며, 이 뜻은 말 그대로 CSS 코드를 자바스크립트 안에서 관리하는 하겠다는 의미이다. CSS 코드를 마치 자바스크립트 객체형식으로 정의하여 사용한다는 말인데, 그중 대표적인 CSS-in-JS 라이브러리로는, styled-components와 emotion 등이 있다. 나는 styled-components를 사용해보려고 한다. 설치방법 $ npm i styled-components 명령어를 입력하면 자동으로 설치된다. 설치 후에 package.json에 styled-components가 추가된 것을 확인할 수 있다. { "dependencies": { "sty..

github나 gitlab에서 프로젝트를 생성하는 법은 이미 정리한 적도 있고, 수업시간에도 들은 적이 있어서 알고 있었다. 근데, 문제가 생겼다! 내 pc에는 프로젝트 폴더를 만들고, CRA까지 설치해 놓았지만! 정작 github에 생성해 놓은 프로젝트에는 파일이 0 이였다... 그래서 기능을 찾아보니 add file이 있길래 봤더니 파일들을 하나하나 추가해 주는 기능이라서 다른 방법을 찾아보았다. (git hub에서 프로젝트를 생성하는 단계는 건너뛰겠다. 2023.11.01 - [Devlog] - 프로젝트의 첫 단계 Gitlab 사용하여 - git clone 하기 이전글에서 정리해 놓았다:) 1. 일단 github에서 프로젝트의 http주소를 복사해 온다. 2.local 파일과 프로젝트를 연결하기 ★..

요번 주 엘리스에서 2차 스터디에 대한 공지를 받았다. 필참은 아닌 스터디라 그런지, 마지막 신청날까지 모집글이 없었다. 의지가 다소 약한 나로서는 필참은 아닌 이 스터디에 꼭 참여하여 성장할 수 있는 발판이 되기를 바랐다. 하지만 스터디를 구할 수가 없었다... (예전 프로젝트 팀원과의 스터디는 가입은 했지만, 스터디 단계와 나의 자질이 맞지 않아 1~2일 동안의 고민 끝에 나오게 됐다. 그 후에도 스터디와 프로젝트를 통해 알게 된 동기 몇 명에게도 물어봤지만 다들 이미 가입하거나 내가 지향하는 목적과는 다른 스터디였다.) 혼자라도 해야겠다고 마음먹은 순간, 동기 한 명과 극적으로 스터디를 하게 되었다. 각자 목표하는 프로젝트나 달성하고 싶은 목표를 설정하고, 진행도 또는 세세한 계획 등을 공유하고 서..

리액트를 사용해보면서, 공부하면서 궁금한 했던 부분이 props,state,가상돔코드,map함수 적용하기 등등이 있었다. 그중에 오늘은 공부하면서 알게된 state에대해 정리해보려고한다. State 란? UI에 변경되는것이 반영되고, 컴포넌트 함수가 다시 실행되어 UI가 다시 그려져도(리렌더링) 데이터가 유지되는값 이라고 한다. const [상태, 상태설정하는 함수] = useState(초기값) state는 이런식으로 사용한다. -상태를 설정하는 함수를 보통 "set+상태명"으로 변수명을 작성한다. -상태 업데이트 함수를 호출하면 컴포넌트는 해당 상태의 변경을 감지하고 리렌더링 한다. 여기서 use- 는 react에서 hook 훅함수 또는 훅이라고 불리고, function 키워드나 화살표 함수로서 선언된..