Suro Dev

Short-circuit Evaluation   Javascript 논리 연산식에서 단락 평가라는것이 존재한다.일단 간단한 논리 연산식을 살펴보자. function returnFalse() { console.log("False 함수"); return false;}function returnTrue() { console.log("True 함수"); return true;}console.log(returnFalse() && returnTrue()); /* 결과 :False 함수false*/ console.log에 AND 연산자를 사용하여 false와 true를 반환하는 함수를 호출했는데두 번째인 returnTrue 함수 자체는 실행이 안됐다. 그 이유는 단락 평가 때문이다. 😳 단락 평가란 ? 논리..

React Form 😎 목적 UseState Hook으로 form을 객체 상태로 관리 input Controlled Component (제어 컴포넌트) 객체의 값을 Bracket notation (괄호 표기법)으로 접근 👶 1. 기본 뼈대 import React from 'react' export default function AppForm() { const handleSubmit = (e) => { e.preventDefault(); } return ( 이름 : ID : Password : Submit ) } AppForm.jsx Form에 e.preventDefault를 해준 이유는 새로고침을 방지하기 위해서이다. 자세한 링크 : https://react-ko.dev/reference/react-do..

Number to Array Javascript에서 Number형을 Array에 담을 수 있는 여러가지 방법이 있다. 1. toString -> split -> map function solution(num) { let answer = num.toString().split(""); // ↑ 문자열 변환 후 split으로 String to Array return answer.map(el => Number(el)) // ↑ map으로 배열을 순회하며 Number로 변환 } console.log(solution(232443)); // [2, 3, 2, 4, 4, 3] type : Number 이 방법 외에도 쓸 수 있겠지만 다른 방법이 있다. 2. from function solution(num) { let ..

React Hook - useEffect 💬 useEffect란? 어떠한 컴포넌트가 Mount, Update, Unmount 되었을 때 특정 작업을 실행 인자로는 콜백함수(Callback Function)을 받음 Mount : 화면에 첫 렌더링 Update : 다시 렌더링 Unmount : 화면에서 사라질 때 😎 useEffect 사용하기 App.js 1. 우선 useEffect 를 사용하기 위해 import를 시켜줘야한다. import { useEffect } from 'react'; 2. 기본적인 useEffect 문법은 2가지 형태가 있다. // 1번 useEffect(() => {/* 작업.. */}); // 2번 useEffect(() => {/* 작업.. */}, [value]); 1번 use..

React Hook - useState 💬 State란? 컴포넌트 내에서 변경이 일어나는 값을 관리하기 위해 사용 사용자 UI와 밀접하고 변경이 잦다면 변수(let, const) 말고 useState 사용 😎 useState 사용하기 App.js 1. 우선 useState를 사용하기 위해 import를 시켜줘야한다. import { useState } from 'react'; 2. 기본적인 useState 문법은 다음과 같다. const [변수명, set변수명] = useState(초기값); 첫번째는 변수명, 두번째는 변수를 변경시킬 함수다 코드만 보면 이해가 안되니 예시를 보도록 하자. 🔥 useState 예시1 첫 번째 예시는 버튼 클릭시 1씩 증가하는 대표적인 Counter 예시이다. App.js ..

Create Modal (dialog tag) 2022년 상반기에 태그가 모든 메이저 브라우저에서 지원이 됐다고 한다. (2021년에는 FireFox, Safari가 지원이 늦었음) 그럼 dialog 태그가 무엇인지, 어떻게 쓰는지 알아보자. dialog 태그의 정의 기본적으로 예전 모달(Modal)창을 만들 때는 CSS를 이용해 모달을 숨기고, 중앙에 배치하며, 배경을 흐리게 만들고, JS로 클릭과 스크롤을 막으며.. 등등 만들 수는 있지만 엄청나게 귀찮다. 하지만 dialog라는 HTML 요소를 사용하면 하위 창같은 대화 상자를 구성하는데 오랜 시간이 걸리지 않는다. dialog 태그 사용법 기본적으로 dialog 안에 자식 태그들은 보이지 않는다. 즉 버튼 하나 만들고 거기다 클릭 이벤트 주면 보이..

Ranking numbers in an array using JavaScript Javascript에서 Array안에 숫자들을 큰 숫자를 기준으로 순위를 출력하고 싶으면? function solution(data) { return data // (4) [30, 60, 10, 100] } console.log(solution([30, 60, 10, 100])) 배열 [30, 60, 10, 100]이 주어지고 숫자들을 큰 순서대로 랭킹을 주고싶다. Ex) 100, 60, 30, 10순으로 크기 때문에 [3, 2, 4, 1] 출력이 나와야함 정답 ↓ function solution(data) { let num = data.slice().sort((a, b) => b - a) return data.map(el ..

Javascript 널 병합 연산자 Javascript에서 변수나 객체가 null이거나 undefined일 때 값을 할당하고 싶으면? 이 예시는 객체에 minNum이 없으면 20을 할당하고 maxNum이 없으면 100을 할당하는 코드이다. if문과 OR 연산자 예시 let variable = {minNum : 10} if(variable.minNum === undefined || variable.minNum === null) { variable.minNum = 20; } if(variable.maxNum === undefined || variable.maxNum === null) { variable.maxNum = 100; } console.log(variable) // {minNum: 10, maxNu..

문제링크 : https://school.programmers.co.kr/learn/courses/30/lessons/12939 문제설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 제한사항 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 나의 풀이 ✨ function solution(s) { let answer = s.split(' ').sort((a, b) => a - b); // ['1', '2', '3', '4'] ret..

문제링크 : https://school.programmers.co.kr/learn/courses/30/lessons/12909 문제설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 입력 형식 입력으로 지도의 한 변 크기 n 과 2개의 정수 배열 arr1, arr2가 들어온다. 1 ≦ n ≦ 16 arr1..