티스토리

JDI's note

검색하기

블로그 홈

JDI's note

baro-baro.tistory.com/m

JDI_ 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

메모앱 MOMO (7) - 첫 프로젝트를 완성하며 독학 한달 정도의 시간이 걸려서 처음으로 프로젝트를 완성했다!! 아직 부족한 부분도 많고 발견 못한 오류도 있겠지만 상당히 뿌듯하다. 중간중간 어려웠고, 포기하고 싶었던 순간도 있었지만 끝까지 만들어냈다는 것이 참 자랑스럽다. crud 뿐 아니라 db도 써보고, 폴더 기능도 만들고, 검색기능도 만들면서 많이 배운 것 같다. 확실히 이론만 보는 것보다 실제로 만드는게 더 와닿고 좋은 것 같다. electron js로 빌드해서 실행파일도 만들어봤다 아래의 링크에서 다운받을 수 있다 ㅎㅎ 윈도우 64용 https://drive.google.com/file/d/1jcR_9kGu6uQZbUQ-yZrWCHW5wCBLrtx1/view?usp=sharing MOMO Setup 1.0.0 copy.exe drive.go.. 공감수 0 댓글수 0 2022. 8. 3.
메모앱 MOMO(6) 기존에 localStorage를 데이터베이스 대용으로 쓰고 있었는데 폴더 기능을 만들면서 indexedDB 로 데이터베이스를 바꿨다. 처음 데이터베이스를 쓰다보니 잘 안되기도 하고, 우여곡절이 많았지만 원하던 기능을 만들어 냈다!! 며칠을 매달린 만큼 정말 뿌듯했다 ㅎㅎ 공감수 0 댓글수 0 2022. 7. 30.
메모앱 MOMO(5) 폴더 시스템을 만들려고 했는데 localStorage로 잘 안된다. (실제로 폴더를 분리해서 그 안에 노트를 작성하는게 안된다) 나중에 db나 서버를 배워서 만드는게 더 나아 보인다. 공감수 0 댓글수 0 2022. 7. 24.
메모 앱 MOMO(4) 내가 참고했던 crud 프로젝트에서는 노트를 선택하자마자 그 노트를 삭제하고 새로운 노트를 생성하는 방식으로 노트를 수정했는데, 나는 노트를 선택해도 바로 지워지지 않고, 내용을 수정할 때만 수정되고 그렇지 않을 때는 노트가 그대로 있도록 하고 싶었다. 하루 종일 코딩을 한 건 아니지만 매일 코딩하면서 이 기능을 만드는데 4일 정도 걸렸다. 처음에 생각했던 것에서 오류가 나고, 그걸 고쳐보고, 아예 새로운 방법으로 해보기도 하고, 또 오류가 나고 그랬다. 중간에 포기도 할 까 했지만 결국 정상적으로 기능을 만들었다! 참고했던 프로젝트 : https://www.freecodecamp.org/news/learn-crud-operations-in-javascript-by-building-todo-app/#:~.. 공감수 0 댓글수 0 2022. 7. 22.
매모앱 MOMO(3) 팝업 메뉴 다크모드 입력버튼을 누르면 바로 텍스트 입력창으로 포커스가 이동하는 기능을 구현했다. 공감수 0 댓글수 0 2022. 7. 11.
메모앱 MOMO(2) 메뉴 아이콘의 배치를 다시 맞췄고 각 영역의 테두리를 둥글게 바꿨으며 스크롤바를 만들고 배경색을 변경했다. 메뉴 아이콘의 비율이 왜 안맞나 했더니 아래 각각의 영역들과 다른 마진을 적용하고 있었다. 3개로 나눈 영역에 각각 좌우 마진을 넣었어야 했는데, 3개를 담고있는 하나의 요소에만 좌우 여백을 적용했던게 문제였다. 공감수 0 댓글수 0 2022. 7. 7.
메모 앱 MOMO(1) 구상한 앱의 디자인을 실제로 만들었다. 전체적인 배치를 만들었다. 이론만 볼 때는 쉽게 느껴졌던 것 같은데 역시 직접 만드니까 어려운 점도 있고, 색달랐다. 만들면서 보니까 버튼이 검정색인게 나아 보인다. 깃허브 프로젝트 주소 : https://github.com/baro-baro/momo/tree/master 공감수 0 댓글수 0 2022. 7. 6.
간단 메모앱 - MOMO 간단한 메모앱을 구상했다. 디자인이랑 색상에 대해서 잘 몰라서 디자인은 애플 메모장, 색상은 대충 넣어봤다. 처음에 구상할 때 메모장에 손으로 그려서 하려고 했는데, 디자인 툴 피그마를 쓰니까 간단하고 알아보기도 쉬워서 좋았다. 일단 html, css, Js 로 웹 페이지로 만들어보고 나중에 electron 으로 데스크탑 앱으로 만들어봐야겠다. 깃허브 프로젝트 주소 : https://github.com/baro-baro/momo/tree/master 공감수 0 댓글수 0 2022. 7. 5.
CSS 첫걸음 CSS는 Cascading Style Sheets의 약자다. casecade는 '작은 폭포, 폭포처럼 쏟아지는 물'이라는 뜻인데 폭포처럼 위에서부터 아래로 스타일을 적용시키는 것이다. css는 html 문서에 우리가 태그로 작성한 요소들에 접근해서 스타일을 적용할 수 있게 한다. 아래는 html의 p요소에 접근해 색깔, 너비, 테두리를 적용한 것이다. p { color: red; width: 500px; border : 1px solid black; } 이렇게 앞에 스타일을 적용하고 싶은 html 요소를 지정하고 {} 안에 원하는 스타일을 적으면 된다. 하지만 위처럼 적용하면 모든 p요소가 저런 스타일로 적용된다. 그래서 다양한 선택자를 통해 더 자세하게 html 요소를 지정할 수 있다. p{} /* .. 공감수 0 댓글수 0 2022. 7. 4.
HTML 첫걸음 HTML은 HyperText Markup Language의 약자로 HyperText는 웹 페이지를 다른 페이지로 연결하는 링크고, Markup Language는 태그 등을 이용해서 문서나 데이터의 구조를 명기하는 언어다. 대충 링크를 누르면 이 페이지, 저 페이지 이동할 수 있는데 그게 태그로 구조화된 것 같다. 그래서 어떨 때 사용할까? 웹 콘텐츠의 '의미'와 '구조'를 정의할 때 사용한다. html은 안에 원하는 요소를 적어서 문서를 구조화할 수 있는데 안에는 태그 외에도 필요한 속성을 적을 수 있다. 는 닫는 태그인데 경우에 따라 필요없는 경우도 있다. hello world! Mozilla Manifesto html은 이런 태그들을 이용해서 하이퍼링크도 만들고, 문서 구조도 만들고, 입력창, 버튼,.. 공감수 0 댓글수 0 2022. 7. 3.
내가 프로그래밍을 다시 공부하는 이유(새로운 공부 방향) (이전 내용... 내가 프로그래밍 공부를 포기했던 이유-안 좋은 공부방법) 3. 왜 다시 공부하는가? 미련이 남았다. -만들어보고 싶은 거라고 이것저것 적어놨는데 내가 제대로 해보지 않고 또 포기하는 게 싫었다. 조금이지만 배웠던 시간이 아쉽기도 했고.... 인생의 플랜 B였다. -편입을 실패하게 되면 원래 학교를 다녀야 하는데 복수전공으로 it관련 과로 하려고 했다. 이것이 진로 계획 중에 하나였고 그때 내 생각에 책임을 질 시기가 왔다고 생각했다. 4. 어떻게 달라질까? 첫 번째, 욕심부리지 말자. 일정 수준이 될 때까지 html, css, 자바스크립트만 한다. 웹, 앱만들기 2학기가 되고 컴공을 복전하면 다른 언어도 만지고 다른 것들도 하겠지만 일단은 위의 것들만 한다. 두 번째, 적당히 하고 넘어.. 공감수 0 댓글수 0 2022. 7. 2.
내가 프로그래밍 공부를 포기했던 이유 (안 좋은 공부방법) 난 작년에 편입을 포기하고 복학까지 약 4개월 정도 프로그래밍을 독학하다가 포기했었다. (그렇게 5개월 정도 지났고 배웠던 내용도 가물가물하다) 1. 처음에 왜 코딩을 배웠지? 내가 코딩을 배웠던 이유는 미래에 대한 불안감도 있었지만, 무언가 만들어 보고 싶다는 생각이 들었기 때문이다. 개발에 대한 생각을 적은 노트 개수가 120개가 넘었다.(물론 비슷하고 중복된 아이디어들이 있긴 하지만..) 시작은 그렇게 공부를 시작했다. 2. 그런데 왜 포기했을까?? 첫 번째, 욕심이 너무 과했다. 이왕 하는 거 근본부터 제대로 하고 싶었고, 웹도 앱도 만들고 싶었고, 해킹도 배워보고 싶었다. 그래서 기본이라고 여겨지는 C책을 사서 공부하고, 자바를 공부하고, 스위프트도 깔짝이고, 파이썬도 시도했다. html, cs.. 공감수 0 댓글수 0 2022. 7. 2.
객체 1. 객체 객체는 관련된 데이터와 함수의 집합이다. 객체 안에 있는 데이터는 프로퍼티, 함수는 메서드라고 부른다. 객체의 프로퍼티는 key를 통해서 쉽게 찾을 수 있다. 자바스크립트에서 객체를 만드는 것은 변수를 만드는 것과 비슷하다. var person = {}; 객체에 프로퍼티와 메서드를 넣어보자 const person = { name: ['Bob', 'Smith'], age: 25, gender: 'male', interests: ['music', 'programming'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ; this.age + ' years old. He likes ' + this.interests[0] + ' .. 공감수 0 댓글수 0 2022. 6. 30.
화살표 함수 기본 화살표 함수는 함수 표현식을 더 간단하게 쓰는 방법으로 문법의 생김새 때문에 이런 이름이 붙여졌다. let func = (매개변수1, 매개변수2...) => {함수 내용}; 위의 화살표 함수는 아래의 함수 표현식과 같다. let func = function(매개변수1, 매개변수2...){ 함수내용 }; 매개변수가 하나도 없을 때는 괄호를 비워놓으면 되는데, 이 때 괄호를 생략해서는 안된다. let sayHi = () => alert("HI!!"); sayHi(); 참고 : https://ko.javascript.info/arrow-functions-basics 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arr.. 공감수 0 댓글수 0 2022. 6. 30.
함수(함수 선언, 함수 표현식, 재귀함수) 프로그래밍의 함수는 수학의 함수와 비슷한 것 같지만 좀 다르다 수학에서의 함수는 하나의 값에 하나의 결과가 나오지만 프로그래밍에서는 함수에 반환값이 없을 수도 있고, 하나의 값을 넣고 여러 개의 결과를 얻을 수도 있기 때문이다. 일단 찾아본 함수의 정의는 이렇다. "함수, 서브루틴, 루틴, 메서드, 프로시져는 소프트웨어에서 특정 동작을 수행하는 일정 코드 부분을 의미한다."-(위키) "함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다."-(MDN) "함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. 프로그램과 마찬가지로, 함수 역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 값을 '전달'하면, 함수는 값을 '반환'할 것.. 공감수 0 댓글수 0 2022. 6. 29.
반복문 (break, continue 레이블) 1. break 반복문이 완료되기 전에 종료하고 싶을 때 사용한다. switch 조건문에서 본적 있다. for(i = 0; i < a.length; i++) { if (a[i] == theValue) { break; } } 2. continue break와 비슷하게 동작하지만, 반복문을 완전히 탈출하는게 아니라 반복문의 다음 반복문으로 건너뛸 때 사용한다. i = 0; n = 0; while(i < 5){ i++; if(i == 3){ continue; } n += i; } 3. label label은 프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 문을 제공하는 것이다. 쉽게 이름표를 붙인다고 생각하면 좋을 것 같다. 아래와 같은 방식으로 이름을 붙인다. label : statement 예시 mar.. 공감수 0 댓글수 0 2022. 6. 29.
반복문 (for, while, do-while) 반복문은 이름에서 알 수 있듯 똑같은 명령을 반복하기 위해서 쓴다. 반복을 하는데 이런게 필요한 것 같다. 1. 반복할 내용 2. 얼마나 반복할지 (선택) 얼마나 반복할 것인지 어떻게 정할 수 있을까? 원하는만큼 반복하려면 반복의 횟수를 알 수 있어야한다. 그러려면 그 횟수를 저장할 수 있는 변수가 필요하다. 1. 초기값 : 반복을 정하는 변수를 설정한다 2. 조건 : 반복할 횟수를 설정한다 3. 증감률 : 한 번 반복할 때 얼마나 횟수를 늘릴지 정한다 (반복할 내용을 실행한 다음에 실행한다) 위 요소들은 생략할 수 있는데, 증감률을 생략하면 조건이 참일 경우 무한히 반복하게된다. 모든 요소를 생략하게되면 무한히 반복하게 된다. 반복문을 쓰는데는 for, while, do-while, for-in, fo.. 공감수 0 댓글수 0 2022. 6. 29.
nullish 병합 연산자 ?? 여러 피연산자 중에 '값이 확정되어있는 변수'를 찾기 위해 나왔다. a ?? b 를 평가한다고 할 때 a가 null 이나 undefined가 아니면 a를 a가 null 이나 undefined라면 b를 반환한다. const foo = null ?? 'default string'; console.log(foo); // 'default string' 이 반환된다. const baz = 0 ?? 42; console.log(baz); // 0은 null이나 undefined가 아니라서 바로 0이 반환된다. ?? 는 || 와 비슷하지만 차이가 있다. 변수에 활용할 때 ||는 첫번째 참인 값을 반환하지만 ??는 첫번째 정의된 값을 반환한다. height를 따로 정의하지 않으면 100이 할당되지만 height = h.. 공감수 0 댓글수 0 2022. 6. 28.
논리 연산자 논리 연산 : 참, 거짓 두 가지 원소만 존재하는 집합에서의 연산이다. (위키) 자바스크립트는 3개의 논리 연산자를 가지고 있다. || : or && : and ! : not 1. || (or) 연산자 피연산자가 하나라도 true면 true를 반환하고, 모두 false일 때만 false를 반환한다. 즉 하나라도 true면 true다. 그렇기 때문에 첫번째 피연산자가 true면 그 뒤의 연산은 하지 않는다 (true가 반환된다) result = value1 || value2; result2 = value1 || value2 || value3; 2. && (and) 연산자 피연산자가 모두 true 일 때만 true를 반환하고, 하나라도 false가 있으면 false를 반환한다. 즉 하나라도 false면 fa.. 공감수 0 댓글수 0 2022. 6. 28.
조건문 (switch-case) 조건문에서 필요한건 아래의 것들이다. 1. 조건 2. 조건이 맞을 때 실행될 내용 3. 조건이 맞지 않을 때 실행될 내용(선택) 같은 조건문인 switch문도 비슷하다. if 문에서는 조건이 참이냐 거짓이냐에 따라 내용이 실행되는게 기본이었는데 switch 문은 특정 변수가 특정한 값을 만족하면 내용을 실행하는 것이다. 즉 변수가 case의 값을 만족하는 것이 switch문의 기본적인 조건이되고, 이것이 참이면 내용이 실행된다. 크게 보면 if와 다르지 않다. 조건(변수가 특정 값일 때)이 맞을 때 실행될 내용을 적고, 그렇지 않을 때 실행될 내용(case나 default)을 적는 것이기 때문이다. 그래서 대부분의 if문은 switch문으로, switch문은 if 문으로 바꿔쓸 수 있다. 다만 상황에 따.. 공감수 0 댓글수 0 2022. 6. 28.
조건문(if-else if-else) 조건문이란 뭘까? 조건문의 정의를 알아보면 조건문 : 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. (위키백과) 즉 (주어진 조건) 상황에 맞게 알맞은 동작(실행)을 하게 하는 게 조건문이다. 이런 게 필요할 것 같다. 1. 조건 2. 조건일 때 실행될 내용 3. 조건이 아닐 때 실행될 내용 (선택사항) 자바스크립트에서는 if와 else if, else로 조건문을 사용한다. switch문도 사용하는데 일단은 if문만 알아보면 이렇다. if에 조건과 조건이 맞을 때 실행할 내용을 적는다. else에 if의 조건이 맞지 않을 때 실행할 내용을 적는다. else if에는 if의 조건이 맞지 않을 때 쓸 다른 조건과 내용을 적는다. (개수 제한 .. 공감수 0 댓글수 0 2022. 6. 27.
비교 연산자 1. 비교 연산자 값을 비교할 때 쓰고, 참 거짓 중 하나를 반환한다. >,=, 1 ); //true alert( 1 = 5 ); //false alert( 3 'A'); // true alert( 'Glow' > 'Glee'); //true alert( 'Bee' > 'Be'); //true alert( 'B' 1 ); //true alert( '01' == 1); // true 4. 일치 연산자 동등 연산자 == 는 0과 false를 구분하지 못한다. 구분하려면 일치 연산자 =.. 공감수 0 댓글수 0 2022. 6. 27.
기본 연산자와 수학 1. 수학 연산자 일반적으로 배웠던 수학 기호와 비슷하다 + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈 % : 나머지 ** : 거듭제곱 alert( 1 + 2 ); // 3 alert( 2 - 1 ); // 1 alert( 2 * 3 ); // 6 alert( 6 / 2 ); // 3 alert( 5 % 3 ); // 2 , 5를 3으로 나눈 나머지다 alert( 2 * 3 ); // 8, 2의 3제곱이다 그리고 자바스크립트는 다른 언어와 다르게 숫자와 문자끼리의 연산도 가능하다 alert( '1' + 2 ); // 3 alert( 5 - '2' ); // 3 alert ( 3 * '4' ); // 12 alert ( '8' / 2 ); // 4 2. 복합 할당 연산자 += : 오른쪽 수를 더한 다.. 공감수 0 댓글수 0 2022. 6. 27.
형변환 자바스크립트에서 함수랑 연산자에 전달되는 값은 대부분 자동으로 적절한 자료형으로 변환된다. 이렇게 자료형이 바뀌는 것을 '형변환'이라고 한다. 1. 문자형으로 형변환 형변환 하고 싶은 것을 String()으로 감싼다. let value = true; //변수 value에 boolean인 true를 할당한다 value = String(value); //변수 value에 문자열 "true"가 저장된다. 2. 숫사형으로 형변환 형변환 하고 싶은 것을 Number()로 감싼다. let str = "1234"; //변수 str에 문자열 "1234"를 저장한다 let num = Number(str); //문자열 "1234"가 숫자 1234로 변환되어 변수 num에 저장된다 undefined는 NaN null은 0 .. 공감수 0 댓글수 0 2022. 6. 26.
alert, prompt, confirm 1. alert 사용자가 '확인' 버튼을 누를 때까지 메시지를 계속 보여주는 창을 띄운다. alert("hello"); 2. prompt 뜻: a sign on a computer screen that shows that the computer is ready to receive your instructions 사용자에게 값을 입력받는데 사용한다. 사용자에게 보여줄 문자열, 입력 필드의 초기값을 받는다. result = prompt(title, [default]); //기초값인 default는 써도되고 안써도 된다. result = prompt('how old are you?', 25); //초기값이 25로 세팅됨 result = prompt('how old are you?'); //초기값 없음 3. c.. 공감수 0 댓글수 0 2022. 6. 26.
자바스크립트란 html, css로 만든 페이지를 동적으로 만들기 위해 쓴다. node.js 등으로 웹 바깥에서도 쓸 수 있게 되었다. 원하는 데이터를 정확히 골라서 내가 원하는 방식으로 가공할 수 있는 것, 그리고 내가 구현한 기능을 원하는 요소에 연결하는 것이 중요한 것 같다. html에서 구조를 짜고, 그 구조에 잘 접근해서 css로 꾸미고, 자바스크립트로 동작을 추가하는 것 같다. 공감수 0 댓글수 0 2022. 6. 26.
자료형 자료형은 데이터의 종류다. 자바스크립트에는 8개의 기본 자료형이 있다. 1. 숫자형(number) 우리가 흔히 아는 숫자다. 다른 언어와 다르게 정수, 소수 구분하지 않는다. 이 외에 Infinity, -Infinity, NaN 같은 특수 숫자 값도 포함된다 let n = 123; //변수 n에 숫자 123 할당 n = 123.456; //n에 123.456을 재할당 2. bigint 자바스크립트는 내부 표현 방식 상 (25^53-1) 보다 큰 값이나 -(25^53-1)보다 작은 정수를 '숫자형'으로 나타낼 수 없는데, 이보다 더 크거나 작은 수를 표현할 때 쓴다. 입력한 정수 값 끝에 n을 붙여서 쓴다. cosnt bigInt = 1234567890123456789012345678901234567890.. 공감수 0 댓글수 0 2022. 6. 26.
변수와 상수 1. 변수 변수는 다양한 종류의 값을 담는 컨테이너에 이름을 붙인 것이다. 변수는 데이터를 저장할 때 쓰는 '이름이 붙은 저장소'다. 변수는 let과 var를 사용해 만들 수 있다. (let을 쓰는 것을 권장한다) 변수는 선언, 초기화, 할당 단계를 가진다 선언은 변수를 생성하는 것이고 초기화는 생성한 변수를 0이나 undefine 같은 값으로 설정하는 것이고 할당은 그 변수에 값을 저장하는 것이다. var age; //age 변수 선언, 자동으로 undefined로 초기화된다 let name; //name 변수 선언, 자동으로 초기화가 이루어지지 않는다 var age = 25; //age변수에 숫자 25를 할당 let name = 'baro'; //name변수에 문자열 baro 할당 2. 상수 상수는 .. 공감수 0 댓글수 0 2022. 6. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.