Kenna Kenna

WEB Dev

• [React] Udemy 강의 노트

  WEB Dev/StudyNote 2022. 11. 8. 23:07

  빠르게 요점만 리액트는 무엇일까? - 자바스크립트 라이브러리 - 컴포넌트 기반의 UI 라이브러리 - 사용자 인터페이스를 만드는데 사용 - 자바스크립트는 사용자에게 뭔가 다른 것들을 보여주기 위해 새로운 HTML 페이지를 요청하지 않아도 되게 한다. - 클라이언트 자바스크립트를 작성하는데 도움 - 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축 - 복잡한 사용자 인터페이스를 쉽게 구축 - 응용 프로그램을 작은 블록과 작은 컴포넌트들로 분할 - 유지보수가 쉽도록 만듦 - 복잡한 사용자 인터페이스를 더 쉽게 구축 - 화면에 표시되는 내용을 제어하는 싱글 페이지 애플리케이션 리액트 대신 - 앵귤러 - 컴포넌트 기반의 UI 프레임워크 - 리액트보다 많은 내장 기능 - 타입스크립트 내장 - 뷰 - 컴포넌트 ..

  Read More
• [Javascript] DOM의 변화를 감시하는 MutationObserver 사용하기

  WEB Dev/Javascript | REACT | Node.js 2022. 10. 28. 00:17

  리액트에서는 useEffect처럼 DOM의 변화를 인식해서 재렌더링을 해주는 기능이 있지만 바닐라 자바스크립트에서는 누가 데이터의 변화를 감지하고 있지 않기 때문에 여러가지 방법으로 DOM에 변화를 일으켜줘야 한다. 그럴때 사용하는게 바로 Observer 기능인데 이번에는 회사에서 일을 하면서 Observer을 이용해서 여러가지 기능을 만들게 되었다. Observer에는 InterSectionObserver와 MutationObserver 두 가지가 있는데 자세한 설명은 링크한 MDN을 살펴보면 된다. InterSectionObserver는 무한 스크롤을 만드는데 사용했는데 MutationObserver로 어떤 Node가 추가되었을 때 다른 Node의 변화를 주는 기능을 구현하여 간단하게 정리해보려고 한..

  Read More
• [카페24] 카페24 디자인 버전관리와 함께 자동 배포하기

  WEB Dev/GIT | GITHUB 2022. 9. 20. 19:43

  *회고 겸 작성하기 때문에 엄청 길어요. 필요하신 분들은 하단의 방법만 참고하세요. 카페24를 호스팅으로 이용하는 커머스의 개발자로서 카페24는 그야말로 구원자이자 장애물인데 그 중 가장 해결해보고자 했던 것이 바로 '배포'라는 행위이다. 일단 카페24를 서버로 쓰는 것이 아니라 쇼핑몰 호스팅을 이용해서 솔루션 자체를 이용하는 경우 카페24의 페이지들은 전부 FTP를 통해 카페24 서버에서 돌아가게 된다. 그렇기 때문에 FTP가 가능한 배포 라이브러리들을 사용할 수 있는데, 말이 쉽지 실제로는 여러가지 문제가 있었다. 리액트 배포도 깃헙 배포 밖에 안해본 나로서는 '배포'라는 행위를 회사 시스템에 도입한다는데 큰 의의를 두었다. 대부분의 카페24 스킨은 디자인관리의 PC용 레이아웃과 모바일쇼핑몰 의 모바..

  Read More
• [CSS스터디] 3회 - flex와 grid

  WEB Dev/StudyNote 2022. 9. 15. 21:28

  Normal Flow 일반적인 위에서 아래로 쌓이거나, 텍스트가 텍스트처럼 쌓이는 구조 Flex Flex Container, Flex flow Flow를 바꾸는 것들, display 속성 중에 하나. (display는 이 요소를 화면에 어떻게 나타낼지 결정하는 것, flex-box는 옛날 문법) flex를 적용해주면 normal flow가 아닌 flex-flow로 적용되게 된다. *자손까지 제어하는 display는 현재 없다. flex도 자식에게까지만 적용된다. Flex Container를 생성하고, 자식요소들을 Flex box로 만드는 display 속성 Flex Flow란? - 내부에 있는 요소들이 어떤 방향으로 쌓이게 만들 것인가? - Flex는 기본적으로 1차원이며 축이 1개이다. 한 방향을 고려..

  Read More
