잼로그(JAM_log)

1. 이벤트 버블링? 이벤트 버블링(참조)이란 무엇일까, 이벤트 효과가 전파되는 과정 중 하위 요소에서 상위 요소의 순으로 전파되는 과정을 말한다 Event | PoiemaWeb 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. 이벤트가 발 poiemaweb.com 같은 이벤트 타입 리스너가 상위요소와 하위요소에 모두 존재할 경우, 하위 요소에서 해당 이벤트를 발생시키게 되면 상위 요소에서도 해당 타입의 이벤트가 동일하게 발생하게 된다 이러한 동작이 일어난다는 것을 꼭 알아 두어야 할 필요가 있다 2. 버블링 방지가 필요한 경우 같은 타입의 이벤트 핸들러가 있을 때, 상위..

Studying (Review)/JavaScript 2022. 11. 3. 23:32

1. Fragments에 대해 1-1. JSX에서 root 태그는 하나만 존재할 수 있다 JSX는 HTML과 JavaScript를 하나의 컴포넌트로 만들어 렌더링 시켜주는 문법이라고 할 수 있다.(HTML in JS 라고나 할까..?) JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 결국 JSX는 컴파일 되어 JavaScript로 표현이 되는데, 이 때 React.createElement() 호출을 통해서 컴파일이 이루어지게 된다.(참조) JSX 문법을 사용해서 렌더링할 컴포넌트를 return 안에서 호출하고 있기 때문에, return이라는 키워드의 측면에서 생각해본다면 JSX는 단 하나의 root를 가질 수 ..

Studying (Review)/React 2022. 9. 26. 23:32

지난 시간에 이어 이번에는 JavaScript 코드 작성에 대한 이야기로 포스팅을 이어보려고 한다. 작성된 코드에 대한 설명이 주된 내용이므로, 관심이 있거나 필요한 부분만 골라서 보면 될 것 같다. (혹시나 포스팅 내용에 오류가 있다면 제발 꼭 좀 알려줬으면 좋겠다..) 1. 뼈대를 완성하자 (HTML 마크업) To Do List 입력 What I Have To Do? COPYRIGHT 2022. JAENY, All rights reserved 가장 집중한 부분은 semantic 태그를 최대한 잘 사용해보자 하는 것이었고, 기본적으로 필요한 태그나 내용을 최대한 빠뜨리지 말자는 것이었다. 아래 내용을 펼쳐서 확인하면, 각 태그 사용에 대한 의도를 간략하게 서술하였다. 태그 내부 더보기 HTML 문자열 ..

Studying (Review)/JavaScript 2022. 8. 29. 23:34

기본기가 너무 많이 부족한 상황이다. 그래서 간단하지만 새로운 프로젝트를 진행하기로 했다. React 없이 JavaScript로만 To Do List를 만드는 것이다. 먼저 개발환경을 세팅해주었다. 폴더를 만들고 README를 생성한 후에, npm init명령어를 통해 package.json을 생성하고 필요한 패키지를 아주 조금 설치해주었다. 다음으로는 src 폴더를 생성해서 index.html ToDoList.js index.scss 를 만들고 기본적인 html 코딩 및 전역 폰트를 설정해주었다. GitHub에서 Repository를 생성한 후에 local에서 git init 이후 git add remote를 통해 연결을 해주었고, 기본적인 세팅과 코딩이후 commit 및 push를 진행하였다. 패키지..

Studying (Review)/JavaScript 2022. 8. 28. 11:11

자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈에서 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 도입하고자 하면서 브랜던 아이크(Brendan Eich)가 개발한 자바스크립트를 도입하게 되었다. 1996년 3월 처음 "Mocha"라는 이름을 통해 Netscape Navigator2 웹 브라우저에 탑재되었고, 9월에 "LiveScript"로 이름이 변경되었고, 12월에는 "JavaScript"로 명명되었다. 자바스크립트의 파편화와 표준화 1996년에는 마이크로소프트에서 자바스크립트이 파생 버전인 "JScript"를 IE(인터넷 익스플로러)3.0에 탑재하였는데 JScript와 자바스크립트가 표준화 되지 못한 상태에서 각 브라우저에서만 동작하는 기능들을 경쟁적으로 추가하면서 브라우..

Studying (Review)/JavaScript 2022. 8. 15. 23:38

참조 | https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1. React는 무엇인가? React는 UI(사용자 인터페이스)를 만들기 위한 JavaScript 라이브러리이다 2. React 활용에 필요한 사전지식과 요구사항(by TaniaRascia) HTML, CSS에 대한 기본지식 프로그래밍과 JavaScript에 대한 기본지식 DOM(Document Object Model: 문서객체모델) 에 대한 기본이해 ES6(ECMAScript 2015) 문법과 기능에 대한 지식 Node.js와 npm(Node Package Manage..

Studying (Review)/React 2022. 5. 14. 18:53

참조 | https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 1. Next는 무엇인가? Next는 React 기반의 프레임워크로 빠른 웹 애플리케이션에 필요한 빌딩 블럭을 제공한다 2. 웹 어플리케이션 구축을 위해 고려해야 할 것들 UI(유저 인터페이스) - 사용자(User)가 어플리케이션과 상호작용하는 방..

Studying (Review)/Next.JS 2022. 5. 14. 16:39

한 동안 너무 정신이 없었다 그래봐야 지난 한 주 간이 DB를 배우던 주간 이었고, 이번주부터는 HTML, CSS, JavaScript를 모조리 한 번에 배우는 중이다 강사님도 바뀌었는데 그 전 강사님께서 앞으로 많이 힘들거다 이야기 해 주셨던게 이렇게까지 빨리 와닿을 줄이야 지난 주부터 이상하게 집중이 잘 안되고 정신이 없었다 코드를 따라 치고는 있지만, 이해를 온전히 하는 상황은 아니었던 것 같다 이번 주 월,화는 속도도 속도지만 그 많은 내용을 빠르게 훑다보니 더 정신이 없는 것 같다 그러한 와중에 피곤도 하고 귀찮아진것도 있어서 티스토리 글을 안쓰게 되었던 것 같다. 수업시간이 끝나면 체력이 고갈되어서 소파위에 뻗어버리기 때문에, 무엇도 할 수 없는 상태가 되었다 그렇다고 밤에 정리를 하는 것도 ..

Studying (Review) 2021. 10. 27. 02:31