Tiny Finger Point Hand With Heart
본문 바로가기
728x90
반응형

Frontend5

[JS] 넌 var니?let이니?const니? 변수(variable)는 숫자나 문자와 같은 데이터를 저장하는 그릇 같은 거다. 정확히는 데이터가 컴퓨터 메모리에 저장되는 주소를 말한다. 변수를 설정할 때는 대충지으면 안되고 정말 간단하지만 누구나 그 변수가 무엇을 의미하는지 알 수 있게 정해야한다. 특히 혼자 코테 나 개발할 때는 a,b,c 이렇게 간단하게 정할 때가 있었는데 정말 습관이 무서운거라고,,,,,정신 바짝차려야한다. *자바스크립트에서 변수의 이름을 식별자(identifier)이라고 한다.* 변수 이름을 지을 때는 몇가지 규칙을 지켜야 한다. 1. 변수 이름에는 영어 알파벳,숫자,밑줄,$을 사용한다. 2. 변수 이름은 숫자로 시작하면 안된다. 3. 변수에서는 동일한 알파벳의 대문자와 소문자는 엄연히 다른 것이다. ex) Coffee ,co.. 2023. 10. 17.
[JS] 처음부터 다시 시작하자,,,우리,,, 자바스크립트 공부를 처음부터 탄탄하게 다시 시작해보려한다... 거의 찍먹식으로 공부를 해왔고, 현재도 그냥 시키는 화면만 구현하는 정도고, 코드도 재활용을 많이 하고 있어서 가끔 코딩을 하면서도 이 코드가 어떻게 진행되는지, 이 문법은 어떤 것인지, 모르는 것들을 검색하면서 진행했는데,,,요즘 나의 기억력이 휘발성이 되어버려서 기록을 할까 한다. hello부터 시작해야지,,,화이팅! innerHTML을 활용하여 원하는 텍스트를 화면에 표출하는 간단한 코드입니다. 화면이 제대로 표출되었다. 구우웃~! ----자바스크립트를 이용하여 브라우저에 데이터를 출력하는 방법은 크게 4가지로 나눠진다. 1. innerHTML : 브라우저 안네 있는 HTML 요소에 데이터 출력 2. document.write() : 브.. 2023. 10. 16.
[JS] 정규식으로 유효성 검사하기(feat.AJAX) 사용자에게 정보를 받을 때 inputbox에 값을 입력받고 올바르게 입력했는지 유효성검사를 한다. 자바스크립트로 유효성 검사 + 안내문구를 나타나게 만들어 보았다. 정규식 유효성검사라고 검색을 해보면 id, pw, e-mail 등 다양한 정보를 검사할 수 있다. 그중에서 host번호와 port번호에 대한 유효성 검사를 하려고 한다. 1. html화면 만들기 정규식으로 유효성검사하기 host 번호 : 숫자를 확인해 주세요. port 번호 : 숫자를 확인해 주세요. 아직은 input box만 있는 모습이지만, 코드를 보면 helperText가 숨어있는 걸 볼 수 있다. 2. 정규식 알아보기 여기서, host번호는 대부분 IPv4를 사용하고 있기 때문에 xxx.xxx.xxx.xxx 형식을 가지고 있다. IP .. 2023. 5. 6.
[REACT] 리액트의 JSX JSX란? JSX는 자바스크립트의 확장 문법이다. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 된다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); JSX 문법 JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들이 있다. 1. 속성명은 카멜 케이스로 작성하기 JSX 문법에서도 태그에 속성을 지정해 줄 수 있다. 단, 여러 단어가 조합된 몇몇 속성들을 사용할 때.. 2023. 3. 1.
[REACT] 리액트로 프로젝트 시작하기 리액트는 프론트엔드에서 사용하는 기술 중 하나이다. 리액트를 시작하기에 앞서 먼저 node.js를 검색하여 LTS버전으로 다운로드를 해야한다. 최신버전보다 안정적으로 사용할 수 있기 때문에 홈페이지에서도 추천하는 버전이라고 써져있다. 본인의 환경에 맞는 버튼을 누르면 자동으로 깔린다. https://nodejs.org/ko/download/ 잘 깔렸는지 확인하는 방법은 터미널을 열어 node -v를 입력해보면 된다. node와 npm의 버전을 둘 다 확인해보자. 이렇게 나온다면 잘 설치된 것이다. IDE에 폴더를 하나 만들고 터미널에 npm init react-app . 를 입력하면 시작이다. 위의 코드를 입력하고 엔터를 누르게되면 설치할꺼냐는 질문이 나오는데 y를 입력하면 다운로드가 시작되고 프로젝트가.. 2023. 3. 1.
728x90
반응형