전체 글 (23) 썸네일형 리스트형 JS (3) : To-Do List 만들기(1) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 JS에 대한 기본적인 내용을 알아보았다. 이번 포스팅부터는 To-do List를 만들어 보면서 실제로 개발 진행 시 JS를 어떻게 사용하는지 설명할 예정이다. Setting 우선 HTML파일과 JS 파일을 만들고, 두 파일을 연결시켜 주자. HTML 파일 DOCTYPE html> Document hello world JS 파일 console.log('connected'); 결과 그 후, 우리에게 필요한.. Flutter 앱 개발 (6) : To-Do List 기능 구현하기(할 일 수정 및 Style 수정) 이전 포스팅에서는 할 일 추가, 할 일 불러오기, 할 일 삭제 기능을 구현하였다. Flutter 앱 개발 (5) : To-Do List 기능 구현하기(할 일 추가, 할 일 삭제) (tistory.com) Flutter 앱 개발 (5) : To-Do List 기능 구현하기(할 일 추가, 할 일 삭제) To Do List 소개 간단하게 To-Do List의 기능을 소개하면 다음과 같다. 1. 할 일 추가 - 할 일 객체를 생성한 후, 할 일 내용을 저장한다. 할 일 객체에는 할 일 내용을 저장하는 work 변수와 할 일을 완료 j-d-e.tistory.com 1. 할 일 추가 - 할 일 객체를 생성한 후, 할 일 내용을 저장한다. 할 일 객체에는 할 일 내용을 저장하는 work 변수와 할 일을 완료했는지 확.. JS (2) : Style 및 Event 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 JS 포스팅에서 HTML에서 어떤 것을 가져오는 방법에 대해 배웠다. 이번엔 특정 element를 가져와서 style을 조작하고 event를 처리하는 방법에 대해 알아보자. 우리가 가져온 element 내부를 확인해 보자. element 내부를 확인하고 싶다면 console.dir() 을 사용하면 된다. 이전 포스팅에서 사용한 HTML에서 다음과 같이 수정해 주었다. DOCTYPE html> Document Grab m.. Flutter 앱 개발 (5) : To-Do List 기능 구현하기(할 일 추가, 할 일 삭제) To Do List 소개 간단하게 To-Do List의 기능을 소개하면 다음과 같다. 1. 할 일 추가 - 할 일 객체를 생성한 후, 할 일 내용을 저장한다. 할 일 객체에는 할 일 내용을 저장하는 work 변수와 할 일을 완료했는지 확인할 수 있는 isComplete 변수가 들어있다. 2. 할 일 삭제 - 생성된 할 일 객체를 삭제한다. 3. 할 일 수정 - 생성한 할 일 객체의 할 일 내용을 수정한다. 4. 할 일 완료 - 할 일 목록에 나타난 할 일 요소를 터치하면 해당하는 객체의 isComplete 변수를 수정한다. 5. 진척도 표시 - 완료한 할 일들의 비율을 계산하여 진척도를 표시한다. 6. 할 일 불러오기 - 생성한 할 일들을 화면에 출력한다. 할 일 객체를 저장하기 위해 객체 배열을 사용한.. JS (1) : JavaScript로 Browser 조작하기 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co JavaScript를 사용하는 이유? HTML과 상호작용 하기 위해서 JS를 사용한다. => HTML의 Element들을 JS를 통해 변경하고, 읽을 수 있다. JS로 HTML파일 조작하기 (with 'document') 자신의 HTML 파일을 열어 console에 document를 입력해 보자. 자신의 HTML 코드를 확인할 수 있다. 이처럼 document는 브라우저에 이미 존재하는 object이다. 우리는 이 objec.. Flutter 앱 개발 (4) : Flutter 추가 설정 및 To-Do List Layout 구성 Flutter 추가 설정 추가 설정 관련 내용은 nomadcoders의 flutter 강의를 참고하여 작성하였다. #3.3 VSCode Settings (06:18) – 노마드 코더 Nomad Coders All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 좌측 하단 설정 버튼을 눌러 command palette에 들어간다. 그 후, open user settings(JSON)을 클릭해 JSON 파일을 연다. 그 후, 원하는 내용을 JSON 파일에 추가한다. 1.2번은 굉장히 유용하니 추가하도록 하자. 1. "editor.codeActionsOnSave": { "source.fixAll": true }, 이 내용.. VSCode 설정 - Prettier Prettier? Visual Studio Code에서 제공하는 Code formatter 확장 프로그램이다. 협업 시 코드 형식을 맞추는데 유용하게 사용된다. 설정 방법 1. Prettier 설치 VSCode를 실행한 후, 확장에서 Prettier를 검색 후 다운로드 한다. 2. Setting에서 JSON 파일 수정하기 좌측 하단 톱니바퀴를 눌러서 setting에 들어간다.(단축키 : Ctri + ,) 그 후, 우측 상단에 Open Settings (JSON)을 클릭한다. 그 후, 원하는 양식을 추가하면 된다. 각 줄당 의미하는 바는 다음과 같다. prettier.printWidth - 화면에 나오는 한 문장의 길이(최댓값) prettier.tabWidth - tab으로 띄워지는 여백 길이 pretti.. Flutter 앱 개발 (3) : Dart Class에 대한 간단한 설명 Dart : Flutter 프레임워크의 기반 언어 Flutter 개발을 위해 알아두어야 하는 Dart 언어에 대한 최소한의 정보를 담아볼 계획이다. 이 게시글은 nomadcoder 강의 영상과 Dart 공식 문서를 참고하여 작성하였다. 코드 작성 및 실행은 dartPad를 이용하였다. 노마드코더 Dart 강의 영상 https://nomadcoders.co/dart-for-beginners Dart 시작하기 – 노마드 코더 Nomad Coders Flutter 앱 개발을 위한 Dart 배우기 nomadcoders.co https://dart.dev/language Introduction to Dart A brief introduction to Dart programs and important concept.. 이전 1 2 3 다음 목록 더보기
