Web Dev/5. Projects
-
[다락재 쉼터] React에서 Kakao Map 사용하기 + document.write문제 해결하기Web Dev/5. Projects 2021. 4. 6. 22:08
map.kakao.com/?urlX=848845&urlY=768527&urlLevel=3&map_type=TYPE_MAP&map_hybrid=false 카카오맵 당신을 좋은 곳으로 안내 할 지도 map.kakao.com 이 위치의 지도를 붙여넣어야하는데, 위의 화면에서 소스 생성을 하면 아래와 같은 코드를 준다. 문제는 내가 Gatsby/React 를 사용하고 있어서 그냥 집어 넣을수가 없다는 것이다. useEffect를 이용하는 방식: 한가지 찾은방식은 useEffect를 사용하는 방식인데, 알수없는 이유로 3. 실행 스크립트 부분에서 daum 부분이 없다고떳다. 문제는 일반적인 index.html에서 해당 코드를 붙여넣고 서버를 띄우면 보여주는데, react에서는 동작을 하질 않아 뭐가 문제인지 파악..
-
[다락재 쉼터] 폰트 설정하기Web Dev/5. Projects 2021. 4. 6. 11:58
폰트 설정을 해야하는데 이제까지 했갈렸던 것을 간단하게 정리하고자 한다. 구글폰트와 웹폰트 최적화 라는 글을 읽고 저한테 필요한 내용을 간략하게 정리했습니다. 이 블로그의 글이 좋으니까 방문해서 읽어보세요! font-family와 @font-face의 차이 font-family의 경우 제일 초기에 css를 배울때 사용한 방식으로 원하는 폰트를 지정할 수는 있는데, 단순히 font-family만 설정하면 사용자의 컴퓨터에 폰트가 없으면 보이지 않는 문제가 있다. 이런 문제를 해결하기 위해서 웹폰트라는 개념이 등장했는데, 이는 @font-face를 사용하는 방식이다. @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/noto-sans-kr.ttf') ..
-
[다락재 쉼터] Gatsby프로젝트에 CSS grid 적용하기Web Dev/5. Projects 2021. 4. 5. 23:43
이제까지 만들던것을 전면 리뉴얼하기로하고 다 엎어버렸다. Responsive하게 최대한 가기 위해서 고민을 많이 하고 있다. 우선 오늘 결과물은 아래와 같다. 1. 최대 화면인 경우 2. medium size 3. Smallest size 위와 같은 레이아웃을 잡기 위해서 나는 grid시스템을 적용했다. 다소간의 엄청난 뻘짓도 있었고, 아직 완벽하게 이해한 것은 아니지만, grid를 사용하면 확실하게 responsive한 레이아웃을 잡는 것이 쉬워지는것을 경험했다. 적용 방법 우선 Header에 grid시스템을 적용하기 위해 아래와 같이 선언했다. const HeaderStyle = styled.header` grid-column: 2 / -2; border-bottom: 1px solid black; ..
-
Gatsby의 플러그인 시스템을 제대로 이해하고, 내 플러그인 만들어보기Web Dev/5. Projects 2021. 4. 5. 02:15
Gatsby를 좀 만만하게 보고 시작했었따.... 아주 매콤한맛을 보는 중이다. Markdown을 렌더링해서 나만의 블로그를 만들고 앞으로 굳이 서버가 필요없는 서비스는 Gatsby로 필요한건 Next.js로 해야지~ 룰루~ 하고생각했는데 지금 아주 매콤한맛을 보고 있다. 다시 초심으로 돌아가서 Gatsby의 플러그인 시스템을 자세히 살펴보고 Markdown parsing 하는 플러그인이 내 성에 안차서 하나 만들려고 한다. What is a Plugin? Gatsby에서는 Plugin이라는 걸 사용하는데, 이건 Gatsby APIs를 적용한 Node.js 패키지이다. 특히, 나는 Markdown파일을 변환할때 gatsby-transformer-remark란걸 사용했는데, 대체 동작원리가 이해가 안됬다...
-
Form - 오랜시간 함께했지만, 아직 낯선 아이(Markdown editor만들기) + ReactWeb Dev/5. Projects 2021. 3. 23. 11:39
공부 목표 form은 항상 쓰면서 뭔가 잘모르겠어서 이번기회에 이 mdn 문서를 읽고 알게 된 내용을 간단하게 정리해보고자한다. Form을 알아보자 html폼은 사용자와 웹사이트/app이 상호작용할때 중요한 기술중의 하나이다. - form과 action, method: 필수이다(데이터를 전송하기 위해선) 이때 전송하는 동작은 button으로 설정하는데(input도 되긴하는것 같은데 button방식을 사용해야한다) submit, reset, button이 있다. 전송을 위해선 submit type 버튼을 만들어야한다. - name: 데이터의 이름을 지정하는 것. form에는 많은 폼 위젯이 있지만 이 위젯에는 name속성을 지정해줘야, 데이터의 이름이 지정된다. - change event: [참고한 글] ..
-
이미지 처리에 대한 고찰 - 어렵다, 나만 그런건가? Gatsby와 함께!Web Dev/5. Projects 2021. 3. 2. 23:45
이미지를 처리하는 방법을 고민하게 된 이유 css파일은 네이버같이 큰 회사도 파일의 사이즈가 이미지 하나정도밖에 되지 않는다고하고, 많은 사람들이 페이지가 느리거나 트래픽이 문제가 되는건 대부분 이미지때문일거라고 해서 이미지를 어떻게 처리해야하는건지 고민하게 되었다. 그리고 HTTP 요청관련해서 img는 그냥 img태그만 넣어도 브라우저가 알아서 요청을 받아오고 그러는데, img request할때 헤더는 어떻게 처리가 되는건지? 하는 것도 모르겠고 response에 cache관련 설정을 할 수 있다는데 대체 뭐지...? 하는 복잡한 생각이 들었다. 그리고 반응형으로 페이지를 만들어야하는데 이미지는 텍스트처럼 fluid하지가 않아서 크기도 좀 이상하고 그래서 img 관련해서 좀 딥다이브 해보기로 했다.(이..
-
[Chrome Extension 개발] 선대 개발자들이 이룩한 React를 도입해보자(Parcel과 함께!)Web Dev/5. Projects 2021. 2. 18. 23:40
오늘 작업한양 Chrome Extension을 개발하려면 크게 1. background 관련 파일 2. popup 관련 파일 3. content 관련 파일 4. option 관련 파일이 필요하다 background 관련 파일을 제외하고는 다 UI를 개발하는 일반 웹개발과 동일했다. 그런데 popup, option 은 popup.html, option.html 로 엔트리 포인트를 잡을 수 있는데, content관련의 경우 content.js 같이 js로 진입을 해야해가지고 document.createElement로 한땀한땀 태그를 생성했는데, 사람이 할짓이 아닌것 같아...(선대 개발자들을 존경한다...ㅜㅠ) 문명의 산실인 React를 적용하고, Bundling은 Parcel로 했다. { "name": "..
-
[Vscode Extension] Laziness-Alarm: 타이핑아무것도 안하면 알람을 띄우는 익스텐션Web Dev/5. Projects 2021. 2. 14. 20:25
[Visit My Repository] 사용 화면! 암것도 안하면 게으르다고 뭐라고 한다 사용방법 cmd + shift + p start lazy 개발할때 참고한 자료 - vscode 개발 문서 Your First Extension Create your first Visual Studio Code extension (plug-in) with a simple Hello World example. code.visualstudio.com - vs code sample microsoft/vscode-extension-samples Sample code illustrating the VS Code extension API. - microsoft/vscode-extension-samples github.com 위의..