React16 [ 스파르타 / TIL ] 내일배움캠프 #28 [Todo list 만들기 (React)] 오늘 한 것 알고리즘 문제 풀기 Todo list Vercel에 배포하기 튜터님의 Todo list 리뷰 노트 정리 [ 프로그래머스 / Javascript ] 하샤드 수 https://school.programmers.co.kr/learn/courses/30/lessons/12947 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 codesign.tistory.com Todo list 회고 Todo list 만든 결과물이다. Todo list를 만들면서 가장 어려웠던 부분은 Working에서 완료를 눌렀을 경우, Done으로 Todo가 이동을 하는 것이다. 하지만 true로 변경이 된 상태에서 map으로 todo.. 2022. 12. 7. [ React ] VSCode에서 create-react-app 설치방법, 현재폴더에서 리엑트 설치방법 Visual Studio Code 터미널 열기1. VSCode를 연다. 2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다.쇼트컷으로 control + shift + ` 를 누르면 새 터미널이 열린다. 3. 화면하단에 새로운 터미널 창이 열린다. 4. 프로젝트를 생성하고 싶은 파일 위치로 이동한다.ls : 현제 위치에서의 파일 목록 조회가 가능하다.cd: 원하는 파일을 열고 그곳으로 이동한다. 'ls'를 눌러 현제 위치를 파악한 뒤'cd 파일명'을 적어준다. (파일 루트를 안다면 한 번에 다 적어줘도 된다. Desktop/Code/Frontend) 원하는 파일 위치로 이동했다면 아래 리액트 시작 명령어로 리액트를 설치해 준다. 리액트 시작 명령어 np.. 2022. 11. 30. [ JavaScript ] ES6의 화살표 함수 화살표 함수(arrow function) 화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다. 그렇다고 해서 기존 function을 이용한 함수 선언 방식을 사용하지 않는건 아니다. 사용 용도에 따라 달라진다. 일반 함수를 이용한 선언 setTimeout(function() { console.log('Hello world'); }, 1000); 화살표 함수를 이용한 선언 setTimeOut(() => { console.log('Hello world') }), 1000); 일반 함수와 화살표 함수의 차이점 서로 가리키고 있는 this 값이 다르다. 일반 함수는 자신이 종속된 객체를 this로 가리킨다. 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 일반 함수의 예.. 2022. 10. 23. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (2) 앞에서 TypeScript+React를 사용한 정적인 리스트를 만들어 보았습니다. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. T codesign.tistory.com 이번에는 리스트에 데이터 모델을 추가해보았습니다. 파일 전체 아웃라인 > react-ts 파일 > node_modules > public > src > src > components > Todos.tsx > models > todo.ts (이 파일 만들 예정입.. 2022. 10. 22. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. Todos.tsx 파일 만들기 4. App.tsx 파일 만들기 5. 결과물 1. package.json 파일 생성 종속 라이브러리를 설치하는데 이 파일이 필요합니다. npm init -y 2. typescript 설치 명령어 npx create-react-app react-ts --template typescript 파일을 만들어준 뒤 밑의 명령어로 프로젝트를 실행시켜 주세요. npm start 파일 전체 아웃라인 > react-ts 파일 > node_modules .. 2022. 10. 21. [React] 리액트, 컴포넌트, DOM 이해 목차 리액트(React)란? 컴포넌트(component) Virtual DOM이란? DOM이란? DOM의 단점 DOM의 사용되는 예시 이를 개선하기 위해서는? 리액트는 실제 DOM에서 어떻게 작용할까? 1. 리액트(React)란? 리액트(React)는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용된다. 2. 컴포넌트(component) 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(component)라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데 이와 달리 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트.. 2022. 7. 13. [React] React란? - 라우터 목차 React란? React-router-dom란? 리액트 라우터 (React Router) 경로 탐색자 (Route Matchers) 내비게이션 (Navigation) 왜 라우터를 쓰는가? 라우터 사용 방법 BrowserRouter 란 뭘까? Router 사용 예시 Redirect Switch 1. React란? React는 자바스크립트 라이브러리로써 SPA(Single Page Application)의 UI(User Interface)를 생성하는 라이브러리이다. 2. React-router-dom 리액트의 SPA (Single Page Application) 방식으로, 여러 개의 페이지를 새로운 페이지로 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 불러와 렌더링 하여 보여준다. react-r.. 2022. 2. 15. 이전 1 2 다음 728x90
