은성의 개발블로그

https://axexcovidpersonalitytest.netlify.app/ 나의 위생 타입은? 하나도 안 궁금한 코시국 테스트 axexcovidpersonalitytest.netlify.app 첫 프로젝트인 '코시국 심리테스트'에서 제일 고생했던 건 '로딩 페이지'이다 export랑 import를 이용해 변수를 다른 html 파일에도 그 변수를 쓸 수 있도록 하고 싶었는데 (선택지 페이지 -> 로딩 페이지 -> 선택지에 따른 결과 페이지 이동을 위해) 구글링해서도 여기저기 수소문해서도 해결하지 못했다... 결국 같은 페이지 내에서 해결해서 결과 페이지로 이동했다 -> node 서버를 안 올려서 그런가?? node start 명령어로 안 해서?? 아시는 분은 알려주세요... 선택지 페이지 -> 로딩..

몇 개월 동안 고생한 '코시국 심리테스트'!! (그림은 디자인팀이 그렸습니다!! 제가 그린 게 아니에요!!) 원래 개발팀이 3명이었으나 사정이 생겨 대부분은 내가 코드를 짰다... (정말 힘들었지만, 재밌었어) 아직 서버 다룰 능력이 없고, 서버 비용도 있으니 netlify를 이용해 html, css, js로만으로 웹사이트를 만들기로 했다! 다만, url이 netlify.app으로 해야 무료라서 .com는 다음 기회에~! html, css, js만 배웠다 하면 이런 방법으로 사이트 하나 만들어보는 것도 좋다! 다른 언어 배우느라 까먹었던 걸 다시 기억거나 추가적으로 배울 수 있었다 뭐든 써먹어야 성장하나 보다 우여곡절 시리즈로 '애드핏', '로딩 페이지'도 쓸 예정!! (언젠가.. 하겠지) https:/..

이브와에서 깃 공부로 git 테스트를 만들어줬는데요 이정도까지 해봤지만,, git는 이해하기 어렵네요 실전으로 해봐야 어디서 쓰는지 왜 이 명령어가 필요한지 확실하게 이해할 수 있을 것 같아요 아마 이 사이트를 번역한 것 같더라고요 나름 git을 머리에 집어 넣었어요 ㅋㅋㅋㅋ https://learngitbranching.js.org/?locale=ko Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org 어쨌든 수료증 받고 마무리~! 프로젝트 잘 돼서 코엑스에 발이라도 딛고 싶네요!!

