1-1. Gatsby란 무엇일까?
·
✏️ Study/Front-end ETC
Gatsby가 무엇인지 알기 전에 먼저 JAM Stack이 무엇인지 알아야 한다 JAM Stack이란?더 빠르고 안전하고 확장하기 쉬운 웹페이지를 만들기 위해 디자인된 아키텍쳐 JavsScriptAPIMarkup의 약자로, 어떤 기술을 사용하는지 이름에서 명시되어 있다 기존 웹사이트의 방식은서버/데이터베이스에서 데이터를 가져와 프론트엔드에 뿌려주는 방식으로 절차가 길어 복잡 반면, JAM Stack을 이용한 방식은 절차가 매우 간단빠르게 만든 정적 웹사이트를 CDN을 통해 빠르게 구현JAM Stack의 장점1. 기존 방식에 비해 더 빠르게 웹 사이트 제공- pre-render 방식으로 시간 단축- CDN을 통한 제공=> 브라우저에서 첫 응답을 받기까지 걸리는 시간인 TTFB(Time to First By..
0. Gatsby로 간편하게 기술블로그 만들기
·
✏️ Study/Front-end ETC
Gatsby 프레임워크를 사용하면 정적 페이지를 빠르고 간편하게 만들 수 있다고 들은 적이 있다. 나도 나만의 웹사이트를 쉽고 빠르게 만들어보자 인프런 강의 시작~
[CSS Battle - 2] 1-1. Simply Square
·
✏️ Study/🖼️ HTML & CSS
타겟 이미지 내 코드 아웃풋 결과 Score: 689.58 {157}, 100% match 정리 기본적인 것만 써도 157 byte인데, 1등은 54byte이다.. 가독성을 일체 배제하고 작성하여야 하는 듯 하다 주석도 코드 길이에 포함되기 때문에, 주석을 지우고 제출해야한다 이번 문제는 user agent를 제거해 주는 것을 확인하는 문제인듯 하다
[CSS Battle - 1] Intro
·
✏️ Study/🖼️ HTML & CSS
https://cssbattle.dev/ CSSBattle CSS Code Golfing Game is here! cssbattle.dev CSS Battle 이란? - HTML/CSS로 주어진 이미지를 구현 - 가능한 최소한의 코드로 작성 - 코드를 작성하고 제출하면 순위를 확인할 수 있다 - JS로 작성하거나, 코드에 이미지를 포함하면 안된다 무료 버전으로는 서비스의 모든것을 이용할 수 없다. 우선 하나씩 시작해서 CSS를 재밌게 숙달해보자 #1 pilot battle 부터 시작~
1-2. 객체 & 배열 타입
·
✏️ Study/🧽 JS & TS
객체 타입 TypeScript 에서 객체를 만들고 const person = { name: 'john', age: 30 } person에 커서를 올리면 아래처럼 TypeScript가 타입을 추론한 결과가 나온다 각 항목이 콤마가 아닌 세미콜론으로 구분됨에 주의한다 const person: { name: string; age: number; } 또한 객체에도 : object 또는 : {}를 붙여 타입을 확실하게 명시해줄 수도 있다 또는 아예 키 : 타입 쌍을 추가하여 정확하게 지정할 수도 있다 // app.ts const person: { name: string; age: number; } = { name: 'john', age: 30 } console.log(person.name); JavaScript에..
1-1. TypeScript Intro & 기본 타입
·
✏️ Study/🧽 JS & TS
TypeScript는? TypeScript는 언어이면서 도구(컴파일러)이다 TypeScript 코드를 JavaScript 코드로 변환해주는 강력한 컴파일러 도구 : 변수 선언문 끝에 !를 붙이면 이것이 절대 null 이 되면 안된다는 것을 typescript에게 알려줌 JS 와 TS 간 공유되는 타입 - number (integer / float 등의 구분은 없음 -> 5 나 5.0이나 똑같음) - string - boolean 컴파일 해보기 app.ts 파일과 app.js 파일을 같은 위치에 만들고, tsc app.ts 명령어를 사용하면 TypeScript로 작성된 app.ts 가 JavaScript 코드로 작성된 app.js로 컴파일된다. // app.ts function add(n1, n2) { r..
<적을 만들지 않는 대화법> 2부
·
🗄️ Archived/📚비개발서적
적을 만들지 않는 대화법(Tongue Fu) - 샘 혼 📍목차 2부 하지 말아야 할 말, 해야 할 말 13. 대화를 말싸움으로 바꾸는 망치, '하지만' 14. 대화를 논쟁으로 빠지지 않게 하는 '그리고' 15. 사후 약방문은 분노를 일으킨다 16. 남의 잘못을 지적할 때 해서는 안되는 말 17. 명령을 부탁으로 바꿔주는 한마디 말 18. 질문을 통해 상대방이 판단하도록 만들라 19. 찰싹 따귀를 때리는 듯한 말 20. 사람의 마음을 얻는 기술 21. 문제를 일으키는 '문제'라는 말을 버려라 22. 긍정적인 표현이 인생을 바꾼다 23. 극단적인 표현은 질문으로 되돌려주라 24. 모든 것은 당신의 해석에 달려 있다 📍13. 대화를 말싸움으로 바꾸는 망치, '하지만' ✅'하지만' 이라는 파괴적 단어 대신에 '..
<적을 만들지 않는 대화법> 1부
·
🗄️ Archived/📚비개발서적
적을 만들지 않는 대화법(Tongue Fu) - 샘 혼 📍목차 프롤로그 1부 우아하게 이기는 방법 01. 버럭 하는 마음을 빨리 가라앉히기 02. 대체 이 사람은 왜 이렇게 까다롭게 구는 걸까? 03. 내가 옳은데도 협상해야 하는 이유 04. 누군가 교묘하게 당신을 조종하려 든다면? 05. 힘에 맞서지 말고 그것을 이용하라 06. 그 순간 꿀꺽 말을 먹어버려라 07. 상대의 긴 침묵에 흔들리지 마라 08. 인간의 뇌는 부정형을 모른다 09. 뭐라고 말해야 할지 모를 때 해야 할 말 10. 잘못이 아닌 해결책에 집중하라 11. 승자없는 논쟁에서 벗어나는 기술 12. 우선 막다른 길에서 빠져나와라 📍프롤로그 ✅Tongue Fu (텅 후) - 무술 쿵후처럼 자신을 지키는 수단 - 타인의 언어적 공격에 모욕을 ..