https://nextjs.org/docs/app/api-reference/next-config-js/productionBrowserSourceMaps next.config.js Options: productionBrowserSourceMaps | Next.js Using App Router Features available in /app nextjs.org 위 문서에 대한 번역을 진행합니다. 번역시점은 05-10로 공식문서의 추가적인 업데이트가 있을 수 있습니다. DeepL translator와 ChatGPT에 의존해서 번역하고 있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 이에 대한 피드백은 댓글로 알려주시면 감사하겠습니다. 한글로 번역하는 것이 더 ..
https://nextjs.org/docs/app/api-reference/next-config-js/poweredByHeader next.config.js Options: poweredByHeader | Next.js Using App Router Features available in /app nextjs.org 위 문서에 대한 번역을 진행합니다. 번역시점은 05-10로 공식문서의 추가적인 업데이트가 있을 수 있습니다. DeepL translator와 ChatGPT에 의존해서 번역하고 있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 이에 대한 피드백은 댓글로 알려주시면 감사하겠습니다. 한글로 번역하는 것이 더 어색한 경우 원문을 먼저 표기 하겠습니다. ..
https://nextjs.org/docs/app/api-reference/next-config-js/pageExtensions next.config.js Options: pageExtensions | Next.js By default, Next.js accepts files with the following extensions: .tsx, .ts, .jsx, .js. This can be modified to allow other extensions like markdown (.md, .mdx). For custom advanced configuration of Next.js, you can create a next.config.js or next.config.mj nextjs.org 위 문서에 대한 ..
자바스크립트에서는 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택하고 특정 이벤트가 발생하면 변화를 주도록 설정을 해야 한다. 만약 사용자와의 상호작용이 잦아지고 이를 동적으로 화면에 표현을 하려면 규칙이 다양해지고 복잡해질 것이다. 그렇게 된다면 유지보수도 어려워질 것이고 애플리케이션의 규모가 크다면 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해질 수 있다. 처리해야 할 이벤트, 관리해야할 상태값, DOM 도 다양해진다면 업데이트를 하는 규칙도 많이 복잡해지기 때문에 그래서 생겨난 프레임워크들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트하는 작업을 간소화해 주는 방식으로 웹개발의 어려움을 해결했다. 하지만 리액트는 어떠한 상태가..
보안/인증 주간이었습니다. 섹션 2에서 서버 코드 짜는 것을 특히 어려워했던 저는 이번주에도 페어활동이 아니었다면 과제 시작조차 못했을 것 같습니다. 이번주에 배운 내용은 크게 아래와 같습니다. 1. http/https 2. 쿠키/세션 3. 토큰 4. OAuth 블로깅 챌린지로 지난 유닛의 http의 개념을 간단하게 복습했었는데 이번 유닛에는 https서버를 직접 만들어보는 실습을 가졌습니다. 로컬환경에서 mkcert라는 프로그램을 이용해서 인증서를 생성하고 인증서를 통해 간단하게 HTTPS서버를 만들어 볼 수 있었습니다. HTTPS는 HTTP와는 달리 요청과 응답으로 오가는 내용을 암호화해서 더 안전합니다. 이 암호화 방식에는 2가지가 있습니다. 대칭키와 비대칭 키 암호화 방식이 있는데 후자의 방식..
OAuth 직접 서버에서 인증과 관련된 로직을 처리할 필요 없이 인증을 중개하는 외부 서버를 이용한기술 학습목표 OAuth의 키워드를 설명할 수 있다. Authorization Code와 Access Token의 차이에 대해 이해할 수 있다. Authorization 서버와 Resource 서버의 차이에 대해 이해할 수 있다. 소셜 로그인 인증 방식은 OAuth 2.0이라는 기술을 바탕으로 구현된다. 전통적으로 서버에서 인증을 처리해주는것과 달리 OAuth는 인증을 중개해주는 매커니즘이다. 보안된 리소스가 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜이다. 이미 사용자 정보를 가지고 있는 웹 서비스에서 사용자의 인증을 대신 해주고, 접근 권한에 대한 토큰을 발급한 후, 이를..
Hashing 가장 많이 쓰이는 암호와 방식 중 하나. 복호화가 가능한 다른 암호화 방식들과 달리, 해싱은 암호화만 가능하다. 🔗해싱해보기 솔트란? 소금을 치듯이 해싱 이전 값에 임의의 값을 더해 데이터라 유출되더라도 해싱 이전의 값을 알아내기 더욱 어렵게 만드는방법 해싱의 목적? - 왜 복호화가 불가능한 암호화 방식 사용? 데이터 그 자체 사용하는 것이 아니라 동일한 데이터를 사용하고 있는지만 체크하기 때문 - 해싱은 민감한 데이터를 다루어야 하는 상황에서 데이터 유출의 위험은 줄이면서 데이터의 유효성을 검증하기 위해서 사용되는 단방향 암호화 방식 Token 토큰을 사용하면 사용자의 인증 정보를 서버가 아닌 클라이언트 측에 저장할 수 있다. 세션 기반 인증의 한계? - 세션 기반 인증은 서버에서 유저의..
cookie 쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 쿠키를 이용하는 것은 서버 -> 클라이언트, 클라이언트 -> 서버로 쿠키를 전송하는 것도 포함한다. 서버가 클라이언트에 특정한 데이터를 저장할 수 있다. 데이터를 저장한 후 아무 때나 데이터를 가져올 수는 없다. 데이터를 저장한 이후 특정 조건들이 만족 되어야 다시 가져올 수 있기 때문이다. 여기서 1.특정 조건들은 아래와 같은 코드처럼 http 헤더를 이용해 2.쿠키 옵션으로 표현할 수 있다. 1. 특정 조건 'Set-Cookie':[ 'cookie=newJeans', 'Secure=Secure; Secure', 'HttpOnly=HttpOnly; HttpOnly'..
터널링이란 인터넷상에서 데이터를 안전하게 전송하기 위해 사용되는 기술입니다. 비용과 시간이 많이 드는 인증서 방식과는 달리 공용 인터넷을 사용해서 데이터를 안전하게 전송합니다. ngrok은 HTTP로 만들어진 서버를 HTTPS 프로토콜로 터널링 해주는 프로그램입니다. 로컬 서버를 외부에서 접근 할 수 있도록 터널을 열고, 공용 인터넷을 통해 데이터를 전송할 때, 데이터를 암호화하고 안전하게 전송합니다. 터미널에 ngrok http [포트번호] 이렇게 입력했더니 저런 오류 페이지가 한무 반복되었다.. HTTPS를 포워딩하려면 ngrok 홈페이지에서 인증토큰을 받게 되는데 이를 등록하면 HTTP와 다르게 주소형식으로 입력을 해야한다. 따라서 터미널에 아래와 같이 입력을 한다. ngrok http https:..
주간회고를 쓴다고 다짐한 지 2주 만에 처음 써보는 주간회고입니다. 굉장히 떨리네요.. 우선 이번주에 무엇을 배웠는지 살펴보겠습니다. 1. React 상태관리 2. 웹표준&접근성 이렇게 크게 두가지를 배웠습니다. React에서는 useState훅으로 상태관리를 합니다. 만약 부모컴포넌트의 상태를 자식 컴포넌트가 변경을 하게 될 경우에는 직접 변경하지 못하고 상태변경함수를 props를 통해 객체로 전달받아 간접적으로 상태를 변경할 수 있습니다. 여기서 만약에 부모의 자식의 자식의 자식의 자식의 자식 컴포넌트에서 부모컴포넌트에 있는 상태를 변경을 하려면 props를 단지 전달 용도로만 1231번 사용되는 props drilling이 발생하게 됩니다. 이러한 불편함에서 벗어나기 위해서 페이스북은 모든 상태를 ..
