Posts
-
JavaScript Array Deep Dive (3) — 생성 및 조작 메서드
3화: 자바스크립트 배열 함수 완전 정복 (1) — 생성 및 조작 메서드 배열을 만들 줄 알아야, 제대로 쓸 수 있다 배열은 선언만으로도 쉽게 사용할 수 있지만, 어떻게 만들었느냐에 따라 동작 방식이나 잠재적인 버그 발생 가능성이 완전히 달라집니다. 예를 들어, new Array(5)는 실제로 값을 넣는 것이 아니라 “비어 있는 5칸짜리 배열”을 ...
3화: 자바스크립트 배열 함수 완전 정복 (1) — 생성 및 조작 메서드 배열을 만...
-
JavaScript Array Deep Dive (2) — 배열의 컴퓨터 동작 원리와 성능 최적화
2화: 자바스크립트 배열의 컴퓨터 동작 원리와 성능 최적화 왜 같은 배열인데 성능이 다를까? 개발을 하다 보면 map() 하나 돌렸을 뿐인데 화면이 버벅이고, 수천 개의 데이터를 다루는 리스트에서 렉이 발생하는 경험을 하게 됩니다. 이럴 때 많은 사람들은 “React 성능 때문인가?”라고 생각하지만, 사실 자바스크립트 배열의 동작 방식을 이해하면 ...
2화: 자바스크립트 배열의 컴퓨터 동작 원리와 성능 최적화 왜 같은 배열인데 성능이...
-
JavaScript Array Deep Dive (1) — 배열이란 무엇인가?
1화: 배열이란 무엇인가 — 자바스크립트 배열 개요 “배열을 모르면 JavaScript를 모르는 것이다” 자바스크립트를 공부하다 보면 가장 먼저 마주치는 것이 변수이고, 그 다음이 배열입니다. 그만큼 배열은 모든 프로그래밍 언어에서 기본 중의 기본이자, 실무에서 가장 자주 사용하는 자료 구조 중 하나죠. 하지만 자바스크립트의 배열은 단순한 숫자 ...
1화: 배열이란 무엇인가 — 자바스크립트 배열 개요 “배열을 모르면 JavaScri...
-
Debounce & Throttle
Debounce와 Throttle은 무엇일까? 스크롤 이벤트나, 인풋 이벤트를 사용할 때 사용해봤거나 한 번 쯤은 들어봤을 겁니다. 자바스크립트에서 디바운스(debounce)와 스로틀(throttle)은 성능 최적화를 위해 자주 사용되는 두 가지 기법입니다. 이 기법들은 사용자가 자주 발생시킬 수 있는 이벤트(예: 스크롤, 마우스 이동, 키보드 입력...
Debounce와 Throttle은 무엇일까? 스크롤 이벤트나, 인풋 이벤트를 사용...
-
오픈소스 기여하기
오픈소스 기여에 참여하는 개발자들이 정말 많습니다. 오픈소스에 기여하는 것은 다양한 소스를 분석 하고 이슈 트래킹을할 수 있는 정말 좋은 경험인 것 같습니다. 저도 언젠가 한번쯤 해봐야지 하고 마음만 먹고 있다가 그냥 해보자! 하게 되었습니다. 회사에서는 gitlab을 사용해서 pr을 사용 해본 경험이 없었어서 더 꼭 해봐야겠다는 다짐이 들었습니다. ...
오픈소스 기여에 참여하는 개발자들이 정말 많습니다. 오픈소스에 기여하는 것은 다양한 ...
-
회사의 개발 문화와 코드 규칙
회사에서는 혼자 일하는 게 아니다. 프로그래밍을 혼자 할 일은 거의 없습니다. 심지어 개발팀 안에서도 프론트엔드, 백엔드, 데브옵스 등 여러 분야로 나뉘어져 서로 협업을 하는 관계죠. 회사에 처음 들어왔을 때에는 코드 규칙이라든가 누가 어떤 방식을 사용하는지 별로 중요하게 느끼지 못했어요. 그저 화면설계서대로 기능이 구현되고, 디자인이 제대로 적용되...
회사에서는 혼자 일하는 게 아니다. 프로그래밍을 혼자 할 일은 거의 없습니다. 심지...
-
포트 사용 불가 문제
주말이 지나고 와서, 또는 오랜만에 켠 노트북에서 npm run start으로 어플리케이션을 실행했을 때 정말 자주 겪었던 이슈입니다. 또, 여러가지 프로젝트 담당자가 계속 자리에 찾아와서 동시에 켜고 있었을 때도… 자주 만났던 친구입니다. nest.js로 서버 코드도 어떻게 돌아가는지 공부하고 싶어서 실행을 했는데 오랜만에 만난 에러 바로 해결 ...
주말이 지나고 와서, 또는 오랜만에 켠 노트북에서 npm run start으로 어플리...
-
리액트 리렌더링 지옥
이제는! 더이상! 물러날 곳이 없! 다! 쓸데없이 비싸고 복잡한 함수, 컴포넌트가 계속 리렌더링 되는 지옥에 빠져버렸다. 생각조차 못하고 있던 곳에서 렌더링이 계속 발생하고 있어서 문제가 생겼다. 불필요한 렌더링 줄이기 위한 노력 첫번째. 같은 실수는 반복해서 만나지 말자! useMemo React에는 기능과 성능을 향상시키는 다양한 기능을 사...
이제는! 더이상! 물러날 곳이 없! 다! 쓸데없이 비싸고 복잡한 함수, 컴포넌트가 ...
-
웹 최적화를 위한 여정 🛩️
제가 실무에서 경험한 웹 최적화에 대한 이야기를 해보려고 합니다. 웹 최적화는 웹 개발을 하다보면 한 번쯤은 고민하게 되는 주제인데요, 요즘은 프레임워크들이 워낙 지원을 많이 하고 잘 되어있어도 정말 간단한 페이지가 아니라면 한없이 부족합니다. 저도 처음에는 어디서부터 시작해야 할지 막막하고 뭘 해야될지 모르겠어서 “이걸 진짜 해야돼?”” 같은 생각이...
제가 실무에서 경험한 웹 최적화에 대한 이야기를 해보려고 합니다. 웹 최적화는 웹 개...
-
aws 데이터베이스 서비스 rds 무료 사용하기
RDB 종류 중 하나인 postgresql 을 사용해보려고 합니다. RDS에 올려두고 사용을 할 거라서 AWS에서 셋팅부터 시작을 해보겠습니다. 보안그룹 셋팅 RDS에 DB인스턴스에 적용할 보안그룹을 먼저 세팅하겠습니다. 보안 그룹?보안 그룹은 가상 방화벽 역할을 하며, 인스턴스에 대한 네트워크 트래픽을 제어합니다. 미리 셋팅을 해 주어, 안정...
RDB 종류 중 하나인 postgresql 을 사용해보려고 합니다. RDS에 올려두고...
-
웹개발자가 꼭 알아야 할 CORS 동작 방식과 해결방법
웹개발을 하고 있다면 CORS 에러를 한 번쯤은 겪어보셨을 겁니다. 저는 정말 다양한 일도 있었고, 하루 이틀을 통채로 날린 적도 있었는데요. 오늘은 일반적으로 CORS 에러가 발생하는 상황과 이를 해결하는 방법, 그리고 프론트엔드 개발자 입장에서 이런 문제를 어떻게 다뤄야 할지에 대해 이야기해보겠습니다. CORS 에러 CORS(Cross-Origi...
웹개발을 하고 있다면 CORS 에러를 한 번쯤은 겪어보셨을 겁니다. 저는 정말 다양한...
-
three.js에 텍스트 생성하기
three.js 네번째 작성 글입니다. three.js에 텍스트 메쉬를 생성하여 글씨를 렌더링해볼까요? 미리 알아두셔야 할 점은 three.js에 기본으로 내장되어 있는 폰트는 한국어를 지원하지 않습니다. 🥲 왜 안 해 줘 . . . 그리고 three.js 공식 문서를 보다 보면 한국어로 선택했을 때 사라지는 문서가 많습니다. 오늘 사용할 text...
three.js 네번째 작성 글입니다. three.js에 텍스트 메쉬를 생성하여 글...
-
리액트 디자인 패턴 - 컴파운드 컴포넌트 패턴
여러분이 컴포넌트를 설계할 때 가장 고민하는 것은 무엇인가요? 저는 컴포넌트의 재사용성을 가장 중요하게 생각합니다. 컴포넌트를 기껏 만들어놨는데 디자인이나 특정 기능 때문에 다른 곳에서 사용할 수 없게 된다면 컴포넌트를 만드는 의미가 많이 사라지게 되죠. 또, 유사한 기능을 가진 컴포넌트를 생성했는데 디자인이나 UI가 바뀔 때마다 예외 처리를 해야 한...
여러분이 컴포넌트를 설계할 때 가장 고민하는 것은 무엇인가요? 저는 컴포넌트의 재사용...
-
Git 프로젝트별 계정 사용하기
블로그를 거의 매일 작성하고 있고, 개인 공부하는 내용도 있어서 git commit이 거의 매일 있었는데 잔디가 심어지지 않고 있었습니다! 블로그 커밋이 주로 있었어서 블로그 레포지토리는 따로 인식하는 건가? 라고 생각하여 대수롭지 않게 생각하고 있었습니다. 그런데 오늘 문득 커밋을 하나 생성하고 확인을 해보니 또 텅… 비어 있었습니다. 잔디가 심어지...
블로그를 거의 매일 작성하고 있고, 개인 공부하는 내용도 있어서 git commit이...
-
three.js 마우스 무빙
three.js 세번째 작성 글입니다. 마우스 움직임에 따라 변화가 있는 웹을 접속해본 적이 있으신가요? 단순히 마우스 커서를 따라다니는 이벤트가 아니라, 마우스를 계속 쳐다보는 고양이라든지, 마우스 반대로 도망가는 오브젝트가 있다든지 하는 웹을 만난 적이 있으실 거예요. 저는 그런 기능이 구현된 사이트에 접속하면 단순하지만 재미있고 신기해서 머무는...
three.js 세번째 작성 글입니다. 마우스 움직임에 따라 변화가 있는 웹을 접속...
-
three.js 객체(object) 움직이기
three.js 두번째 작성 글입니다. 먼저 최종 목표로 만들고 싶은 작업물을 소개하겠습니다. 화면의 중심에 캐릭터가 지구 모양의 바닥을 돌아다니는 장면을 구현하고 싶습니다. 어떤 라이브러리나 언어를 배울 때, 무작정 프로젝트를 따라 하기보다는 자신이 만들고 싶은 프로젝트를 먼저 구상하고, 그 프로젝트에 필요한 기술을 하나씩 배워나가는 것이 이해도 ...
three.js 두번째 작성 글입니다. 먼저 최종 목표로 만들고 싶은 작업물을 소개...
-
Three.js 시작하기
회사에서도 AR 구현 테스트를 할 때 Three.js를 사용해봤습니다. 이곳저곳에서 많은 관심을 보였고, 이를 통해 만들어진 웹도 자주 접하게 되었습니다. 저도 계속 관심은 있었지만, 제대로 사용해보지는 못했었네요. 이번 기회에 Three.js를 사용해 공부해보겠습니다. Three.js사이트에 접속하면 이 라이브러리로 만든 프로젝트들을 볼 수 있는데...
회사에서도 AR 구현 테스트를 할 때 Three.js를 사용해봤습니다. 이곳저곳에서 ...
-
tsx import 오류 해결
tsx 를 import 하려면 allowImportingTsExtensions 옵션이 허용되어야 한다는 뜻입니다. An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled. 프로젝트의 tsconfig.json 파일에 allowImp...
tsx 를 import 하려면 allowImportingTsExtensions 옵션이...
-
github pages 리액트 호스팅 에러 해결
github pages 호스팅 서비스를 이용하려고 했는데, 리액트로 만든 프로젝트를 배포하면 화면이 렌더링되지 않고 흰 화면만 보여지는 문제가 있었습니다. Html 을 열어보면 자바스크립트가 활성화 되야된다고 떠서 한참 찾았는데…… <noscript>You need to enable JavaScript to run this app.</...
github pages 호스팅 서비스를 이용하려고 했는데, 리액트로 만든 프로젝트를 ...
-
--isolatedModules 오류 해결
ts(typescript) 파일을 빈파일로 추가하면 발생하는 에러입니다. 파일에 export {} 을 써줍니다. 'index.tsx' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an ...
ts(typescript) 파일을 빈파일로 추가하면 발생하는 에러입니다. 파일에 ex...
-
axios 커스텀해서 사용하기
오늘은 제가 axios 를 사용하는 방법을 설명해보려고 합니다. fetch보다 사용하기 편리해서 axios를 자주 사용했습니다. 특히 Axios 에서 지원하는 interceptors를 사용하면 jwt + access Token을 사용할 때 정말 편하게 사용할 수 있습니다. axios 사용하는 방법과 custom, 토큰 재발급 받는 과정을 알아봅시다. ...
오늘은 제가 axios 를 사용하는 방법을 설명해보려고 합니다. fetch보다 사용하...
-
리팩토링은 어떻게 해야될까?
리팩토링과 클린코드 이어서 작성한 글입니다. 리팩토링을 시작하기에 앞서 계속 강조했던 부분만 다시 짚어보겠습니다. 새로운 기능 추가 없이! 기존 기능은 오류 없이! 저는 리팩토링을 하기 전에는 테스트코드를 먼저 생성해두거나 테스트케이스를 작성을 해둔 후 진행하는 것이 바람직하다고 생각합니다. 다양한 리팩토링의 기법중, 메서드와 조건문기반...
리팩토링과 클린코드 이어서 작성한 글입니다. 리팩토링을 시작하기에 앞서 계속 강조했...
-
리팩토링은 왜 하는 걸까?
Refactoring is a systematic process of improving code without creating new functionality, that can transform a mess into clean code and simple design. Code Refactoring 사용하지 않는 코드 또는 중복된 코드를 지...
Refactoring is a systematic process of impro...
-
자바스크립트 숫자 포맷 (,) 추가하기
toLocaleString const number = 1000000000.55555 const format = number.toLocaleString('ko-KR', { maximumFractionDigits: 4 }) //'1,000,000,000.5555' 자바스크립트의 toLocaleString() 을 사용하면 간단하게 3자리마다 , (콤마)...
toLocaleString const number = 1000000000.55555...
-
자바스크립트 웹뷰 화면 꺼짐 감지
visibilitychange 이벤트 Document.visibilityState 는 문서의 가시성을 반환합니다. 유저에게 보일 수 있는 상황이면 ‘visible’, 아니면 ‘hidden’ 값이 반환이 되고 속성의 값이 변경되면 visibilitychange이벤트가 실행이 됩니다. 이 속성을 사용해서 웹뷰의 화면 꺼짐을 확인할 수 있습니다. docum...
visibilitychange 이벤트 Document.visibilityState 는...
-
웹뷰 동영상 재생 오류 해결
Manifest 파일 확인 <activity android:name="MainActivity" android:hardwareAccelerated="true"> 가용가능한 리소스가 부족해서 재생이 안될수있다. webview 설정 settings.mediaPlaybackRequiresUserGesture = false 웹에서 테스트할 때...
Manifest 파일 확인 <activity android:name="MainA...
-
presignedUrl cors 에러 해결
s3 버킷명 확인하기 Failed to load: resource: net::ERR_CERT_COMMON_NAME_INVALID 버킷 이름에 .이 들어가면 해당 오류가 발생합니다. postman으로도 테스트가 잘 되었는데 브라우저에서 안 되었습니다. 버킷명 규칙을 잘 따라서 생성해줍니다. 소문자, 숫자, 점(.) 및 하이픈(-)만 포함해야 합니다 ...
s3 버킷명 확인하기 Failed to load: resource: net::ERR_...
-
jekyll 블로그 코드 블럭 커스텀하기
블로그 글을 작성할 때 error 또는 warning 로그를 상자에 담아서 표현하고 싶었습니다. 오류 같은 느낌이 나도록 만들고 싶었는데 할 때마다 만들어 주기는 너무 귀찮잖아요?! 그리고 사용할 때마다 html 태그로 감싸고 클래스를 부여하는 것도 여간 귀찮은 일이 아닙니다. markup 문법에 기본으로 있는 이것을 사용해서 코드 블럭을 만드는 것...
블로그 글을 작성할 때 error 또는 warning 로그를 상자에 담아서 표현하고 ...
-
Object is possibly 'null' 해결하기
Object is possibly 'null' Object is possibly 'undefined' 발생 이유 typescript 입장에서 Object가 null|undefined 일 수도 있다고 생각하여 발생하는 오류입니다. 해결하기 const user = localStorage.getItem("user").split(" ")[0]; //Obj...
Object is possibly 'null' Object is possibly 'u...
-
git 자동 push 기능 만들기
왜 이런걸 만들었지? 다양한 브랜치를 사용하고 있었는데, 배포 관련 이슈때문에 개발이 완료될 때마다 머지를 하고 빌드를 해서 푸시를 해야되는 일이 생겼습니다. 2개로 나눠서 진행하고 있어서 2가지를 다 운용하고 있다보니 깃 그래프가 과장 조금 보태서 10줄이 넘어간 것 같았습니다. 수동으로 하면 시간도 오래걸릴뿐더러 조금만 집중을 하지 않아도 바로 실...
왜 이런걸 만들었지? 다양한 브랜치를 사용하고 있었는데, 배포 관련 이슈때문에 개발이...
-
url link 공유시 나오는 이미지 추가하기
지인한테 블로그 글 꽤 많이 올렸다고 자랑하기 위해 링크를 띵~ 보내는 순간 제 프로필에 있는 사진이 대문짝하게 나오는 일이 있었습니다. 지금까지 이걸 신경도 안 쓰고 모르고 있었다니… 저 자신도 링크를 봤을 때 이미지가 이상하거나 소개글이 이상하면 눌러보지도 않으면서 신경쓰지 않은 것이 자존심이 상했습니다. 핑계 아닌 핑계를 해보자면 최근에 진행한 ...
지인한테 블로그 글 꽤 많이 올렸다고 자랑하기 위해 링크를 띵~ 보내는 순간 제 프로...
-
우리가 쓴 깃 전략과 git flow들
깃 사용법, 브랜치 전략 등이 왜 필요할까요? 저는 팀에 처음 합류됐을 때 깃 관리때문에 사건이 많이 일어났습니다. 그래서 저희가 깃 브랜치 전략을 만들게 된 이유와 현재 사용하고 있는 전략을 정리해보고 여러가지 브랜치 전략들을 알아보고 비교해보려고 합니다. 무지성 Git 사용 팀에 합류됐을 때, 인력 구성도 완전하지 못하고(대거 퇴사가 있었다고 ...
깃 사용법, 브랜치 전략 등이 왜 필요할까요? 저는 팀에 처음 합류됐을 때 깃 관리때...
-
자바스크립트의 실행 컨텍스트
자바스크립트의 호이스팅, 스코프 체이닝이 왜 발생하는 걸까요? 자바스크립트 엔진의 실행 컨텍스트에 의해 생기는 현상입니다. 항상 헷갈리는 실행 컨텍스트를 정리해보았습니다. 실행 컨텍스트 (Execution Context) “코드를 실행하는데 필요한 환경을 제공하는 객체” 실행 컨텍스트란 실행될 코드에 필요한 여러가지 정보를 모아놓은 객체입니다. ...
자바스크립트의 호이스팅, 스코프 체이닝이 왜 발생하는 걸까요? 자바스크립트 엔진의 실...
-
자바스크립트 호이스팅
호이스팅? JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상 - MDN Web Docs 용어 사전 호이스팅(Hoisting)은 “끌어 올리기, 들어올려 나르기.” 라는 뜻으로 자바스크립트가 실행될 때 변수나 함수가 끌어...
호이스팅? JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수...
-
깃헙 블로그 카테고리 생성
깃헙 블로그에서 글을 작성할 때 카테고리를 나눌 수 있는 방법이 두 가지가 있습니다. 폴더로 구분하기 (자동) 깃헙 블로그에 포스트는 _posts/ 폴더 안에 작성을 해야 블로그에 글이 생기는데요. _posts/ 상위 폴더를 카테고리 폴더로 만들어 주시면 됩니다. 예시 root/category_name/_posts/2024-05-03-title.m...
깃헙 블로그에서 글을 작성할 때 카테고리를 나눌 수 있는 방법이 두 가지가 있습니다....
-
vscode 자동완성 만들기
snippet은 효율성을 중시하는( 귀찮고 반복적인 것을 싫어하는 ) 사람에게 없어서는 안될 기능입니다. 같은 포맷을 항상 입력해야되거나, 반복되는 작업을 하다보면 더 하기 싫어지는 경우가 많죠… vscode 에서 snippet 을 알아보고 필요한 snippet을 생성해보려고 합니다. Snippet? 스니펫(snippet)은 재사용 가능한 소...
snippet은 효율성을 중시하는( 귀찮고 반복적인 것을 싫어하는 ) 사람에게 없어서...
-
javascript 배열 문자열 중복 값 제거
javascript Array 를 다룰 때 중복 값을 제거해야할 경우가 많습니다. 오늘은 자바스크립트 배열과 문자열 중복 값을 제거하는 다양한 방법을 알아보겠습니다. Set 이용 Javascript 의 Set 객체를 이용하여 중복 데이터를 제거할 수 있습니다. Set 객체로 리턴이 되기 때문에 다시 array 에 담아서 사용을 할 수 있습니다. 문...
javascript Array 를 다룰 때 중복 값을 제거해야할 경우가 많습니다. 오...
-
마크다운에 이미지 첨부하기
마크다운에 이미지를 첨부하는 방법입니다. 이미지 가운데 정렬, 왼쪽 오른쪽 정렬, 크기조정 방법을 알아봅시다.  # ex  마크다운은 html 마크업 언어도 사용할 수 있어서 당연히 img 태그로도 첨부가 가능합니...
마크다운에 이미지를 첨부하는 방법입니다. 이미지 가운데 정렬, 왼쪽 오른쪽 정렬, 크...
-
블로그 글 공개/비공개 설정
Github pages blog 글을 작성하다보면 한번에 끝내기 어려운 경우도 종종 있습니다. 그래서 아직 공개가 되지 않았으면 해서 제외하고 커밋을 하곤 했었는데 각각 비공개 설정이 있었습니다. Github pages blog 비공개 설정 published: true : 공개 published: false : 비공개 각 포스트 상단에 포스트 정보 ...
Github pages blog 글을 작성하다보면 한번에 끝내기 어려운 경우도 종종 ...
-
브라우저의 CSS 선택자(Selector) 해석 방법과 성능 향상
CSS Selector는 브라우저가 웹 페이지를 렌더링하는 방식에 영향을 줍니다. 페이지가 변경될 때마다 새로운 Dom Tree를 읽고 그에 맞는 스타일 규칙을 다시 대응시키는데, 이것을 “스타일 재계산” 이라고 합니다. 브라우저가 스타일 재계산하는 시간을 줄여 렌더링을 좀 더 수월하게 할 수 있도록 좋은 셀렉터 작성하는 방법을 정리해보았습니다. C...
CSS Selector는 브라우저가 웹 페이지를 렌더링하는 방식에 영향을 줍니다. 페...
-
sitemap 등록 실패 오류 해결
sitemap 오류 해결하기 사이트맵을 읽을 수 있지만 오류가 있습니다. sitemap.xml 에서 url 링크가 전체 링크로 들어있는지 확인해줍니다. ⭕️ https://yeol0324.github.io/etc/sitemap-bug-fix/ ❌ /etc/sitemap-bug-fix/ jekyll을 사용해서 생성을 했다면 _config.yml ...
sitemap 오류 해결하기 사이트맵을 읽을 수 있지만 오류가 있습니다. site...
-
Jjekyll LiveReload 자동새로고침
jekyll을 사용해서 github 블로그를 작성할 때 저장 후 브라우저에서 새로고침을 해야반영이 됩니다. 핫리로드에 적응되어 있는 저는 가끔 왜 적용 안 됐지! 할 때도 있는데요, Jekyll 3.7.0 부터 수정사항이 생기면 자동으로 새로고침을 새주는 LiveReload 기능이 생겼습니다. 적용 방법은 아주 간단합니다. 빌드시 jekyll se...
jekyll을 사용해서 github 블로그를 작성할 때 저장 후 브라우저에서 새로고침...
-
jekyll 문법 표현하기
jekyll github blog는에 마크다운(markdown) 으로 글을 씁니다. jekyll 문법 탈출하는 방법을 정리해봤습니다. 블로그에서 예시를 작성하기 위해 {{ }} 또는 {% %}를 사용할 일이 많습니다. 이걸 그대로 작성하면 jekyll에서 이를 읽고 예시를 실행하려고 해서 원하는 대로 결과물이 나오지 않습니다. 코드블록을 ‘{%...
jekyll github blog는에 마크다운(markdown) 으로 글을 씁니다. ...
-
jekyll github blog 커스텀하기 [4]
오늘은 포스트 하단에 nav 버튼을 추가해보겠습니다. 블로그에 이전/다음 글이 이어지는 경우가 많아서 포스트 하단마다 직접 버튼을 추가해 주고 있었습니다. 포스트마다 직접 추가하려고 하니 귀찮기도 하고 까먹을 때도 많아서 자동으로 포스트에 추가되도록 해보겠습니다! 먼저 _includes 폴더 안에 pagination.html 을 만들어 주고 다...
오늘은 포스트 하단에 nav 버튼을 추가해보겠습니다. 블로그에 이전/다음 글이 ...
-
jekyll github blog 커스텀하기 [3]
아직은 허전한 github blog에 목차와, sidebar 를 추가하겠습니다. TOC TOC 는 markdown 에서 헤딩 태그를 기준으로 생성이 되는 목차 입니다. 원하는 목차로 갈 수 있도록 하는 기능인데요 저는 항상 오른쪽에 떠있게 두겠습니다. jekyll-toc를 사용해서 블로그에 TOC를 추가해주겠습니다. toc 적용 먼저 toc ...
아직은 허전한 github blog에 목차와, sidebar 를 추가하겠습니다. T...
-
jekyll github blog 커스텀하기 [2]
바로 앞 게시물에서 언급했던 태그 모음을 추가해보겠습니다. categories.html 에 이어서 작성했습니다. 완성 미리 보기 ❗️ Tags 불러오기 먼저 site.tags 를 활용해서 tag들을 불러와 for문으로 작성을 하겠습니다. # categories.html --- layout: page permalink: /categories...
바로 앞 게시물에서 언급했던 태그 모음을 추가해보겠습니다. categories.htm...
-
jekyll github blog 커스텀하기 [1]
jekyll github blog 커스텀하기 입니다. 지킬 깃헙 블로그 생성하기는 이전에 글을 썼었는데요. 계속 욕심도 생기고 하고 싶은 것들도 생겨서 디자인도 더욱 고도화할 겸 기록을 공유합니다. 디렉토리 구조 먼저 jekyll 디렉토리 구조에 대해 간단히 알아보겠습니다. _layouts/ default.html 화면 템플릿 소스코드를...
jekyll github blog 커스텀하기 입니다. 지킬 깃헙 블로그 생성하기는 이...
-
깃헙 블로그 포스팅 하기
깃헙 블로그를 운영하면서 가장 중요한 블로그 포스팅하는 방법을 정리해보겠습니다. 규칙을 지키지 않으면 열심히 작성한 글이 블로그에서 보이지 않는 엄청난﹒﹒﹒ 문제가 발생합니다. 저도 알고 싶지 않았어요. 🥹 간단한 규칙들이니 한번씩 꼭 확인해봅시다! 폴더 생성하기 처음 프로젝트를 생성할 때 자동으로 생성이 되었겠지만 한번 더 확인하겠습니다. 프로젝...
깃헙 블로그를 운영하면서 가장 중요한 블로그 포스팅하는 방법을 정리해보겠습니다. 규칙...
-
Github Blog 만들기 [2]
mac Os 기준으로 작성되었습니다 jekyll? Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look...
mac Os 기준으로 작성되었습니다 jekyll? Jekyll is a st...
-
Github Blog 만들기 [1]
” 공부한 것들, 경험한 것들을 기록하기 “ GitHub Pages 블로그 서비스인 github.io 블로그 만들기 시리즈 입니다. mac Os 기준으로 작성되었습니다 GitHub Pages? GitHub Pages are public webpages hosted and published through GitHub. The quickest...
” 공부한 것들, 경험한 것들을 기록하기 “ GitHub Pages 블로그 서비스인...