🐶🐾

[js] localStorage에 저장 & login

localStorage ? - localStorage은 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있다. firebase를 통해 로그인 & 회원가입을 구현하고, 로그인한 사용자 정보를 localStorage에 저장하는 방식을 이용해보았다. 우선 로그인한 사용자 정보를 localStorage에 저장하기 위해서는 localStorage.setItem(key, value)를 이용한다. const handleSubmit = (e) => { e.preventDefault(); signInWithEmailAndPassword(auth, id, password) .then((userCredential) => { const user = userCre..

[html] Open Graph

Open Graph ? - sns를 통해서 사이트가 공유될 때, 사이트에 대한 메타 정보를 보여주기 위한 태그 index.html 이외 다른 property는 https://ogp.me/ 에서 확인 가능 +) 카카오에서 바로 변경이 안될 경우 카카오 개발자 사이트 > 도구 > 디버거 도구 > 공유 디버거 > URL 입력을 통해 캐시 삭제

[react] Firebase로 프로젝트 배포

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 프로젝트 생성 후 옆 카테고리에서 빌드 > 호스팅 클릭 1. Firebase CLI 설치 $ npm install -g firebase-tools 터미널에서 실행 2. 프로젝트 초기화 $ firebase login $ firebase init vscode에서 실행 (터미널에서 실행시 root폴더까지 가서 실행) firebase init (반드시 root 폴더에..

[react] useParams() - 파라미터 가져오기

...URL/edit/1 edit은 pathname, 1은 parameter pathname을 가져오기 위해서는 useLocation(), parameter를 사용하기 위해서는 useParams()를 사용하면 된다. 사용전에는 반드시 라우터가 설치되어 있어야한다. (npm install react-router-dom) useParams() 사용 import { useParams } from "react-router-dom"; const Edit = () => { const { id } = useParams(); return ( ) } export default Edit;​

[react] useEffect - Lifecycle 제어하기

react에서 Lifecycle이라고하면 mount, update, unmount로 나눌 수 있다. mount - 화면에 나타남 update - 업데이트, 리랜더 unmount - 화면에서 사라짐 useEffect함수는 react hook으로 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서 사용할 수 있게한다. useEffect(function, deps) 형태로 1. mount 시점에 실행 useEffect(() => { console.log("mount!"); },[]); - deps가 빈 배열 일 경우 mount 시점에 콜백함수 실행 2. update 되는 순간 실행 useEffect(() => { console.log("update!"); }); useEffect(()..

[js] sort()

js에도 기존 다른 언어들처럼 sort() 함수가 존재하는데 js에서 그냥 sort()를 쓸 경우 배열 속 요소를 모두 '문자열'로 인식한다는 점 .. ! 프로그래머스 K번째수 문제를 풀다가 테스트 2번에서 자꾸 실패해서 왜 틀렸지 싶었는데 array = [10,2] commands = [[1, 2, 1]] 일 경우 답이 [2]가 나와야하는데 sort()를 sort((a,b) => a-b);로 안하고 그냥 쓸 경우 문자열로 인식해 [10]이 답으로 나와 틀렸던 것이다 .. ! 📍 숫자를 오름차순 또는 내림차순 하고싶을 때는 sort 함수안에 따로 명시해줘야한다 /* 그냥 sort() 사용 (문자열로 인식) */ arr = [10,2]; arr.sort(); // [10,2] /* 숫자로 sort() 오름..

[spring] 컴포넌트 스캔

스프링 빈이 수십, 수백개가 될 경우 설정 정보(Appconfig)에 일일이 등록하기 귀찮아지는 문제때문에 스프링에서는 설정 정보가 없어도 자동으로 스프링 빈을 등록하는 컴포넌트 스캔이라는 기능을 제공한다 ! 그리고 의존관계도 자동으로 주입하는 @Autowired라는 기능 또한 스프링에서 제공한다. 컴포넌트 스캔 사용 방법 @Configuration @ComponentScan public class Appconfig {} @ComponentScan을 사용하게 되면 기존과다르게 @Bean으로 클래스를 등록하지 않고 스캔의 대상이 되는 클래스에 @Component만 붙여준 뒤, 의존관계 주입이 필요한 곳에는 @Autowired 어노테이션만 붙여주면 스프링은 자동으로 스프링 빈을 등록해준다 @Component..

[Java] 카운팅 정렬

백준 10989번 문제를 풀 때, 그냥 Arrays.sort()를 이용해서 문제를 풀었었다. 이후에 다른 사람들이 어떻게 풀었나 찾아보고 카운팅 정렬을 이용해 문제풀이를 다시 하게 되었다. Arrays.sort()와 BuffedReader등을 사용했을 때 메모리 345476KB, 시간이 2616ms 걸렸었는데 카운팅 정렬을 이용해서 문제풀이를 하니까 메모리와 시간 모두가 줄어들었다. 처음에 카운팅 정렬이 뭔지 몰라서 이해하는데 시간이 좀 걸렸어서 ! 까먹기 전에 정리해두려고 한다. 카운팅 정렬은 데이터의 값이 몇 번 나왔는지를 세주는 것이다. 문제로 이해하면 5, 2, 3, 1, 4, 2, 3, 5, 1, 7 이 입력으로 들어올 때, int[] arr = new int[10001]; // 주어지는 수들이..

[Java] StringTokenizer

처음에 n 이라는 하나의 수를 입력받고 공백으로 나눠진 n개의 수를 입력받아 저장하는 경우에서 BufferedReader를 사용해서 입력받다보니 입력이 엔터로 구분되서, StringTokenizer를 이용해 공백으로 구분해 입력받으려고 했는데 .. ! 평소에 코드를 깔끔하게 정리하고 싶은 탓에 주로 선언하는 부분들은 코드 위쪽으로 몰아 쓰는 탓에 문제가 생겼다. BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); StringTokenizer st = new StringTokenizer(br.readLine(), " "); int n = Integer.parseInt(br.readLine()); int[] arr = new i..