study blog

이번에 split image slide(?)와 같이 만들어야 하는 업무가 생겨서 구글링을 통해 코드펜에서 예시를 찾았고 이를 분해하고 내 상황에 맞게 적용시켜 보려고 한다. 코드 예시 https://codepen.io/tutsplus/pen/bWKMoK html부터 봐보자. The original image. This is how the image looks like before applying a duotone effect. The duotone image. This is how the image looks like after applying a duotone effect. 나의 경우에는 description이 필요가 없고, img 부분만 있으면 되기 때문에 description 태그를 다 없애준다. ..

오늘 공부한 내용📄 Stack과 Queue 브라우저에서 자바스크립트 코드를 발견하면 stack에 넣은 다음 코드를 실행한다. stack이라는 공간은 코드를 맨 위부터 하나하나씩 실행시키는 공간이다. 만약 처리가 오래 걸리는 코드를 만나게 된다면?이런 경우에는 stack에 쌓아서 실행하지 않고 대기실로 보류를 해놓는다. 보류를 한 뒤 시간이 돼서 stack으로 옮겨야 할 때 바로 stack으로 옮기지 않고 queue라는 공간에 집어넣는다. 그 이유는 stack이라는 공간이 항상 바쁘기 때문에 비어있을 때 queue에 있는 코드들을 다시 stack으로 옮기는 것이다. (처리가 오래 걸리는 코드 = 서버로의 ajax요청, setTimeout, 이벤트리스너와 같은 코드) 그래서 위와 같은 코드들을 많이 쓰게 되..

오늘 공부한 내용📄 Ajax Ajax 요청이란 서버에게 요청하는데 새로고침 없이 할 수 있게 도와주는 일종의 코드이다. 일반 개발환경에선 jQuery 설치 후 ajax 함수 사용 리액트 개발환경에서는 axios 라이브러리를 설치하거나, fetch 함수 사용 axios.get('GET요청할URL') .then(()=>{ 요청 성공 시 실행할 코드 }) .catch(()=>{ 요청 실패 시 실행할 코드 }) 리액트에서 DOM접근 리액트에서 라이브러리를 쓰지 않고 이미지슬라이드를 만들기 위해 DOM접근 메소드를 사용했더니 잘 작동하지 않아 무슨 문제지? 하고 찾아보았고, 리액트에서 직접 DOM을 선택해 접근하는 것은 옳은 방향성은 아니라는 것을 알게 되었다. (처음에는 쓰면 아예 작동 자체가 안 되는 줄 알았..

1. 브라우저의 동작 렌더링 과정 DOM tree 생성: 렌더 엔진이 HTMl을 파싱하여 DOM 노드로 이루어진 트리를 생성 render tree 생성(시각적 구조 담당): css파일과 inline 스타일을 파싱 => DOM tree와 css DOM이 결합되어 render tree가 생성 Layout (reflow): 각 노드들의 스크린에서의 좌표에 따라 위치 결정 (position, size등이 여기서 결정됨) Paint (repaint): 실제 화면에 그리기 이 과정에서 DOM의 문제 => 어떤 인터랙션에 DOM의 변화가 발생되면 render tree가 그때마다 재생성됨 이 말은 render tree가 재생성되어 모든 요소의 스타일을 다시 계산하고, 다시 reflow하고, 다시 repaint를 하는 ..

오늘 공부한 내용📄 1. 리액트를 쓰는 이유 핵심적인 역할: 사용자 정의 태그 만들기 사용자 정의 태그는 부품으로 사용된다. 즉, 남의 부품을 가져와 사용할 수 있고 내가 만든 부품을 공유할 수 있는 셈 2. 구동 index.js에 따라 구동된다. ReactDOM.createRoot(document.getElementById("root")); 이 코드로 인해 내가 만든 컴포넌트를 전체적으로 감싸는 가 만들어 진 것이다. (index.html에 아래의 코드가 존재하는 것을 볼 수 있다.) 3. jsx를 사용하기 위한 몇가지 규칙 닫혀있는 태그 감싸져 있는 엘리먼트 자바스크립트 값 사용하려면 {} 조건부 렌더링 style className 이 중 헷갈리는 것만 정리해두려고 한다. 1) 자바스크립트 값 사용하..

오늘 공부한 내용📄 1. useRef //1. useRef를 사용해 slideRef라는 객체를 DOM에 접근할 수 있게끔 한다. let slideRef = useRef(null); //2. 해당 태그에 ref를 설정하면 접근이 가능케 된다. //3. slideRef로 DOM에 직접 접근하고 스타일 변경도 가능케 된다. slideRef.current.style.transform = `translateX(-${currentView}00vw)` 2. styled-component에서 hover 해당 요소를 hover했을 때의 스타일이 아닌 한 요소를 hover하면 해당 요소가 아닌 다른 요소의 스타일이 변하게끔 해주고 싶었다. const Btn = styled.span` width: 10px; height: ..

4월이 되었다. 일단 4월 첫주는 웹디자인 학원 다닐 때 만들었던 웹사이트를 다시 구현해보려고 한다. 지금 와서 그 때 코드를 보면 내가 왜 이렇게 했더라...? 싶은게 많았어서 처음부터 다시 차근히 만들어봐야겠다. 그리고 사이트를 만들 때 쌤한테 이건 어케 해요? 라고 물어봤을 때 그건 개발자가 하는 거라 거기까지 구현 안 해도 돼~ 라고 하셨던 검색 부분도 최대한 구현해보려고 한다. 이전에 깃허브에 올려놨던 것도 다시 한 번 확인해봐야겠다. (개인적으로 맘에 안 드는 부분을 찾았는데 어떻게 해결할지 고민해봐야 할 듯)

오늘 공부한 내용📄 1. import와 export를 이용해 모듈식 개발이 가능하다. 자바스크립트 코드가 길어지면 파일을 쪼개는 게 좋은 관습이라고 한다. 파일을 쪼개놓은 뒤 import와 export를 사용해 내보내고 가져다 쓸 수 있다. 특정 변수를 다른 파일에서 이용할 수 있게끔 내보내려면 export default 변수명을 그 변수를 가져와 쓰고 싶다면 import 변수명 from '경로' 를 작성한다. 만약 여러개를 export하고 싶다면 export {변수1, 변수2} 로 내보낸다. 중요한 점은 export라는 키워드는 여러번 쓸 수 없다는 점이다 (= export는 한 파일 당 한 번씩 사용 가능) import할 때도 import {변수1, 변수2} from '경로' 로 작성한다. 만약 ex..