본문 바로가기

전체 글153

[프로그래머스 Lv.1] 모의고사 javascript function solution(answers) { //수포자 삼인방의 찍는 패턴 정해주고 const pattern1 = [1, 2, 3, 4, 5]; const pattern2 = [2, 1, 2, 3, 2, 4, 2, 5]; const pattern3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; // 수포자들이 맞춘 카운트를 담음 const scores = [0, 0, 0]; // answers 배열의 인덱스와 같은 수포자들의 패턴 인덱스를 비교해서 맞으면 카운트 answers.forEach((answer, index) => { if (answer === pattern1[index % pattern1.length]) scores.. 2024. 11. 28.
[프로그래머스 Lv.1] 기사단원의 무기 javascript function solution(number, limit, power) { let answer = 0; // 1에서 number까지 각 숫자의 약수 개수 계산 for (let i = 1; i limit) { answer += power; // 제한 초과 시 power 추가 } else { answer += divisorCount; // 제한 내면 그대로 추가 } } return answer; // 필요한 철의 총 무게} 2024. 11. 27.
[프로그래머스 Lv.1] 2016년 function solution(a, b) { const days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; // 2016년 a월 b일의 Date 객체 생성 // 월은 0부터 시작해서 -1 해줘야 함 const date = new Date(2016, a - 1, b); // 해당 날짜의 요일 const dayIndex = date.getDay(); // 요일 반환 return days[dayIndex];} 2024. 11. 25.
[프로그래머스 Lv.1] 폰켓몬 function solution(nums) { let newArr = Array.from(new Set(nums)); return newArr.length === nums.length / 2 || newArr.length 2024. 11. 22.
[프로그래머스 Lv.1] 카드 뭉치 javascript 다른 블로그에서 참고한 코드... (어려웡....)function solution(cards1, cards2, goal) { for(const s of goal) { if(cards1[0] == s) { cards1.shift(); }else if(cards2[0] == s) { cards2.shift(); }else { return "No" } } return "Yes"} shift() 메서드를 이번에 또 새롭게 알게 됐다..! mdn 문서의 설명이다.shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다. .. 2024. 11. 21.
[모던리액트 Deep Dive] 7장 크롬 개발자 도구를 활용한 애플리케이션 분석 7.1  크롬 개발자 도구란? 크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다.시크릿 모드 또는 프라이빗 모드에서 개발자 도구를 여는 것이 좋다. 브라우저에 설치돼 있는 각종 확장 프로그램이 실행되지 않기 때문이다.7.2 요소 탭현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.7.2.1 요소 화면왼쪽 화면은 웹페이지를 구성하는 HTML을 나타낸다.원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보를 확인할 수 있다.직접 코드를 수정하여 웹페이지에서 어떻게 보이는지 바로 확인할 수 있다.우클릭으로 중단 위치를 설정해 두면 중단과 관련된 작업이 일어날때 마다 브라우저가 렌더링을 중단하고 해당 요소 변경.. 2024. 11. 20.
[프로그래머스 Lv.1] 추억 점수 javascript function solution(name, yearning, photo) { var answer = []; //name[i] = yearning[i] for (let group of photo) { let sum = 0; for (let person of group) { // 그룹 내 각 인물 이름을 순회 let index = name.indexOf(person); // 이름이 name에 있는지 확인 if (index !== -1) { sum += yearning[index]; // 있으면 대응되는 점수 더하기 } } answe.. 2024. 11. 19.
[프로그래머스 Lv.1] 명예의 전당(1) function solution(k, score) { let list = []; // 명예의 전당 리스트 let answer = []; for (let s of score) { list.push(s); // 현재 가수의 점수 추가 list.sort((a, b) => b - a); // 내림차순 정렬 if (list.length > k) { list.pop(); // k개 초과 시 가장 낮은 점수 제거 } answer.push(list[list.length - 1]); // 최하위 점수 저장 } return answer;} 2024. 11. 19.
[모던 리액트 Deep Dive] 6장 리액트 개발 도구로 디버깅하기 6.1 리액트 개발 도구란?리액트 애플리케이션의 개발 도구인 react-dev-tools가 있다. 브라우저에 리액트 개발도구를 브라우저 확장 도구로 설치하여 사용할 수 있다. 설치하면 우측 상단에 리액트 로고가 표시돼있는데 회색이면 사용할 수 없고, 빨간색이면 정상 작동, 파란색이면 배포된 웹사이트도 사용할 수 있다는 뜻이다.6.2 리액트 개발 도구 설치https://ko.react.dev/learn/react-developer-tools React Developer Tools – ReactThe library for web and native user interfacesko.react.dev 6.3 리액트 개발 도구 활용하기6.3.1 컴포넌트 Components현재 리액트 애플리케이션의 컴포넌트 트리를.. 2024. 11. 18.
[TIL] zustand 사용 시 state.state와 getState()의 차이 1. useUserStore((state) => state.isLoggedIn)특징React 컴포넌트에서 주로 사용: 이 방식은 Zustand 상태를 React 컴포넌트에 연결합니다.Zustand의 상태(isLoggedIn)를 구독(subscribe) 합니다.상태가 변경되면 컴포넌트가 자동으로 다시 렌더링됩니다.상태 관리와 React의 재렌더링 메커니즘이 결합됩니다.예시function Header() { const isLoggedIn = useUserStore((state) => state.isLoggedIn); return {isLoggedIn ? "Logged In" : "Logged Out"};}장점React와 상태의 동기화가 자동으로 이루어짐.상태가 변경되었을 때 React 컴포넌트를 다시 렌.. 2024. 11. 17.
[모던리액트 Deep Dive] 5장 발표자료 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.웹 서비스에서 보여지는 거의 모든 부분을 이 상태로 관리한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장리액트처럼 SPA의 경우, 하나의 페이지로 앱을 다뤄야 하다보니 단 하나의 Controller가 여러가지 View와 Model을 관리하면서 복잡해졌다.한 View에서 일어난 상호작용 때문에 여러 Model이 변경되거나, 그 반대의 일이 벌어지는 부수효과도 여러 발생하여 어디서 발생한건지 추적이 어렵다보니 유지보수에도 안 좋다.양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함.. 2024. 11. 15.
[React] input 값을 useState로 상태 관리 할 때 defaultValue를 왜 사용하면 안될까? 사이드프로젝트 하는 중 마이페이지에서 닉네임을 가져와야하는데 작은 문제가 생겼다.처음에 로그인한 유저의 닉네임을 그대로 가져오기 위해 input 태그에 defaultValue={user.nickname}을 하고,닉네임 변경하기 위해 새로운 닉네임 값으로 value={nickname}을 속성에 넣었더니 아래처럼 에러 메세지가 찍혔다. value와 defaultValue를 같이 쓰지 말라는 거였다. 왜 안될까? 이유는 value와 defaultValue가 서로 다른 방식으로 동작하기 때문이다.defaultValue: 컴포넌트가 처음 렌더링될 때만 적용되는 초기 값. 상태가 아닌, 기본적으로 입력될 값으로 한 번만 설정된다.value: 컴포넌트의 상태를 직접적으로 반영한다. useState로 상태를 관리하고.. 2024. 11. 15.

티스토리툴바