본문 바로가기

전체 글75

[Web] 프로젝트 준비 - ( week 1) 필수프로그램 설치 VSCode 웹 페이지를 만들기 위한 코드는 메모장을 사용해도 문제없지만 편의성이 떨어지기 때문에 다양한 기능을 제공하는 VSCode를 사용한다. VSCode download Live Server VSCode의 확장 프로그램으로 실시간으로 코드를 확인할 수 있는 툴이다. Live Server를 통해서 코드를 작성하고 저장하면 변경사항을 즉시 브라우저로 확인할 수 있다. 웹 페이지 만들기 바탕화면에 폴더를 만들어준다. 그리고 VSCode를 열어서 해당 폴더를 열어준다. vscode에서 tags.html 이름으로 파일을 만들어준다. tags.html 파일에서 html을 입력하면 인텔리전스를 통해서 추천 자동완성 키워드가 뜨는데 여기서 html:5를 선택한다. 그러면 자동으로 코드가 작성되는.. 2023. 4. 6.
[Web] 브라우저 원리 - ( week 1) 크롬을 기준으로 웹 개발에 대해서 학습한다. 웹 브라우저 원리 크롬 브라우저를 열어서 네이버에 접속한다. 그리고 아무거나 요소를 선택해서 '우클릭 > 검사'를 클릭하면 개발자 모드 창이 활성화된다. 다시 한번 텍스트로 된 요소를 검사하면 개발자도구 창에서 해당 텍스트를 안내해 주는데 텍스트를 더블클릭하고 수정해 보면 현재 페이지가 입력한 대로 수정되는 걸 확인할 수 있다. 하지만 새로고침을 하거나 다른 페이지에 방문 후 돌아와 보면 다시 원래대로 돌아와 있게 된다. 이번엔 브라우저를 띄운 채로 인터넷 연결을 끊어본다. 그래도 페이지는 여전히 띄워진 채로 있으며 다른 페이지로의 이동하게 되면 인터넷 연결 에러가 보인다. 여기서 발생하는 의문점이 있다. 어떻게 내가 보고 있는 페이지는 수정이 되는 것이며 인.. 2023. 4. 6.
[Flutter] 샘플 만들기 - (week 1) Login Page 위젯을 다루면서 예제를 따라서 만들어본다. 예제는 로그인 페이지로 상단에 텍스트를 띄우고 그 안에 공간에서 이미지와 이메일과 비밀번호는 텍스트 입력을 받을 수 있는 요소와 로그인을 진행할 버튼으로 구성되어 있다. 여기서 실제 로그인 기능은 구현하지 않고 보이는 것들만 만들어본다. 우선 main.dart 파일의 코드를 살펴본다. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // MaterialApp 또한 위젯이다 return MaterialApp( debugShowCheckedModeBanner: fals.. 2023. 4. 5.
[Flutter] 프로젝트 만들기 - (week 1) 프로젝트 생성 우선 바탕화면에 sparta 폴더 안에 flutter로 구분해서 생성한다. 이 폴더에 앱 개발에 관련된 리소스를 저장하고 관리할 것이다. 그리고 VSCode를 실행시킨 후 Flutter 프로젝트를 생성한다. View > Pallete에서 Flutter를 검색하면 자동완성이 되는데 VSCode 확장 프로그램인 Flutter를 설치해야만 볼 수 있다. Flutter:New Project를 선택하고 Application을 선택한다. 그러면 경로를 선택하는 창이 뜨게 되는데 여기서 아까 생성해 둔 폴더를 선택해 주고 프로젝트의 이름을 작성해 주면 Flutter로 개발할 수 있는 기본세팅으로 프로젝트가 생성된다. 여기서 주의할 점은 프로젝트의 이름은 영문 소문자와 _ 문자만 사용이 가능하다. 디렉터.. 2023. 4. 5.

티스토리툴바