본문 바로가기

전체 글

 (53)
[JS] 귤 고르기 (Map 사용하기) 문제 풀이해당 문제에서 구해야 하는 것은 귤 k개를 고를 때, 귤의 크기 차이를 최소화 하는 것이다.아이디어는 단순하게, 크기가 많은 것부터 선택해야 차이가 나는 귤의 종류를 최소화할 수 있다.주어진 배열에 크기에 따른 귤의 개수를 알아야 하므로 Map을 사용해서 구현했다. Mapkey-value 쌍의 형태로 데이터를 저장하는 자료구조이다.객체와 비슷하지만, 객체의 key 타입은 문자열과 Symbol만 가능하지만, Map은 문자열, 함수, 배열 등 모든 자료형이 가능하다는 차이점이 있다. 1. key-value 형태의 이터러블을 인수로 전달const map = new Map(); // Map(0) {}const map = new Map([['k1', 'v1'], ['k2', 'v2']]) // Map(..
[JS] 소수 찾기 (에라토스테네스의 체) 소수는 1과 자기 자신만을 약수로 가지는 수를 말한다.소수를 구하는 대표적인 방법으로는 brute force로 제곱근까지 단순 나눗셈을 하는 방법, 에라토스테네스의 체가 있다. 에라토스테네스의 체를 구현해보고, gpt와 함께 개선점을 찾았다 에라토스테네스의 체 O(N * log log N)에라토스테네스의 체는 다수의 소수(2~n)를 빠르게 구할 수 있는 알고리즘이다. 2부터 시작해서, 방문한 수의 모든 배수를 지우는 방법이다 (배수는 당연히 소수가 아니므로)결과적으로 남은 수는 모두 소수이다. 첫번째 코드개념을 보고 적용한 방법이다.function solution(n) { var answer = 0; const arr = Array(n+1).fill(true) // n+1 만큼의 배열을..
스파르타코딩클럽 내일배움캠프 React 트랙 5기 수료 후기 🎓 벚꽃이 개화할 때부터 한 여름까지 4.5개월 동안의 과정이 끝났다. 9-9으로 진행하기 때문에 식사 시간도 안맞고, 잠을 잘때가 많아서 오랜만에 가족들이랑 같이 저녁을 먹었다.잠오면 잠오는대로 실컷 자고, 뒹굴거리면서 책도 읽고 게임도 보고~ 이렇게 쉬어도 되나싶다1. 내일배움캠프(내배캠) 참여하기 전 백그라운드나는 전공자이고, 리액트로 간단한 웹사이트까지는 만들 수 있는 상태에서 내배캠에 참여했다.학교에서는 딱히 프론트 개발 경험이 없었고, 졸업반 때 짧게 일을 하면서 시작했다. 프론트엔드는 결과가 즉각적으로 보이고, 사용자 경험을 디자인한다는 점에서 매력적인 직무라고 생각한다. 2. 내배캠을 선택한 이유신청할 때가 새해쯤이었던 거 같은데, 새해 초에 느끼는 불안감과 도전의식으로 신청했다. - 강제성 ..
8/13 프로젝트 버그 수정 중 메모 ref 사용 시, input 초기값 설정controlled component = value + onChange → react가 제어, 입력값 상태로 유지uncontorlled component = defaultValue → DOM에 직접 접근 Object.keys(res).length>> "res(객체)에 요소가 있으면" 이라는 조건이 필요했는데 습관처럼 res.length 사용해서 undefined 나옴  res는 객체 (배열이 아님) ⇒ res.length는 undefined가 될 수 있다Object.keys는 객체 속성 이름을 배열로 반환const object1 = { a: 'somestring', b: 42, c: false,};console.log(Object.keys(object1)); ..
최종 프로젝트 중간회고 프로젝트 목표우리 팀은 포트폴리오 목적으로 로그인부터 구매까지의 사이클을 경험하기 위해 쇼핑몰을 진행하기로 했다브레인스토밍을 하면서 향 관련 제품(향수, 인센스, 핸드크림, 디퓨저 등)들을 구매/판매하는 이커머스 플랫폼을 제작하기로 하였다 주객전도가 되었지만, 향수 시장에 대해 조사해 본 결과 향수 시장은 팬데믹 시대 이후 30% 이상 증가했다고 한다 향도 자신의 아이덴티티 중에 하나가 되었고, 향이라는 주제로 다양한 선물 제품들이 쏟아지고 있다트렌드인 주제이며, 시장 크기도 증가하고 있어 완전 럭키비키니시티다 하지만 일반적인 쇼핑몰과의 차별점이 뭘까 라는 고민은 진행 중이다제품적으로는 불가능하고, 기능적으로 접근해야 하는데 이커머스에 적합하면서, 참신하며, 도전적으로 해볼 수 있는 그런 기능,,  가격..
프론트엔드 모의면접 질문 정리 하 질문을 받자마자 머리가 새하얘져서 아무말이나 했다..아 지능 모자라.. 오늘 받은 질문 정리 상태 관리를 왜 하고, 평소에 상태 관리를 어떻게 하나요?요약 ) 리액트에서 상태의 역할, 리렌더링, useState  리액트에서 상태 관리는 애플리케이션 UI와 데이터의 동기화를 유지하는데 중요한 역할을 합니다리액트에서는 기존 상태와 변경된 상태를 버추얼 돔을 통해 비교하고 실제 dom에 반영되어 리렌더링이 발생하게 됩니다 저는 가장 기본적으로 useState를 통해 상태관리를 합니다리렌더링의 조건에는 state가 변경이 되거나, props가 변경이되었을 때 리렌더링이 발생하게 됩니다 하지만 useState는 전역적으로 필요한 데이터 전달을 위해서는 props drilling이 발생하여, 실제 props의 ..
[CS] 개발하며 한번쯤은 만나는 CORS 오류 원인과 해결 방법 정리 CORS (Cross Origin Resource Sharing) : 교차 출처 리소스 공유CORS는 서로 다른 출처(origin) 간에 자원을 공유할 수 있도록 해주는 보안 매커니즘이다. 기본적으로 브라우저에서는 보안을 위해 같은 출처에서만 자원 공유를 허용한다 (= SOP)따라서 CORS 오류는 다른 Origin으로 리소스를 요청했을 때 발생한다. 다른 도메인으로 요청을 보내면 cross-origin HTTP 요청에 의해 요청 되며, 요청 헤더에 Origin 필드를 추가한다하지만 대부분의 브라우저들은 보안상의 이유로 cross-origin 요청을 제한한다 이때 SOP로 인한 보안상의 이유가 원인이다. SOP (Same Origin Policy) : 동일 출처 정책해당 정책은 브라우저의 기본 보안 정책..
tanstackQuery에서 useQuery, useMutation 타입 지정하기 React Query는 서버 상태 관리를 간단하고 효율적으로 할 수 있게 해주는 강력한 라이브러리이다React Query는 제네릭 타입 형식으로 지원하고 있다 그래서 제네릭을 잘 사용한다면 타입을 보장 받으면서 편리하게 데이터를 다룰 수 있다 ! 타입 지정을 안하면, 대부분 unknown, any 타입을 사용하고 있기 때문에 명시적으로 타입을 지정해서 비동기 상태의 타입 안정성을 확보하자 useQueryuseQuery 타입은 아래와 같다export function useQuery TQueryFnData , TError queryFn의 리턴값const { data, error } = useQuery(['todo'], getTodo);// data = number | undefined// error = Ax..

티스토리툴바