woo.oing

프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr ✓ 풀이과정function solution(players, callings) { const answer = [...players]; for (const player of callings) { let index = answer.indexOf(player); [answer[index - 1], answer[index]] = [answer[index], answer[index - 1]]; } return answer;} 첫 시도는 불린 선수들의 위치를 찾아서 상위 랭크 선수와 위치만 교체하면 되겠다고 생각했는데index를 찾기 위해 사용한 indexO..

Code Runner - Visual Studio MarketplaceExtension for Visual Studio Code - Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C,marketplace.visualstudio.com programmer 문제를 풀 때 한문제씩 파일을 만들어서 vscode extension인 code runner를 사용해서 결과 출..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 인증 vs 인가인증사용자의 신원을 확인하는 과정인가인증된 사용자의 권한을 확인하는 과정 세션 방식 vs 토큰 방식 세션 기반 인증 방식토큰 기반 인증 방식개념세션 객체를 통해 인증을 처리하는 방식토큰을 이용해 인증을 처리하는 방식서버 상태서버 상태 저장서버 상태 저장 X상태 저장 위치서버클라이언트 토큰 방식의 JWT(JSON Web Token)토큰 기반 인증 방식에서 대표적으로 사용되며 점(.)을 구분으로 Header.Payload.Signature 세 부분으로 구성된다

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 프로젝트에 supabase를 설치하고 사용까지 해보겠습니다 1. 계정 생성아래 사이트에 접속하여 계정을 만들어줍니다 https://supabase.com/ Supabase | The Postgres Development Platform.Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com 2. 프로..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 캐시 정규화 적용 예제1. 현재 동일한 데이터가 두 번 중복으로 저장되어 있는 상태 ["todo","list"] 쿼리[ { id: "1", content: "Todo 1", isDone: true }, { id: "2", content: "Todo 2", isDone: true }, { id: "3", content: "Todo 3", isDone: false },]; ["todo","detail","1"] 쿼리{ id: "1", content: "Todo 1", isDone: true } 2. 정규화 적용 후["todo","list"] 쿼리..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w ← 이전 글 보기 [React] Tanstack Query 사용해 보기아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 가장 대표적인 서버 상태 관리 라이브러리인 tanstack query를 사용해보woooing.tistory.com 데이터 조회(get)를 관리하는 useQuery 외에도 데이터 수정(post..) 시에는 useMutation 을 사용합니다 const { mutate, isPending } = useMutation({ mut..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 가장 대표적인 서버 상태 관리 라이브러리인 Tanstack Query를 사용하여 프론트엔드에서 API 조회를 디테일하게 제어할 수 있습니다기존에 react query라는 이름으로 알고 있었는데 리액트 뿐만 아니라 다른 프레임워크도 지원하게 되면서 tanstack query라는 이름으로 변경되었습니다 https://tanstack.com/query/latest TanStack QueryPowerful asynchronous state management, server-state utilities and data fetching. Fetch, cache,..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 이전 글에 이어서 이번에는 zustand의 middlewares를 사용해 보겠습니다 ← 이전 글 보기 [React] 전역 상태 관리 Zustand 사용해보기가볍고 배우기 쉬운 간단한 사용법으로 react 상태 관리 라이브러리로 가장 많이 사용한다는 zustand를 처음 사용해 봤습니다react 프로젝트에 설치부터 사용까지 작성해 보겠습니다! https://zustand.docwoooing.tistory.com 1. combine상태와 함수를 합쳐주며 타입 자동 추론을 제공합니다create( combine({ count: 0 }, (set, get..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY SPA vs MPA페이지 구조의 차이SPA(Single Page Application)하나의 페이지로 처리MPA(Multi Page Application)다중의 페이지로 처리 CSR vs SSR렌더링 방식의 차이CSR(Client Side Rendering)클라이언트에서 페이지를 그리는 방식SSR(Server Side Rendering)서버에서 완성된 페이지를 전달받는 방식 History API 예제history.pushState({ page: page }, `Title ${page}`, `/${page}`);window.addEve..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY JS에서의 this → 자신이 속한 객체함수의 경우 함수가 호출되는 방법에 따라 this에 바인딩 되는 값이 달라집니다 1. 전역공간 호출 예제console.log(this); 출력: [object Window] 2. 일반함수 호출 예제const test = () => { console.log(this);};test(); 출력: [object Window] 3. 메서드 호출 예제const cafe = { brand: "이디야", menu: "아메리카노", print: function () { console.log(thi..