본문 바로가기

분류 전체보기

 (33)
[React] map, filter를 이용한 예제 /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ map이란? 배열.map((현재 값) => 수행하고 싶은 일) arr.map(callback, [thisArg]) callback(currentValue(현재 요소), index(현재 인덱스), array(원본 배열)) thisArg : callback 함수 내부에서 사용할 this 레퍼런스 map 기본 예제 import React, { useState } from "react"; const MyComponent = () => { const [names, setNames] = useState([ { id: 1, text: '음악' }, { id: 2, text: '코딩..
[React] ref /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ ref란? DOM을 꼭 직접적으로 건드려야 할 때 사용한다. ex. 특정 input에 포커스 주기, 스크롤 박스 조작하기, canvas 요소에 그림 그리기 ⓐ 콜백 함수를 통한 ref 설정 ⓑ 클래스 컴포넌트에서의 ref : createRef ⓒ 함수형 컴포넌트에서의 ref : useRef ⓐ 콜백 함수를 이용한 ref import React from "react"; class MyComponent extends React.Component { handleFocus = () => { this.input.style.backgroundColor = 'blue'; } ren..
[React] 함수형 컴포넌트에서의 이벤트 핸들링* /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ 함수형 컴포넌트에서 이벤트 핸들링하기 import React, { useState } from "react"; const MyComponent = () => { const [form, setForm] = useState({ username: '', message: '', }); const { username, message } = form; const onChange = e => { const nextForm = { ...form, //기존의 form 내용 복사 [e.target.name]: e.target.value, } setForm(nextForm); } cons..
[React] useState() /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useState(); const [count, setCount] = useState(0); useState() : 함수형 컴포넌트에서도 state를 관리하기 위함. 인자는 state의 초깃값이 들어가며 반드시 객체가 아니어도 된다. useState()를 호출하면, 배열이 반환된다. 첫 번째 원소는 count라는 state이고, 두 번재 원소는 count를 바꾸어주는 함수(setter 함수)이다. ++ 원래 배열에 있는 값들을 추출하려면 const array = [1, 2]; const one = array[0]; const two = array[1]; const [on..
[React] 클래스 컴포넌트에서의 이벤트 핸들링 /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ 클래스 컴포넌트에서 이벤트 핸들링하기 import React, { useState } from "react"; class MyComponent extends React.Component { state = { message: '', } render() { return ( { this.setState({ message: e.target.value, }) } }> ); } } export default MyComponent; e는 이벤트 객체로 이벤트에 대한 다양한 정보를 제공한다. e.target을 해야 이벤트가 일어난 태그(input)에 접근할 수 있다. 우리가 mess..
[React] setState()는 함수 인자를 전달해야한다. /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트 된다. import React from "react"; class MyComponent extends React.Component { state = { number: 0, fixedNumber: 0, } render() { const { number, fixedNumber } = this.state; return ( {number} {fixedNumber} { this.setState((prev) => { return { number: prev.number + 1 }; }); thi..
[Javascript] html에서 script 태그의 위치 html에서 script 태그의 적절한 위치 script 태그의 위치는 렌더링에 많은 영향을 끼치기 때문에, 코드를 작성할 때 script 태그를 어디에 삽입해야할지 충분히 생각을 해야한다. body 끝 부분에 넣으면 된다고 얘기를 들었지만, 실제로 다른 분들의 코드를 봤을 때 head에 있는 경우가 많아서 관련 강의를 찾아봤다. 잘 알려져있는 방법으로는 총 4가지가 있다. ⓐ head 안에 존재하는 경우 ⓑ body 끝 부분에 존재하는 경우 ⓒ head + async ⓓ head + defer ⓐ head 안에 존재하는 경우 가장 피해야하는 방법으로, html을 파싱하다가 중간에 멈추고 js를 가져오게 된다. ⓑ 바디 끝 부분에 존재하는 경우 장점 : 기본적인 html 태그들을 빠르게 볼 수 있다. 단..
[SWEA 1257] K번째 문자열 SWEA 1257번 : K번째 문자열 swexpertacademy.com/main/code/problem/problemDetail.do SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com /* 문제 설명 */ 한 문자열이 가진 모든 부분 문자열을 사전 순으로 정렬한다. 이 때, K 번째 문자열을 구하시오. ex) 문자열 love의 모든 부분 문자열 : l, o, v, e, lo,ov, ve, lov, ove, love 사전 순으로 정렬할 경우 : e, l, lo, lov, love, e, ov, ove, v, ve /* 해결 방안 */ 중복되는 경우는 무시해줘야하므로 set을 사용한다. set에 insert를 하게..
[SWEA 2383] 점심 식사시간 SWEA 2383번 : 점심 식사시간 swexpertacademy.com/main/code/problem/problemDetail.do SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com /* 문제 설명 */ N*N 배열에 사람(P)들과 2개의 계단 입구(S)가 있다. 각 사람이 계단 입구까지 도착하려면 이동시간이 | PR - SR | + | PC - SC | 만큼 걸린다. (PR, PC : 사람 P의 세로위치, 가로위치, SR, SC : 계단 입구 S의 세로위치, 가로위치) 계단 입구에 도착한 사람은 1분 후 계단을 내려가는데, 한 층을 내려가려면 1분씩 걸린다. 따라서 계단의 길이가 K면 완전히 내려가는데에는 ..
[SWEA 10912] 외로운 문자 SWEA 10912번 : 외로운 문자 swexpertacademy.com/main/main.do SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com /* 문제 설명 */ 주어진 문자열에서 같은 두 문자를 지워나갔을 때 남는 문자열을 출력하시오.만약 문자열에 있는 모든 문자들을 지울 수 있는 경우에는 Good을 출력하라. /* 해결 방안 */ 여기서 중요한 것은 같은 문자 서로 붙어있을 때 지우는 것이 아니라, 그냥 문자열 내에 있는 문자들 중 같은 거 두 개를 지우면 됩니다.이는 주어진 테스트 케이스 중 마지막 항목을 보시면 알 수 있습니다. 따라서, 계수 정렬을 이용하여 a-z까지 문자가 나온 횟수를 세어주었고각..

티스토리툴바