기간 : 2022.07.04 ~ 2022.07.27팀장 : 홍성표(F)팀원 : 이수경(F), 백승재(F), 안효경(F), 배건희(B), 이샘미(B)프로젝트명 : 다배(다 같이 배우자, 다양하게 배우자)“원데이 클래스” 란 자신이 원하는 분야를 하루동안 체험할 수 있는

반응형 디자인 기본UI 최대한 신경 쓰기모든 기능 구현하기 + 유저 편의성 추가구현컴포넌트 재사용성 높이기타입스크립트useCallback 적용하기SSR 적용해서 배포하기도메인 연결하기프로젝트 핵심 유저플로우 gif 로 만들기경력 2~3년 차 위주로 지원하기Git 협업

도커는 개발 환경 요소들이 설치된 모습을 이미지로 저장한다.저장한 이미지를 클라우드에 올린다.이미지들이 서로 연결되서 동작하는 설정을 문서(Dockerfile)로 저장한다.새 컴퓨터에 가서 복사한 문서의 내용대로 이미지를 다운받아 설치한다. 가상 머신과 비슷하다고 볼

클라이언트 브라우저에서 어플리케이션을 렌더링을 진행한다.즉 어플리케이션 구동에 필요한 HTML, JS, CSS 파일 등을 모두 다운로드 한 뒤에 뷰가 구성되게 된다.초기 Javascript 파일을 전부 로드한 후, 뷰를 구성해야하기 때문에 어플리케이션이 커질수록 구동시

SPA 는 한 개의 Page 로 구성된 application 이다.SPA 는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.어떤 링크를 클린한다고

데이터 흐름에 맞게 알림(Based on Observer Pattern)을 보내 Subscriber가 데이터를 처리할 수 있도록 한다Observable은 옵저버 패턴을 구현한다. 객체의 상태 변화를 관찰하는 관찰자 목록을 객체에 등록하고,상태 변화가 있을 때마다 메서드

우리가 자유게시판에서 좋아요 버튼을 누를 때 환경에 따라 좋아요의 수가 올라가는 속도가 다르다.좋아요 버튼을 누르게 되면 백엔드에 likeBoard라는 api에 요청을 보내게 되고, 백엔드는 DB에 요청을 하게 된다.그럼 DB는 좋아요의 수를 올려두고 올린 좋아요 수를

HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다.따라서 HTTP 서버가 80번 포트에

인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소를 가지고 있는데 이를 ip라고 한다.ex) 115.68.24.88, 192.168.0.1ip는 사람이 이해하고 기억하기 어렵기 때문에 이를 위해서 각 ip에 이

사이트는 크게 반응형 사이트와 적응형 사이트 두가지로 나뉘게 된다.적응형 사이트의 대표적인 예로는 네이버가 있다.크기를 줄였을 때 사이즈가 같이 줄어들지 않고 덮이는 것을 적응형사이트라고 한다.반면에 배달에 민족같이 크기에 따라 이미지도 줄어드는것을 반응형 사이트라고

불필요한 렌더링을 줄이기 위해 memo 를 사용한다.react 에서 제공하고 있다.이렇게 memo 를 사용해주시고 state카운트 를 클릭해보시면 프리젠터는 렌더링이 되지않아 콘솔도 찍히지 않을 뿐더러 리액트 툴에도 보이지 않는다.자식컴포넌트는 memo 를 사용해 불필

페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술이다.하지만 스크롤이 내려가면서 필요한 때가 되면 로드가 되어야 한다.예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정해보자.이미지를 모두 다 로드가 될 때까지 기다리게 된다면, 페이지의 로

위의 함수는 result1 이 실행되고 난 후에 result2가 실행이 되고, result2가 실행된 후에, result3이 실행된다.따라서 onClickPromise 함수의 경우 약 6초의 시간이 소요된다.Promise.all() 의 경우에는 Promise.all()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.리듀서 함수는 네 개의 인자를 가진다.누산기 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src)리듀서 함수의 반환 값은 누산기에

JWT에는 Access Token, Refresh Token 두 가지 종류의 토큰이 있다.Access Token을 통해서 민감한 정보에 접근할 수 있으며 두 가지 토큰 중에서 실제 권한에 접근하는 토큰이다.짧은 유효기간을 가지며 Refresh Token을 통해서 만료된

함수의 인자로 들어가는 함수특정한 API 요청이 끝난 뒤, 그 결과 값을 가지고 다른 요청을 실행시켜야 하는 상황을 가정해보자.그럴 때 이런 식으로 callback 함수를 사용해서 요청을 실행할 수 있다.async/await나 promise 문법이 아직 존재하지 않았던

자바스크립트에서 array 구조 안에 또 다른 array 를 인덱스로 가질 때, array 를 평평하게 만드는 작업을 flatten 이라고 한다.flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.반환 값 : 하위 배

함수가 함수 내부에서 자기 자신을 호출하는 함수를 재귀 함수 (Recursive function) 라고 한다.이러한 재귀 함수는 재귀 호출을 이용해 간단하게 문제를 해결할 수 있는 특정 경우에 사용된다.반복문재귀함수

인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법.2개의 인자를 받는 함수.커링 기법을 적용한 방식.화살표 함수로 변형.커링 기법을 적용할 때는 인자의 순서가 매우 중요하다.변동 가능성이 적은 인자는 앞에, 변동 가능성이 높은 인자는 뒤에 배치해

HOC는 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트라고 생각하면 된다.다른 컴포넌트보다 먼저 실행되게 하려면 어떻게 해야할까?권한 분기에서 사용자에 따라 다른 페이지를 보여주고 싶다 했을 때 예를 들어 로그인을 한 유저와 하지 않은 유저가 있을 때