JavaScript
-
리액트 - React에서 DOM 조작하기리액트 2023. 1. 28. 17:22
useRef React에서 DOM 조작하기 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus하기 import {useState} from "react"; const DiaryEditor = () => { const[state,setState]=useState({author:"",content:"",emotion:1,}) const handleChangeState = (e)=>{ setState({ ...state, [e.target.name]:e.target.value, }) }; const handleSubmit = () =>{ if(state.author.length{ setState({ ...state, [e.target.name]:e.target.v..
-
리액트 사용자 입력처리하기리액트 2023. 1. 28. 17:05
useState with npx react-create-app ‘제목’해서 react 실행시키기 그리고 npm start해서 브라우저 열기 input에 작성된 값을 직접 핸들링할 수 있도록 만들어야한다. 사용자의 입력을 처리하기 위해선 state를 이용할 수 있다. useState를 이용한다. import {useState} from "react"; const DiaryEditor = () => { const [author,setAuthor] = useState("내이름스"); return( 오늘의 일기 setAuthor(e.target.value)} /> ); }; export default DiaryEditor; input에 value={author}를 지정하고 상태가 변화할 때 onChange를 사..
-
리액트 - 페이지 라우팅리액트 2023. 1. 28. 15:35
PAGE ROUTING ROUTING이란 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정이다. 데이터들도 네트워크 장치들을 환승하듯이 이동한다. ROUTER - 데이터의 경로를 실시간으로 지정해주는 역할을 한다. ROUTE + ING - 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는다. PAGE ROUTING이란? 요청에 따라 알맞은 페이지를 선택하고 반환해서 사용자가 그 페이지에 접속하는 행위이다. 예를 들어 /home 이라는 페이지를 요청하면 웹 서버에서는 이 요청에 맞는 Home.html 파일을 반환하고 사용자는 /home에 접속한다. React SPA & CSR 여러개의 페이지를 준비했다가 적절한 페이지를 보내는 행위 → MPA(Multipage Applica..
-
코딩테스트 연습 - 편지프로그래머스 문제 풀기 2022. 12. 30. 16:13
머쓱이는 할머니께 생신 축하 편지를 쓰려고 합니다. 할머니가 보시기 편하도록 글자 한 자 한 자를 가로 2cm 크기로 적으려고 하며, 편지를 가로로만 적을 때, 축하 문구 message를 적기 위해 필요한 편지지의 최소 가로길이를 return 하도록 solution 함수를 완성해주세요. 조건 공백도 하나의 문자로 취급합니다. 1 ≤ message의 길이 ≤ 50 편지지의 여백은 생각하지 않습니다. message는 영문 알파벳 대소문자, ‘!’, ‘~’ 또는 공백으로만 이루어져 있습니다. 내가 작성한 코드 function solution(message) { let answer = []; for(i=0;i
-
코딩테스트 연습 - 피자나눠먹기3프로그래머스 문제 풀기 2022. 12. 28. 17:09
머쓱이네 피자가게는 피자를 두 조각에서 열 조각까지 원하는 조각 수로 잘라줍니다. 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 매개변수로 주어질 때, n명의 사람이 최소 한 조각 이상 피자를 먹으려면 최소 몇 판의 피자를 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. 조건 2 ≤ slice ≤ 10 1 ≤ n ≤ 100 내가 작성한 코드 function solution(slice, n) { return Math.ceil(n/slice); } slice에 n을 나눴을 때 나오는 몫 = 최소 피자 갯수를 구할 수 있다. 소수점같은 경우엔 ceil(반올림)를 이용하여 최소 한 조각 이상 피자를 먹을 수 있는 조건을 완성시킬 수 있다.
-
코딩테스트 연습 - 피자나눠먹기1프로그래머스 문제 풀기 2022. 12. 28. 17:02
머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요. 조건 1 ≤ n ≤ 100 내가 작성한 코딩 function solution(n) { if(n/7 1){ return Math.ceil(n/7); } } if문을 이용해 n/7로 나누었을 때 1보다 작거나 같으면 1를 리턴하고 n/7로 나누었을 때 1보다 크면 Math.ceil(n/7)값을 리턴하라고 작성했다. 그냥 if문 없이 return Math.ceil만 잘 사용했으면 간단하게 작성할 수 있다는 걸 다른 사람 풀이를 보고 알았다.(부들부들)