• [CSS스터디] 2회 - CSS 레이아웃

  WEB Dev/StudyNote 2022. 9. 1. 21:57

  CSS 흑마법사가 되어봅시다. CSS 레이아웃 - 레이아웃은 뭘까? 어떠한 것들을 어떠한 위치에 배치 (Layout) - 어떤 요소가 어떤 위치에 있을 것인지 - Flex & Grid Layout - 이 두 개만 가지고도 대부분의 레이아웃 구성 가능 - 전통적인 방식 (IE를 기준으로)에서는 Float 레이아웃 사용 - 특수한 레이아웃 (table, ruby) CSS Box Model - 하나의 요소가 박스를 이루는 모델 - 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는지를 나타내는것 - Model은 여러가지 속성들이 합쳐진 개념을 말하는 것 - 박스 - 콘텐츠 박스contents-box (사각형) - 특정한 요소가 본인의 콘텐츠를 담고 있는 영역, 전체 박스(+border, marg..

  Read More
• [CSS스터디] 1회 - CSS란?

  WEB Dev/StudyNote 2022. 8. 25. 21:52

  CSS 흑마법사가 되어봅시다. CSS란? 캐스캐이딩 스타일 시트 시트는 데이터가 나열된 공간 논리적인 결과물을 만들지는 않는다. 캐스캐이딩은 폭포 라는 영단어로 폭포같은 특성을 지님 버전이 의미있지 않음 특정한 스타일에 대한 표준이 만들어지고 표준을 관리한다. 모듈 단위로 관리 된다. 셀렉터 101 CSS는 Style의 나열 Style을 HTML 요소를 선택해서 적용 요소 셀렉터 클래스 셀렉터 콤비네이터 콤비네이터 101 셀렉터의 조합은 이론상 무제한 특정한 요소의 자손 요소에 스타일을 주고싶은 경우 자손 콤피네이터 공백 조상 요소공백자식 요소 { } ex) .box .title { } 자식 요소에 관계 없이, 자손 요소 중 해당 요소가 있다면 적용 특정한 요소의 자식 요소에 스타일을 주고싶은 경우 자식..

  Read More
• [에러대백과] 리액트 Suspense 사용하고 에러나는 경우 Feed suspended while rendering, but no fallback UI was specified

  WEB Dev/에러대백과 2022. 7. 31. 17:32

  리코일 셀렉터를 이용하면서 값이 받아와지기 전에 suspense를 이용하면 로딩 된 후 UI를 표시할 수 있다 하여 Suspense 컴포넌트를 적용했는데 계속 아래와 같은 에러가 떴다. Uncaught Error: Feed suspended while rendering, but no fallback UI was specified. Add a component higher in the tree to provide a loading indicator or placeholder to display. 스택오버플로우에 검색해보니 두 가지 해결책을 주는데 가장 간단한 방법은 해당 오류가 나는 컴포넌트의 상위 컴포넌트에 Suspense를 적용해주는 것. App.js에서 감싸줘도 된다. A React component..

  Read More
• [React] Recoil 내 Selector 간략 정리

  WEB Dev/Javascript | REACT | Node.js 2022. 7. 31. 16:56

  REACT Recoil Selector 공식문서 정의 셀렉터Selector는 아톰atom이나 다른 셀렉터Selector를 입력으로 받아들이는 순수함수다. "A Selector represents a piece of derived state." 셀렉터는 파생된 스테이트derived state의 일부를 저장한다. *순수함수 부수적인 효과가 없는 함수. 즉, 똑같은 입력 값에 대해 항상 똑같은 출력값을 돌려 주는 함수이다. 비동기 통신과 같은 처리는 아톰atom만을 이용해서 하기 어렵다. (별도의 함수에서 비동기 통신으로 data를 받아 atom에 저장해 주어야 한다.) 이런 번거로운 처리를 셀렉터Selector로 한 번에 처리할 수 있다. 셀렉터Selector의 특징 - selector는 read-only ..

  Read More
• [Javascript] 반복문으로 배열 만들고 안에 중복 없애기 (new Set)

  WEB Dev/Javascript | REACT | Node.js 2022. 6. 26. 13:59

  카페24 카테고리를 만드려면 아래와 같은 ajax 코드를 사용해야 한다. /** * 카테고리 마우스 오버 이미지 * 카테고리 서브 메뉴 출력 */ $(function(){ var methods = { aCategory : [], aSubCategory : {}, get: function() { $.ajax({ url : '/exec/front/Product/SubCategory', dataType: 'json', success: function(aData) { if (aData == null || aData == 'undefined') return; for (var i=0; i response.json()) .then((data) => { if (data === null || data === 'undef..

  Read More
• [GitHub] 카페24 임대형 쇼핑몰 깃허브로 소스코드 버전 관리하기 (FTP Deploy)

  WEB Dev/GIT | GITHUB 2022. 6. 7. 13:30

  카페24 쇼핑몰 쓰면 쓸수록 괴롭기도 하고 진국이라는 생각도 든다. 정말 기능이 많은 어드민을 쓰기 위해 계속 카페24로 작업을 하고 있는데, 개발자 입장에서 소스코드 관리가 안 된다는 점이 너무 괴로웠다. 일단 뭔가 하나 변경하면 별도로 텍스트 파일로 저장해놓고 (주로 노션에) 작업을 해야 했다. 깃허브로 복구를 많이 진행해 본 것은 아니지만 소스코드가 어딘가에 온전히 살아있다는 것이 얼마나 큰 위안을 주는지 개발자들은 알거다. 카페24의 임대형 쇼핑몰은 기본적으로 ftp 를 이용해 배포를 진행한다. 개발자가 아닌 사람들도 쇼핑몰을 쉽게 이용할 수 있도록 만드는 것이 카페24의 특징인데, 모듈-변수 라는 방식으로 각 컴포넌트의 기능들을 이용할 수 있게 해주고 HTML이나 CSS에 지식이 있으면 프로 모..

  Read More