어느 망한 하루의 시작

그분이 찾아오셨다. 5시에 스터디카페에 와버렸다. 진짜 .. 나란놈 정신차렷!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 정신차리자.. 내일은 빨리오자.

프로그래머스 자바스크립트 스터디 2주차

lang="ko"의 의미 타입을 주석으로 다는 방법 JsDoc https://poiemaweb.com/jsdoc-type-hint JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기 | PoiemaWeb JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기 poiemaweb.com CSS :root https://developer.mozilla.org/en-US/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element and..

CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus

https://hogni.tistory.com/110 CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus 가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다. :hover hogni.tistory.com focus https://mong-blog.tistory.com/entry/focus-%EA%B4%80%EB%A0%A8-%EC%84%A0%ED%83%9D%EC%9E%90%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90focus-focus-within-focus-visible f..

CSS 초기화 하는 방법

http://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com

자바스크립트 코드 리팩토링

주석을 표시해두었습니다 a,b를 찾아보세요. 현재 각각의 생성자 함수에서 a,b 와 같은 방법으로 new 키워드를 사용했는지 아닌지를 판단하고 있습니다. 이러한 코드를 함수로 밖으로 빼면 더 간결하게 코드를 짤 수 있는데요. 주석은 회색배경 글자로 편의상 쓰겠습니다. isInstanceof 함수, a , b 에 주목해주세요. isInstanceof 함수를 만들어줌으로써 중복되는 코드를 함수를 사용하여 리팩토링한 모습입니다. 너무 길어져서 접은글로 리팩토링 전 , 리팩토링 후 코드를 나타내겠습니다. 리팩토링 전 더보기 처음에 내가 짠 로직은 Validator 라는 함수를 만들었다. 그후 Validator 안의 this.validate 라는 메소드를 만들었다. 우선 이 로직으로 data를 validate 하..

throw new Error 를 try-catch로 잡아주기

다음처럼 throw new Error를 통해서 에러를 만들어 주었다면 try-catch에서 잡아주는 것이 당연하다. 나는 왜 바보

리액트 JSX 에서 html 렌더링 방법 추가

객체리터럴을 사용할 수도 있고 import "./styles.css"; const test = { a: Hello, b: 안녕하세요, c: Bonjour }; export default function App() { let key = "a"; return {test[key]}; } 함수에 따로 html 리턴을 만들어서 사용할 수도 있다. import { useState } from "react"; import "./styles.css"; export default function App() { function A() { return ( 안녕하세요. 우지입니다. ); } const [state, setState] = useState(true); return {state && A()}; }

동적인 DOM 객체 생성

다음 코드는 div 태그를 정적으로 갯수를 지정해주고 innerHTML 을 통해 값을 넣는 코드이다. 다음 코드를 보자. 뭐가 다를까? 우선 위 코드는 를 정적으로 몇개 선언해주어야했지만, 이 코드를 보면 이다. $target 변수에 의 DOM 객체를 할당한다. ($를 붙힌 이유는 DOM 객체를 할당한 변수라는 컨벤션이다.) 이제 TodoList 생성자 함수안에서 this.$target 에 createElement('ul')을 통해서 ul 태그를 만들어준다. 그 후 ul 태그를 main 태그안에 넣어주는 것이다. 는 다음과 같아질 것이다.

생성자의 파라미터를 객체로 받는것에 대하여

뭐가 좋다 나쁘다 하기에는 개인적인 스타일이지만, 이번에 생성자의 파라미터로 객체형태를 받는 것을 배웠다. 우선 기존의 내코드를 보자. 이번에는 이 코드를 보자. 아까 말했던 대로 파라미터를 객체로 받는 방법이다. 위 디자인 패턴은 RORO(Receive an object, return an object) 패턴이라고 한다. https://taegon.kim/archives/8058 자세한 내용은 위 링크에서 찾아보면 될 듯하다. 다른분께 설명할때 RORO 패턴이예요! 라고 하면 좀 더 있어보이니까. RORO 패턴으로 얻을 수 있는 이점은, 파라미터를 넘길 때 프로퍼티로 넘기기 때문에 이 데이터가 무엇을 의미하는 데이터인지 가독성 측면에서 더 낫다고 생각한다. 또한 파라미터를 던질때도 순서를 고려하지 않아..

git commit 할때 주의 해야할 점

commit은 기능단위로 이루어져야한다. 추후에 내가 git history를 보고 이 코드는 이 기능 구현이였지? 알 수 있어야한다. git branch 는 merge 후 삭제하는 습관을 들이자. 만약 merge 하고 오류가 생긴다면 hotfix 브랜치를 만들어서 에러를 잡아주자. npm install 로 모듈을 설치할때마다 commit을 하는 습관을 들이자. 해당 모듈을 설치해서 추후에 node modules depedency 오류가 발생했을때 비교적 찾기 쉬울 것이다. 깃 컨벤션 꼭 지켜주자.