Leo.K | To become a cooler Developer

템플릿 문법Vue는 컴포넌트 객체의 데이터를 렌더링된 DOM(Document Object Model)에 서술적으로 렌더링할 수 있는 HTML기반 템플릿 문법을 사용한다. 내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일한다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 리렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화한다. 가상 DOM 개념에 익숙하며, javascript의 원시적인 작동법을 선호하는 경우 jsx(JavaScript Syntax eXtension=react문법) 지원옵션을 사용하여 템플릿 대신 렌더링 함수를 직접 작성할 수도 있지만, 템플릿과 동일한 수준의 컴파일 시간 최적화를 기대할 수 없다.텍스트 보..

오늘은 지난 시간에 이어서 카테고리 게시글 목록을 꾸며보자. 기본적으로는 일반 게시글처럼 텍스트 및 썸네일 이미지가 아래와 같은 형태로 이루어진다. 위와 같은 구조를 flex를 사용하여 좀 더 아기자기하고 귀여운 카드 뉴스 형태로 만들고자 한다. 그를 위해서 기본적으로 존재하는 html태그에섯 css만 변경하지 않고, 구조 자체를 내가 원하는 대로 수정하고자 한다. 구상하는 초안은 아래와 같다. 1. 구조 변경 위의 구조를 구성하기 위한 html 코드를 아래와 같이 수정하여 적용하고 css를 입히면서 하나하나 모양을 만들어보자. 클래스명 또한 기존의 틀을 벗어나서 사용하기 위해 새로 작성한 것도 있기 때문에 그냥 새롭게 작성하는 것이 덜 헷갈릴 것이다. 아래의 소스는 블로그 설정에서 꾸미기 > 스킨 편집..

. . . 미루고 미뤄왔던 티스토리 블로그 꾸미기 2일차이다. 사실 계속 수정 및 개발중이고, 절반 이상은 끝났지만 까먹기 전에 정리하자! 처음부터 다 개발할 생각에 막막했는데 생각보다 커스텀이 편리하도록 자동화 및 변수화가 잘 되어 있다. 기본 스킨 세팅은 1편에서 했기 때문에 참고해주시기 바랍니다~ 1.상단 헤더 고정시키기 기본적으로 헤더는 상단에서만 보이고 스크롤 하면 사라지도록 세팅이 되어 있었다. 아직 헤더에 이것저것 메뉴를 넣지는 않았지만 추후에 추가할 것을 대비해서 스크롤로 화면을 내려도 헤더가 보이도록 할것이다. 그렇다면 바로 스킨 편집 > html 편집 > css탭 으로 가보도록 하자! ctrl + F 키로 '.header' 클래스를 탐색해서 아래와 같이 position을 수정하자. 주석..

. . . 미루고 미루다가 드디어 기술블로그로 사용하던 티스토리를 개발자답게 꾸며보기로 했다. 아직 미완성이긴 하지만,, ㅎ 전부 완성한 후에 포스팅을 하게 되면 까먹을 것 같아서.. 미리 중간 점검 겸 간단히 포스팅을 남기면서 정리하고자 한다. Start! 1. 스킨 설정 꾸미기 전에 제로부터 개발할 일은 아니기 때문에,,, 티스토리에서 제공하는 기본 스킨을 선택해보자. 블로그 설정에 들어가서 꾸미기 > 스킨 변경을 눌러보면 이렇게 10개 정도의 스킨을 확인할 수 있다. 구글에 검색해보니 많은 사람들이 본인이 직접 커스텀한 스킨을 올려두었는데, 해당 스킨을 다운받아서 사용해도 되지만 본인 만의 개성을 뽐내고 싶다면야..^^ 나는 이번이 처음이기도 하고,, 프론트엔드는 잘 하지 못해서 공부할 겸 가장 기..

2023-05-30 #2.4 Layout Stream /** * 스크롤 불가 (브라우저가 아니기 때문이다.) * 모든 View가 기본적으로 flex Container다 * react native에서 flex Direction의 기본 값은 column이다. * 높이와 너비에 기반해서 디자인 하지 않는다. * 다양한 스크린에서 동일하게 작동하도록 반응형의 레이아웃을 사용해야 한다. * flex 값을 사용해서 특정 아이콘 및 컨텐츠가 화면에서 차지하는 비율을 지정할 수 있다. * 부모 컨테이너에 지정된 flex 값이 자식 컨테이너의 비율 기준이 된다. * * Layout with Flexbox * * 컴포넌트는 flexbox 알고리즘을 사용하여 자식의 레이아웃을 지정할 수 있습니다. * Flexbox는 다양한..

2023-05-11 #6.0 EFFECTS state가 변경되어 렌더링 될 때마다 함수를 실행하는 것이 아니라, 가장 처음 컴포넌트가 렌더링 될 때만 함수를 실행하고, state의 변화로 인한 리렌더에는 실행되지 않도록 하기 우리의 코드가 초기에 단 한번만 실행되도록 보호해준다. useEffect(function, deps) function : 단 한번만 실행할 함수. deps : 내 코드의 특정 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법 deps[] 배열 안에 들어 있는 값이 변화하는 경우에만 function을 실행하도록 할 수 있다. 더보기 import {useState, useEffect} from "react"; function App() { const [counter, setV..

