본문 바로가기

전체 글105

JSX 특징 JSX 란? : React에서 사용하는 자바스크립트 확장 문법으로써, HTML과 Javascript를 섞어놓은듯한 형태이다. : JSX는 자바스크립트 내에서 마크업을 작성할 수 있고, 로직도 함께 작성할 수 있는 장점을 가지고 있다. 특징 1. JSX 는 자바스크립트의 값(vlaue) 이다. : 값이라고 하면, 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나, 함수의 리턴값으로 사용할 수도 있다. 2. JSX는 자바스크립트 값을 포함할 수 있다. : JSX에서 자바스크립트 값을 사용하려면 {} 중괄호를 이용하여 자바스크립트의 값을 감싸주면 된다. name 이라는 변수를 선언하고, Hayley Lee 라는 값을 할당하였다. 이때, JSX 안에서 이 값을 사용하기 위해 {name} if문, .. 2023. 1. 25.
React) Use State (예제 2개 포함) State? : 컴포넌트가 가질 수 있는 상태 useState? : 우리 컴포넌트의 상태를 간편하게 생성하고, 업데이트 시킬 수 있게 해 주는 도구를 제공해 준다. const [state, setState] = useState(초기값); // state 생성과 함께 가져야할 초기값을 useSate 함수의 인자로 넣어주면 //state와 setState라는 두가지 요소를 배열 형태로 return 해 준다. - state(변수) : 현재 상태 값 - setState(함수) : state를 변경시켜주고 싶을 때 더보기 예시) const [time, setTime] = useState(5); // 컴포넌트 안에는 time 이라는 state 가 생성되고, 초기값은 5시 를 갖게됨 // 이때, 시간을 변경하고 싶으.. 2023. 1. 24.
Virtual Dom & React 브라우저를 통해 웹사이트에 들어가면 html 의 element들과 그 것들을 담고 있는 document 를 웹페이지라고 하는데, 브라우저는 이 웹페이지에 해당하는 html을 분석해서 화면에 나타나게 해 준다. DOM (document object model) DOM 이란, 웹페이지에 들어가 있는 html 요소들을 tree 형태의 구조로 표현한 것이다. 이 DOM tree 안에는 각각 요소(element)에 상응하는 노드가 들어있는데 , 개발자들은 이 DOM이 제공하는 API 를 통해 DOM에 접근을 하고, 원하는 요소의 구조,스타일, 내용 등 을 원하는대로 변경할 수 있는 DOM 조작을 할 수 있다. 만약 자바스크립트를 이용한다면, getElementbyId() 혹은 quarySelecort() API를.. 2023. 1. 22.
React) input 이용하여 로그인 구현하기 1. ID 에서 onChange event가 발생합니다. {}} 2. event 발생 시 saveUserId 함수가 실행됩니다. {saveUserId}} 3. saveUserId 함수는 이벤트를 인자로 받습니다. {saveUserId(e)}} 4. event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장합니다. const [inputId, setInputId] = useState (''); function saveUserId(e) { setInputId('e.target.value'); } 5. 위의 과정을 Password 에도 동일하게 적용합니다. import React, { useState } from "react"; const Login = (a) => .. 2023. 1. 21.
함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오게 리턴하기 twoSum 함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요 이때, nums : 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 target 으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠음. 예를들어, nums는 [4, 9, 11, 14] target은 13 이라 할때, nums[0] + nums[1] = 4 + 9 = 13이다. 그러면 리턴은 [0, 1]이 되어야 한다. 풀이) const twoSum = (nums, target) => { // 가 주어 졌을때, for (let i=0 ; i< nums.length; i++) { // targ.. 2023. 1. 17.
git rm --cached 파일명 git에 수정한 파일을 add, commit 후 github에 push 까지 했는데, 확인해보니 private한 사진들도 같이 올라가져 버렸다😂 이때 사용 가능한 명령어 더보기 * 원격 저장소와 로컬 저장소 파일을 모두 삭제할 경우 git rm 파일명 * 원격 저장소에 있는 파일만 삭제하고, 로컬 저장소에 있는 파일은 삭제 하지 않는 경우 git rm --cached 파일명 .gitignore 파일을 만든 후 해당 파일에 삭제할 파일들 확장자를 같이 넣어주기 2023. 1. 12.

티스토리툴바