프로그래밍 끄적끄적

지난번에 만든 Todolist를 응용하여 NoteApp을 만들어보았습니다. todolist와 다른 점은 todolist는 한 페이지에서 작동하지만 Note App은 react-router-dom을 활용하여 다른 페이지에서 입력을 받고 메인 페이지에서 출력을 해주도록 하였습니다. 또한 검색 기능을 만들어 메모를 검색할 수 있도록 하였습니다. App.js title 이라는 state를 만들어주고 localstorage를 이용하여 초기화되지 않도록 해줍니다. title state는 메모 리스트를 담을 state입니다. 나중에 add.js components에 props를 이용하여 값을 전달해줄 것입니다. searchinfo state를 만들어주고 이 state는 검색을 위한 state이므로 초기값은 비어둡니다..

가장 기본적인 토이 프로젝트 To Do List를 만들어보았습니다. 주요 기능은 할 일 추가 및 삭제 현재 시간 표시 localstorage를 이용해서 페이지를 이동하거나 나가도 저장이 되도록 하였습니다. Todo.js 먼저 React hooks 인 useState를 이용해서 todo state를 추가해줍니다. 여기서 localstorage를 사용해서 페이지를 나가거나 이동하여도 state가 초기화되지 않도록 해줍니다. 또한 input 태그에서 value 값을 받아오기 위해서 something이라는 state도 만들어줍니다. 먼저 할 일 목록을 추가해주기 위해서 input 태그를 만들어줍니다. input 태그를 만든 후 onChange 를 넣어주어 input value 가 변할 때마다 즉, input 태..

🎬 Intro 저번에 만든 날씨 정보 제공 페이지에 이어 이번에는 영화 순위 정보를 제공해주는 페이지를 React를 이용해서 만들었습니다. 주 방법은 axios를 이용하여 API를 제공받아 화면에 출력하는 것입니다. App.js moviedata , date , inputdate라는 이름을 가진 State를 만들어줍니다. moviedata는 axios를 이용하여 받아온 정보들을 넣어둘 state이고 date는 날짜 정보를 넣어둘 state , inputdate는 input 태그에 날짜를 입력할 때 사용할 state입니다. 먼저 useEffect와 axios를 이용하여 날짜 정보를 받아옵니다. 이때 date state를 이용하여 API 주소 뒤에 붙여줍니다. 기본적으로 date state의 초기값은 202..

🌡️ Intro 날씨 정보 API를 이용한 날씨 정보를 검색하면 보여주는 페이지를 리액트로 구현했습니다. App.js 먼저 main과 city 라는 state를 만들어줍니다. main이라는 state는 axios를 이용하여 받아온 데이터를 저장하는 state이고 city라는 state는 검색에 이용되는 state입니다. openweathermap.org 사이트에서 오픈 API를 이용하여 axios로 날씨 정보를 받아 main이라는 state에 넣어줍니다. React Hooks 인 useEffect를 이용하여 component가 화면에 렌더링 될 때 받아올수 있도록 해줍니다. 그 후 dependency 배열 값에 city를 넣어주어 검색하는 값이 바뀔 때마다 다시 렌더링 될 수 있도록 설정합니다. 이제 A..

자바스크립트는 객체 기반 언어입니다. 객체는 기능과 속성을 가지고 있습니다. 객체를 쉽게 설명하자면 핸드폰을 예로 들 수 있습니다. 핸드폰에는 문자를 보내기 , 전화하기, 노래 듣기, 볼륨 줄이기 등 여러 가지 기능이 있습니다. 핸드폰이라는 객체에는 다양한 기능이 있고 이러한 주변의 모든 사물들을 객체라고 합니다. 자바스크립트에서 여러가지 기능들을 Method(메서드)라고 하고 객체는 각각의 속성 (property)을 가지고 있습니다. 핸드폰을 예로 들면 핸드폰의 여러 가지 기능이 메서드가 되고 핸드폰의 무게 색상 높이 크기 등이 속성이 됩니다. 객체.메서드(); 객체.속성; 또는 객체.속성 = 값; 자바스크립트 객체의 메서드와 속성을 사용하는 기본형은 위와 같습니다. 객체의 종류에는 크게 내장 객체 ,..

제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말합니다. 제어문에는 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 조건문과 변수에 일치하는 경우의 값에 따라 코드를 제어할 수 있는 선택문 그리고 여러 번 반복해서 특정 코드를 실행시킬 수 있는 반복문이 있습니다. 1. 조건문 if문은 조건식이 true일 경우에 코드를 실행합니다. if(조건식){ 자바스크립트 코드; } var num = 10; if (num > 5) { console.log("Hello world!); } 위의 코드를 보면 num = 10으로 선언이 되어있고 조건문 안에 num이 5보다 크므로 console에는 Hello world! 가 출력되게 됩니다. 위의 코드를 보면 User_Name을 사용자에게 입력을 받게 ..

자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있습니다. 산술 연산자 기호 기본형 기능 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 문자 결합 연산자 여러 개의 문자를 하나의 문자형 데이터로 합칠 때 사용됩니다. 결합하는 하나의 데이터가 문자형 데이터라면 나머지 하나의 데이터도 자동으로 문자형 데이터로 변환되어 결합이 됩니다. "hello" + "world" = "hello world" ; "12" + 234 = "12234"; // 앞의 "12" 가 문자형 데이터 이므로 뒤에 234도 문자형 데이터로 변환 대입 연산자 대입 연산자는 데이터를 변수에 저장될 때 사용합니다. 종류 풀이..

변수 (Variables)는 변하는 값 또는 데이터를 저장할 수 있는 메모리 공간입니다. 하나의 변수에는 오직 한 개의 데이터만이 저장됩니다. 그래서 새로운 데이터가 변수에 저장되면 기존에 있던 데이터들은 메모리 공간에서 지워지게 됩니다. 변수에 저장할 수 있는 데이터 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈(Null) 데이터가 있습니다. 1. 변수 선언 변수를 선할 때는 기본형 var 키워드를 변수명 앞에다 붙이면 됩니다. var를 사용하게 되면 변수의 재선언, 재할당이 모두 가능합니다. var 변수명 = 값; var num = 10; console.log(num); // 10 var num = 15;// 변수 재선언 가능 console.log(num); //..

자바스크립트란? 자바스크립트는 프런트엔드(Front-end) 개발 언어이며 웹 문서에 동작을 부여합니다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있습니다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었습니다. 많은 사람들이 JAVA와 Javascript를 이름이 비슷하다는 이유로 헷갈려 합니다. 하지만 햄과 햄버거처럼 둘은 다른 언어이며 실행환경 또한 다릅..