CodeClover

최근 진행한 팀 프로젝트에서 페이지 이동을 처리하는 방식에 대해 논의가 있었습니다.// 방법 1: a 태그 사용...// 방법 2: div에 onclick 사용...위의 두가지 방식 모두 페이지를 이동시킬 수 있지만 어떤 방식이 올바른 방식인지에 대해서 고민하는 과정에서 이 두가지 방식의 차이점과 어떤 방식이 더 추천되는 방식인지 두 가지 방식의 차이점과 권장 방식을 정리해보겠습니다.💁🏻‍♀️ 우선 결론부터 말하자면페이지 이동을 목적으로 한다면 onclick보다는 a 태그를 사용하는 것이 명확히 더 추천되는 방법입니다.✅ 겉보기엔 비슷하지만 실제론 큰 차이가 있다두 방식은 UI 상에서는 비슷하게 동작할 수 있지만 a 태그는 단순히 작동만 하는 것이 아니라 웹의 의미론적 구조, 접근성, SEO, 브라우..

if 문과 비교 연산자  ==   vs  === 자바스크립트에서 조건문을 작성하거나 값을 비교할 때 자주 사용되는 기본적인 문법과 연산자들이 있습니다.if 문과 ==, === 비교 연산자에 대해 정리해보면,,,1. if 문 사용하기if 문은 특정 조건을 만족할 때 실행되는 코드 블록을 정의하는 데 사용됩니다. 다음과 같이 조건문을 작성할 수 있습니다.if (조건문) { // 조건을 충족하면 실행되는 코드}if 문은 조건이 참일 때만 코드 블록이 실행되며, 조건이 거짓이면 아무 일도 일어나지 않습니다. 이때 중요한 점은 if 문이 참인 조건을 만나면 그 시점에서 바로 실행을 종료하고 이후의 조건들을 확인하지 않는다는 것입니다.조건 순서의 중요성조건문을 작성할 때 조건들의 순서가 중요합니다. 작은 범위..

https://ko.react.dev/blog/2025/02/14/sunsetting-create-react-app Create React App 지원 종료 – ReactThe library for web and native user interfacesko.react.dev 리엑트 프로젝트 생성 시 사용하던 create-react-app이 앞으로 지원을 멈춘다고 한다..! npx create-reat-app 프로젝트이름→ 원래 사용하던 리엑트 프로젝트 생성 방식  BUT !  앞으로는 vite 같은 빌드툴 사용해서 프로젝트를 생성해야함.이번 기회에 새로운 방식으로 프로젝트 생성하는 과정을 정리해보려고 한다.  💁‍♀️ Vite로 React 프로젝트 생성하는 방법npm create vite@latest ..

웹 페이지에서 오디오 파일을 재생할 수 있도록 HTML에서는 audio 태그를 제공합니다.audio 태그는 웹 페이지에서 오디오 콘텐츠를 삽입하는 데 유용한 도구입니다. audio 태그를 활용해 오디오를 삽입하고 제어하는 방법을 정리해보겠습니다.  audio 태그의 기본 개념audio 태그는 HTML5에서 도입된 태그로, 브라우저에서 오디오 파일을 직접 재생할 수 있게 해줍니다. 기본 문법 브라우저가 오디오를 지원하지 않을 때 표시할 텍스트    주요 속성 및 사용 방법오디오 태그는 다양한 속성을 가지고 있습니다. 사용자의 경험을 고려해 선택해서 사용해야 합니다. src 속성 직접 파일 경로를 지정하는 속성입니다.  controls 속성재생/일시 정지 버튼/볼륨 조절 등 기본 컨트롤이 표시되..

웹 페이지에서 데이터를 구조적으로 표시하고 싶을 때, HTML의 table 태그를 활용하면 효율적입니다. 특히, 데이터를 행(row)과 열(column)로 구분하여 표현할 수 있어 정보의 가독성을 높이는 데 유용합니다. HTML의 table 태그와 그 하위 태그들인 tr, th, td는 데이터를 체계적으로 표현하는 데 필수적인 요소로 각 태그의 개념을 간단히 정의하고 쉽게 이해할 수 있도록 사용 방법을 정리해보겠습니다.  table, tr, th, td 태그의 기본 개념 - table태그 : table 태그는 데이터를 테이블 형식으로 표현하기 위한 가장 바깥쪽의 컨테이너입니다. 테이블의 시작과 끝을 정의하며, 테이블 내부에 포함되는 모든 요소는 table 태그 안에 위치합니다. - tr 태그 :tr 태그..

본격적으로 리액트 기본을 동작해보기 위해서 리액트 기본 명령어npm startnpm start 명령어로 딱 리액트 Install 진행하는데 나와버린 에러코드... ㅠㅠㅠ 구글링 결과,,내가 reactproject 폴더안에 first-react라는 폴더를 하나 더 만들었기 때문에  cd first-reactfirst-react 명령어로 이동해서 다시 한번 더  npm start 실행하니까 두둥!!  실행 성공!! ( 참고로 리액트에서 보이는 부분은 App.js의 코드가 보여집니다! )   [참고]만약에 본인처럼 first-react 라는 폴더를 만들지 않은경우는 동일한 에러가 발생하기때문에 반드시 폴더를 생성해서 진행해주어야한다.터미널경로가 C:\Users\react 이 아니고C:\Users\react\작..