Hebom's Dev

만들려고 하는 앱에 필요한 기능등을 나열하다보니, 새로운 녀석과 마주쳤다! 그 녀석은 바로 PHP!!? 뭐람? PHP란 ? PHP : Hypertext Preprocesser의 약자로 웹프로그래밍 언어의 서버측 스크립트라고 생각하면 됩니다. (Hypertext이 곧 HTML이므로, HTML이 브라우저에 전달되기 전에 프로그래밍적으로 만들어내는 시스템, 언어라고 할 수 있습니다) 클라이언트 측 스크립트가 자바스크립트이고요. 웹 브라우저는 서버에서 내려받은 내용을 사용자(클라이언트)에게 보여주는 역할을 합니다. HTML이나 CSS로 작성한 웹페이지는 레이아웃이 고정된 페이지 즉, 정적인 웹페이지입니다. 반면에 자바스크립트나 PHP는 동적인 웹페이지를 만들어주는 역할을 합니다. PHP는 MySQL과 연동하기 ..

오늘도 인터넷 강의를 듣다가 모르는 것이 등장했습니다! 제이슨은 무엇일까요? JSON (=JavaScript Object Notation) 이란? 나무 위키의 내용 발췌 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식을 말합니다. 클라이언트가 사용하는 언어에 관계없이 통일된 데이터를 주고 받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 됩니다. 과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그등의 여러 요소로 가독성이 떨어지고, 쓸데없이 용량을 잡아먹는다는 단점이 항상 지적되어 왔다. 이에 대응해 간결하고 통일된 양식으로 각광을 받고 있는 것이 JSON입니다. 그래도 표면적으로 W3C의..

그냥 공부하면 재미가 없으니 게임에서 캐릭터가 성장하듯이 내 자신을 측정해보기로 했습니다. 기준은 다음과 같이 잡았습니다. 몬스터를 잡아서 경험치를 올릴 수는 없으니 '시간만 들이면 경험치를 얻는 방치형 게임이다' 라고 가정해보겠습니다. 카테고리 경험치 획득이 가능한 행동 획득 경험치 비 고 기본 공부하기 1점 시간당 1점이다. (강의 듣기/관련 정보검색/코딩 포함) 퀘스트 기술 블로그를 작성하고 업로드하자 1점 블로그 작성을 유도하고자 보너스 경험치 퀘스트 추가 기술서적을 읽자! 난이도 하 (얇다) 8점 기술책 읽기를 유도하고자 보너스 경험치 퀘스트 추가 난이도 중(중간) 10점 난이도 상(두껍다) 12점 강의를 끝까지 완료하자! 난이도 하 (짧은 강의 - 10시간 미만) 3점..