React Native는 단 하나의 구조가 아니라 여러가지 인프라와 그 인프라를 연결지어 주는 bridge역할을 하나로 묶은 시스템이다. 안드로이드라면 java와 sdk(software developement kit) ios라면 xcode와 시뮬레이터를 다운 받아서 인프라를 컴파일하여 앱으로 만들어야 한다. 위의 모든 과정을 하기 위해선 설치부터 어려움이 있는데 이번 강좌에서는 자바스크립트를 제외한 모든 인프라가 컴파일 되어 있는 앱(배포용 x, 테스트용 어플)을 다운받고, 자바스크립트 코드만을 해당 앱으로 보면서 어떻게 사용되는지 테스트 할 것이다. 윈도우 사용자라면 커맨드 창을 열어서 아래의 명령어로 패키지를 다운로드 받아준다. 이때 node.js 버전은 14 이상이어야 한다. npm install ..

2023.5.9 #4.0 Props 더보기 Props : 부모 컴포넌트가 자식 컴포넌트에게 유용한 데이터를 전달하는 일종의 방식! 자바의 인터페이스 처럼 공통된 속성을 하나만 만들어서 자식 컴포넌트에게 전달하는 것과 유사한 방식인 것 같다. 함수의 인자처럼 컴포넌트에서 전달할 수 있고, 인자는 단 한개만 존재하며, 해당 인자는 Object의 형식이다. 2023.5.10 #4.1 Memo Props에는 text나 boolean값 이외에도 function을 보낼 수 있다. 이는 JSX 문법으로 html 태그 자체에 이벤트 리스너를 넣는 것과는 전혀 다르게 단지 Props의 이름이기 때문에 필요한 위치에 개발자가 직접 꺼내서 배치해야 한다. 부모 컴포넌트의 상태(state)값이 변경되면 부모 컴포넌트에 속해있..

2023-03-24 #3 State state : 기본적으로 데이터를 저장하는 저장소. 바뀔 변수의 값을 저장해 줄 저장소. 이번 강의에서는 바뀐 값을 저장해줄 state 변수에 대해서 알아보았다. 0. 문제점 Container라는 컴포넌트를 만들면서 내부의 버튼에 이벤트를 등록해주고 count를 증가시키는 것은 어렵지 않다. 하지만 문제점은 가장 초기의 상태(counter == 0)를 렌더링 해주고, 그 이후에는 렌더링을 하지 않기 때문에 내부적으로 클릭이벤트가 발생할 때마다 counter의 값은 1씩 증가하는데, 그 값이 보이지 않는다는 점이다. 단순하게 클릭 이벤트가 발생하여 값이 증가할때마다 reRendering하여 값을 갱신해주는 방법이 있다. 1. vanilla JS VS react JS 여기..

2023.03.22 #2.0 Introduction ReactJS는 웹 페이지를 Interactive하게 만들어 준다. 바닐라 JS와 ReactJS를 직접 코드로 비교하면서 살펴보자. #2.1 Before React 바닐라 JS로 버튼을 클릭하면 클릭한 카운트가 증가되도록 아주 간단한 기능을 구현해보자. 1. html 작성 2. 자바스크립트로 가져오기 3. 이벤트 리스너 등록 4. 데이터 없데이트 5. 업데이트 html 위와 같은 순서로 진행하면 아래와 같은 소스코드와 결과를 확인할 수 있다. Total clicks : 0 Click me 같은 기능을 ReactJS로 구현한 뒤에 장점을 파악해보고자 할 건데, 그 전에 React를 사용하기 위한 js파일을 import해야 한다. 아래의 두 링크를 impo..

2023-03-17 #7 TO-DO-LIST 우리는 추가와 삭제가 가능한 멋진 todo-list를 위해 기본적인 설정을 화면에 구현했다. 이 내용은 이전 게시글에서 이미 기록한 개념이기 때문에 생략하고 마지막에 전체 소스코드를 보여주려고 한다. 하지만 새로고침을 하거나 이용자가 누구인가와 관계없이 똑같은 todo-list가 나온다면 우리는 todo-list를 그 때마다 계속해서 작성해야할 것이다. 만약 todo-list를 1,000개 작성했는데 단숨에 날라간다면...? 그건 어딘가 부족한 todo-list 일 거다. 그래서 우린 todo-list에 나타낸 텍스트를 저장하는 기능과 로딩하는 기능, 이미 달성한 일은 제거하도록 삭제하는 기능을 추가로 구현해야 한다. 1. todo - list의 배열 생성 1..

2023-03-16 #5.0 Interval setInterval({function}, {time}) 함수를 사용하여 특정 주기마다 함수를 실행할 수 있다. 이때 주기에 해당하는 time argument는 ms(1s === 1000ms)단위라는 점에 유의하자. const clock = document.querySelector("#clock"); function sayHello(){ console.log("hello"); } //interval -> 매 2초 등 간격을 의미 setInterval(sayHello, 5000); #5.1 Timeouts and Dates setTimeout({function}, {time}) 함수를 사용하여 특정 시간이 지난 후에 단 한 번만 함수를 호출할 수 있다. http..