본문 바로가기

전체 글

 (380)
html 태그의 속성의 중요성에 대하여(html의 input태그의 type="email"에 대하여) 위와 같이 input태그의 type="email" 이라고 설정하면 html언어 자체적으로 input안에 들어가는 문자열을 검열하여 '@'이 들어가있지 않으면 자체적으로 에러를 발생시킨다. 즉, 내가 '@' 기호가 있는지 없는지를 검사하라고 코딩해 준것도 아니고 없다면 아래와 같은 오류를 발생시키라고 명령한 적도 없는, html자체의 고유한 기능이다. 이와 같이 html태그의 속성은 매우 중요한 역할을 한다. 지금은 일일히 그것을 다 알수 없어도 각각의 속성들은 중요한 역할을 한다. 예를들어 서버에 데이터를 전송할때나 label태그와의 상호작용을 할때 input태그의 속성들은 각각 저마다의 역할이 있다.
이벤트 리스너, 콜백, 이벤트 버블링에 대하여 이벤트 리스너 이벤트 리스너는 말 그대로 해당 이벤트에 대해 대기중인 겁니다. 항상 리스닝 중이죠. 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행됩니다. window.onload = function () { alert('I\'m loaded'); }; 위의 코드를 보신 적이 있을지 잘 모르겠습니다만, 이 코드가 대표적인 이벤트 리스너입니다. window가 load될 때에 function 부분이 실행되는거죠. load됐다는 것을 누가 알려주냐면, 브라우저가 알려줍니다. 비슷한 코드로, 그리고 자주 쓰이는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + '이벤트명'으로 명명됩니다. 자주 쓰이는 이벤트의 목록을 알려드리자면, onblur(객체가 focus를 잃었을 때), onchan..
html form태그 속성과 그 속성에 근거하여 연결된 input, button태그와의 연관성에 대하여 html의 input태그의 type을 submit으로 하면 버튼모형으로 바뀌고 submit이 아니면 텍스트를 입력할 수 있는 input창으로 변함. input태그를 감싸고 있는 form태그의 onSubmit 이벤트 핸들러에 js로 어떠한 함수를 등록시켜 놓으면 input태그의 type속성의 값을 submit으로 주었다는 전제하에 그 함수가 실행된다. 즉 form태그의 onsubmit이벤트 핸들러의 실행은 form태그 그 자체와는 관계없이 그 안에 있는 input태그나 button태그의 속성인 type을 submit으로 지정한 것과 연관된 것이다(그 버튼을 누르면 onSubmit의 값으로 할당된 함수가 실행되는 것이다. 참고:https://penguingoon.tistory.com/188
@emotion/babel-plugin "정신이 번쩍든다... 개발이라고 해서 뭐가 다르겠냐. 결국 변별되는 개발자는 독해력이 있는 개발자다. 그 진부한 거 말이다. " 상황: SLEACT프로젝트중 alecture폴더에 pages폴더에서 styles.tsx폴더에 import styled from '@emotion/styled'; @emotion/styled 라이브러리 관련 설정하는 중 webpack.config.js파일에 https://www.npmjs.com/package/@emotion/babel-plugin 이 공식문서에서 @emotion/babel-plugin 에 관하여 해석하고 있는 상황. 위 사이트에 있는 표중 중요한 것은 나는 위의 표가 @emotion/babel-plugin 를 설치하면 얻을 수 있는 특징이라고 해석하지도 못했다..
Code splitting(코드 스플리팅)에 대하여 공부동기: 제로초 영상시청중 소개됨 https://www.inflearn.com/course/lecture?courseSlug=%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85&unitId=71103&tab=community 출처: https://www.nextree.io/code-splitting/ 요약: Code splitting이란 UX(사용자 경험)를 좋게 하기 위한 것으로 초기 페이지 로딩속도를 계선하기 위한 방법이다. Code splitting의 구체적 방법으로 lazy, suspense가 사용된다. (페이지 로딩속도 개선에 대해 언급하니 이 영상이 생각남 https://www.youtube.co..
[Workout프로젝트 깃 일지] 변경된 로컬의 develop브랜치의 내용 원격의 main브랜치에 반영하기 방법1. 가장 권장되는 방법으로 github을 이용, github의 PR(pull request)를 이용하는 것이다. 우선 변경된 내용을 add, commit, 원격의 develop브랜치에 push한수 아래 보이는 pull request버튼을 눌러 차례차례진행시켜 준다. 이렇게 되면 말그대로 협업이 가능하게 되는 것이다. 왜냐하면 내가 pr요청을 한것을 누군가가 검사하고 적절하면 반영한다는 의미이므로. 방법2. 혼자서 작업한다면 굳이 github의 pr기능이 없이도 아래의 명령어로도 로컬에서 원격의 다른 브랜치로 push가 가능하다. 다만 개발은 협업이므로 보통은 깃헙의 pr기능을 이용하는 것이다.
[Workout프로젝트 깃 일지] 원격에 새로운 브랜치(develop) 생성후 로컬에서 develop브랜치로 push하기 원격에 develop브랜치를 새로 하나 만들었다. 그리고 그 브랜치로 기존의 main브랜치에 있던 모든 내용을 가져온 상태다. 이러한 상태에서 당연하겠지만 새로생긴 develop브랜치의 폴더를 모두 새로 로컬로 다운 받아 새롭게 생긴 폴더를 관리하는게 맞다고 느껴졌다. 하지만 이 생각은 틀린 생각이다. 그런데 나는 왜 이런 생각을 했던 것일까? "개발하다가 변경 사항이 있을수 있고 그렇게 되면 하나의 폴더 안에서만 작업하게 되니 기존의 내용이 망가지잖아?" 이건 그냥 어린생각이다. 깃의 의의를 생각해 보면 이것은 잘못된 걱정이다. 그렇다면 하나의 폴더 내에서 원격 브랜치, 로컬 브랜치를 옮겨 가며 작업해야 한다는 것인데 그 과정을 아래에서 기록한다!! 터미널에서 git branch 명령어로 현재 로컬 브..
Webpack의 historyApiFallback에 대하여 요약: historyApiFallback이란? 개발중인 프로젝트의 라우팅의 작동하지 않는 문제를 해결하는 webpack.config.js파일의 속성 출처: https://velog.io/@wusi-hub/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Webpack%EC%9D%98-historyApiFallback-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-%EB%9D%BC%EC%9A%B0%ED%8C%85-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 라우팅은 웹 애플리케이션에서 특정 URL 경로에..

티스토리툴바