그래도 해야지

오늘 푼 코테는 https://school.programmers.co.kr/learn/courses/30/lessons/12982 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 자체를 어떻게 접근하면 좋을지 감이 안잡혀 중첩 for문 돌리고 뭐하고 하다가 구글링해서 힌트 좀 찾아봄 1. 주어진 d 배열을 sort 메서드를 통해 작은수부터 오름차순으로 정렬하고 2. 정렬한 배열을 for of 문을 통해 하나씩 훑으면서 3. 해당 인덱스가 전체 예산보다 오바되지만 않는다면 4. 물품을 지원할 수 있는 부서 개수를 +1 해주고, 예산에서는 해당 지원금을 ..

https://school.programmers.co.kr/learn/courses/30/lessons/68935 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 입력받은 10진수를 3진수로 변환 후, 뒤집어주고 뒤집어준 3진수를 다시 10진수로 변환해 리턴해주기 10 -> 3진수로 변환하는 법 자체를 몰라 구글링을 해보니 toString메서드를 사용하면 되었다. toString을 숫자에 쓰면 문자열로 변환해주는 메서드로만 알고 있었는데, 매개변수로 기수(최소 2부터 36까지)를 넣어주면 10진수를 (1, 2, 3, 4, 5...) 다른 진수로 변환할 수 ..

https://school.programmers.co.kr/learn/courses/30/lessons/12932 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 드디어 프로그래머스 다시 푸는 나 .. 입력받은 문자열을 뒤집어서 배열형태로 바꿔서 출력하면 된다. 12345 => [5, 4, 3, 2, 1] 이런식으로! 입력받은 문자열을 10으로 나눈 나머지를 새로운 빈 배열 arr에 하나씩 담아서 리턴하면 되겠다고 생각함 function solution(n) { let arr = []; for(let i = 0; n / 10 > 0; i++ ){ arr.p..

게시글 목록에 무한스크롤 구현하기! Intersection Observer - 화면 상에 내가 지정한 타깃이 보이고 있는지를 관찰할 수 있도록 기능을 제공하는 API - Intersection Observer API를 사용해 화면에 띄어준 콘텐츠 중에 맨 마지막 요소를 관측해 콜백함수를 실행하는 원리로 무한스크롤을 구현 1. 무한스크롤 적용될 위치 잡아주기 무한스크롤이 시작될 요소에 ref를 달아주고 이 ref를 통해서 교차시점을 확인한다. import { useRef } from 'react'; const divRef = useRef(); useRef를 사용해서 divRef를 선언해주고 내가 원하는 위치에 빈 div 태그 넣어주고 ref 속성 넣어주기 2. 무한스크롤 관찰자 생성하기 const [cur..

페이지 오른쪽 하단에 ▲ 버튼을 누르면 위로 스크롤 되는 버튼 만들기 우선 이 기능은 재사용 가능성이 높기 때문에 컴포넌트로 뺴놓고 나중에 사용할때 해당 컴포넌트를 export 해서 사용하면 편하다 버튼이 스크롤이 어느정도 내려가면 보여야 하기 때문에 버튼 보임의 여부를 usestate로 관리하고 초기값을 false로 준다 const [showButton, setShowButton] = useState(false); 버튼 onClick시에 스크롤을 위로 끌어 올려줄 함수 const scrollToTop = () => { window.scroll({ top: 0, behavior: 'smooth' }); }; 특정 위치를 기준으로 top button 보임의 여부가 true, false로 인해 좌우되어야 하..

1. 버튼을 누르면 모달창이 열리고, 모달창 안의 닫기 버튼을 눌러야 닫히는 모달창 만들기 const [isOpen, setIsOpen] = useState(false); 모달의 상태를 boolean값으로 관리할 state를 만들어주고 버튼 1 모달창을 열 버튼 하나를 만들어준디. const openModal = () => { setIsOpen(true); }; 그리고 해당 버튼이 눌렀을때 모달을 열어주는 openModal함수를 onClick으로 지정해준다. openModal 메서드를 통해 버튼이 눌리면 state 값이 false에서 true로 변경된다. 버튼 1 { //isOpen이 true일때만 활성화되게 isOpen && ( 닫기 버튼을 누르면 닫히는 모달창 닫기 확인 ) } 모달의 상태를 의미하는..

잘한 것은 무엇인가? 아 이거 적었는데 날려먹어서 또 적는 .. 눈물난다 .. 🥲 뭘 적었더라 .. 일단 저번주에 리액트 기본 끝내고 이번주에 리액트 상태 관리 라이브러리인 리덕스 시작해봤는데 .. ! 진짜 좀 많이 혼란스러웠다. 폴더 구조부터 .. 그냥 모든게 다 ㅠ 그래도 한 일주일동안 리덕스로 여러 실습해보고 개념 자주 봐주니 익숙해진것같기도 이번주에 하루 통채로 빼먹어야 했어서 진도가 많이 뒤쳐지진 않을까 걱정이 많았지만 다행히 그러진 않았음 ㅠ 잘못한 것은 무엇인가? 이번주에 한번도 프로그래머스 문제 풀지 않았다는 점 .. 이건 진짜 나태해진듯 ㅠ 리덕스에 치인다는 핑계로 .. 담주엔 팀 플젝 또 들어가서 시간 더 없을텐데 ㅠㅠ 그냥 프로그래머스 푸는 시간을 정해놓고 그 시간 되면 프로그래머스만..

styled component는 패키지 다운부터 받고 import를 해와야 사용이 가능함 yarn add styled-components 1. 꾸미고자하는 컴포넌트를 styled component 방식대로 만들고 2. 그 안에 style 코드를 작성하고 3. 이렇게 만들어진 컴포넌트를 실제 html 태그처럼 사용하면 된다 import React from "react"; import { css, styled } from "styled-components"; function ButtonArea() { return ( 01.Button 테스트 테스트 테스트 테스트 테스트 테스트 ); } export default ButtonArea; const StButton = styled.button` border: no..

아직 스타일링을 안한 상태라 매우 비루한 UI지만 .. 각 todo 별 상세보기 버튼을 누르면 해당 todo 정보만 뜨게 세부페이지를 연결할 것이다 각 todo별로 고유한 id값이 있기 때문에 이 값을 path에 넣어서 동적 라우팅이 되게 할 것이다 Router.js로 이동해서 const Router = () => { return ( ); }; Detail 컴포넌트로 이동하는 path에 :id 를 넣어주어서 동적인 값을 받을 수 있게 해준다. 그리고 이 id는 useParams 훅에서 조회할 수 있는 값이 된다. //Main.jsx const navigate = useNavigate(); //Main.jsx { navigate(`/detail/${todo.id}`); }} > 상세보기 상세보기 버튼을 누..

등록 위 등록버튼을 누르면, 제목과 내용에 입력한 값을 dispatch로 보내 store의 state에 해당 todo 데이터를 추가해야한다 //main.jsx const addTodoHandler = () => { setTitle(""); setContents(""); dispatch( setTodo({ id: uuid(), title: title, contents: contents, isDone: false, }) ); }; //todo.js const SET_TODO = "SET_TODO"; // Action Value export const setTodo = (payload) => { // Action Creator return { type: SET_TODO, payload: payload, }; ..