heyday2024 님의 블로그

HTML5 기본 유효성 검사와 맞춤형 유효성 검사의 차이1. HTML5 기본 유효성 검사의 동작 원리유효성 검사 조건:required, minlength, maxlength, pattern 등 속성을 통해 브라우저가 자동으로 입력값 검증.폼 제출 전 브라우저가 각 필드의 유효성을 확인.기본 메시지 표시 조건:onSubmit 이벤트에서 e.preventDefault()를 호출하지 않아야 기본 유효성 검사가 동작. 속성을 사용하면 기본 검사가 비활성화됨.2. 유효성 검사가 동작하지 않을 수 있는 상황JavaScript로 직접 구현한 경우:브라우저의 기본 메시지가 JavaScript 커스텀 메시지와 충돌.예: setErrors와 같은 사용자 정의 에러 메시지 사용.e.preventDefault()를 호출한 경..

1. Props를 전달해주는 방식 (Props Drilling 이슈)설명상태를 최상위 부모 컴포넌트에서 자식 컴포넌트를 거쳐 전달하는 방식.간단한 구조에서는 사용 가능하지만, 깊은 컴포넌트 구조에서는 비효율적임.장점간단하고 설정이 필요 없음.React의 기본 기능만으로 구현 가능.단점컴포넌트 계층이 깊어질수록 관리가 어려워짐.상태 전달이 필요 없는 중간 컴포넌트도 불필요한 리렌더링을 경험할 수 있음.코드 예시// 최상위 컴포넌트function App() { const [count, setCount] = React.useState(0); return ;}// 중간 컴포넌트function Parent({ count, setCount }) { return ;}// 최하위 컴포넌트function Child..

1. HTTP란?HTTP(Hypertext Transfer Protocol)는 서버와 클라이언트 간 데이터를 주고받는 통신 프로토콜.특징:80번 포트를 사용.데이터를 평문(Plain Text)으로 전송.빠르고 효율적이지만 보안이 취약.사용 사례:뉴스, 공개된 정보와 같은 민감하지 않은 데이터 전송.HTTP의 문제점도청 가능: 데이터가 암호화되지 않아 네트워크에서 쉽게 읽힘.데이터 변조 가능: 전송 중 데이터가 손쉽게 변조될 수 있음.신원 위조 가능: 클라이언트가 서버의 신뢰성을 검증할 수 없음.2. HTTPS란?HTTPS(Hypertext Transfer Protocol Secure)는 HTTP에 SSL/TLS 암호화를 추가하여 보안을 강화한 프로토콜.특징:443번 포트를 사용.데이터를 암호화해 제3자가..

Troubleshooting & Lessons Learned문제: 잘못된 API URL 입력과 경로 입력 오류원인: Glitch가 필요로 하는 서버를 위한 깃허브 주소를 제공하지 않고, 잘못된 깃허브 url을 입력함.  testResults 엔드포인트 경로를 제대로 확인하지 못해 API 호출 실패. 해결 과정:Glitch 프로젝트에서 Live URL 확인 (Share → Live Site).axios의 baseURL을 올바른 Glitch URL로 수정.올바른 URL로 변경 후 정상 작동 확인.느낀점: API URL은 반드시 정확히 확인해야 하며, Glitch나 외부 서비스를 사용할 때는 제공된 URL을 꼼꼼히 검토해야된다. 문제: 리펙토링 과정에서의 문제원인: 문제가 주어진대로 단계 단계씩 진행하면서 상..

