일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Reducer
- localstorage
- 원티드
- 리액트
- JS
- til
- 프리온보딩
- 컴포넌트
- JavaScript
- firebase
- react
- CORS
- 프론트엔드
- Frontend
- Component
- array
- 자바스크립트
- axios
- react localStorage
- state
- 파이어베이스
- Redux
- 프로그래머스
- TypeScript
- 비트 연산자
- 타입스크립트
- 브라우저
- es6
- v9
- 알고리즘
- Today
- Total
목록전체 글 (126)
도리쓰에러쓰
Component 사용하여 코드 간단하게 만들기 function App() { return ( 제목 날짜 제목 날짜 ); } 위와 같은 코드처럼 반복적으로 코드를 작성해야할 때 Component를 아래와 같이 작성합니다. function List() { return ( 제목 날짜 ) } 새로운 function을 만들어 Component를 생성합니다. 관습적으로 함수명은 대문자로 시작합니다. return() 안에 있는건 태그 하나로 묶어서 그 안에서 작성해줘야 합니다. (만약 의미 없는 를 사용하고 싶지 않을 땐 Fragment를 사용합니다. - 아래 글 참고) Fragment 태그 // 방법 1 function List() { return ( 제목 날짜 ) } // 방법 2 function List() ..
useState() 함수 이용하여 좋아요(👍) 버튼 만들기 아래 코드에서 좋아요(👍)버튼을 누르면 숫자가 1씩 증가하는 코드를 구현하겠습니다. 남자 코트 추천 👍 0 2월 17일 발행 useState() 구조 let [state, setState] = useState(initiailState); useState()는 배열로 반환합니다. 배열의 첫번째 요소 (state) : 상태값 저장 변수 배열의 두번째 요소 (setState) : 상태값 갱신 함수 initiailState : state 초기값 App.js에서 맨 윗줄에 useState를 import 해줍니다. import React, { useState } from 'react'; useState() 함수를 이용하여 like 변수는 0으로 초기값을 잡..
1. const & let const와 let은 변수 선언을 위한 키워드입니다. (기존엔 var로 변수 선언) - const : var보다 강력하며, 변수가 사용되면 다시 할당할 수 없습니다. (상수이므로 변경 불가) * 아래 코드처럼 변경 불가능 const hobby = "walking"; hobby = "exercise";// Error - let : const와 달리 새로운 값을 가질 수도 있고 재할당도 가능합니다. (변경 가능) let phone = "iphone11"; phone = "iphone13"; console.log(phone);// Result : iphone13 2. Arrow Function Arrow Function은 코드가 간결해져서 가독성이 높아지는 함수 문법입니다. // E..
1. 리액트(React)란? 페이스북(Facebook)이 만든 사용자를 위한 라이브러리 2. 리액트(React)의 특징 * 컴포넌트(Component) 기반의 라이브러리 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말합니다. * JSX 문법 JSX는 JavaScript를 확장한 문법이며, JavaScript 안에서 HTML 문법을 사용합니다. 리액트(React)는 JSX 사용이 필수는 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 되어 암묵적으로 JSX 문법을 사용하고 있습니다. 아래 코드가 JSX 코드인데, 지금은 대충 이런 구조가 JSX 문법인 것을 확인하기만 하겠습니다. function App() { return ( H..
1. Ajax(Asynchronous Javascript And XML)란? 서버와 클라이언트 간에 정보를 비동기적으로 전달하기 위해 JavaScript에서 사용하는 하나의 라이브러리 웹은 클라이언트와 서버로 나뉘어져 서로 통신을 통해 데이터를 주고 받습니다. 예를 들어, 네이버 메일에서 메일을 삭제할 때 삭제할 메일을 선택하고 [삭제] 버튼을 클릭하면 메일은 삭제가 되지만 주소는 바뀌지 않습니다. 이처럼 해당 페이지에서 페이지의 주소가 바뀌지 않고 새로운 데이터를 받기 위해 서버에 요청할 때 사용하는 게 Ajax입니다. Ajax는 데이터를 비동기적으로 전달합니다. 비동기적으로 전달한다는 의미는 페이지를 새로 고침 하지 않고, 서버에 데이터를 요청한다는 것입니다. 2. 동기(Synchronous)와 비동..
깃배시(Git Bash)를 사용하며 주로 사용하는 명령어들을 정리하였습니다. 앞으로도 계속 업데이트 될 예정입니다. ( ※ [파란글씨]는 사용자가 직접 기입해야 할 부분입니다. ) * 디렉토리 이동 $ cd [이동할 하위 디렉토리명] * 현재 디렉토리 리스트 조회 $ ls * 현재 디렉토리 리스트 조회 (숨김 파일까지 조회) $ ls -a * 현재 디렉토리 경로 조회 $ pwd * 현재 경로에서 디렉토리 생성 $ mkdir [생성할 디렉토리명] * 디렉토리 삭제 $ rm -rf [삭제할 디렉토리명] * Git에 있는 Repository 폴더 복제 $ git clone [복제할 Git 주소].git * 현재 디렉토리 이동 $ cd . * 부모 디렉토리 이동 $ cd .. * 리모트(Remote) 저장소 초..