치춘짱베리굿나이스

HTML과 XML 비교하기 익숙한 HTML과 조금 생소한 (사실 안드로이드 할 때 조금 했었던…) XML을 비교하며 각각의 특성을 알아볼라구 한다 HTML 하이? 이것은 테스트이다 작은 프론트엔드 개발자들아 Hyper Text Markup Language 가장 최신 버전은 HTML5이다 데이터의 표현에 주 목적을 두고 있다 웹 페이지 및 웹 응용 프로그램의 구조를 손쉽게 정의하기 위한 마크업 언어이다 어느 데이터가 어느 위치에 들어갈지를 정의했다고 생각하면 쉽다 페이지를 표현하기 위해 사전 정의된 태그 세트가 있고, 각 태그별로 의미도 이미 정의되어 있다 (정적) 따라서 이미 정의된 태그 내에서만 사용해야 한다 브라우저들은 이 태그들을 읽어 해독하고, 이에 맞춰서 페이지를 표현한다 간단한 작성 오류 (태..

XML 파서와 XPath XML 문서를 접근하고 조작하여 읽어들이려면 XML 파서가 필요하다 XML 파서는 인자로 받아온 XML 문서가 제대로 된 XML 문서인지 (문법오류는 없는지, XML 형식이 맞는지 등) 검사하고, 해석한 결과를 반환한다 Parsing? Parser? 주어진 문자열이나 파일을 분석하거나, 정해진 문법 간 관계를 해석하는 것 문서를 읽어들일 때 필수 과정으로, 프로그램에 최적화된 형식으로 파싱하여 간편하게 해당 데이터를 사용할 수 있다 필요한 데이터의 빠른 처리가 가능하고, 설렁 XML 파일이 수정되었다고 해도 같은 파서를 사용하면 수정된 데이터를 같은 방식으로 잘라 가져올 수 있기 때문에 사용이 편리하다 XML 파서를 만드는 이유? XML 파일 (또는 HTML 파일) 을 파싱하여 ..

React를 클론코딩 #1 React를 사용해서 클론코딩은 이제 흔하다 React를 클론코딩해보자 물론 정말 심도있는 .. 마치 리액트의 심연같은 .. 그런 기능까진 놓칠 수 있지만 대략적이고 큼직큼직한 내용을 한번 클론코딩해서 익혀보려 한다 https://github.com/chichoon/Raect GitHub - chichoon/Raect: 리액트 및 자바스크립트 객체들 짝퉁 만들어보기 리액트 및 자바스크립트 객체들 짝퉁 만들어보기. Contribute to chichoon/Raect development by creating an account on GitHub. github.com 참고로 레포지토리 이름은 리액트 짝퉁이라 Raect이다 (래익트 ㅋㅋ) 가상 DOM https://blog.chic..

DOM Element replace 함수들 Element.replaceWith oldNode.replaceWith(newNode); oldNode.replaceWith(newNode1, newNode2, ...); 현재 노드를 인자로 들어온 노드 (또는 노드 여러 개) 로 교체한다 반환값은 없다 { /* 이전 노드 */ } { /* 변경된 노드 1 */ } { /* 변경된 노드 2 */ } 해당 위치가 인자로 들어온 노드들로 한번에 대체된다 Node.replaceChild parentNode.replaceChild(oldChild, newChild); 노드의 자식 노드 oldChild를 newChild으로 교체한다 다음과 같은 상황 등에서 오류 (예외) 가 발생한다 만약 oldChild 또는 newChi..

문제 .js 또는 .jsx 파일을 .tsx 파일로 변환하다가 마주한 오류 JSX 문법을 사용한 부분에 빨간 줄이 좍좍좍 쳐지면서 저 오류가 난다 원인 타입스크립트에서 JSX 문법을 사용하기 위해선 tsconfig.json에 jsx 옵션을 활성화해 주어야 한다 preserve: 타입스크립트 컴파일 시 .jsx 그대로 내보낸다 react-native: 타입스크립트 컴파일 시 내부 문법은 그대로 유지한 채 .js 파일로 내보낸다 (리액트 네이티브 용) react: 타입스크립트 컴파일 시 JSX 문법을 전부 React.createElement 호출로 변환하고, .js 파일로 내보낸다 react-jsx, react-jsxdev: 타입스크립트 컴파일 시 JSX 문법을 전부 _jsx 호출로 변환하고, .js 파일로 ..

https://www.youtube.com/watch?v=bdT8ixdxPX4 맛있는 건 왜 몸에 안 좋을까 식단을 한지 어언 1주일이 (ㅋㅋㅋ) 됐다 감사하게도 캠퍼분의 추천을 받아 참치액도 사구.. 닭가슴살과 아몬드브리즈 (유당불내증 ㅠㅠ) 그리고 미숫가루도 쟁여놓고 양배추도 한가득 썰어놨다 오늘은 심각하게 피자가 먹고 싶었다 쭈욱 늘어나는 치즈와 짭쪼롬한 페퍼로니가 그렇게 땡길 수가 없었다 최근에 피부가 많이 안 좋아져서 밀가루도 끊었는데, 밀가루 음식이 너무나도 땡긴다 ㅎㅎ,, 집 앞 버거킹을 지날 때도 괜히 들어가고 싶고, 집에 있는 식빵을 토스터기로 바삭하게 구워서 먹고 싶고... 왜 맛없는 건 몸에 좋고 맛있는건 몸에 안 좋을까 신석기 시대 사람들도 나와 같은 고민을 했을까? 패스트푸드나 과..

https://youtu.be/rdpBZ5_b48g 9월이 끝났다 이것이다.... 벌써 10월 나를 깨워줘~~ 문서 문서 문서 문서화의 중요성을 깨달았다 ㅎㅎ... 오늘 저녁에 예전 프로젝트들을 가지고 멘토링을 받았는데, 예전에 (라고 해봤자 6월경...) 작성한 프로젝트들 코드를 다시 읽어보니 왜 이렇게 짰는지 명확하지 않다는 생각이 들었다 고작 4개월 전에 작성한 프로젝트임에도 불구하고 말이다 그 당시에는 뭔가 만들고 싶은 게 있어서 자체 해커톤 느낌으로 2~3일동안 빠르게 구현했었는데, 지금 돌아보니 설계도, 기록도, 계획도 없는 것이다 단지 타입스크립트와 리액트만 가지고 빠르게 구현만 한 결과물... 요즘 문서화와 구현 사이에서 마음이 많이 갈팡질팡했는데, 꾸준한 기록과 간단하게나마 남기는 설계는..

React 서론 리액트 써도 좀 알고 쓰자!!! 의 일환이다 리액트로 토이 프로젝트 몇번 해 보면서 진지하게 리액트의 원리와 동작 과정에 관해 고찰해본 적이 몇 번이나 되는가? 나는… 없는 듯 하다… 가상 돔을 만들어서 어쩌구….. 이것밖에 모른다 (부끄) 리액트 쓰는 거 좋고 리액트로 프로젝트 다 좋지만 기왕 쓰는거 지피지기면 백전백승이라는데 한번 알아보고 넘어가자 리액트 카테고리에 글을 이렇게 많이 적어놓고 이제 와서 리액트의 동작을 처음 알아보는 것도 개그 포인트이다 (하하하) 리액트 소개 리액트가 뭔가요 싱글 페이지 애플리케이션을 제작하는 데에 초점이 맞춰져 있는 자바스크립트 라이브러리이다 Vue도 프레임워크고 Angular도 프레임워크고 Svelte도.. 그래서 리액트도 프레임워크일 것 같은 느..