본문 바로가기

분류 전체보기76

[네이버 클론 1] 헤더 제작 과정 간단 설명 서론 오랜만에 만들어보니 좀 힘드네요.. 이제 취업을 준비해야 될 것 같아서 뭐라도 만들어 보려고 합니다. 그래서 가장 만만해 보이는 네이버로 정했습니다. 프로젝트를 생성한 날짜는 10월 7일인데, 본격적으로 만들기 시작한 날은 오늘이네요. 이제부터 매일 공부하면서 네이버 사이트를 만들건대, 그 과정을 포스팅할 예정입니다. 아직 README에 아무것도 적어놓지 않아서 코드만 보면 됩니다. 그리고 클론을 하는 목적은 취업도 맞지만 기존에 대형 기업에서 만든 사이트는 구조가 어떻게 되어있고, 그렇게 많은 데이터를 불러와서 화면에 어떻게 단기간에 뿌려줄까를 생각하게 되는 등 저에게 많은 도움이 될 것 같아서 시작했습니다. 흔히 클론 한다고 하면 웹에서 사용자에게 보이는 프런트만 구성해서 끝을 낸다고 알고 있습.. 2021. 10. 14.
react-live demo 실행 왜 React Live 라이브러리에 관심을 가지게 되었냐면 React를 이용해서 간단하게 웹사이트 클론을 하고 있었습니다. 그런데 React 사이트를 클론 하던 중에 Live Jsx Editor라는 기능이 있어서 찾아봤더니 알게 된 게 React Live 였습니다. React Live의 적용 기술 prism PrismJS/prism Lightweight, robust, elegant syntax highlighting. Contribute to PrismJS/prism development by creating an account on GitHub. github.com buble bublejs/buble Contribute to bublejs/buble development by creating an a.. 2021. 6. 20.
공부한 것을 정리하는 방법에 대한 생각 계속 자바스크립트의 클로저를 공부했다. 클로저의 개념과 활용에 대해서는 이해가 가고 또 실제 자바스크립트 관련 공부를 할 때도 클로저를 잘 사용한다. 하지만 이는 내 머릿속에서만 가능한 일이고, 이를 클로저에 대해서 전혀 모르는 사람에게 이해하기 쉽도록 설명하기는 어렵다. 그저 블로그에 글을 올리려는 목적을 가지고 글을 아무 생각 없이 적을 수도 있겠지만, 이는 뭔가 정말로 글만 올리려는 사람 같아 보여서 아직까지도 안올리고 있다. 다른 사람이 모르는 정보에 대해서 이해하기 쉽도록 가르쳐주는 것은 어렵다고 생각이 든다. 하지만 그만큼 공부한 내용을 생각하면서 목차를 생각하거나 부족한 부분을 채우기 위해 다양한 자료를 보면서 정리하는 것이 필요하다. 이렇게 습득한 정보를 수정하고, 다듬는 과정을 통해서 생.. 2021. 6. 19.
집중이 안된다 알바를 마치고 운동을 하고 나서 공부에 집중을 하려고 딱 앉았더니, 그대로 잠들어버렸다. 오늘은 좀 몸이 힘들었나보다. 어떻게 하면 집중을 잘할 수 있을까? 최근 들어 공부에 집중이 잘 되지 않아서 유튜브에서 지나가다 본 책을 구입해서 읽었다. 그 책은 크리스 데일리가 쓴 하이퍼포커스라는 책인데, 집중을 어떻게 하면 잘할 수 있고, 집중을 함으로 인해서 우리가 얻을 수 있는 좋은 영향에 대해서 설명을 하고 있다. 책에서 말한대로 어떤 일을 하고 있을 때 최대한 방해되는 것들을 내 앞에서 치우고, 어떤 일에 집중을 하기 위해서 그 날 할 일 목록을 3개를 작성하고 실천하고 있다. 실천 한지 이틀이나 됐다!! 6개월 전에 나와 지금 나를 비교하면 지금 내가 훨씬 났다. 육체적으로나 정신적으로나 말이다. 좀 .. 2021. 6. 16.
D - Day 93 - 2 (자바스크립트 async, await 문법) 안녕하세요 이틀 만에 올립니다. async와 await 은 자바스크립트의 비동기 처리 중에 가장 최근에 나온 문법입니다. async, await 문법은 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 사용하기 쉽도록 문법이 간단하게 되어있습니다. async 문법을 적용하려면 다음과 같 이 async를 함수 앞에 붙여줍니다. // async - await 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 위의 예제처럼 function 앞에 async를 붙이면 해당 함수는 무조건 이행 상태의 프로미스 객체를 반환합니다. 다음은 간단한 문자열을 반환하는 async 함수의 정의와 호출에 대한 예제입니다. async function getName(){.. 2021. 6. 15.
D - Day 93 - 1 (함수에 대한 기본) 오늘부터 글을 초등학생 또는 일반인이 해당 글을 보아도 이해하기 쉽게 작성하겠습니다. 우리는 흔히 코드의 반복, 재사용성을 위해서 어떠한 작업을 수행하는 코드를 함수 또는 객체로 만듭니다. 그리고 이 함수를 선언하기 위해서는 function이라는 키워드를 사용합니다. 오늘은 함수에 대해서만 설명을 하겠습니다. 함수의 선언 및 정의는 다음과 같은 형태를 가집니다. // 한 줄로 간단한 설명이 필요한 코드일 때 사용합니다. /* 여러 줄로 설명이 필요한 코드일 때 사용합니다. */ function something(){ //소괄호 안에 매개변수라는 것도 들어갑니다. // 어떤 일을 수행합니다. } 위의 형태를 자세하게 풀어보면 함수의 이름은 something이고, 입력값도 없이 그저 주어진 어떤 일을 수행합.. 2021. 6. 15.

티스토리툴바