본문 바로가기

전체 글

(57)
2021년 12월 14일 개발일지 자바스크립트 코어 공부 ** 정리해야할 개념 ** 함수 , 스코프 , 실행컨텍스트 ,텍스트, 클로저 , 생성자 함수에 의한 객체 생성 , 메서드 , this , 프로토타입 , 모듈화 함수에 관해서 공부 프로그래밍 언어의 함수는 일련의 과정을 문 (statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다 . 함수는 입력(input)을 받고 출력(output)을 내보내는데 , 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument) , 출력을 반환값 (return value)라고 합니다 . 함수는 값이며 , 여러개 존재할수 있으므로 , 함수를 구별하기위해 식별자를 붙여서 사용할수 있습니다 . 함수는 함수정의 (function definit..
2021년 12월 12일 개발일지 HTML 클래스 속성의 작명법 BEM (Block Element Modifier) 요소__일부분 Underscore(Lodash) 기호로 요소의 일부분을 표시 요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시 자바스크립트 공부 자바스크립트는 준비단계와 실행단계로 나뉘어져있습니다 . => 인터프리터 언어라서 , 인터프리터 언어란 ? 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경 컴파일 언어란 ? 사람이 만든 코드를 기계코드로 미리 바꿔놓음 . 기계에게 주기만 하면 회로를 움직일수 있는 상태로 만들어놓음 . 메모리에 대해서 다시 한번 공부했습니다 . 더나은 코드를 짜려면 메모리와 자바스크립트를 깊게 이해하는것이 좋을것 같습니다 . The Javascript Engine ..
2021년 12월 7일 개발일지 transition에 대해 공부해봤습니다 . transition이란 ? 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition : 속성명 지속시간 타이밍함수 대기시간 transition-property , transition duration , transition-timing-function , transition-delay transition-property : 전환 효과를 사용할 속성 이름을 지정 all : 모든 속성에 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 transition duration : 전환 효과의 지속시간을 지정 0s : 전환 효과 없음 시간: 지속시간(s) 을 지정 transition-timing-function : 전환 효과의 타이밍(easing) 함수를..
2021년 12월 6일 개발일지 css 배치에관해 공부 normal-flow : 자동 배치가 되는 공간 / 데이터가 왔다갔다 하는 공간이라서 유동적일 필요가 있음 . 오늘은 float에 관하여 공부를 한번 해보려고 합니다 . 요즘은 레이아웃을 잡는데 flex 나 grid로 하지 , float을 잘 사용하지 않는 말을 들어서 flex, grid만 공부해 왔는데 , 검색을 해보니 여전히 현업해서 float를 사용하는 경우가 종종 있다고 하여 ( 예전홈페이지를 유지 보수 할때 ) 이번 기회에 float 을 한번 확실하게 잡아야 겠다고 생각 했습니다 . 우선 float은 세 가지 property 밖에 없습니다 . left, none , right 입니다 . left는 말그대로 왼쪽으로 흐르게 하는것이고 , right 는 오른쪽 , none은 ..
2021년 12월 2일 개발일지 CSS 공부 width: height : 요소의 가로/세로 너비 auto : 브라우저가 너비를 계산 span : 대표적인 인라인 요소 , 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 . auto : 포함한 컨텐츠 크기만큼 자동으로 줄어듬 div: 대표적인 블록요소 , 본질적으로 아무것도 나타내지않는 ,콘텐츠 영역을 설정하는 용도 . auto : 가로사이즈 : 부모요소의 크기만큼 자동으로 늘어남 세로사이즈 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬 max-width , max-height : 요소가 커질수 있는 최대 가로/세로 너비 min-width , min-height : 요소가 작아질수 있는 최소 가로/세로 너비 box-sizing : content-box : 요소의 내용으로 크기 ..
2021년 12 월 1일 개발일지 리액트 공부 React Hooks useRef Javascript를 사용할때는 항상 특정 DOM 을 선택해 querySelector , getElementById 등등 DOM selector함수를 사용해 DOM을 집어왔었습니다 . 리액트를 사용할때도 가끔 DOM을 직접 선택해야하는 상황이 있습니다 . 저같은 경우 input 창에 focus를 하는데에 사용하곤 했습니다 . 그럴땐 리액트에선 ref 를사용합니다 . import react , {useState, useRef} from 'React' function App() { const [ input , setInput ] = useState('') const nameInput = useRef(); const focusOnInput = () => { nam..
2021년 11월 30일 개발일지 리액트에대해 공부를 시작해보려고 합니다 . 리액트는 기본적으로 DOM을 관리하기 위해서 만들어졌습니다 . 프로젝트가 커지면 javascipt코드에서 잡는 DOM 의 갯수도 많아질 것이고 , 그렇다면 코드는 점점 난잡해지고 복잡해질것이기 때문에 , 이러한 단점을 보완하기 위해서 react가 생겨났습니다 . react에선 Virtual DOM (가상 돔) 을 이용하여 , 상태가 업데이트되면 실제 돔과 가상 돔을 비교해 바뀐부분만 바로바로 실제 돔에 패치를 해주는 방식으로 운용이 되어 , 웹개발에서 정말 중요한 부분인 퍼포먼스를 뛰어나게 해주고 , 개발 과정에 있어서도 vanila js 보다 훨씬 더 간결한 코드를 운용할수 있게 해줍니다 . JSX JSX 는 리액트에서 생김새를 정의할대 사용하는 문법입니다 ...
2021년 11월 29일 개발일지 자바스크립트 공부 비동기 처리에 관한 공부 Promise 저는 주로 API를 콜할때 fetch 나 axios를 통하여 콜을 하는데 , 원래 fetch , axios는 Promise 기반 위에 쌓여진 ES8문법 , 외부 라이브러리 입니다 . 이전에는 비동기 처리를 하기 위해서 콜백 함수를 활용 해야했는데요 , 콜백 함수로 처리를 할 경우 코드가 많이 난잡해져서 흔히 말하는 콜백지옥 ( 가독성이 매우 떨어지는 긴 콜백 함수들로 연결되어있는 코드) 이 생성 됩니다 . 이러한 문제를 해결하고자 Promise를 사용하게 되었는데요 , const myPromise = new Promise((resolve , reject) => { // 구현 }) 이렇게 Promise를 생성해서 사용하면 되고 , 호출이 성공하면 r..