y.developer

Next.js에서 특정 시간이 지나면 원하는 화면을 출력하는 기능을 구현하려면, 서버 측에서 시간을 체크하거나 클라이언트 측에서 타이머를 설정할 수 있습니다. 이 예제에서는 클라이언트 측에서 타이머를 설정하여 특정 시간이 지나면 화면을 업데이트하는 방법을 설명하겠습니다.  1. 기본 설정Next.js 프로젝트를 설정하고 필요한 페이지를 만듭니다.  2. 클라이언트 측에서 특정 시간을 기다렸다가 화면 업데이트React의 useEffect와 useState 훅을 사용하여 클라이언트 측에서 시간을 체크하고, 특정 시간이 지나면 상태를 업데이트하여 화면을 변경할 수 있습니다.  2.1. pages/index.js 파일 생성 및 수정다음은 클라이언트 측에서 특정 시간이 지나면 화면을 업데이트하는 예제입니다:// ..

커스텀 훅과 유틸리티 함수는 기능적으로 유사할 수 있지만, 주로 사용 목적과 관례에 따라 구분된다. Utility 일반적으로 유용한 기능을 수행하는 함수 또는 클래스를 가리킨다. 예를 들어, 어떤 기능을 수행하는 유용한 함수나 도구를 만들어서 여러 곳에서 재사용할 때 "utility function"이라고 부른다. Utility Function (유틸리티 함수) 입력값 : 일반적으로 매개변수를 받아들여 특정 작업을 수행하도록 설계된다. 입력값은 함수에 필요한 데이터 또는 매개변수를 받는다. 반환값 : 주로 어떤 계산이나 변형을 거친 후 값을 반환한다. 이 값은 주로 함수 호출자에게 필요한 결과물이다. Hook 주로 프로그래밍에서 이벤트에 대응하는 함수 또는 코드 블록을 가리킨다. 예를 들어, React에..

2024.03.28 Careertone Challenge Study 04 React, Vue, Angular의 차이점은 무엇인가요? React 라이브러리 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달된다. jsx 문법을 사용한다 개발 생태계가 가장 잘 활성화 되어있다. 큰 규모의 어플리케이션 개발에 유리하다. Vue 프레임워크 양방향 바인딩이 구현 가능하다. 러닝커브가 가장 낮다. Angular 프레임워크 양방향 바인딩이 구현 가능하다. 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋다. 러닝커브가 크다. 상태관리 방법에 대해서 설명해주세요. 상태관리를 해야하는 이유 React는 SPA이기 때문에 JS로 DOM을 조작하는 방식이 아니라, 가상 DOM 방식을 사용해 화면에 있..

2024.03.26 Careertone Challenge Study 03 호이스팅에 대해 설명해주세요. 자바스크립트에서 변수 선언과 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상입니다. 자바스크립트 엔진이 코드를 실행하기 전에 런타임에서 일어납니다. 호이스팅으로 인해 변수나 함수를 선언하기 전에도 해당 요소에 접근할 수 있습니다. 하지만 이렇게 사용하는 것은 일반적으로 권장되지 않으며, 오류를 발생시킬 수 있습니다. let과 const는 호이스팅되지만, Temporal Dead Zone(TDZ)에 의해 선언되기 전에는 참조할 수 없습니다. 이는 변수를 사용하기 전에 선언해야 한다는 규칙을 강화해, 코드의 안정성을 높이는 데 도움이 됩니다. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(..

당신 근처, 당근마켓 월간 순수 사용자 1,800만을 자랑하는 지역 생활 중고거래 애플리케이션. 이전의 중고거래 플랫폼 중고나라, 번개장터에 비해 인지도는 낮았으나 입소문을 타면서 직거래만 선호하는 이용자들에게 널리 사용되어 이제는 11번가, G마켓과 같은 커머스 앱을 제치고 전체 쇼핑 앱 카테고리에서 쿠팡에 이은 2위에 올랐다. 다양한 콘텐츠로 확장 기업 소새 사이트 이외에도 콘텐츠 중심의 웹사이트가 존재한다. 당근이 중고거래 뿐만 아니라 동네 업체, 알바, 부동산, 중고차, 모임까지 다양한 콘텐츠를 다루고 있다. 동네 범위에서 이루어지는 커뮤니티라는 특색을 잘 살린 콘텐츠라고 생각한다. 중고거래를 하기 위해서 들어갔다가 자연스럽게 다른 콘텐츠도 살펴볼 수 있는 확장성 높은 아이템이다. 왜 웹이 필요했..

2024.03.21 Careertone Challenge Study 02 브라우저 주소창에 URL을 입력하면 일어나는 일 브라우저는 사용자가 선택한 자원(Resource)을 서버에 요청하고, 서버로부터 받은 응답(Response)을 브라우저에 렌더링(Rendering)합니다. URL 요청 : 사용자가 웹 브라우저에 URL을 입력하면, 브라우저는 URL의 도메인 이름을 DNS 서버에서 검색하여 IP주소를 찾습니다. HTTP 요청 생성 : 브라우저는 IP 주소와 URL 정보를 기반으로 HTTP 요청 메시지를 생성합니다. 이는 TCP 프로토콜을 사용하여 서버로 전송됩니다. 서버 처리 : 서버는 HTTP 요청 메시지를 받아서 처리하고, 요청된 웹 페이지 데이터를 검색합니다. HTTP 응답 전송 : 서버는 웹 페..

2024.03.19 Careertone Challenge Study 01 HTTPS는 무엇인가요? HTTPS(Hypertext Transfer Protocol Secure) HTTP가 전송하는 데이터가 암호화되지 않은 부분을 보완한 프로토콜이다. TLS 계층을 거치는 방식으로 HTTP를 운영하여 HTTP의 전송 메시지 바디(전송되는 데이터가 있는 부분)를 암호화시키는 것이다. HTTPS가 활성화된 배경 온라인 상거래나 사용자 인증 등 보안을 유지하는 데 사용되었다. 구글은 2014년 HTTPS 사용을 권고했고, 검색 엔진 가산점 정책에 HTTPS를 추가시켜서 많은 사이트가 전환하게끔 이끌었다. HTTP와 HTTPS의 차이점 보안 적용의 유무이다. 보안의 핵심에는 SSL/TLS 프로토콜과 CA 인증 메커니..

현업에서 유용하게 활용하는 라이브러리를 살펴보고 익혀보자. 추후 어떤 제품을 런칭하든 속도와 완성도를 대폭 끌어올릴 수 있을 것이다. shadcn/ui NextUI, MUI를 활용해본적 있다. UI 컴포넌트 요소를 빠르게 제작할 수 있지만, 라이브러리로 제공되며 프로젝트를 무겁게 만들고, 커스텀하기 어렵다는 단점이 있었다. 특히 색을 변경하거나 원하는 형태로 가공하기 어려웠다. shadcn/ui는 Radix, Tailwind CSS로 만들어진 재사용 가능한 컴포넌트를 제공한다. 종속성으로 설치하지 않으며 필요한 구성 요소를 직접 선택할 수 있다. Radix UI 커스텀하기 쉽다. 기본 동작은 내부적으로 처리하고 있고, 스타일은 개별 지정할 수 있으며, Compound Component Pattern으로 ..