매번 html에 javascript 파일을 로 연결해서 실행해왔지만 딱 js 파일에서 console.log 값이 어떻게 나오는지 정리해보려고 합니다! 1. 비주얼스튜디오에서 해당 파일이 있는 폴더를 열어요 맨 위에 File 파일 탭을 누른 후 Open folder에서 찾으시면 됩니다! 2. Termianl 터미널을 열어줍니다 File 탭 옆쪽에 있는 Termianl에서 new terminal 클릭! 터미널을 여는 단축키 : ctrl + shift + ` (백틱 backtick : ~ 밑에 보이는 것) 3. Termianl에서 'node + 파일 이름.js'라고 명령해주면 됩니다! 4. 그러면 바로 실행 결과가 밑에 나옵니다 5. 폴더 안에 js 파일을 실행하고 싶다면.. 'node ./폴더이름/파일'로 ..

이브와 프로젝트로 Udemy 강의를 지원해주고 있어서 무료로 수강 중이에요 😄 하지만 한글 자막이 없는 강의가 많아서 듣고 싶은 강의를 못 듣는 중.. 영어 공부의 필요성을 절실하게 느낍니다.. 어쨌든 저희 팀에서 사용할 라즈베리파이를 공부하기 위해 '라즈베리파이 IoT 시작하기'를 수강 중입니다! 라즈베리파이 4까지 나왔는데 강의에서는 라즈베리파이 3까지 나왔다고 해서 좀 옛날 강의인 것 같더라고요.. 그게 아쉬워요! ( OS 다운받으려고 했는데 사이트가 업그레이드 돼서 못 찾았다.. 유튜브에서 찾아야지 ) 하지만 라즈베리파이를 쉽게 가르쳐주셔서 열심히 공부하고 있습니다 (블로그 비공개로 저장 중!!) 라즈베리파이랑 아두이노 공부하니깐 메이커로 취미생활하고 싶어지네요 마치 슈르연구소처럼! 라즈베리파이 ..

frontend - 웹 화면 담당 - 데이터 조회하고 화면에 전달 - 화면에 주소를 담당하는 라우팅 - web publishing : 디자인된 내용을 화면에 구현 - UI, 데이터처리 및 상태 값 관리 backend - 중요한 서비스 로직 - 보안 - 디비 연결 및 관리 - 서비스 코어 기능 - 서버 전송처리 - 모델링 작업 (수집된 데이터 관리) progressive framework library : 자바스크립트를 더욱 손쉽고 편리하게 도와주는 도구 SPA 방식 (single page application) : 하나의 페지가 모든 화면과 기능을 담고 있음 ( 페이지를 한 번만 불러오면 됨) 1. vue angular와 react의 장점만 골라 만들어졌다. 비교적 쉬운 학습 난이도 성능도 리액트와 비교..

간단한 프로젝트라면 아래 코드처럼 초기화 해도 되지만, *{margin:0; padding:0;} 큰프로젝트라면 init.css / reset.css / initialize.css 를 검색한 후 가져다가 쓰는게 낫다. outline : border의 바깥 외곽선 - 요소를 두드러져 보이게 만들고자할 때 사용 - outline 선의 너비는 레이아웃에 관려하지 않고 눈에만 선이 보인다. vh = viewport height vw = viewport width => 스크린 크기에 맞게 상대적 크기를 반환 100vh, 100vw - 전체 화면의 기준 (예시) 스크린 크기가 height = 1000px, width = 600px => 1vh = 10px / 1vw = 6px [ 그라데이션 ] background:..

DOM - 오브젝트 모델 형태로 제어를 하고 interactive 효과를 준다. EVENT btn.addEventListener("행위","작동되는 내용") - 행위에는 click 등을 쓴다. - 이벤트를 자체에 대한 내용을 인자부분에 작성 데이터를 보내는 방식 1. GET - 주소에 요청하는 내용을 함께 보내는 방식 2. POST - body에 포함해서 보내는 방식 [ Network ] //정상 Status Code: 200 //페이지가 없을때 Status Code: 404 //서버에 에러 Status Code: 500 fetch() api를 불러오고 정보를 내보내는 함수 get과 post 방식을 설정한다. 설정을 안하면 기본적으로 get json() - 응답(response stream)을 받아 읽고..

들어가기 앞서, cmd창에서 했고, 편의상 >로 코드 실행을 나타냈습니다. 참고로 notepad는 메모장을 뜻합니다. branch (가지) Master branch - 메인 가지 master branch 말고 다른 branch는 이름을 맘대로 지은다. ex) Test_branch git branch > * master - git branch : 현재 branch가 뭐가 있는지 알려주는 명령어 - * : 현재 선택되어 있는 branch git branch branchName - branch를 추가하는 명령어 - branchName에 본인이 직접 branch의 이름 작성 git checkout branchName > Switched to branch 'branchName' - git checkout bran..

방학에 코딩 공부를 하려고 이것저것 찾아본 결과 여러 사이트를 알게 됐어요. 최대한 무료 강의만 보는 편이라 다른 분들에게도 알려주고 싶어서 포스팅합니다! https://www.inflearn.com 인프런 - 프로가 되는 온라인 클래스 | 온라인 강의 플랫폼 프로그래밍, 인공지능, 데이터, 마케팅, 디자인, 엑셀 실무 등 입문부터 실전까지 업계 최고 선배들에게 배울 수 있는 곳. 우리는 성장 기회의 평등을 추구합니다.... www.inflearn.com 1. 인프런 인프런은 무료 강의와 유료 강의가 같이 있는 사이트입니다. 유튜브에 올려져 있는 강의도 있더라고요. 새해에 유료가 무료로 전환되는 이벤트가 있어서 좋습니다. 장점 1. 카테고리별로 강의 구분 가능하다 (무료/유료, 파이썬, 블록체인,,, 등..