종종 클래스, 오브젝트, 인스턴스라는 용어를 들어본적이 있습니다. 대체 클래스, 오브젝트, 인스턴스가 뭘까요? 요약하자면, 🔶 객체(Object)는 상태(state)와 행동(behavior)의 묶음입니다. 🔶 클래스(Class)는 생성된 객체의 설계도(blueprint)나 프로토타입(Prototype)입니다. 🔶 인스턴스(Instance)는 클래스의 유니크한 유닛을 말합니다. 무... 무슨 소리인지요? 하나씩 세밀하게 들여다봅시다. 📌 객체(Object) 현실의 객체(object)는 두가지 특성을 가지고 있습니다. 인간을 예로 들어본다면, 상태(state, 이름과 나이 키, 몸무게 등등..)와 행동(뛴다. 잔다, 먹는다)로 나뉩니다. 자동차를 예로 들어본다면, 상태(현재 스피드, 기어 상태) 와 행동(브..

자바스크립트에서 문자열 표시할때 쌍따옴표? 따옴표? 를 써야 하나 갸우뚱했습니다. 자바스크립트에서는 문자열을 쌍따옴표 (" ")나 따옴표(' ') 다 인정한다고 합니다. 다만, 코드에서 일관성을 유지하는게 중요하다고 하네요. 즉, 쌍따옴표로 문자열을 표현하면 모두 쌍따옴표로 표시해주는 게 좋습니다. 워낙 플러그인이 알아서 포맷을 맞춰주니 그럴일이 없겠지만, 통일해서 쓰도록 합시다! 추가로 문자열 안에 따옴표를 넣고 싶을때는 이렇게 하면 됩니다. let frenchfry = "I like 'cheeze fry'"; //결과값 : I like 'cheeze fry' //그 반대도 가능하다. let frenchfry = 'I like "cheeze fry"'; //결과값 : I like "cheeze fry"..

오늘도 클론코딩을 하다가 모르는 명령어가 나와서 부랴부랴 찾아봅니다. :root에 대해서 mdn 사이트를 찾으면 다음과 같이 설명되어 있습니다. CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다. 번역이 이상한건지 저같은 초보자는 무슨 말인지 잘 이해가 안갑니다. 인터넷에 뒤적거리다보니(디자이너의 기록(https://designer-ej.tistory.com/)발췌) 다음과 같이 설명이 되어 있습니다. :root 는 웹문서 구조에서 가장 상위 요소를 선택할때 사용한다. html에서는 root는 항상 html을 가르킨다. 그러나 html보다 :root 가상클래스의 스타일 적용 ..

* 박재성, 고종범, 남재창, 박지현 저 * 로드북 p68 TDD(테스트 주도 개발, Test Driven Development)와 리팩토링(Refactoring), OOP(객체지향 프로그래밍, Object Oriented Programming) 연습을 위해 다음을 추천하셨다. 웹이나 앱처럼 응용프로그래밍에서 시작하지 말고 순수하게 프로그래밍 언어만으로 프로그래밍 연습을 해라. 첫째, 연습 문제는 게임처럼 명확한게 좋다. 둘째, 의존관계가 높은 (모바일UI, 웹 UI, 데이터 베이스, 외부 API와 같은 의존관계)가 없는 프로그램으로 연습할 것을 추천한다. 셋째, 로직이 약간은 복잡한 프로그래밍이어야 한다. 이에 대해 추천하는 예시는 다음과 같다. - 로또(단, ui는 콘솔, 이하 동일)/사다리 타기/볼..

스터디 멤버들과 이번 주에 각자 2023년의 코딩 공부의 목표를 세우고 발표하기로 했다. 이 기회에 주섬주섬 정리보자. 나는 과연 해낼 수 있을까? 목표 팬덤 관련 앱 개발하기 Version1 (= 풀스택 개발을 해보자! ) 기존 유사 모델을 참고하여 문제점을 개선하고 게임요소를 가미한 형태 선행작업 기획 및 설계하기 : Figma를 이용해서 설계하기 일정 세부화 하기 : Notion 일정 작성 개발이 예상되는 작업 프론트 사이드 하이브리드 앱 or 크로쓰 플랫폼 게임의 요소 가미, 레벨 정보, 행동누적의 경험치 서버 사이드 로그인 : RestAPI, NodeJS 등을 사용 회원 관리 카카오 맵 API나 네이버 맵 API 사용 회원의 위치정보 연동 채팅 연동 게시판 ..

📌 화살표 함수는 왜 쓰는건가요? function이라는 키워드를 사용하지 않아 코드가 짧아지고 입출력 기능을 직관적으로 전달해주는 장점이 있습니다. ES6문법부터 등장했다고 합니다. 📌 화살표 함수를 사용한 예시를 살펴봅시다. //기존에 함수를 표현할때 const sum = function (x,y) { return x + y; } //화살표 함수를 사용했을때 const add = (x, y) => { return x + y; } 훨씬 간결해보이네요.! 📌 매개변수가 하나일때는 괄호를 제거할 수도 있습니다. 다만, 매개변수가 없을때, 매개변수가 여러 개 일때는 괄호를 제거할 수 없으니 유의합시다. const square = x => { return x * x; } 📌 화살표함수는 리턴값까지 뺄수도 있다고..

요즘은 벌레잡기 게임 클론 코딩을 하고 있다. 변수에 중괄호({ })가 나와서 찾아본 것을 공부해보자! 말이 딱딱하고 어렵다! 구조 분해할당(Destructuring)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. 여기서 객체 구조 분해할당(Object Destructuring) 은 객체의 값을 변수에 담을 수 있다. 객체에서 여러개를 접근할때 하나씩 꺼내기가 귀찮으니까 중괄호를 사용해서 한꺼번에 접근한다. 이 표현식은 ES6버전에 새로 추가된 기능이라고 한다. 예시를 살펴보자! const user = { email: "harvey@mail.com", password: "dIkNGkdoPH", firstName: "Harvey", lastName: "Milk", ..

currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. Target : 이벤트가 발생한 요소를 반환한다. 말이 어려우니 다음과 같이 예시를 들어보자. 사과 바나나 const myDiv = document.getElementById('mydiv'); myDiv.addEventListener('click',(e)=>{ console.log('currentTarget : ',e.currentTarget.tagName) console.log('target : ',e.target.tagName) }); 결과값은 다음과 같다. currentTarget는 이벤트를 등록해 놓은 요소이기 때문에 listener를 붙여놓은 div가 출력된다. target은 이벤트가 발생한 요소를 반환하기 때문에 다음과 같다...

🗻 🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻🗻 자바스크립트 산을 어떻게 넘어야 하나 고민이 많다. '그동안 수강했던 유데미 강의를 반복해서 들을까?' '생활코딩 자바스크립트를 반복할까? ' '칸아카데미 자바스크립트 강의를 새로 들어볼까?' 라는 여러 가지 생각을 해보다가... 인터넷 선생님들이 하시는 말씀이 프로젝트를 많이 시도하는 게 좋다고 하셔서 처음으로 글자 계산기를 만들어봤다!!! 전문가들이 보기엔 너무나 간단한 것이겠지만, 스스로 인터넷에서 열심히 찾아서 껴맞추다보니 완성이 돼서 매우 기뻤다! 그리고 따라 하는 게 아니라 스스로 만들다 보니 배우는 게 많았던 것 같다. 이래서 권장하는구나 싶었다. https://milkiya2021.github.io/textCalculator/ (글자가 초과되면 초기화가 ..