글쓰는 개발자

사용자가 웹페이지를 스크롤할때 스르륵 나타나는 애니메이션이 다양한 웹사이트에서 사용되고 있다. React를 사용할때는 페이지가 새로고침이 되어도 스크롤의 위치가 유지되는데 이때문에 현재 위치를 기반으로 걸어둔 애니메이션이 의도치 않게 동작될 때가 많다. window.history.scrollRestoration의 옵션을 manual로 변경하면 페이지를 새로고침 할때마다 스크롤이 맨위로 초기화 되기때문에 위 문제를 해결할 수 있다.useEffect(() => { window.history.scrollRestoration = 'manual';}, []);

1. 기본 개념과 목적구분jQueryReact목적Dom 조작 및 Ajax를 쉽게 하기 위한 유틸리티 라이브러리UI를 컴포넌트 기반으로 구성하고 상태 기반 렌더링 제공철학HTML을 조작하는 방식 중심UI = 상태(state) 라는 철학에 기반 2. DOM 조작 방식구분jQueryReact목적직접 DOM 요소 선택 후 조작Virtual DOM 사용 -> 변경된 부분만 효율적으로 업데이트철학수동으로 DOM 상태 관리상태(state) 변경 -> 자동으로 UI 갱신 3. 구조 및 확장성구분jQueryReact목적명시적 구조 없음 (절차적 코드로 구성)컴포넌트 기반 구조화 가능철학규모가 커지면 코드 복잡도 증가컴포넌트화로 유지 보수 용이 4. 학습 곡선 및 개발 환경구분jQueryReact목적낮음 (간단한 문법..

1. 새 프로젝트를 생성합니다. 2. 배포할 Repository를 선택합니다. 3. Deploy 버튼을 눌러서 배포를 실행합니다. 4. deploy 상태가 표시됩니다. 5. deploy가 완료되면 preview를 확인할수 있습니다. preview 화면을 클릭하면 실제 배포된 사이트로 이동할수 있습니다.

터미널 창에 다음 명령을 입력해 vue cli를 설치합니다.npm install -g @vue/cli VS Code에 vue관련 두개의 extension을 설치합니다.- vue (Official) - vue 3 snippets vue 프로젝트를 생성합니다vue create vue 3를 선택합니다.Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select featuresYan과 Npm 중 선호하는 패키지 매니저를 선택합니다.Pick the package manager to use when installing depen..

next.js 는 폴더 구조를 따라 라우터를 구성할 수 있는 app router라는 기능을 제공합니다.app 폴더 내에 dashboard 라는 폴더내에 page.js 혹은 page.tsx 파일을 위치시키면 /dashboard라는 주소로 해당 페이지에 접근할 수 있습니다. App Router 기능을 잘 활용하여 네비게이션 바를 구성합니다. 위 네비게이션 바 메뉴의 구성에 맞춰 폴더와 페이지, 스타일 파일을 구성합니다. community, course, faq, review 폴더를 생성하고 page.tsx와 style.module.css 를 각각 만들었습니다.components 폴더에 네비게이션 바를 위한 index.tsx를 만들고 네비게이션은 모든 페이지에 나타날 수 있도록 layout.tsx에 포함해 줍..

CSS는 다음과 같이 클래스명에 매핑시켜서 사용한다.// .tsximport './style.css'// .css.main { display: flex;} 이는 정석적이고 쉽고 간편한 CSS의 사용법이다.그런데 리액트같이 컴포넌트형 구조를 가지고 있다면 클래스 명의 충돌이 일어날수 있다. button-text 이라는 이름의 컴포넌트가 존재한다고 할때, 다른 페이지에 같은 이름의 button-text라는 클래스명을 가진 엘리먼트가 존재한다면, 여기서 css의 충돌이 일어나게 된다. 재사용을 위해 컴포넌트화 한 클래스의 경우 더이상 그 내부를 신경쓰지 않기 때문에 중복되는 이름이 발생활 확률이 높다.이를 방지하기 위해서 컴포넌트형 클래스 명 앞이나 뒤에 추가적인 이름을 붙여서 이러한 충돌을 피할수 있다.하지..

터미널에 nextjs 프로젝트를 생성하기 위한 명령어를 입력합니다.npx create-next-app@latest 넥스트 js 프로젝트 세팅을 위한 옵션 사용여부를 각각 체크해줍니다.What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like your code inside a `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to use ..

리액트에서 useState 함수를 사용하면 value와 set 함수 두개를 얻을 수 있다. const [value, setValue] = useState('초기화값'); 이때 setValue를 통해 값을 변경하면 value값은 리렌더링 되어 UI에 표시된다. 근데 이 value에 들어간 값이 int나 string 같은 값이 아니라 오브젝트 혹은 array일 경우에는 그 값을 변경하고 set함수를 호출해도 UI에 값이 변경되지 않는다. const [array, setArray] = useState(['a', 'b']);array.push('c');setArray(array); // 여전히 화면에는 a와 b밖에 보이지 않는다. React는 useState로 만들어진 변수들을 계속 감시를 하고 변경을 감지하면..