본문 바로가기
728x90

코딩애플254

HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법 오늘의 5분 숙제 : 일단 이렇게 생긴 데이터를 하단에 하나 저장하십시오. products : ['역삼동원룸', '천호동원룸', '마포구원룸'] ▲ 그 데이터와 {{데이터바인딩}} 문법으로 대충 이렇게 생긴 HTML 레이아웃을 만들어오십시오. 가격은 대충 임시로 아무거나 기입하시길 바랍니다.  HTML에 자바스크립트 데이터를 꽂아넣고 싶을 때가 있습니다. 데이터바인딩이라고 하는데Vue에서 데이터바인딩 하는 문법을 2개 알아보도록 합시다. 근데 애초에 데이터바인딩을 왜 하는지 의문점 부터 들지 않습니까.그런거 궁금해해야 나중에 여러분 데이터 바인딩 할지 말지 스스로 판단하는 훌륭한 사람이 됩니다. 그것 부터 알아봅시다. Vue 개발은 어려운게 아닙니다  dkssudsfadf우선 HelloWorld 글.. 2024. 7. 12.
페이지 레이아웃 만들기 (React 기초문법) 오늘의 숙제 :심심하면 html css 작성해서다음 시간까지 여러분 웹사이트의 대문을 마음대로 꾸며옵시다.  웹개발하려면 우선 유저들이 방문할 웹페이지같은게 있어야할거아닙니까그래서 가장 먼저 웹페이지 레이아웃 만드는 법을 알아봅시다. page.jsx 파일이 메인페이지라서 거기에 코드짜면 되는데 레이아웃 만들 땐 React 문법을 이용해야합니다. Next.js는 React 위에 얹혀있는 프레임워크같은거라서요. 우선 저번시간 프로젝트 열어서 page.jsx 안의 html 내용과 global.css 안의 내용은 지우고 시작해봅시다.  실은 리액트라고 다른거 없고 html css 문법 그대로 쓰면 레이아웃 만들 수 있는데 리액트에선 html css가 아니라 JSX 라는 문법을 사용하게 되어있습니다.생긴건 htm.. 2024. 7. 12.
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.
[CSS] Shadow DOM 설명 ( pseudo-element ) Shadow DOMpseudo 셀렉터의 사용개발자모드에서 shadow Dom 을 켜준다.input 태그 버튼같은 특정요소 클릭해서 검사해보면#shadow-root 확인할 수 있다.pseudo 속성 확인 해서 각각 스타일링 가능= pseudo-element 를 사용해준다.= -webkit-input-placeholder이런 식으로 사용해서 스타일링 가능 pseudo 셀렉터가 없을 경우= user agent stylesheet 을 확인 input type ="range" 스타일링 예시.shadow dom 깐 상태손잡이는 pseudo 셀렉터가 없어서 스타일링을 할 수 가 없다. user agent stylesheet 을 확인해보기손잡이(thumb) 부분을 클릭한 후user agent stylesheet 부분을.. 2024. 7. 1.
728x90

티스토리툴바