본문 바로가기

JavaScript, HTML, CSS

(11)
[JS] Object(객체)의 깊은 복사 1. JS에서의 복사 다른 언어에서 값은 사용하는 구문에 따라 값-복사(Value-Copy) 또는 레퍼런스-복사(Reference-Copy)의 형태로 할당/전달한다. C++을 예로 들자면, #include using namespace std; void foo(int& myNum) { myNum = 100; return; } int main() { int x = 10; cout
[JS] 07. JS에서의 OOP [CODESTATES im16] JS에서의 OOP 자료구조? 데이터를 어떻게 효율적으로 조직, 관리, 저장할 것인지 데이터 값의 모임, 또는 데이터 간의 관계, 데이터에 적용할 수 있는 함수 수도 코드(Pseudo Code)? 프로그램을 작성할 때 프로그램이 작동하는 논리를 표현하기 위한 콬드 특정 언어의 문법에 따라 쓰인 것이 아니라, 일반적인 언어로 코드를 흉내 내어 알고리즘을 써놓은 코드 1. Procedural Language, Object-Otiented language 1-1. 절차지향 언어(Procedural Language) 프로그램 안에 있는 것들의 관계를 설정하는 언어. 1-2. 객체지향 언어(Object-Otiented Language) 프로그램을 유지하는 모든 것이 오브젝트로 이루어..
[HTML]03. 목차 클릭 시 해당 라인으로 이동하기(내부 링크), <a> 태그 목차 클릭 시 해당 라인으로 이동하는 HTML작성 방법! 내부 링크를 이용하면 된다. 아래는 구현하고 싶었던 내부 링크의 사용 예시이다. 01. 목차 테스트 태그 내부 링크는 태그의 응용으로, 다른 페이지로 이동하는 것이 아닌 내부의 특정 태그로 이동하는 것이다. 우선 태그의 사용 방법을 간단하게 설명하고 넘어가겠다. a태그 a태그 내부 링크 사용 방법 1. 태그 작성 테스트 테스트 위의 코드라인과 같이 빈 태그를 작성하면 링크가 연결되어 있지 않기 때문에 클릭해도 이동하지 않는다. 그렇기 때문에 링크를 작성해야 한다. 2. 태그에 링크 연결: herf 테스트 테스트 참고로 HTML링크에서 "#"은 현재 페이지라는 뜻이다. "#여기로"는 현재 페이지에서 id가 "여기로"인 태그를 뜻한다. 그렇기 때문에 ..
[JS]06. setTimeout(), apply(), 함수의 type setTimeout(), apply(), 함수의 type 간단한 설명 - 목차 01. setTimeout() 02. apply() 03. 함수의 type 코드 스테이츠 Pre 코스 여덟째 주 수강 후기. 이번 주는 수업 중 배웠던 내용보다 underbar문제를 풀면서 알게 된 내용을 중점으로 정리해보려 한다. 화요일에는 Callback과 비동기 호출, 함수 메소드에 관해 강의를 했지만 당일에 일정이 있어서 저녁 7시에 있는 zoom수업에 참여를 못했다. 코드 스테이츠는 세션을 놓치게 되면 그 세션의 영상을 며칠 내로 올려주기 때문에 복습을 하고 싶거나 세션에 참여하지 못했을 경우 그 날의 수업 영상을 다시 볼 수 있어서 좋다. 어쨌든, 지금은 그 세션 영상을 봤지만 책이나 다른 자료들을 보고 더 공부를 ..
[HTML, 코드스테이츠]02. DOM 코드 스테이츠 Pre 코스 일곱째 주 수강 후기. CSS는 신기하긴 했지만 썩 재밌진 않았는데 DOM은 진짜 재미있었다. 내가 짠 코드로 HTML을 제어하니까 재밌네. 수업 전 트위틀러를 만들었을 땐 클로저를 사용해서 innerHTML로 코드를 짰었다. 근데 저번 화요일 수업에서 그걸 만들어 주는 메서드가 있다는 것을 배웠다. 완전 신세계ㅋㅋㅋㅋ 근데 목요일 수업에서는 그 편한 메서드보다 템플릿이 더 좋다는 걸 배웠음. 템플릿을 사용한다면 js를 보지 않고도 디자인을 바꿀 수 있다! 많은 걸 배워서 좋았다. DOM DOM(Document Object Model) HTML 또는 XML document와 상호작용하고 표현하는 API HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델. DOM은 ..
[HTML, 코드 스테이츠]01. HTML, CSS 기초 코드 스테이츠 Pre 코스 여섯째 주 수강 후기. 이번 주차에선 프런트엔드 개발과정의 기초를 배웠다. HTML이나 CSS관련은 아예 몰라서 궁금했었는데 생각했던 것보다 재밌고 신기하고 귀찮다ㅋㅋㅋ 과제는 드디어 트위틀러. 어디서부터 시작해야 할지 잘 모르겠어서 예습만 하다가 이번 주 강의 이후부터 시작했다. 아직 완성한 건 아니지만 코드를 짜긴 했다. 문제는 이렇게 하는 게 맞는지 모르겠다는 것. 다른 사람들 코드를 보면 함수 구성 방식부터가 달라서 혼란스럽다. 에잉.. 일단 풀고 나서 생각해봐야지. 목차 1. HTML 2. CSS 01. HTML HTML(HyperText Markup Language) 웹페이지의 구조를 만들 수 있는 마크업 언어. tag로 이루어져있음. (tag: 부등호 로 묶여있는 ..
[JS, 코드 스테이츠]05. Closure, Parameter, new 키워드와 객체지향 JavaScript 코드 스테이츠 Pre 코스 다섯째 주 수강 후기. 이번 주는 새로운 개념을 많이 배워서 쓸 게 엄청 많다. 이걸 쓰는 데 걸리는 시간도 길어지겠지. ㅎ.. 클로저 부분에서 특히 더 오래 걸렸다. 신기하긴 한데 이걸 왜 써야 하는지 이해가 잘 되지 않아서 이것저것 찾아봤다. 결국 이해를 하긴 했는데 정확하게 이해한 것이 맞는지에 대한 확신이 없다. 어렵다 어려워. 목차 1. 클로저 Closure 2. 매개변수 Parameter 3. new키워드와 객체지향 JavaScript 1. Closure Lexical Scoping(어휘적 범위 지정) 이 부분은 자세히 아는 것이 아니기에 추후에 더 공부해서 추가할 예정 function init() { let value = "Mozilla"; // value는 ini..
[JS, 코드 스테이츠]04. 변수의 전달, Scope 목차 1. 변수의 전달 2. 스코프 Scope 1. 변수의 전달 Primitive Types(원시 타입) scalar type 또는 simple type로도 불림 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터의 값을 보관한다. null, undefined, Boolean, Number, String Reference Types(참조 타입) complex type 또는 container type로도 불림 참조 타입 데이터는 크기가 정해져 있지 않다. 변수에 할당될 때 해당 변수에 직접 값이 저장될 수 없으며, 변수에는 데이터에 대한 참조(메모리 주소)만 저장된다. 참조는 참조 타입 데이터의 주소이지 해당 데이터의 값이 아니다. Array, Object, Function //..