공영재의 개발일지

React와 Next.js의 차이 React는 Javascript 기반의 SPA 웹 프레임워크입니다. 컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있습니다. 이 글에서 강조하고자 하는 내용은 리액트는 CSR(Client Side Rendering), 즉 화면을 그리는 렌더링이 클라이언트에게서 발생합니다. 서버에서 보내주는 HTML과 Javascript 파일을 서버가 아닌, 클라이언트의 브라우저에서 페이지를 만들어줍니다. 이러한 방식은 페이지 간 전환이 부드러워지는 장점이 있습니다. 하지만 HTML과 JS를 다운로드 받는동안 클라이언트는 렌더링이 불가능한, 즉 첫 페이지의 로딩속도가 느리다는 단점이 있습니다. 또한 CSR의 특성상 빈 HTML과 JS를 보낸 뒤 클라이언트의 브라우저에서 JS를 실행시..

블로그를 보다보면 스크롤을 내림에 따라 목차가 따라오는 플로팅 목차를 보신 적이 있으실텐데요. 이를 TOC(Table Of Contents)라 합니다. 오늘은 TOC를 만들어 보려합니다. TOC란 Table Of Contents의 약자로, 작성한 글의 태그에 따라 목차를 생성하여 보여줍니다. tocbot을 활용해 만들어 보았습니다. https://tscanlin.github.io/tocbot/ Tocbot Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier ..

다른 개발자분의 블로그를 보던 중 본인만의 로딩 GIF가 있는걸 보곤 로딩화면을 넣어보고 싶었습니다. 먼저 html 편집 전에, 로딩화면에 나올 본인만의 gif 파일이 필요합니다. 저는 싸지방에서 만들것이기에, 웹 상에서 gif를 무료로 만들 수 있는 Canva를 사용하였습니다. https://www.canva.com/create/gif-maker/ Free GIF Maker: Create GIFs from images and videos | Canva Express yourself in the most fun and creative way. Make a GIF from images and videos using Canva’s free GIF maker. www.canva.com 회원가입 한 후 gif ..

먼저 callback 함수를 살펴보겠습니다. callback을 알아보기전, 우선 함수의 실행 순서를 알아야합니다. 프로그래밍엔 동기와 비동기라는 개념이 있습니다. 동기(Synchronous)는 실행 순서가 순차적인 반면, 비동기(Asynchronous)는 실행 순서가 보장되지 않습니다. 즉, 이전 함수의 실행이 마무리되지 않더라도 다음 함수가 실행될 수 있습니다. Javascript는 웹 상에서 동작하는 경우가 많아 효율성을 위해 비동기적으로 코드가 실행됩니다. 하지만 코딩을 할 땐 실행 순서가 지켜져야 하는 경우가 많습니다. 그럴 때 순서를 정해줄 수 있는 것이 바로 callback 함수입니다. callback 함수는 다음과 같이 사용합니다. callback이 없었다고 가정하면, first()의 set..

Javascript의 ES(ECMAScript)는 표준 규격이자 버전이라고도 할 수 있습니다. 자바스크립트는 ES6(2015년) 이후로 매년 새로운 ECMAScript를 발표하고 있습니다. 현재는 ES13까지 나온 상태이지만, ES6이 주목받고 유명한 이유는 이전 버전(ES5)에서 해결하지 못했던 많은 문제를 해결하였고 가독성과 유지보수성을 향상시킬 새로운 기능이 혁명적이게 등장했기 때문입니다. 추가로, React나 Vue와 같이 유명한 라이브러리도 ES6에 맞춰 지원되고 또한 대부분의 브라우저에서 호환된다는 점도 있습니다. 쉽게 말해 ES6까지만 알아도, 웬만한 모든 서비스를 문제없이 만들 수 있다는 것입니다. 이번 글에서는 ES6부터 새로 추가된 문법 중 중요한 내용들에 대해 알아보겠습니다. 1. c..

웹을 구성하는 요소에는 HTML, CSS, 그리고 Javascript가 있습니다. HTML이 웹의 뼈대를 세우고, CSS가 내용을 꾸미며, Javascript가 동작을 완성합니다. 그중에서 가장 각광받고 있는 프로그래밍 언어인 Javascript에 대해 알아보겠습니다. 자바스크립트를 구글에 검색하면 객체 기반의 스크립트 프로그래밍 언어라고 설명합니다. 키포인트는 객체 기반과 스크립트 언어라는 점입니다. 먼저 객체 기반에 대해 파헤쳐 보겠습니다. C++이나 Java를 공부해보셨다면 객체 지향이라는 말을 들어보셨을텐데요. 일의 진행 순서대로 프로그래밍하는 절차 지향 프로그래밍과 다르게 클래스를 통해 객체를 만들고 이 객체들간의 상호작용으로 프로그래밍 하는 방식을 의미합니다. 하지만 C++, Java와 달리 ..

프론트엔드 공부를 처음 시작한다면 가장 많이 볼 수 있는 용어이자 질문입니다. React와 Vue, Angular는 각각 무엇이며 그 차이점은 무엇일지에 대해 알아보겠습니다. ※ 후술하겠지만 Vue와 Angular는 프레임워크인 반면 React는 라이브러리입니다. 프론트엔드를 공부하기 전 두 개념의 차이부터 명확히 해야 합니다. 프레임워크와 라이브러리의 차이는 개발자가 어느 단에서 제어를 하는가입니다. 프레임워크는 누군가가 만들어놓은 프레임워크라는 틀 안에서 개발자가 작성한 코드가 수동적으로 동작합니다. 따라서 "제어 흐름이 프레임워크에 있다" 고 볼 수 있습니다. 예시로 앱에서의 Android, Java의 Spring, 웹 개발의 Vue, Angular가 있습니다. 라이브러리는 특정 기능이 필요할 때,..

CSS를 통해 예쁘게 꾸며놓은 블로그는 저에게 포스팅할 동기를 부여해주고 방문자에게도 좋은 인상을 남겨줄 수 있습니다. 추가적으로 프론트엔드 능력을 어필할 때도 활용할 수 있을 것 같습니다. 오늘은 티스토리 블로그 꾸미기 - 썸네일 애니메이션 적용 방법에 대해 알아보겠습니다. 이번에 적용하고자 할 것은 썸네일에 마우스 오버 시 애니메이션이 발생하도록 하는 것입니다. 그러기 위해 우선 썸네일의 태그를 알아야 합니다. 블로그에서 F12(개발자 도구)를 누른 뒤 아래 그림과 같이 좌측 상단을 클릭하여 element 선택 상태를 활성화합니다. (혹은 ctrl + shift + c 단축키) 그 후 아래와 같이 블로그 홈에서 썸네일을 클릭하면 해당 element의 class 명과 태그 위치를 확인하실 수 있습니다...