본문 바로가기

전체 글

[TIL-136] 위코드 37일차: Project1 - CSS / JS 코드카타 li { display: flex; align-items: center; } li::before { content: ''; display: block; width: 1px; height: 18px; margin-left: 12px; background-color: #d2d2d3; } li:first-child::before { content: none; } https://goddino.tistory.com/43 text-decoration:line-through [CSS] 취소선 (text-decoration:line-through) https://zinee-world.tistory.com/234 button 배경 없애기 .callcenterBtn { padding: 10px 15px; border-ra.. 더보기
[TIL-135] 위코드 36일차: JS 코드카타 코드 카타 a+bi 형태의 복소수 두 개 곱하기 내 답안 const complexNumberMultiply = (a, b) => { const aArray = a.split("+"); aArray[1] = aArray[1].slice(0,-1); const bArray = b.split("+"); bArray[1] = bArray[1].slice(0,-1); const realNum = aArray[0]*bArray[0]-aArray[1]*bArray[1]; const fakeNum = aArray[0]*bArray[1]+aArray[1]*bArray[0]; return realNum+"+"+fakeNum+"i"; } console.log(complexNumberMultiply("1+3i", "1+-2i.. 더보기
[TIL-133~134] 위코드 34~5일차: React JS - Monster React JS Monster 과제 useEffect() 훅을 사용하여 데이터 로드(fetch)하기 useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" }) .then((res) => res.json()) .then((result) => setMonsters(result)); }, []); useEffect( () => { 실행할 코드 }, [ 이 안의 state 중 뭔가가 변경되면 useEffect()가 실행됨 ] ) : 콜백함수와 state들을 요소로 갖는 배열을 인자로 갖는다. 두번째 인자인 배열을 비우면 페이지가 로드될 때 최초 1회만 실행된다. fetch( "API 주소", { method: ".. 더보기
[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.. 더보기

티스토리툴바