S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다.물

브라우저 렌더링 기본동작 순서 Client가 WEB Server 에게 받은 IP 주소로 요청하면,WEB Server 는 Client 에게 해당 웹페이지의 index.html 등의 파일들을 보내준다. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여

문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 제한 ...

문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 r...

업로드중..길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다.배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최

HTTP와 HTTPS의 차이점 먼저 HTTP란? HTTP(Hypertext Transfer Protocol)이란 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다. 웹서핑시 서버에서 자신의 브라우저로 데이터를 전송해 주는 용도로 가장 많이 사용된다. 하지만 HTTP는 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않는다는 점...

첫번째 인자는 메모이제이션 할 콜백함수, 두번째 인자는 의존성 배열을 받음 원하는 요소의 리랜더링을 방지할 수 있다 메모화된 콜백에서 상태 업데이트 Effect가 너무 자주 발생하지 않도록 방지 custom hook 최적화

TCP 정의 TCP는 신뢰성 있는 데이터 전송을 지원하는 연결 지향형 프로토콜이다. 연결 지향형인 TCP는 3-way handshaking 이라는 과정을 통해 연결 후 통신을 시작하는데, 흐름 제어와 혼잡 제어를 지원하며 데이터의 순서를 보장 한다. 흐름 제어 :

서론 프론트엔드개발자라면 react,js 뿐만아니라 cs전공지식도 중요하다. 운영체제,서버,알고리즘/자료구조,디자인패턴 등등 알아야 할게 많지만 개발자라면 네트워크 지식에 대해서 특히 빠삭해야한다고 생각한다. 심지어 나는 정보통신전공이다, 이쪽 직종에서 일해본 만큼 이

메모이제이션?? 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때(반복적일때) 재사용하는 기법이다. React에서 제공하는 메모이제이션기법은 React.memo, useMemo와 useCallback 등이 있다. React.memo React.memo 는 컴포넌트 자체를 메모이제이션한다. 부모 컴포넌트로 넘겨받는 props가 같다면 메모이...

context API?? react에서 데이터를 다루는 방법으로는 Props, state가 익숙할텐데 추가로 Context 가 있다고 한다. 보통 상태관리 라이브러리를 사용 안할시에는 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트, 즉, 위에서 아래로만 한쪽으로 데이터가 흐르게 된다. 이것의 문제점으로 알다시피 props drill...

기존 MVC에서 파생된, Model과 View 간의 의존성이 없는 아키텍처 패턴이다.MVP는 Model , View, Presenter로 구성돼 있다.모든 입력(input,event)들은 View로 전달이 된다.Presenter는 입력에 해당하는 Model을 업데이트한

Recoil , react-query를 사용한 이유Redux의 보일러플레이트 문제기존 리덕스에서 상태관리를 하려면 기본적인 client단 상태관리 로직인데도 아래처럼 초기세팅을 해줘야 할게 많습니다. 전역state가 추가 될 때 마다 store에 reducer도 넣어줘

파일명은 useModal 이런식으로 작성 해야함. 아래는 커스텀훅 예시이다.import 로 useModal 커스텀 훅을 불러온다.그리고 구조분해할당으로 함수들을 가져온다단. 위에 코드를 보다시피 배열형태로 돼있으므로 순서를 명시해야한다!가져온 함수를 원하는 메서드에서

ts에서 react query를 사용하려면 타입지정은 필수이다.타입 지정한 는 types 폴더안에 타입지정을 해두었다.가져올 공용 api의 데이터구조에 맞게 타입을 지정하였고 useQuery에 선언을 했다.데이터의 뎁스가 너무 깊다보니 하위객체까지 접근 후 변수에 할당

sidebar에서 랜더링된 데이터리스트중에 하나를 클릭하면 해당 마커로 확대되어야한다.그러기 위해서는 recoil로 전역 state값 하나 만든 후 이벤트핸들러 함수를 만들고 받아온 인자값을 전역에 넣어준다.그 후에 지도페이지로 이동후 디펜던시에 전역상태값을 넣은 후에

에러내용해결과정기존 index.html 파일에서 환경변수로 api키를 지정해놨다 MAP_API_KEY 부분 뒤에 추가로 &autoload=false 을 설정 해봤지만 에러는 없어지지 않았다. 어차피 개발자도구에서 index.html에 있는 api키값은 숨길수가 없기에

tsconfig.json 파일에서 경로 별칭을 할 수있다.어느 페이지에서든간에 import 해올때 @/를 하면 src폴더 내에서 부터 파일을 찾을 수 있다.기본 불러오기import 사용하기import를 하여서 이미지를 불러오는 방법이다.require 사용하기requir

와이어프레임 재구성 1. 논의내용 헤더 컴포넌트에 검색 기능에 관해 논의. 검색을 도시명으로 할지 관광지/테마/도시명으로 할지 논의. 해결 UX상으로 도시명 으로만 검색이 자연스럽고 사용자에게도 편할 것 같아서 검색기능은 도시명만 가능하도록 함. 대신 검색기능이 추가

먼저 kakaomap api를 사용하기 위해서는 애플리케이션 등록 후 키를 발급 받아야한다.카카오 어플리케이션 등록애플리케이션 키는 javascript 키를 쓰면 된다.index.html 파일에 해당 링크를 복붙한다.나같은경우는 환경변수로 지정해 줬는데 그냥 키값 붙여