STUDY61 [JavaScript] 상수(const) 1. 상수(const) 프로그래밍에서의 상수는 프로그램이 실행되는 동안 '값이 고정되어 변경할 수 없는 메모리 공간'을 의미합니다. 변수처럼 정의해서 사용할 수 있습니다. 1-1 상수 특징 변수를 사용하려면 변수 선언을 했듯이 상수도 변수처럼 정의하여 선언을 해 사용한다. 변수의 선언은 값을 선언하고 그것을 다른 값으로 변경 해줄 수 있다면, 상수의 특징은 값을 선언하면 그 값을 변경 할 수가 없다. 1-2 결과 할당을 한 변수는 다른 값을 넣어주면 변경이 불가능하다. 출력 순으로 확인했을 경우, 첫번째 console.log는 출력이 되었지만 두번째 출력에서는 에러가 나타나게 된다. 2022. 11. 27. [JavaScript] 변수(let , var) 1. 변수 (let , var) 프로그래밍에서의 변수는 하나의 데이터를 담는 저장 공간이다. 변수의 사전적 의미는 변할수있는 값이라는 뜻이다. 프로그래밍 속에서의 변수도 변할수 있는 데이터 값을 의미한다. 1-1 변수선언 변수를 사용하려면 변수 선언이라는 걸 먼저해야한다. 컴퓨터에게 이건 이런 변수니까 기억해 라고 알려주는 일이라고 생각 하면 된다. 자바스크립트 속의 장점은 변수를 선언 할때, 다른 언어들에서는 변수명 + 타입을 같이 표기 해줘야 하지만 자바스크립트에서는 숫자와 문자 데이터 오브젝트의 값들에 대한 타입 표기를 하지 않아도 된다. 변수의 이름을 만들어준다음에 그 변수라는 저장 창고안에 하나의 데이터값을 입력하는 것을 할당이라고 한다. number 라는 변수명을 만들고, 그 변수에게 너의 데.. 2022. 11. 27. [JavaScript] JS 사용하기 JavaScript 사용해보기 html css의 정적인 부분에 동적인 기능을 더하기 위해 사용 한다고 했던 자바스크립트를 사용하기 위해서는 태그를 사용해야한다. css와 같이 인라인태그로써 사용도 가능하고, 별도의 JS파일을 참조하여 불러와서 사용 할 수도있다. 01. HTML에서 인라인에서 script 사용하기 html 파일 속 인라인태그로 스크립트를 사용하는 방식은 해당 html 파일 안에 script태그를 사용하여 태그 속에 내용을 넣어주는 방식이다. 태그 속 내용을 집어 넣는 방식이다. * console.log()는 개발자도구에 console이라는 페이지에 문자열을 출력하게 하는 방법이다. 02. HTML 밖에서 별도의 JS 파일을 가지고 오기 html 파일 안에서가 아닌 다른 외부 파일로 js .. 2022. 11. 27. [JavaScript] JS 알아보기 Java Script 자바스크립트는 html css로만 만들어진 정적인 웹 브라우저에 동적인 작업을 위해 만들어진 프로그래밍 언어이다. 1. 자바스크립트 언어의 특징 자바스크립트는 동적 프로토 타입 기반 객체 기반의 언어다. 자바스크립트는 객체 기반 언어이지만 JAVA C++ 등과 다르게 클래스라는 개념이 없다. 만들려는 클래스의 틀에서 상속받아 내려오는 클래스 기반과 다르게 원형의 객체에서 복제 과정을 통해 새로운 객체를 생성하는 언어이다. 자바스크립트는 인터프린터 언어다. 자바스크립트에서 작성 된 코드는 작성된 순서대로 위에서 아래로 읽어 출력을 한다. 코드에 문제가 생길 경우 그 에러코드 이후의 코드들에 대한 분석을 하지 않는다. 자바스크립트는 웹에 특화된 언어다. html문서의 정적인 부분을 동적.. 2022. 11. 27. [Study] API를 활용하여 뉴스페이지 구성하기 기능 https://docs.newscatcherapi.com/ API 활용하여 뉴스 페이지 구현 검색어 입력시 해당 키워드의 뉴스 내용이 나오는 검색 기능 구현 메뉴 클릭시 해당 메뉴 그룹의 내용이 나오는 탭 기능 구현 오류 발견 시 화면단에 오류 내용 출력 슬라이드 메뉴바 구현 반응형 홈페이지 구현 사용언어 HTML CSS JavaScript Demo App url - https://bottlesun.github.io/study/05-NewsTimes/ 01. newscatcherapi 사용하기 https://docs.newscatcherapi.com/ 해당 api를 사용하기 위해서는 회원가입을 하여, 고유 api-key를 받아야 하는데, 무료 기간은 30일이고, 한달간 사용 할 수 있는 한도가 정해.. 2022. 11. 26. [Study] API를 활용하여 날씨 페이지 구성하기 기능 https://openweathermap.org/api API 활용하여 날씨 페이지 구현 버튼 클릭시 해당 지역 날씨 표시 기능 구현 페이지네이션 기능 구현 오류 발견 시 화면단에 오류 내용 출력 날씨 온도에 따라 색 변경 기능 구현 반응형 홈페이지 구현 사용언어 HTML CSS JavaScript Demo App url - https://bottlesun.github.io/study/06-Weather/ API를 활용하여 날씨 페이지 구성하기 해당 API 페이지의 기본적인 날씨 데이터를 받아서 작업을 진행했다. 중심적으로 공부를 하려고 했던 목표는 axios로 API를 활용하는 부분이였다. 01. openweathermap.org/api 사용하기 https://openweathermap.org/c.. 2022. 11. 26. [React] ReactHook ReactHook 저번 학습에서는 함수형 클래스형 컴포넌트의 구조를 파악하고 모양을 확인했다면, 이번 시간에는 그 틀안에서의 리액트를 사용함에 있어서 가장 중요하다고 생각하는 ReactHook에 대해서 알아보려고 한다. 그 중에서도 ko.reactjs.org 홈페이지에 나오는 기본 훅들을 간단하게 설명 하고 넘어갈 생각이다. Hook은 기존 Class 바탕의 코드를 작성할 필요 없이 state(상태 값)과 여러 React의 기능을 편리하게 사용하게 해주는 기능이다. 1. useState (StateHook) useState는 Hook 개념에서 가장 처음 배우고 접하게 되는 함수다. 리액트 컴포넌트 안에서 state, 상태들을 관리해야하는 일이 있을때, class 없이 간편하게 사용 할 수 있도록 한다. .. 2022. 11. 25. [React] 컴포넌트 특징 컴포넌트 특징 저번 학습에서 전체적인 틀 컴포넌트 방식등의 구조를 찾아봤다면 이번학습에서는 실제로 코드를 입력해보며, 구조를 파악해보려고 한다. Reactjs code snippets *[VS CODE]**에서 리액트 확장 플러그인 설치 해당 코드 스니펫을 설치하게 되면 js 파일 내에서 사용이 가능하게 된다. 트리거 + Tab 키로 React 기본 뼈대를 만들 수 있다. 기본(보편)적으로 쓰이는 건 함수형과 클래스형인거 같다. 1. 클래스형 컴포넌트 : rcc + Tab key 2. 함수형 컴포넌트 : rsc + Tab key 1. 클래스형 컴포넌트 과거에 주로 사용했지만 함수형 컴포넌트에 hook을 지원하면서, 공식 문서에서는 함수형 컴포넌트와 훅을 같이 사용하기를 권장 하고 있다. 클래스형 컴포넌트.. 2022. 11. 25. [React]구조파악하기 리액트 구조 React를 설치시 여러 폴더 및 파일들이 설치가 됩니다. 리액트가 설치 되었을때 보여지는 폴더 구조 디렉토리 종류로는 node_modules : 모듈 패키지들이 위치 하는 폴더이다. 'npm install / yarn' 을 통해 설치를 할 수 있다. node를 통해 package.json 안에 저장 된 패키지들을 불러 올 수도 있다. public : static 자원폴더, 실제 html이 구현 되는 폴더로 보면 편하다. 리액트는 가상DOM 을 이용하여 부분 부분 나눠서 구현을 하는데, 그 부분에서 실제 DOM 역할을 해주는 html이 있는 폴더다. src : 리액트 개발을 하는데 사용하는 폴더이다. 이 부분이 리액트에서의 메인이고, 이 폴더에서 파일을 작성하고 수정하고 한다. 1. Publ.. 2022. 11. 25. 이전 1 ··· 3 4 5 6 7 다음 728x90