인증(Authentication)과 인가(Authorization)인증로그인하여 사용자가 등록된 회원인지 확인하는 절차.예: 아이디와 비밀번호를 입력해 로그인 성공 여부를 확인.인가인증된 사용자가 특정 리소스에 접근할 권한이 있는지 확인.예: 마이페이지에서 개인정보를 요청할 때, 해당 리소스에 접근 가능한지 확인.Q&A 예시질문: 유저가 마이페이지에서 개인정보 요청 시 서버는 인증인가요, 인가인가요?답변: 인가유저가 이미 로그인하여 인증된 상태이며, 특정 리소스(개인정보)에 접근 권한이 있는지 확인하는 과정이기 때문.HTTP의 두 가지 주요 특성무상태(Stateless)요청 간에 상태를 유지하지 않음. 이전 요청의 정보를 기억하지 않음.예: 로그인 상태가 자동으로 유지되지 않음.비연결(Connection..

웹 사이트의 쿠키란??쿠키는 웹 서버가 생성하여 사용자의 웹 브라우저에 저장하는 작은 데이터 파일임. 쿠키는 사용자가 웹 사이트를 방문했을 때 특정 정보를 유지하거나, 사용자의 행동을 추적하거나, 맞춤형 서비스를 제공하기 위해 사용됨쿠키는 웹 브라우저에서 미리 정해진 기간 동안 혹은 웹 사이트에서의 사용자 세션 기간 동안 저장되고, 나중에 사용자가 웹 서버에 요청할 때 관련 쿠키가 첨부됨(참고) 근데 왜 쿠키라는 용어를 썼을까??데이터 패킷은 컴퓨터 네트워크에서 정보를 전송하기 위한 형식화된 데이터 블록으로 매직쿠키는 변경되지 않은 상태로 송수신되는 데이터 패킷입니다.웹사이트에서의 쿠키(cookie)는 원래 과자와는 다른 맥락에서 유래되었습니다. 이 이름은 매직 쿠키(magic cookie)라는 데이터 ..

뉴스 피드 프로젝트 오늘 팀원들과 yarn 버전 충돌로 인한 문제로 오랜 시간을 소비하게되었는데, 이 경험을 통해 코드 컨벤션 때 코드 스타일이나 파일 구조 등을 서로 맞추는 것뿐만 아니라 사용할 yarn의 버전 등을 확인하는 것도 중요하다는 것을 깨달았다.프로젝트 시작 전 팀원들과 Yarn 버전을 맞추는 것은 필수.버전 차이에 따른 의존성 문제를 방지하기 위해 반드시 협의 필요.  1. react-markdown기능: Markdown 포맷으로 작성된 텍스트를 HTML로 변환 및 표시.사용 목적:뉴스 피드에서 텍스트 내용을 Markdown 형식으로 작성하여 사용자 친화적인 방식으로 렌더링.지원 기능:헤더, 리스트, 링크 등 기본 Markdown 문법.코드 블록도 렌더링 가능.2. highlight.js기..

1. 클린 코드란?가독성이 높음: 코드를 읽는 사람이 쉽게 이해할 수 있음.유지보수가 용이함: 코드 수정이나 확장이 쉬움.일관성: 코드 스타일과 패턴이 일정함.중복 최소화 (DRY): 같은 코드를 반복하지 않음.2. 클린 코드를 작성하기 위한 원칙의미 있는 이름변수, 함수, 클래스의 이름은 목적이 명확해야 함.✅ getUserInfo()❌ dataProcess()함수는 작게 유지함수는 하나의 책임(Single Responsibility Principle)만 가질 것.✅ calculateDiscount(price)❌ processOrderAndSendEmail(order)중복 코드 제거중복된 코드는 함수로 분리하거나 재사용 가능한 컴포넌트로 작성.✅ function formatDate(date) { .....

CORS란 무엇인가?CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 도메인이 다른 서버에 요청을 보낼 때 적용되는 정책입니다. 즉, CORS는 클라이언트 웹 애플리케이션이 다른 도메인에 있는 리소스와 전하게 상호작용할 수 있도록 합니다.(특히, 서드 파티 API나 리소스를 참조하는 경우 유용합니다!!)동일 출처(Same-Origin) 정책으로 인해, 기본적으로 웹 페이지가 자신과 동일한 출처(origin)에 있는 리소스만 요청할 수 있으며, 다른 출처의 리소스를 요청하려면 그 서버가 CORS 헤더를 통해 이를 허용해야 합니다.왜 CORS가 만들어졌을까??과거에 크로스 사이트 요청 위조(CSRF) 문제 발생.악의적인 웹사이트가 사용자를 속여서 사용자의 권한..

- img 태그를 사용해 이미지를 추가했을 때 기본적으로 브라우저나 특정 CSS로 인해 이미지에 테두리가 생길 수 있음.==> 해결 방법: styled-components에서 img 요소에 background-image 속성을 직접 적용하는 대신, div 요소로 이미지를 감싸서 배경 이미지를 추가하는 방식이 더 적합함. keyframes를 사용한 애니메이션 적용keyframes 정의: keyframes는 CSS 애니메이션의 시작, 중간, 끝 단계들을 정의하는 규칙. 이 규칙을 사용해 요소에 특정 시점에서 다양한 애니메이션을 적용 가능.예시: const bounceAnimation = keyframes` 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40%..