개발이야기

이번에 새로 프로젝트도 시작하게 될 예정이기도 하고 개발자들 사이에서 인기가 높아지고 있어서 Next에 대해 자세히 공부해보려고 합니다. 새로 들어가는 프로젝트가 Next로 하기로 한 만큼 열심히 공부를 시작해 봅니다. Next.js 란? Next.js는 React 기반의 웹 프레임워크로, 사용자 경험과 성능을 향상시키는데 초점을 맞추고 있습니다. Server Side Rendering(SSR), 정적 사이트 생성(SSG), 코드 분할(code splitting) 등의 기능을 제공하여 개발자들이 더욱 효율적으로 웹 애플리케이션을 개발할 수 있도록 도와줍니다. 왜 Next.js를 사용해야 하나요? SEO 최적화: Next.js는 서버 사이드 렌더링을 지원하여 검색 엔진 최적화(SEO)를 개선할 수 있습니다..

Web Front End란? 프론트엔드 개발은 기술적인 측면뿐만 아니라 협업과 커뮤니케이션 역시 중요. web : 개방형 표준 기술 - 오픈 스탠다드 테크놀로지 개방형 웹기술, 우리가 프론트엔드 개발자로서 사용하는 주된 기술은 결국 HTML, CSS, JavaScript front : 제일 "앞", 사용자가 직접 보는 부분 end : 프로세스 관점으로 봤을 때, 프론트엔드가 만들어지면 이제 제품이 완성. 제일 마지막 개발 단계 - 언제 출시할꺼야? (일정 변화에 있어서의 그런 작은 미묘한 변화들이 불러오는 나비효과) 모든 계획은 달라질 수 있어도 듀데이트만은 달라지지 않는다.😡 Front End 개발자 유형 그래픽 시스템에 대한 지식이 없는 개발자, 그래픽을 다룰 수 있는 개발자 UX 지식을 학습하며 개..

React useState Hook이란?🤔 React에서 useStae는 상태를 관리하기 위한 Hook 중 하나입니다. 함수형 컴포넌트에서도 상태를 관리할 수 있게 해줍니다. 사용 방법💻 useState를 사용하기 위해서는 useState 함수를 import 해야합니다. useState 함수를 호출할 때, 인자로 초기 상태 값을 전달합니다. useState 함수는 배열을 반화하는데, 첫 번째 요소는 상태 값이고, 두번째 요소는 상태를 갱신하는 함수입니다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCo..

react 도중에 갑자기 오류가 발생했다.

Vite란?🤔 vite는 Vue.js 창시자인 Evan You가 만든 웹 개발 빌드 도구 입니다. Vite는 빠른 HMR(Hot Module Replacement)과 실시간으로 모듈을 불러오는 기능을 제공하며, 프로젝트 초기화와 빌드 시간을대폭 줄일 수 있습니다. React Vite 설치하기 🚀 yarn create vite my-react-app --template react my-react-app 이라는 이름의 React Vite 앱이 생성됩니다. React Vite 앱 실행하기🏃‍♂️ cd my-react-app yarn yran dev http://localhost:5173/ 실행화면을 볼 수 있습니다. Create React App과 Vite의 차이점 ⚡ Create React App과 Vite..

CSS의 Sticky 소성은 요를 스크롤하는 동안 화면 상단이나 하단에 고정시키는 데 사용됩니다. 이 기능을 활용하여 헤더, 푸터 또는 사이드바와 같은 요소를 고정시키며 사용자가 페이지를 스크롤할 때 항상 볼 수 있도록 만듭니다. sticky 속성 position: sticky; : 요소를 스크롤 영역의 경계선에 닿을 때 고정합니다. top: 0; : 요소가 스크롤 영역의 상단에 고정됩니다. bottom: 0; : 요소가 스크롤 영역의 하단에 고정됩니다. sticky 속성은 유용하지만, 모든 브라우저에서 지원되지는 않을 수 있습니다. 따라서 브라우저 호환성에 대해 항상 고려해야 합니다. sticky를 활용하여 사이드바 만들기 HTML 마크업 CSS 스타일링 css를 사용하여 사이드바를 화면에 고정. 먼저..

LocalStorage란? LocalStorage는 브라우저에서 데이터를 저장할 수 있는 HTML5 Web Storage API 중 하나입니다. 이 API를 사용하면 사용자의 로컬 브라우저에 데이터를 저장하고 나중에 가져올 수 있습니다. LocalStorage 사용하기 LocalStorage를 사용하려면 먼저 LocalStorage 객체를 만들어야 합니다. 이 객체는 브라우저에서 전역으로 사용할 수 있으며, 데이터를 저장하고 가져오는데 사용됩니다. 데이터 저장하기 LocalStorage를 사용하여 데이터를 저장하려면 setItem() 메서드를 사용합니다. 이 메서드는 두 개의 인수를 받으며, 첫 번째 인수는 저장할 데이터의 이름(키), 두 번째 인수는 저장할 데이터입니다. localStorage.setI..

자바스크립트는 함수형 언어입니다. 구현하는 기능들은 기본적으로 모두 함수를 통해 구현됩니다. 함수의 구조 // ES5 function 함수이름 (파라미터) { // 실행영역 } // ES6 - 화살표 함수 함수이름 () => { // 실행영역 } 함수는 총 4개의 영역으로 구분되고, 각 영역의 기능은 function 함수를 표시하는 고정 키워드 입니다. 함수이름 함수를 호출할 때 사용하는 명칭입니다. 함수 이름 없이 사용하는 익명 함수도 있기 때문에 경우에 따라서 필수는 아닙니다.(다만 다시 호출할 수 없음) 함수 이름은 일정한 규칙에 따라 사용하는 것이 좋습니다. 카멜 케이스(Camel Case) 네이밍 규칙을 가장 많이 사용. 카멜 케이스 규칙 영단어 2개 이상을 조합해 함수명을 사용할 경우 하이픈 ..

while 반복문은 조건 체크를먼저 하는 while() {} 괒 조건 체크를 나중에 하는 do ~ while() 2가지로 나뉩니다. do ~ while() 반복문은 조건 체크가 나중에 잇는 만큼 무조건 1번은 반복 실행문이 무조건 실행되는 차이가 있습니다. while(참/거짓 조건식) { // 반복 실행문 } do { // 반복 실행문 } while(참/거짓 조건식) 기본적으로 동일한 구조입니다. 주의해야 될 부분은 무한 루프에 빠지지 않는 것 입니다. 일정 조건 이상이 되면 무0조건 루프를 빠져나가도록 해야 합니다. while do ~ while 자바스크립트의 중단문 자바스크립트의 중단문에는 break, continue, return 이 있습니다. break는 순환문, 또는 구문을 빠져나가는 역할 co..

for문은 조건에 충족하는 지정 횟수만큼 반복 실행하는 횟수가 정해진 반복문 입니다. for문은 반복 횟수를 기준으로 반복 처리를 하는 for 문과, 여러 개의 요소를 가지는 배열, 객체 등의 전체 개수를 기준으로 전체를 반복 순환하는 for ~ in, for ~ of, forEach 문 등 여러 종류가 있습니다. for 문 for(시작값; 조건문; 간격조건) { // 실행 구문 } // 예시 - 1부터 9까지 홀수만 출력하는 경우 for(let i=1; i