투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

프로젝트에서 카카오맵에 api key를 관리할때 보안처리를 어떻게 해줘야하나 고민이 많았다. 처음에는 index.html파일안에 키 자체를 넣어서 보관을 했었는데 이렇게 하면 api보안키인데 위에 코드처럼 그대로 노출이 되다보니 보안적으로 안전하지 않고 실제로 권장되는 로직이 아니라는걸 알게되었다. 카카오맵 API 키를 보안 처리하려면 다음과 같은 방법을 알게되었다. 서버 측 엔드포인트 사용: 카카오맵 API 키를 직접 클라이언트 측에서 사용하지 말고, 서버 측 엔드포인트를 통해 카카오맵 API를 호출하는 방법을 사용합니다. 클라이언트는 서버에 요청을 보내고, 서버에서 카카오맵 API를 호출하여 응답을 클라이언트로 전달합니다. 이렇게 하면 API 키가 클라이언트에 노출되지 않으므로 보안이 강화됩니다. 서..

실전프로젝트 1차 멘토링 1. styled-component를 전역으로 사용하는 style이 아닌걸 컴포넌트파일 아래에 넣으면 너무 길어지는데 컴포넌트 별로 따로 파일을 만들어서 사용하는게 좋을까요? 멘토님은 style 폴더를 만들어서 사용할 모든 css를 스타일 폴더안에서 관리를 했고 테마 같은건 common파일에 정리를 하고, 외부에는 각각 기능별로 사용할 것 들을 만들었다고함. 2. 저희가 구현하는거에서 전역으로 따로 사용해야하는게 어떤게 있는지 모르겠는데 recoil을 사용해서 전역관리를 해보고싶은데 어떤걸 전역관리를 하면 좋을까요? 닉네임은 API요청할때 가져오면 되서 recoil에는 ID정도만 가지고 있는다고 한다. 뭔가 신청하는 과정에서 내가 돌아가야하는 URL이 있다면 전역상태관리를 한고,..

약국 전체조회 하면서 지역구 셀렉트를 만들어야되는 상황이였는데, 자바스크립트에 내장되어있는 select를 사용을할지 라이브러리를 사용해야할지 결정해야했다. 디자이너님이 만들어준 UI처럼 만들기엔 기본 select로 직접 구현할때 디자인을 주기에 한계가 있었고 셀렉트 박스를 닫고 싶을땐 useRef를 사용해야 하는점이 있었다. 그리고 기능을 기간내에 목표로 잡았기 때문에 좋은 라이브러리를 가져와서 잘 사용하는것도 좋은 방법이라고 생각해서 react-select 라이브러리를 사용했다. react-select라이브러리를 사용해서 구현했을때도 css를 라이브러리에 맞춰서 해야되는점에 처음에 도입했을땐 어려운 점 이 이만저만이 아니였다.🥹 const StyledSelect = styled(Select)` back..

POST요청으로 검색한친구를 response로 어떻게 바깥으로 빼와서 사용할 수 있는지가 첫 문제였다. 시도방법 1. onSuccess안에서 변수에 담아서 빼낸다. 지역변수기 때문에 밖에서 사용할 수 없다. 2. retrun문에 담아서 빼낸다. const mutation = useMutation(detailSprint,{ onSuccess:(data)=>{ alert('검색요청 성공') return data }, onError:(error)=>{ console.log(error) } }) const userProfile = mutation.data.userInfos data가 비동기 작업의 결과를 포함하는 개체여서 사용할 수없다고 에러가 난다. 3. retrun에 data.userInfos를 조회를 하면..

모듈설치 npm install --save express npm install --save http npm install --save socket.io //backend npm install --save socket.io-client //frontend onMessage 웹 소켓(WebSocket)은 클라이언트와 서버 간에 양방향 통신을 가능하게 해주는 기술이다. 이를 이용하면 서버에서 클라이언트로 데이터를 보내거나, 클라이언트에서 서버로 데이터를 보낼 수 있다. onmessage 메서드는 웹 소켓에서 데이터를 수신할 때 자동으로 호출되는 콜백 함수있다. 예를 들어, 서버에서 클라이언트로 데이터를 보낼 때, 클라이언트 측의 웹 소켓에서 onmessage 메서드가 자동으로 호출된다. onmessage 메서..

로그인을 하고나서 토큰과 유저정보를 같이 Response에 담겨서 오게되는데 그걸 redux toolkit으로 담아서 홈화면에서 사용을 하려고 했는데 새로고침하면 리덕스에 저장된게 사라져서 홈화면에 그려주지를 못한다. 이유는 브라우저의 새로고침으로 인해 redux상태가 초기화 되기 때문이라고한다. 이걸 해결하기 위해서 로컬, 세션, 쿠키를 이용하는 방법이 있다. 리덕스 상태를 유지하기 위해서는 쿠키, 로컬 스토리지, 세션 중에서 어떤 것을 선택할지는 상황과 요구사항에 따라 다를 수 있다. 각각의 방법에는 장단점이 있으므로, 아래의 내용을 고려하여 선택할 수 있다: 쿠키: 쿠키는 클라이언트 측에 저장되는 작은 데이터 조각입니다. 주로 인증 토큰을 쿠키에 저장하여 사용한다. 쿠키는 브라우저가 서버에 요청을 ..

주로 렌더링 성능을 최적화해야 하는 상황에서 사용된다. 이 Hook을 사용하면 이벤트 핸드럴 함수를 필요할 때만 생성할 수 있다. 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두번째 파라미터에는 배열을 넣으면 된다. 이 배열에는 어떤 값이 바뀌었을때 함수를 새로 생성해야 하는지 명시해야 한다. 함수 내부에서 상태 값에 의존해야 할 떄는 그 값을 반드시 두번째 파라미터 안에 포함시켜 주어야 한다. useCallback은 결국 useMemo로 함수를 반호나하는 상황에서 더 편하게 사용할 수 있는 Hool이다. 숫자, 문자열, 객체처럼 일반 값을 재사용 하려면 useM..

React.memos를 이용하면 메모이제이션 기법으로 컴포넌트가 불필요하게 리렌더되는 상황을 방지할 수 있다. 고차컴포넌트 고차 컴포넌트는 컴포넌트의 기능을 다시 사용하기 위한 리액트의 고급기술로, useMemo, useEffect처럼 use 키워드가 앞에 붙는 리액트 훅과는 다르다. 고차 컴포넌트는 인수로 전달된 컴포넌트를 새로운 컴포넌트로 반환하는 함수이다. 고차컴포넌트를 이용하면 횡단 관심가 문제를 효율적으로 해결할 수 있다고 한다. 횡단 관심사 횡단 관심사란 크로스 커팅 관심사라고도 하는데, 프로그래밍에서 비즈니스 로직과 구분되는 공통 기능을 지칭할 떄 사용하는 용어이다. 횡단 관심사는 주로 로깅, 데이터베이스 접속, 인가 등 여러 곳에서 호출해 사용하는 코드들을 말한다. 컴포넌트의 핵심기능을 세..