Content-type 이란? Content-type은 우리가 fetch나 axios를 이용하여 server에 request를 보낼 때 body 에 담아 보내는 data의 유형을 명시하기 위해 존재하며 헤더에 담긴다. 그러므로 Content-type에 명시된 유형과 data의 유형이 같아야한다.  주요 Content-type 1. "application/json"  - 요즘 대부분 data 형식을 json으로 쓰다보니 application/json이 대부분이며 axios 의 기본 default content-type이 appliaction/json 으로 알고 있다. -   restful api 를 사용하게 되며 request를 날릴 때 대부분 json을 많이 사용하게 됨에 따라 자연스럽게 사용이 많이 늘..

비즈니스 로직 어떻게 분리할까?!리액트 컴포넌트에서 왜 비즈니스 로직을 분리하는지 그리고 분리를 하면 어떻게 하는지 예시를 통해 알아보려고 한다. 비즈니스 로직은 왜 분리할까!? 비즈니스 로직을 왜 분리할까를 생각해보았다.. 생각하자 마자 떠오른 말은 관심사의 분리였다. 우리는 렌더링되는 ui와 비즈니스 로직(어떤 로직을 통해 ui가 바뀌고 렌더링 되는지)을 분리함으로써 코드의 유지보수 및 가독성이 올라간다! 실제로 여러 글을 참고하니 코드의 유지보수성과 가독성 이야기가 꼭 나와 있었다.  코드를 통해 알아보자const Example = () => { const [count,setCount] =useState(0) const delayCount =() =>{ setTimeout(() => { ..

배경 react@18.2.0 의 memo에 관한 문서를 보다가 useMemo는 props가 이전 props와 shallow equal 하지 않을 때 리렌더링 된다고 하고 그 shallow equal를 판단할 때의 결과가 Object.is(prev값,next값) 의 결과와 같다고 나와 있다. 그래서 Object.is()라는 메서드에 관심을 같게 되어 MDN을 살펴보았다.  Object.is()의 개념Object.is() 정적 메서드는 두 값이 같은지 결정한다.(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is ) 여기서 나는 자바스크립트에서 같은값인지 판별하는 방식 2가지 == 와, ===를..

React useState 호출 시 무조거 렌더링이 된다?정답은...! 아니다 입니다.1. state가 원시타입일 경우 (Number, String, boolean, null, undefined ) -> setState 호출 이전의 state값과 새롭게 갱신된 state 값을 비교( 이전값 === 새로운값) 한 뒤 같지 않으면 렌더링이 이뤄지고 아니면 렌더링이 발생하지 않습니다. 2. state가 원시타입이 아니고 참조 타입(object, Symbol) 일 경우 ->위와 같은 방식으로 값 자체를 비교하지 않고 메모리 주소를 비교하여 렌더링이 발생할지 말지를 결정합니다. 실제론 동일한 형태의 객체여도 렌더링이 발생할 수 있다는 말이죠   export const Component =() =>{ cons..

기본적인 Zustand store 구독 방법import { create } from 'zustand'// store 생성const useStore = create((set) => ({ a:"a", b:"b", c:"c", d:"d",}))const Coponent = ()=>{ // a,b,c,d state 구독 const a = useStore((state)=> state.a) const b =useStore((state)=> state.b) const c =useStore((state)=> state.c) const d =useStore((state)=> state.d) return( a:{a} b:{b} ..

✅useMemo란?useMemo는 재렌더링 사이에 계산결과 값을 캐싱하는 hook이다.useMemo를 사용하면 재 렌더링 시 캐싱된 값을 그대로 사용하므로 불필요한 계산과정을 스킵하여 컴포넌트 렌더링 시간을 단축시킬 수 있다. 그렇다고 무조건 useMemo를 사용해야 되냐? 그것은 아니다. 오히려 대부분의 곳에서 useMemo는 오히려 불필요하고 특정한 상황에서 사용 시 성능상 이점을 가져 갈 수 있다.  ✅useMemo 예시 코드만약 `filterTodos(todos,tab)` 함수가 2초가 걸린다고 가정해보자 그럼 아래와같이 useMemo 없이 코드가 쓰였을때 `TodoList` 컴포넌트가 재랜더링이 될 때마다 `filterTodos(todos, tab)` 가 실행되면서 TodoList 컴포넌트가 렌..

회사에서 next.js를 활용할 날이 얼마 남지 않았다. 그래서...!Next.js를 빠르게 파악하고 싶었고 그 방법으로 강의를 듣는 방법을 택했다!인프런에서 강의를 탐색하던 중 현재기준으로 최신 버전인 v13을 활용하여 지도 서비스를 만드는 next js 강의를 발견했다. https://www.inflearn.com/course/nextjs-%EC%8B%9C%EC%9E%91-%EC%A7%80%EB%8F%84%EC%84%9C%EB%B9%84%EC%8A%A4 Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., 앞서가는 FE 개발자를 위한 Next.js! 매장 지도 서비스를 만들며 쉽..

✅배경이번에 회사에서 리액트로 리팩토링을 하게 되는데 컴포넌트를 편리하게 관리할 수 있는 방법이 있을까 고민하다 스토리북을 알게 되었다.  ✅스토리북?🤔공식홈페이지(https://storybook.js.org/)를 들어가서 쭉 읽어보니 스토리북을 사용하면 아래와 같은 장점들이 있다고 소개 된다- 🔵Develop UIs that are more durableIsolate components and pages and track their use cases as stories. Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, et..

📝회고🔥취업 전흠 ... 지금 생각해봐도 참 돌아왔다.서울 모대학교 기계과를 졸업하고 설계 엔지니어로 일하다 개발에 대해 흥미가 재직중에 혼자 시간 날때마다 틈틈히 html, js, css를 공부했고 나름 잘 맞는 것 같아 과감히 직장을 때려치웠다. ( 재직 기간 동안 혼자 독학했던 책은 do it! html+css+자바스크립트 웹 표준의 정석 과 혼자 공부하는 자바 스크립틍 였다 ) 그리고 7개월간 PWA 프론트엔드 국비과정을 거치고 거의 끝나자 마자 1개월간 취준의 시기를 가진 후 프론트엔드 개발자로 내 예상보다는 좋은 조건으로 첫 커리어를 시작했다. (내 기대치가 너무 낮았던 것두 있었지만..ㅎㅎ) 🔥취업 후 ~ 6개월 간 진짜 6개월간은 주말에도 일을 잘? 쳐내기 위해서 공부를 꾸준히 했던 ..

문제 🔽https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 다른사람 풀이 🔽function solution(participant, completion) { const map = new Map(); for(let i = 0; i 0) return k; } return 'nothing';} 내풀이🔽1. 성공function solution(participant, completion){ participant.sort() ..