본문 바로가기

분류 전체보기137

[모던 리액트 Deep Dive] 3장 리액트 훅 깊게 살펴보기 3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import { useState } from "react";const [state, setState] = useState(initialState); initialState에는 state의 초깃값을 넘겨준다. 아무런 값이 없으면 undefined다.useState 훅의 반환 값은 배열이며, 배열의 첫번째 원소로 state 값 자체를 사용할 수 있고, 두번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있다.useState의 클로저는 useState 내부에 선언된 함수(setState)가 함수의 실행이 종료된 이후에도(useState가 호출된 .. 2024. 11. 10.
[프로그래머스 Lv.1] k번째 수 function solution(array, commands) { let answer = []; for(var i=0; i(a - b)); answer.push(list[commands[i][2]-1]); } return answer;} 2024. 11. 8.
[프로그래머스 Lv.1] 문자열 내 마음대로 정렬하기 javascript function solution(strings, n) { return strings.sort((a, b) => { // n번째 글자가 다르면 n번째 글자를 기준으로 정렬 if (a[n] !== b[n]) { return a[n].localeCompare(b[n]); } // n번째 글자가 같으면 전체 문자열을 기준으로 정렬 return a.localeCompare(b); });} 이번문제에서도 localeCompare() 라는 메서드를 새로 알게 되었다.referenceStr가 compareString 전 혹은 뒤에 오는지 또는 동등한지를 나타내는 정수를 반환합니다.compareString 전에 reference.. 2024. 11. 6.
[모던 리액트 Deep Dive] 2장 리액트 핵심 요소 깊게 살펴보기 2.1 JSX란2.1.1 JSX의 정의JSX는 자바스크립트 표준이 아닌 페이스북 팀에서 만든 새로운 규칙이며, 반드시 자바스크립트 코드로 변환되어야 한다.JSX의 목표는 JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, 이 JSX를 트랜스파일이라는 과정을 거쳐 자바스크립트가 이해할 수 있는 코드로 변경하는 것이다. JSX는 JSXElement, JSXAttributes, JSXChildren, JSXString 네 가지로 구성되어 있으며, 개발자는 이는 확장성이 용이하게 디자인된 문법으로 이해할 필요가 있다 .JSXOpeningElementJSXClosingElementJSXSelfClosingElementJSXFragmentchildren 사용자가 컴포넌트를 만들어 사용할 때에는 반.. 2024. 11. 6.
[프로그래머스 Lv.1] 가장 가까운 같은 숫자 javascript function solution(s) { var answer = []; let str = s.split(""); for (let i = 0; i  이번 문제를 풀면서 lastIndexOf()에 대해 공부했다. mdn 문서를 보면 해당 메서드는lastIndexOf(searchElement, fromIndex)Array 인스턴스의 lastIndexOf() 메서드는 배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나, 해당 요소가 없으면 -1을 반환합니다. 배열은 fromIndex에서 시작하여 역방향으로 검색됩니다. 라고 되어있다. 두번째 인자의 사용이 좀 헷갈리는데 아래 제시한 예문을 보면const numbers = [2, 5, 9, 2];numbers.lastIndexOf.. 2024. 11. 5.
[모던리액트 Deep Dive] 1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 리액트와 자바스크립트리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 웹 애플리케이션을 더 쉽고 빠르게 개발할 수 있도록 도와준다. 리액트는 UI를 컴포넌트라는 독립적인 단위로 구성하여 코드의 재사용성과 관리 편의성을 높인다.자바스크립트는 웹 브라우저에서 실행되는 프로그래밍 언어이다. 우리가 웹 페이지에서 상호작용하는 기능들을 구현할 수 있게 해준다. 예를 들어, 버튼을 클릭했을 때 뭔가가 일어나게 하는 것이 자바스크립트를 통해 가능한 것이다.1.1  자바스크립트의 동등 비교와 데이터 타입자바스크립트에서 동등 비교는 리액트의 가상 DOM과 실제 DOM 비교, 렌더링판단, 메모이제이션등 여러 작업의 기초이므로 중요하다.모든 값은 데이터 타입을 가지며, 원시 타입과 객체 타입으로 나뉘고, .. 2024. 11. 5.
[프로그래머스 Lv.1] 숫자 문자열과 영단어 function solution(s) { let arr = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"] for(let i=0; i 2024. 11. 4.
[프로그래머스 Lv.1] 시저 암호/두개 뽑아서 더하기 javascript 시저암호function solution(s, n) { let upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let lower = "abcdefghijklmnopqrstuvwxyz"; let answer= ''; for(let i =0; i = strArr.length) index -= strArr.length; answer += strArr[index]; } return answer;}두개 뽑아서 더하기function solution(numbers) { let answer = []; //경우의 수 만큼 배열 안의 두개의 숫자를 더해 answer에 넣기 for(let i=0; i a-b);} 2024. 11. 1.
[프로그래머스 Lv.1] 최소직사각형 function solution(sizes) { const width = []; const height = []; for(let i = 0; i 2024. 10. 31.
[프로그래머스 Lv.1] 삼총사 function solution(number) { let count = 0; for(let i=0; i 2024. 10. 29.
[프로그래머스 Lv.1] 3진법 뒤집기 풀이 function solution(n) { //n을 3진법으로 바꿔 let ternary = n.toString(3); //3진법이 된걸 뒤집어 reverse let reversTernary = ternary.split("").reverse(); let sum = reversTernary.join("") //reverse를 다시 10진법으로 바꿔 let answer = parseInt(sum, 3) return answer;} 코드 설명3진법 변환: n.toString(3)를 사용하여 10진수 n을 3진법 문자열로 변환합니다.문자열 뒤집기: split("") 메서드를 사용하여 문자열을 문자 배열로 변환한 후, reverse()로 배열을 뒤집습니다.배열을 문자열로 .. 2024. 10. 28.
[TIL] zustand로 로그인 상태 유지 및 로그아웃 구현 (+supabase, typescript) + 수정 supabase를 통하여 로그인과 회원가입 기능을 구현했다. 그런데 막상 구현하고 나니 또 뭘 해야할지 모르겠는거임..!로그인을 했으니까 마이페이지가 생기고 이동할 수 있어야 하고 그럴려면 로그인한 유저의 상태가 유지되고 데이터도 브라우저가 갖고 있어야겠고 그러기 위해서 유저데이터를 필요할 때마다 필요한 곳에 불러와야겠는거임.그래서 지금 하고 있는 사이드프로젝트의 규모가 크지 않으니 context api를 사용할까 했음.그런데 그렇게 되면 원하지 않은 곳에서 불필요한 리렌더링 일어날 것 같아 zustand를 사용하기로 함!zustand는 필요할 때에 원하는 데이터만 바로 불러와 쓸 수 있는 간편함이 좋았고,provider를 쓰지 않아 상태 변경 시 불필요한 리렌더링을 제어할 수 있기 때문임! 선행 작업으.. 2024. 10. 26.

티스토리툴바