본문 바로가기
728x90

분류 전체보기530

Next.js 설치와 개발환경 셋팅 개발환경 셋팅(맥이나 윈도우나 똑같습니다) 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - nodejs 18버전 이상에서만 잘돌아감- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.- 설치 중 chocolatey 어쩌구는 설치하지 맙시다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.평소에 쓰던 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 설치합시다.Next.js 프로젝트 생성은  1. 작업용 폴더를 하나 만들어줍니다오픈 폴더 해서 열어줌.이 명령어 입력하고 엔터키 치면 된다. npx create-next-app@latest프로젝트 이름 작명하라고 하면 작명하면 됨. fresh 라고 프로젝트 이름 설정또 그 다.. 2024. 7. 11.
Next.js 많이 쓰는 이유를 알아보자 1. 프론트엔드만 찔끔 안다고 취업시켜주는 시대가 점점 끝나고 있습니다. 외주개발 맡기면 훨씬 저렴하고GPT가 단순한 자바스크립트 훨씬 잘 짜주는데앞으로도 프론트엔드 개발자가 많이 필요해질까요    실은 그것들은 호들갑이고GPT는 검색 + 코드생성을 도와주는 정도라서 별로 상관할 바는 아닙니다.근데 그거보다 더 큰 문제가 있는데client-side rendering 말고 server-side rendering이 다시 유행하기 시작한다는게 문제입니다.2. client-side rendering은 브라우저에서 html을 실시간으로 만드는 방법이고server-side rendering은 서버에서 html을 미리 만들어 보내줍니다.    client-side rendering 사용시 이쁘고 부드러운 사이트는 만.. 2024. 7. 11.
개발환경 셋팅과 Vue 3 설치 (자주겪는 에러 포함) (참고) 설치나 실행시 ESLint is not a constructor 에러가 뜨는 경우 터미널에서 npm i -D eslint@7.32.0 입력해봅시다. (참고) VSCode extension중에 Vetur는 지원종료되어서 Volar 설치합시다. Vue 설치부터 하도록 합시다.문법 체험을 위해 HTML 파일에 라이브러리 식으로 간략하게 설치하는 방법은 쓰지 않고 실제 Web-app 개발에 필요한 Vue 프로젝트를 처음부터 만드는 식으로 진행합니다.그러려면 Vue-cli 라는 라이브러리가 필요한데 그것 부터 설치하도록 합시다. 그리고 요즘은 설치과정 맥이나 윈도우나 똑같음       요약부터 하자면 1. nodejs 최신버전 설치우측 최신버전이 뭔가 에러가 덜 납니다. 그래도 에러나면 LTS 왼쪽 버전.. 2024. 7. 11.
카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 실은 카카오 프론트엔드 개발자들은 리액트랑 반반 섞어서 쓴다고 합니다.다만 초절정 유행 중인 리액트라는 선택지를 놔두고네이버든 카카오든 Vue로 새로운 페이지들을 만들어내는 경우가 많습니다.네이버 뮤직도 Vibe로 바꿀 때 Vue를 이용해서 프론트엔드를 디자인했더라고요.이유를 알아봅시다. 0. 일단 React Angular Vue 라이브러리는 왜 쓰냐면  항상 "이걸 왜 쓰는지" 알아야 배울 때 이해가 쉽습니다.이건 web-app을 만들 때 씁니다. 이게 뭐냐면 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 뜻합니다. 페이지 전환시 페이지를 새로 요청하는게 아니라자바스크립트로 HTML을 갈아치우면서 부드럽게 구현하는 것인데 근데 쌩자바스크립트로 이런거 만들려면 귀찮고 코드가 길어집니다. 그래서 V.. 2024. 7. 11.
픽셀 참고할만한 사이트 보호되어 있는 글 입니다. 2024. 7. 10.
[CSS] How To Make An Infinite Autoplay Slider 분석과 수정 HTML CSS - 유튜브 보고 주석 단 코드. body { min-height: 100vh; /* 최소 높이를 화면 전체 높이로 설정 */ display: grid; /* 그리드 레이아웃 사용 */ place-items: center; /* 아이템을 가운데로 정렬 */}.slider { /* overflow: hidden; // 가로 스크롤 바 없애기 위해 주석 처리 */ heigh.. 2024. 7. 9.
728x90

티스토리툴바