본문 바로가기

분류 전체보기

 (75)
javascript로 button 만들어서 열고 닫기 만들기 html 내용 div로 만들어 놓기 알림창임 버튼 닫기 script로 간단하게 만들기 function 자바스크립트1(){ document.getElementById("alert-box").style.display = "block"; } function 자바스크립트2(){ document.getElementById("alert-box").style.display = "none"; } 원하는 걸 onclick=" " 안에 넣어주기! 보여주기 css 속성을 none -> block 으로 변경 닫기 css 속성을 block-> none 으로 변경 *** 즉 함수는 긴 코드를 짧게 만들어 편리하게 쓰게 해주는 것이다.
nodemon 이 뭔데? nodemon 설치 에러해결방법 nodemon이라는 것은 결국 내가 터미널에 따로 실행문을 쓰지 않아도 자동으로 동기화 해주는 도구이다. 그래서 설치는 어떻게 하냐면 npm install nodemon 아래 코드를 작성했더니 nodemon server.js nodemon : 이 시스템에서 스크립트를 실행할 수 없으므로.... 이런식으로 빨간색 에러가 발생한다면 윈도우 검색창에 'window powershell' 관리자 권한으로 실행을 눌러준후 executionpolicy set-executionpolicy unrestricted 입력후 Y를 입력해주면 해결! 이렇게 설정을 해주면 해결된다!
Node.js 가 뭔데? express가 뭔데? 서버 구축하는 방법 자바스크립트의 일종으로 서버를 구축하기 쉽게 해주는 환경이다. 주로 비동기식 이벤트 기반의 서버 측 개발에 사용되며, 자바스크립트를 사용하여 서버 측 코드를 작성할 수 있도록 해주는 역할을 한다. 즉 간편하게 서버를 구축해주는 것! 그럼 node.js 어떻게 할까? 비주얼 코드를 열고서 아래 명령어를 작성. npm init 그럼 npm은 뭔데? npm은 라이브러리 설치를 도와주는 도구! : 라이브러리 -> 도서관의 책처럼 필요할때 꺼내서 책을보고 설치하는 개념이다. 설치했으면 위의 파일을 볼수있는데 이건 어떤 라이브러리를 설치했는지 볼수있는 공간이다! npm install express 그다음 server.js 파일을 만들고 안에 아래 문법을 추가해준다. [아래 문법은 서버를 만들기 위한 기본셋팅문법.]..
리액트 훅??? useState 초간단 설명 지난번 작성한 글에 있는 useState에 관해 진짜 초초 간단한 설명을 하려고 한다. 뭔가 머리를 댕하고 맞은듯한 느낌이랄까? 결국엔 useState 는 변수를 저장해주는 저장 공간과도 같은것이다! 자바스크립트에서는 보통 let posts = '리액트가뭔데'; 위처럼 변수를 선언해주고 그안에 값을 넣는 방식인데 그것과 동일하다고 생각하면된다. 대신 아래 코드를 맨 상단에 꼭 추가 해줘야한다. (나 이 함수쓴다!라고 선언하는것) import React, { useState } from 'react'; 그리고 대신 중요한 한가지는 useState에는 [ a , b ]라는 공간이 있다. 이 공간은 a 는 타이틀고유값 , b 타이틀변경값 이라는 점이 특이한 점이다! a라는 공간에 있는 고유값을 b 라는 타이틀..
React Node.js 왜깔아야 하는데? React 환경 세팅하기 초초간단 나는 오랜시간 리액트에 왜 Node.js 를 깔아야 하는데? 라고 생각했는데 드디어 확실히 와닿는 이유를 찾았다!!!!!!!!!!!!! 간단히 말하면 React를 실행하기 위한 셋팅이라고 생각하면 된다. 구동시켜줄 환경을 만드는것! 그래서 Node.js를 깔고 작업을 시작해주면된다. https://nodejs.org/en 여기서 client를 다운로드받기 다운로드 후 아래코드 작성. npm install -g create-react-app app . 현재 폴더에 설치하겠다는 뜻이다 npx create-react-app . 만약 현재 폴더에 다른 폴더명으로 시작하고 싶다면 아래 코드처럼 입력하기. npx create-react-app reactsite01(폴더명) 혹시 이렇게 쳤는데 빨간색 Error 가 ..
React-Router-Dom 개념 Routing - 라우팅은 우편배달기사가 집집마다 배달하듯이 지정된 곳에 배달해주는 것. 즉 지정된곳에 콘텐츠를 이동시켜주는것이다. React-Router를 사용하는 이유 그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다. 화면 깜빡임이 필수적으로 발생하고 이는 사용자 경험을 떨어뜨리는 큰 요인이다. 따라서 라우팅을 통해 부드러운 화면전환을 위해 사용된다. Router 종류 BrowserRouter : 별도의 서버 설정이 없다면 새로고침 시 404에러가 발생한다. :큰 프로젝트에 적합하다. :서버가 존재하고, SEO가 필요한 프로젝트라면 BrowserRouter를 사용하는 것이 좋다. React-Router-Dom React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다...
react 설정 하기 (리액트 환경 구축하기) ❔ React란? React는 UI를 더 쉽게 만들기 위한 JS 라이브러리라고 한다 단순히 UI를 쉽게 만들기 위해서 개발된 라이브러리. 그리고 '복잡한 태그들(태그들의 조합)을 사용자 정의 태그로 묶어서 다른 파일에서 사용하면 편하지 않을까?' 라는 생각에서 나온 개념이 바로 React라고 합니다 사용자 정의 태그 'Component' : React에서는 사용자 정의 태그를 'Component'라고 부릅니다 Component 사용의 장점 : 가독성↑ / 재사용성↑ / 유지보수가 용이 / 코드 복잡도↓ Toolchains : 개발자의 목표에 따라 필요한 개발환경, 도구 이런 것들을 모아서 한 번에 제공해주는 도구를 "Toolchain"이라고 부른다. npm : npm은 JavaScript 런타임 환경 N..
진짜 모르겠는 함수 매개변수? 인수? 그게 뭔데 정말 개발공부를 처음하는 입장으로써 공부를 하는 두달까지도 이해가 안되었던 매개변수, 인수를 정말 초초 심플하게 정리한다. 하.. 고구마 먹은듯한 체함이 내려간다.. ex) funtion printFruit ( name ){ console.log( name ) } printFruit (' apple '); 차례대로 뜯어보자. funtion 은 함수를 부르는것. 시작을 알린다. printFruit는 내가 호출할 때 부르는 이름값 이다. 아무이름이나 맘대로 지어도 된다. console.log 은 내가 출력받고 볼수있게 제공해주는 코드블럭 이다. { } 로 밖에있는 건 printFruit (' apple '); 내가 호출 받고자 하는 것을 적는 호출란. 왜 이걸 막쓰면 되는데 왜 굳이 함수를 사용해서 매개변수..
useEffect( ) 란 ? * useEffect( ) 는 변수값, 오브젝트등이 달라지면 그것을 인지하고 변경해주는 함수이다. * useEffect( ) 는 콜백함수를 가지며, Dependency는 있을수도 없을수도 있다. * useEffect( ) 는 무조건 한번 실행된다. 리액트 훅이다. 결과론 적으로 보면 로딩하는데 시간이 많이 걸리는 함수나, 서버에서 가져와야하는 데이터, 타이머들을 useEffect 안에 작성해주면 조금더 사용자가 느끼기에 빠르다 라는 느낌을 줄수있다. html이 먼저 작동하고 그 이후 useEffect안에 있는 코드가 작성되니까! 종류와 쓰임새로는 > useEffect( ( ) => { } ) 시시때때로 사용되어져서 불필요한 것까지 인지하는 단점이 있음. > useEffect( ( ) => { }[ ] )..
setInterval() , clearInterval() 이란 무엇일까 setInterval() 함수는 JavaScript에서 사용되는 타이머 함수 중 하나로, 특정 시간 간격마다 지정한 함수를 반복적으로 실행할 수 있게 해주는 함수이다. 이 함수를 사용하면 주기적으로 어떤 작업을 수행하거나 반복적으로 업데이트를 할 수 있다. 함수는 다음과 같은 구문을 가진다. setInterval(function, delay); setInterval(function() { console.log("Hello, World!"); }, 1000); function: 실행할 함수를 정의하는 매개변수로, 주기적으로 실행할 코드 블록이나 함수를 지정한다. delay: 함수를 실행하는 간격(밀리초)을 나타내는 매개변수로, 함수를 실행할 시간 간격을 정의한다. setInterval()함수를 멈추기 위해..

티스토리툴바