본문 바로가기

TIL

[TIL-132] 위코드 33일차: JS 코드카타 React JS in 개념 코드 카타 y축 값(높이)들을 담은 배열을 받아서 가장 넓은 면적이 나올 때 값 구하기 내 답안 function getMaxArea(height) { let maxArea = 0; for(let i = 0; i = backBar) { area = backBar*(j-i); } else { area = frontBar*(j-i); } if(area > maxArea) { maxArea = area; } } } return.. 더보기
[TIL-131] 위코드 32일차: React JS - 위스타그램 마무리 / JS 코드카타 React JS input의 value와 onChange 이벤트 개념 input에 value 속성을 지정하면 사용자가 input에 값을 입력해도 변경되지 않는다. 하지만 value={state}로 해두면(value에 변하는 값인 state나 props를 주면) 사용자의 입력에 따라 값이 변하도록 할 수 있다. 이때의 state는 input에 onChange 이벤트가 발생할 때 event의 target.value로 업데이트해준다. input에서 일어나는 onChange 이벤트는 보이는 value 값이 변하지 않아도 사용자가 입력하는 값을 받아오기 때문에 가능하다. const [inputValue, setInputValue] = useState(''); const [newComments, setNewComm.. 더보기
[TIL-130] 위코드 31일차: React JS - 서버와 통신하기 / JS 코드카타 ReactJS fetch 개념 사용법 const signReqest = event => { event.preventDefault(); fetch('http://172.23.59.236:8080/users/signup', { method: 'POST', body: JSON.stringify({ email: inputValue.id, password: inputValue.password, }), }) .then(res => res.json()) .then(result => { console.log(result.token); localStorage.setItem(result.token); }); }; 버튼에 onClick 이벤트가 발생했을 때 실행될 signRequest 함수 코드이다. 태그는 기본적으로 ty.. 더보기
[TIL-129] 위코드 30일차: React JS - 리팩토링 / JS 코드카타 ReactJS form 안의 input 값 reset 개념 function Article() { const [inputValue, setInputValue] = useState(); const [comments, setComments] = useState([]); const input = useRef(); const handleComments = event => { setInputValue(event.target.value); }; const addComment = event => { event.preventDefault(); setComments([...comments, inputValue]); input.current.value = ''; }; ... } form에 reset 계산된 속성명 개념 비슷.. 더보기
[TIL-128] 위코드 29일차: React JS - 댓글 달기 / JS 코드카타 ReactJS ...(spread 연산자)로 깊은 복사 개념 배열이나 객체는 참조형 데이터이다. 그래서 배열 a를 변수 b에 할당해주면, a와 b는 특정 메모리 주소를 가진 같은 배열을 참조하게 된다. 따라서 a의 요소를 바꾸면 a가 참조하고 있는 배열이 변경되므로, 해당 배열을 마찬가지로 참조하고 있는 b도 바뀐 배열을 반환한다. 참조형 데이터일 때 이렇게 같은 주소값을 할당하는 것은 얕은 복사이다. 깊은 복사는 공통으로 참조하는 주소값이 아니라 새로운 주소값을 할당하여 독립적인 배열/객체를 생성한다. 그런데 spread 연산자를 쓰면 최상위 단계의 요소에서만 깊은 복사로, 두 단계 이상 깊어지면 얕은 복사가 된다. 사용법 function Article() { const [inputValue, setI.. 더보기
[TIL-127] 위코드 27일차: React JS - useRef() 훅스 useRef는 특정 DOM을 선택할 때 쓰는 건데, useRef()를 어떤 변수에 할당해놓고 그 변수를 선택될 DOM 요소의 ref attribute에 주면 그 변수로 ref 받은 요소를 불러올 수 있다. import React, { useState, useRef } from 'react'; const pwInput = useRef(); const focusPw = event => { if (event.code === ‘Enter’) { pwInput.current.focus(); } }; ---- [React] ref통한 input 태그 커서/포커스 조정 (class component와 hooks에서 비교) https://velog.io/@ju_h2/React-ref%ED%86%B5%ED%95%9C-i.. 더보기
[TIL-126] 위코드 26일차: 코드 카타 const getPrefix = strs => { let prefix = ""; if (strs.length) { const firstStr = strs[0]; let isBreak = false; for(let j = 0; j < firstStr.length; j++) { if(isBreak) {break} let compareStr = firstStr.charAt(j) // console.log(firstStr, compareStr); for (let i = 1; i < strs.length; i++) { // console.log(strs[i].charAt(j)) if (strs[i].charAt(j) !== compareStr) { isBreak = true; break } if (i === st.. 더보기
[TIL-125] 위코드 25일차: 코드 카타 / git merge master, git rebase master 코드 카타 주어진 문자열 뒤집기 내 답안 const sameReverse = num => { // num을 문자열로 바꾸어 글자별로 잘라서 array에 저장한다 let array = String(num).split(""); // array를 뒤집는다 let reverse = array.reverse() // 하나의 문자열로 다시 붙여서 newNum에 저장한다 let newNum = reverse.join("") // 문자열이 된 num과 newNum을 비교한다 if(String(num) === newNum) { return true; } else { return false; } } git merge/rebase master 개념 로컬에서 branch를 만들어 작업하고 있다가, 원격의 master에 변경사.. 더보기

티스토리툴바