🤍 은지log 🤍

카카오에서 제공하는 우편번호 서비스 를 리액트환경에서 조금 더 간편하게 이용할수 있는 라이브러리가 있어서 사용해봤다 ㅎ! npm i react-daum-postcode 임베드 해서 사용하는 방법 과 팝업 방식으로 사용하는 방법이 있고, 나는 팝업 방식으로 구현해보았다. ✅ 전체 코드 import React, { useState } from "react"; import styled from "styled-components"; import { useDaumPostcodePopup } from "react-daum-postcode"; import { postcodeScriptUrl } from "react-daum-postcode/lib/loadPostcode"; const PostCode = () => {..

form 필드에 value를 사용하면서 onChange 핸들러를 설정하지 않아 발생하는 에러 ✅ 해결방법 1. onChange 핸들러 설정 const onChange = () => { // onChange 이벤트 } 2. defaultValue 옵션 설정 : value 옵션을 defaultValue로 변경 3. readonly 옵션추가

프로그래머스 Lv.0 - 점의 위치 구하기 💚 문제설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x,y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. 💚 제한조건 dot의 길이 = 2 dot[0]은 x좌표를, dot[1]은 y좌표를 나타냅니다 ..

게시판 css는 bootstrap을 사용하였고 이 글은 crud과정만 정리한 글 임미댱.. !😋 🔆 json-server RestApi는 json-server을 사용했습니다 ! GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) Get a full fake REST API with zero coding in less than 30 seconds (seriously) - GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) g..

React 원툴이였지만 러닝커브가 낮고 쉽다는 얘기에 vue 공부를 시작해 봤는데 뜨든😹 너무 쉽자나,, 간단해 ,, 이게 뭐람 ,, 왜 이제 안 거지 ,, 물론 리액트만큼 깊게 파고든건 아니지만 공부하는 내내 재미있었다 ㅎ_ㅎ! 코딩애플님 강의 중 무료강의 부분만 보고 조금 공부해 봤다. 🔆 데이터 바인딩 { { } } : 1. script 태그 내에 data( ){ return { } } 데이터저장소를 만들어 두고 object자료 형식으로 작성 후 { { 데이터이름 } } 2. HTML태그 속성도 데이터바인딩가능 -> 속성 앞에 : 붙여주면 됨 ex) :속성="데이터이름" {{ products[0] }} 📌 70만원 {{ products[1] }} 50만원 {{ products[2] }} 100만원 ..

import { useCallback, useRef, useState } from "react"; import Webcam from "react-webcam"; import styled from "styled-components"; const CustomWebcam = () => { const webcamRef = useRef(null); const [imgSrc, setImgSrc] = useState(null); const [mirrored, setMirrored] = useState(true); const capture = useCallback(() => { if (webcamRef.current) { const imageSrc = webcamRef.current.getScreenshot(); se..

기존에 NodeJS로 만들어둔 서버에서 데이터를 get 해와서 프론트에서 라이브러리를 사용하지 않고 직접 무한스크롤을 구현해보았다. 예전에 해봤던건데 다시 하려니 헷갈리기 시작 ...😵‍💫 ; 그래도 어찌어찌 구현은 해보았다 .. 스크롤이 움직이면 데이터를 계속 해서 불러온다. ( + 스크롤이 바닥에 닿으면 데이터를 불러오는 코드도 구현예정) // useGetFruits.ts import axios from "axios"; import { useInfiniteQuery } from "react-query"; const fetchFruits = async () => { const { data } = await axios.get(`http://localhost:8080/fruits`); return data..

프로그래머스 Lv.0 - 중복된 숫자 개수 💚 문제설명 정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. 💚 제한조건 1 ≤ array의 길이 ≤ 100 0 ≤ array의 원소 ≤ 1,000 0 ≤ n ≤ 1,000 💚 문제 function solution(array, n) { var answer = 0; return answer; } 💚 풀이 function solution(array, n) { return array.filter(x => x === n).length; } 배열의 각 요소 x가 제공된 숫자 n과 같은지 확인한후, 요소가 n과 같으면 true를 반환하고 그렇지 않으면 false를 ..

프로그래머스 Lv.0 - 문자열 뒤집기 💚 문제설명 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. 💚 제한조건 1 ≤ my_string의 길이 ≤ 1,000 💚 문제 function solution(my_string) { var answer = ''; return answer; } 💚 풀이 function solution(my_string) { var answer = ''; answer = my_string.split('').reverse().join(''); return answer; } split() 메서드로 string 객체를 문자열로 나눈후 reverse() 메서드로 배열의 순서를 뒤집어 준다. ..

프로그래머스 Lv.0 - 배열뒤집기 💚 문제설명 정수가 들어 있는 배열 num_list가 매개변수로 주어집니다. num_list의 원소의 순서를 거꾸로 뒤집은 배열을 return하도록 solution 함수를 완성해주세요. 💚 제한조건 1 ≤ num_list의 길이 ≤ 1,000 0 ≤ num_list의 원소 ≤ 1,000 💚 문제 function solution(num_list) { var answer = []; return answer; } 💚 풀이 function solution(num_list) { var answer = num_list.reverse(); return answer; } ✅ reverse( ) : reverse() 함수는 배열의 순서를 거꾸로 만들어 줍니다. array.reverse..