Help
RSS
API
Feed
Maltego
Contact
Domain > nykim.work
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2018-07-09
52.92.4.0
(
ClassC
)
2025-11-24
27.0.236.139
(
ClassC
)
Port 443
HTTP/1.1 200 date: Mon, 24 Nov 2025 10:40:20 GMTcontent-type: text/html;charsetUTF-8content-length: 53157t_userid: a7b22f5b806c295f83ca5351effea606463502c0set-cookie: REACTION_GUEST4d89de1e5d1c59595b18ea3f1ae039c188939a38x-content-type-options: nosniffx-xss-protection: 0cache-control: no-cache, no-store, max-age0, must-revalidatepragma: no-cacheexpires: 0strict-transport-security: max-age31536000 ; includeSubDomains !DOCTYPE html>html langko> head> script typetext/javascript>if (!window.T) { window.T {} }window.T.config {TOP_SSL_URL:https://www.tistory.com,PREVIEW:false,ROLE:guest,PREV_PAGE:,NEXT_PAGE:,BLOG:{id:3014653,name:anneslab,title:nana_log,isDormancy:false,nickName:나나 (nykim),status:open,profileStatus:normal},NEED_COMMENT_LOGIN:false,COMMENT_LOGIN_CONFIRM_MESSAGE:,LOGIN_URL:https://www.tistory.com/auth/login/?redirectUrlhttps://nykim.work/,DEFAULT_URL:https://nykim.work,USER:{name:null,homepage:null,id:0,profileImage:null},SUBSCRIPTION:{status:none,isConnected:false,isPending:false,isWait:false,isProcessing:false,isNone:true},IS_LOGIN:false,HAS_BLOG:false,IS_SUPPORT:false,IS_SCRAPABLE:false,TOP_URL:http://www.tistory.com,JOIN_URL:https://www.tistory.com/member/join,PHASE:prod,ROLE_GROUP:visitor};window.T.entryInfo null;window.appInfo {domain:tistory.com,topUrl:https://www.tistory.com,loginUrl:https://www.tistory.com/auth/login,logoutUrl:https://www.tistory.com/auth/logout};window.initData {};window.TistoryBlog { basePath: , url: https://nykim.work, tistoryUrl: https://anneslab.tistory.com, manageUrl: https://anneslab.tistory.com/manage, token: otHgIQolbKTrMwmGMW6Q4o6fXp4wuQOjl4c2JT4EQiJkfoFvEdn0sRhKMzDDjw2S};var servicePath ;var blogURL ;/script> !-- BusinessLicenseInfo - START --> link hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/plugin/BusinessLicenseInfo/style.css relstylesheet typetext/css/> script>function switchFold(entryId) { var businessLayer document.getElementById(businessInfoLayer_ + entryId); if (businessLayer) { if (businessLayer.className.indexOf(unfold_license) > 0) { businessLayer.className business_license_layer; } else { businessLayer.className business_license_layer unfold_license; } }}/script> !-- BusinessLicenseInfo - END --> !-- DaumShow - START --> style typetext/css>#daumSearchBox { height: 21px; background-image: url(//i1.daumcdn.net/imgsrc.search/search_all/show/tistory/plugin/bg_search2_2.gif); margin: 5px auto; padding: 0;}#daumSearchBox input { background: none; margin: 0; padding: 0; border: 0;}#daumSearchBox #daumLogo { width: 34px; height: 21px; float: left; margin-right: 5px; background-image: url(//i1.daumcdn.net/img-media/tistory/img/bg_search1_2_2010ci.gif);}#daumSearchBox #show_q { background-color: transparent; border: none; font: 12px Gulim, Sans-serif; color: #555; margin-top: 4px; margin-right: 15px; float: left;}#daumSearchBox #show_btn { background-image: url(//i1.daumcdn.net/imgsrc.search/search_all/show/tistory/plugin/bt_search_2.gif); width: 37px; height: 21px; float: left; margin: 0; cursor: pointer; text-indent: -1000em;}/style> !-- DaumShow - END -->!-- System - START -->!-- System - END --> !-- TistoryProfileLayer - START --> link hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/plugin/TistoryProfileLayer/style.css relstylesheet typetext/css/>script typetext/javascript srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/plugin/TistoryProfileLayer/script.js>/script> !-- TistoryProfileLayer - END --> meta http-equivX-UA-Compatible contentIEEdge>meta nameformat-detection contenttelephoneno>script src//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js integritysha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0 crossoriginanonymous>/script>script typetext/javascript src//t1.daumcdn.net/tiara/js/v1/tiara-1.2.0.min.js>/script>meta namereferrer contentalways/>meta namegoogle-adsense-platform-account contentca-host-pub-9691043933427338/>meta namegoogle-adsense-platform-domain contenttistory.com/>meta namegoogle-adsense-account contentca-pub-2712567095905575/>meta namedescription content좋아하는 걸 좋아하는 나나 🤟/> !-- BEGIN OPENGRAPH --> meta propertyog:type contentwebsite/>meta propertyog:url contenthttps://nykim.work/>meta propertyog:site_name contentnana_log/>meta propertyog:title contentnana_log/>meta propertyog:description content좋아하는 걸 좋아하는 나나 🤟/>meta propertyog:image contenthttps://img1.daumcdn.net/thumb/R800x0/?scodemtistory2&fnamehttps%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F3014653%2Fattach%2F0013e76e78f7462fb4dd1a93a92c7744/>meta propertyog:article:author content나나 (nykim)/> !-- END OPENGRAPH --> !-- BEGIN TWITTERCARD --> meta nametwitter:card contentsummary_large_image/>meta nametwitter:site content@TISTORY/>meta nametwitter:title contentnana_log/>meta nametwitter:description content좋아하는 걸 좋아하는 나나 🤟/>meta propertytwitter:image contenthttps://img1.daumcdn.net/thumb/R800x0/?scodemtistory2&fnamehttps%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F3014653%2Fattach%2F0013e76e78f7462fb4dd1a93a92c7744/> !-- END TWITTERCARD -->script typemodule srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/pc/dist/index.js defer>/script>script typetext/javascript srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/pc/dist/index-legacy.js defer nomoduletrue>/script>script typetext/javascript srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/pc/dist/polyfills-legacy.js defer nomoduletrue>/script>link relstylesheet typetext/css hrefhttps://t1.daumcdn.net/tistory_admin/www/style/font.css/>link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/style/content.css/>link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/pc/dist/index.css/>link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/style/uselessPMargin.css/>script typetext/javascript>(function() { var tjQuery jQuery.noConflict(true); window.tjQuery tjQuery; window.orgjQuery window.jQuery; window.jQuery tjQuery; window.jQuery window.orgjQuery; delete window.orgjQuery;})()/script>script typetext/javascript srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/script/base.js>/script>script typetext/javascript src//developers.kakao.com/sdk/js/kakao.min.js>/script> !-- Global site tag (gtag.js) - Google Analytics --> script async srchttps://www.googletagmanager.com/gtag/js?idG-EK94Q86ZWJ>/script> script> window.dataLayer window.dataLayer || ; function gtag(){dataLayer.push(arguments);} gtag(js, new Date()); gtag(config, G-EK94Q86ZWJ); /script> title>nana_log :: nana_log/title> meta nametitle contentnana_log :: nana_log /> meta namedescription Content좋아하는 걸 좋아하는 나나 🤟 /> meta charsetutf-8 /> meta nameviewport contentwidthdevice-width, heightdevice-height, initial-scale1, minimum-scale1.0, maximum-scale1.0 /> meta http-equivX-UA-Compatible contentIEedge, chrome1 /> link relalternate typeapplication/rss+xml titlenana_log hrefhttps://anneslab.tistory.com/rss /> link relshortcut icon hrefhttps://nykim.work/favicon.ico /> link relstylesheet hrefhttps://tistory1.daumcdn.net/tistory/3014653/skin/style.css?_version_1684732148 /> script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js>/script> script srchttps://tistory1.daumcdn.net/tistory/3014653/skin/images/common.js?_version_1684732148>/script> script data-ad-clientca-pub-2712567095905575 async srchttps://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js>/script> style typetext/css>.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both;}.another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important;}.another_category h4 a { font-weight: bold !important;}.another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important;}* html .another_category table { width: auto !important;}*:first-child + html .another_category table { width: auto !important;}.another_category th, .another_category td { padding: 0 0 4px !important;}.another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5;}.another_category td { text-align: right; width: 80px; font-size: 11px;}.another_category th a { font-weight: normal; text-decoration: none; border: none !important;}.another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important;}.another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important;}.another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important;}.another_category_color_gray * { color: #909090 !important;}.another_category_color_gray th a.current { border-color: #909090 !important;}.another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important;}.another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important;}.another_category_color_red * { color: #E86869 !important;}.another_category_color_red th a.current { border-color: #E86869 !important;}.another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important;}.another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important;}.another_category_color_green * { color: #64C05B !important;}.another_category_color_green th a.current { border-color: #64C05B !important;}.another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important;}.another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important;}.another_category_color_blue * { color: #477FD6 !important;}.another_category_color_blue th a.current { border-color: #477FD6 !important;}.another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important;}.another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important;}.another_category_color_violet * { color: #9D64C5 !important;}.another_category_color_violet th a.current { border-color: #9D64C5 !important;}.another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important;}/style> link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/style/revenue.css/>link relcanonical hrefhttps://nykim.work/>!-- BEGIN STRUCTURED_DATA -->script typeapplication/ld+json> {@context:http://schema.org,@type:WebSite,url:/,potentialAction:{@type:SearchAction,target:/search/{search_term_string},query-input:required namesearch_term_string}}/script>!-- END STRUCTURED_DATA -->link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/style/dialog.css/>link relstylesheet typetext/css href//t1.daumcdn.net/tistory_admin/www/style/top/font.css/>link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/style/postBtn.css/>link relstylesheet typetext/css hrefhttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/style/tistory.css/>script typetext/javascript srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/script/common.js>/script> /head> body idtt-body-index data-color#3e87f8> script> var pointColorCode document.body.dataset.color; document.documentElement.style.setProperty(--pointColor, pointColorCode) /script> div idwrap> !-- * area_menu (사이드 메뉴) --> div classarea_menu> div classarea_menu_inner> div classsidebar_header> strong classarea_menu_title> a hrefhttps://nykim.work/ titlenana_log classlink_logo>nana_log/a> /strong> button typebutton classbtn_close title닫기>span classicon-Close>/span>/button> /div> nav classmenu_navigation> a hrefhttps://nykim.work/ classarea_menu_nav-home>Home/a> ul classtt_category>li class>a href/category classlink_tit> 분류 전체보기 span classc_cnt>(91)/span> /a> ul classcategory_list>li class>a href/category/Blog classlink_item> Blog span classc_cnt>(85)/span> /a> ul classsub_category_list>li class>a href/category/Blog/Markup classlink_sub_item> Markup span classc_cnt>(3)/span> /a>/li>li class>a href/category/Blog/CSS classlink_sub_item> CSS span classc_cnt>(17)/span> /a>/li>li class>a href/category/Blog/JavaScript classlink_sub_item> JavaScript span classc_cnt>(21)/span> /a>/li>li class>a href/category/Blog/Library classlink_sub_item> Library span classc_cnt>(10)/span> /a>/li>li class>a href/category/Blog/Tools classlink_sub_item> Tools span classc_cnt>(1)/span> /a>/li>li class>a href/category/Blog/Web%20Animation classlink_sub_item> Web Animation span classc_cnt>(2)/span> /a>/li>li class>a href/category/Blog/etc. classlink_sub_item> etc. span classc_cnt>(16)/span> /a>/li>li class>a href/category/Blog/Design classlink_sub_item> Design span classc_cnt>(8)/span> /a>/li>li class>a href/category/Blog/Loves classlink_sub_item> Loves span classc_cnt>(7)/span> /a>/li>/ul>/li>li class>a href/category/%F0%9F%90%BF classlink_item> 🐿 span classc_cnt>(5)/span> /a> ul classsub_category_list>li class>a href/category/%F0%9F%90%BF/CSS classlink_sub_item> CSS span classc_cnt>(2)/span> /a>/li>li class>a href/category/%F0%9F%90%BF/JS classlink_sub_item> JS span classc_cnt>(3)/span> /a>/li>/ul>/li>/ul>/li>/ul> /nav> /div> div classdimmed_sidebar>/div> /div> div idcontainer> !-- * 헤더 (.header) --> header idheader classheader> div idskip>/div> !-- * 상단 네비게이션 (.nav) --> div classnav> div classnav__container> div classnav__gnb> !-- * 변수 설정에 따른 홈메뉴 노출 --> a hrefhttps://nykim.work/ classnav__gnb-home>Home/a> ul classtt_category>li class>a href/category classlink_tit> 분류 전체보기 span classc_cnt>(91)/span> /a> ul classcategory_list>li class>a href/category/Blog classlink_item> Blog span classc_cnt>(85)/span> /a> ul classsub_category_list>li class>a href/category/Blog/Markup classlink_sub_item> Markup span classc_cnt>(3)/span> /a>/li>li class>a href/category/Blog/CSS classlink_sub_item> CSS span classc_cnt>(17)/span> /a>/li>li class>a href/category/Blog/JavaScript classlink_sub_item> JavaScript span classc_cnt>(21)/span> /a>/li>li class>a href/category/Blog/Library classlink_sub_item> Library span classc_cnt>(10)/span> /a>/li>li class>a href/category/Blog/Tools classlink_sub_item> Tools span classc_cnt>(1)/span> /a>/li>li class>a href/category/Blog/Web%20Animation classlink_sub_item> Web Animation span classc_cnt>(2)/span> /a>/li>li class>a href/category/Blog/etc. classlink_sub_item> etc. span classc_cnt>(16)/span> /a>/li>li class>a href/category/Blog/Design classlink_sub_item> Design span classc_cnt>(8)/span> /a>/li>li class>a href/category/Blog/Loves classlink_sub_item> Loves span classc_cnt>(7)/span> /a>/li>/ul>/li>li class>a href/category/%F0%9F%90%BF classlink_item> 🐿 span classc_cnt>(5)/span> /a> ul classsub_category_list>li class>a href/category/%F0%9F%90%BF/CSS classlink_sub_item> CSS span classc_cnt>(2)/span> /a>/li>li class>a href/category/%F0%9F%90%BF/JS classlink_sub_item> JS span classc_cnt>(3)/span> /a>/li>/ul>/li>/ul>/li>/ul> a hrefhttps://www.notion.so/nanalike/23d512605b2d4e3caccabf2c5d108347?pvs4 target_blank relnoopener classnav__gnb-home>About/a> /div> div classnav__menu> !-- 메뉴 및 검색 버튼 클릭시 area_sidebar / area_popup 논처리 삭제 / body 에 styleoverflow:hidden 추가 --> button typebutton classbtn_menu title메뉴>span classblind>메뉴/span>/button> a aria-label메뉴 여닫기 버튼 classbtn_menu> div aria-hiddentrue classbtn_menu-line-wrap> span classbtn_menu-line>/span> span classbtn_menu-line>/span> span classbtn_menu-line>/span> /div> /a> /div> div classnav__utils> button classbtn_search btn-search> span classblind>검색/span> /button> div classarea_search thema_apply> form action methodget> legend>span classblind>블로그 내 검색/span>/legend> input typetext namesearch titleSearch placeholder검색어를 입력해 주세요. value classinp_search onkeypressif (event.keyCode 13) { try{window.location.href/search/+looseURIEncode(document.getElementsByName(search)0.value);document.getElementsByName(search)0.value;return false;}catch(e){} }> button typebutton title검색어 삭제 classbtn_search_del>span classblind>삭제/span>/button> /form> /div> a classbtn-link hrefhttps://nykim.net aria-labelPortfolio Link target_blank relnoopener> Portfolio /a> /div> /div> /div> !-- * 로고 또는 블로그 제목 표시 --> h1 classheader__logo> a hrefhttps://nykim.work/ titlenana_log classheader__link> span classheader__text> nana_log /span> /a> p classheader__info>좋아하는 걸 좋아하는 나나 🤟/p> /h1> /header> !-- * 메인 영역 (#main) --> main idmain> !-- inner_index --> div classinner_index> !-- index_type_list --> div classindex_type_common logSkin-list> h2 classtitle_category>모든 글/h2> ul classlist_horizontal index_list_container logSkin-new> li classlist_horizontal_item> div classarticle_content> a href/118 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/OYFDd/btsp8b3BLUo/AAAAAAAAAAAAAAAAAAAAAMblPvHqJr66ORbrBMXwk4LYF0cNasg74jp7oEiOhwjV/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureEz5qlp53iJq4oUiZMTYFL0v%2Bu0c%3D) >/div> /div> div classinfo_zone> p classcategory_post>etc./p> strong classtitle_post>웹 성능 최적화 #1 브라우저는 어떻게 렌더링을 할까/strong> p classtxt_post> 프롤로그 면접관: “웹 사이트 성능 최적화에 대해 아는 대로 얘기해 보세요.” ???: “ㅈ..잘...? 🙄” (기술 면접에서 저 질문을 받았을 때의 짜릿함이란☆) 최적화! 왠지 중요하고 챙겨야할 거 같지만 잘 모르는 그것! 저도 어디선가 줍줍한 지식들로 대략적으로는 알고 있지만 막상 정리하려니 참 어렵게 느껴지더라고요... 사실 꼭 면접에 대비하기 위함이 아니더라도, 웹 사이트를 사용자에게 빠르고 쾌적하게 보여주고 싶은 마음을 다들 한켠에 품고 있으실 거라 생각합니다. 우리는 항상 사용자에게 좋은 UX를 남겨주고 싶으니까요! 언젠가 정리해야지 정리해야지 미루다가 더 이상 미룰 수 없다! 해서 써보는 웹 성능 최적화 글입니다. 내용이 워낙 방대해서 중구난방 시리즈가 될 거 같은데 쫌쫌따리 써보려고 합니다.. /p> p classdate_post>2023.08.06/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/117 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/OMv0p/btrX4kT5u8V/AAAAAAAAAAAAAAAAAAAAAOMvDiaO7n362X0Y1pG1Rf7uqEkTJQO8g9awXHa5Cc76/img.jpg?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signaturebwcRw5J1%2B5kqBo%2Fbmi7L6SdZY20%3D) >/div> /div> div classinfo_zone> p classcategory_post>Loves/p> strong classtitle_post>2022년 짤막한 회고 📖/strong> p classtxt_post> 일기 모아 제본하기도 이걸로 어느덧 네 번째! 이제 익숙해질 때도 됐는데 여전히 우당탕 헤매면서 마무리했다 (그리고 꼭 끝나야 보이는 오타... 🥹) 올해 제본 컨셉은 뭘로 할까 고민하다가 우주로 정했다. 🪐✨ 매달 회고를 할 때마다 이번 달의 한마디를 적어두는데 그때 적었던 문구 중 하나에 꽂혀서 슥 가져와 넣었다. 주변에 보여주면 뭔 유니버스? 물어보는데 마블 영화 시리즈에서 영감을 받은 문구가 맞다. 작년에 개봉했던 마블 시리즈 작품 중 닥터 스트레인지: 대환장… 아니 대혼돈의 멀티버스란 작품이 있는데, 내용을 다 떠나서 영화에서 말하는 멀티버스라는 개념이 무척 신선했던 게 기억이 남는다. 그렇담 수많은 유니버스가 존재하고 내가 있는 곳도 그중 하나의 유니버스?! 라고 생각하면 꽤 흥미롭.. /p> p classdate_post>2023.02.04/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/116 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/cu7qOq/btrTXLWYJOd/AAAAAAAAAAAAAAAAAAAAAOGsVZ2bqCVCnZP-tQPHmdWOANCJORiG2YefEN9ZPAPM/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureTie%2Bjnr%2BQUU7lKV2lTESSNcCdTw%3D) >/div> /div> div classinfo_zone> p classcategory_post>Tools/p> strong classtitle_post>React Gatsby 찍먹해보기 - 설치부터 배포까지/strong> p classtxt_post> 프롤로그 저는 종종 로컬에서 시작해 로컬에서 끝나는 마크업 작업(aka 이메일 템플릿)을 진행하는데요, 나중에 파일을 찾으려면 하나씩 파일을 열고 닫아야 하는 수고스러움이 있었습니다. 로컬에 흩어진 파일을 한 화면에서 볼 수 있게 정리하고 싶어! 하지만 어떻게?!!!하고 고민하던 중... 그레잇한 개츠비를 알게 되어 찍먹해봤습니다. 결론부터 말하자면 (삽질도 많았지만) 좋은 경험이었어요! 정적 사이트를 만들 생각인데 바닐라는 좀 그렇고 리액트 기반에서 뚝딱 만들어보고 싶다 하시는 분에게 맞을 것 같아요. 까먹을 미래를 위해 가볍게 정리해봅니다. 팁은 공식문서가 더 자세하니 이쪽으로 → Gatsby Documentation What’s Gatsby? React 기반의 정적 사이트 생성 프레임워크 (JA.. /p> p classdate_post>2022.12.20/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/115 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/cJ8yuf/btrQr6CnEOv/AAAAAAAAAAAAAAAAAAAAAP_zMSkk0UiDpH2gxcs8uKv42lu1ZBSVB7U-N8L5WH4y/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signaturel5c6hgn5GaWo9Vp1JhF0ouovdjs%3D) >/div> /div> div classinfo_zone> p classcategory_post>CSS/p> strong classtitle_post>아무튼 Sass 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수/strong> p classtxt_post> 프롤로그 백만 년 만의 업데이트! 이제 시리즈의 마지막 글입니다 😎 흐름제어와 함수를 통해 Sass를 더 멋진 방법으로 활용해 봅니다. 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 👈 Here! 이번 글에서 다루는 것: - @if, @each 등의 흐름제어문 - list 변수와 map 변수 - 내장 모듈이 제공하는 사용하기 - @function 로 직접 함수 만들기 1) 흐름 제어 Sass의 기본 특징들은 다 살펴봤으니 이번에는 좀더 기깔나게 활용해 볼 차례입니다. 먼저 흐름 제.. /p> p classdate_post>2022.11.05/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/114 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/bb1tpl/btrLKiHQ4dW/AAAAAAAAAAAAAAAAAAAAAJK0SE2DpyRuq_RKjZw7bla3UT8hQYzyAeA7CjqN6cGH/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureKX05xiWKYwUE6dNV0jlrTYUxpBc%3D) >/div> /div> div classinfo_zone> p classcategory_post>Library/p> strong classtitle_post>Framer-motion 라이브러리 훑어보기/strong> p classtxt_post> 프롤로그 Framer-motion은 Framer가 제공하는 리액트용 애니메이션 라이브러리입니다. NomadCoders의 를 듣던 중, framer-motion 라이브러리를 사용하는 내용이 있어 공식 문서를 슥 훑어보았는데요, 아니... 이것은... 애니메이션 총집합 선물세트?! 정말 다양한 애니메이션 모션을 제공하는 멋쟁이 라이브러리였습니다. 공식 문서 보러 들어갈 때마다 구글 번역을 쓰기 귀찮아서 일부 내용만 발췌해 쫌쫌따리 가져왔습니다. 😽 이 글은 framer-motion v.7 을 기준으로 작성되었습니다. (2022.09) 1. Introduction 🔗 Github (Star 15.4k) MIT 라이센스 요구사항: React 17+ 공식 문서는 요기로 👇 https://www.framer.com.. /p> p classdate_post>2022.09.08/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/113 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/bi1kep/btryAXjl06K/AAAAAAAAAAAAAAAAAAAAAEHm0dNh8Ox8VBx2nxA2K80Vxs2ItugiGaL3lDbSV3ux/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureWZ3IA7OqAJwnulKwIIBSRmtjb5I%3D) >/div> /div> div classinfo_zone> p classcategory_post>CSS/p> strong classtitle_post>아무튼 Sass 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use)/strong> p classtxt_post> 프롤로그 시리즈의 3번째 글! 이런 분들이 읽으시면 좋아요. - CSS를 다룰 수 있어요 - 하지만 Sass는 잘 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 👈 Here! 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - mixin - extend - 모듈화(import/use) 1) 믹스인: 찍어내기 틀 이번에는 조금 더 우리의 작업을 편하게 해줄 Sass 문법을 써봅시다! 바로 @으로 시작하는 At-Rules입니다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있었죠. (@font-.. /p> p classdate_post>2022.07.07/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/111 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/wTBTT/btryt5oGN9n/AAAAAAAAAAAAAAAAAAAAAOzkwAVb7fzYXPbNODW5DwgtAQd-ytjcq40Muf-iPcIL/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signaturef6IytIqcDDOhcKDUc5PwcGgK1m4%3D) >/div> /div> div classinfo_zone> p classcategory_post>CSS/p> strong classtitle_post>아무튼 Sass 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간/strong> p classtxt_post> 프롤로그 아무튼 Sass 1. 시작하기의 다음 글입니다. 두 번째 글이지만 어느덧 반년만... 😉💦 이런 분들을 위한 글입니다. - CSS를 다룰 수 있어요 - 하지만 Sass는 1도 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 👈 Here! 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - 중첩, 부모참조 선택자 - 변수, 보간 - 인라인 주석 - 출력스타일 설정 1) 중첩: 이것이 CSS 지난 글에서는 Sass 만 설치하고 똑 끝나버려서 왜 굳이 이걸 설치해서 써야하지 🤔 하는 .. /p> p classdate_post>2022.04.05/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/109 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/J1RZg/btrvCmY3R4i/AAAAAAAAAAAAAAAAAAAAAMIbBD8buce5I2nqHe08Uv26piuOLHasqr5TzDaClOQD/img.jpg?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signaturepadzwwaX1eCHcVIlr6Q2Yc4%2F5Yg%3D) >/div> /div> div classinfo_zone> p classcategory_post>Loves/p> strong classtitle_post>책 제본하기 나만의 책 만들기 (2021 ver.)/strong> p classtxt_post> 프롤로그 이 글의 두 번째 글입니다. 대충 일기를 모아서 제본했다는 내용이에요 📚 (1편을 작년에 쓰고 2편을 올해 쓰다니...) 실제로 책 제본을 진행하면서 어떤 식으로 했는지 정리해봤습니다. 개인제본 하실 때 참고하세요! 1. 글 모으기 우선 책으로 만들 글을 한데로 묶습니다. 저는 노션에 적은 일기를 모아서 하나의 텍스트 파일로 취합했어요. 여기에 사진이나 그림 같은 요소를 얼마나 넣을지, 여백은 얼마나 넓게 잡을지에 따라 분량이 달라집니다. 2020년 버전: 184,034자 (총 220p / 두께 약 1.8cm) 2021년 버전: 114,910자 (총 214p / 두께 약 1.8cm) 보면 글자 수는 다르지만 두께가 비슷한데, 2021년 버전에는 사진과 여백이 더 많이 들어가 있습니다. 따라서 두.. /p> p classdate_post>2022.03.09/p> /div> /a> /div> /li> li classlist_horizontal_item> div classarticle_content> a href/108 classlogSkin-list-link> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/bir52w/btrs3TGwOCq/AAAAAAAAAAAAAAAAAAAAAN_8CEoaISApuYKU05_taXfBydh5IwuJZZ5j9FRd95_n/img.jpg?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureYNvoDcNkiKG37YZq8RAcWBA6uss%3D) >/div> /div> div classinfo_zone> p classcategory_post>Library/p> strong classtitle_post>ReactJS 5. 𝒘𝒊𝒕𝒉 타입스크립트/strong> p classtxt_post> 이 글은 NomadCoders의 의 내용 일부를 정리한 글입니다. 멋진 강의 감사합니다! 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼✨ 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 ☀︎ 5-1. 타입스크립트 5-1-1. 타입 스크립트? 자바스크립트는 너무나 관대(?)해서 오냐오냐 하고 넘어갈 때가 많습니다. const sum (a,b) > a+b; 에서 a와 b는 숫자로 받을 생각이었지만, 여기에 문자열을 넘기더라도 그런갑다~ 하고 넘어가 버립니다. 또, 존재하지 않는 프로퍼티를 읽더라도 ‘값이 없는데? 그럼 undefined 줄게’ 하고 대충 넘어가버리기 때문에 나중에 엌??.. /p> p classdate_post>2022.02.13/p> /div> /a> /div> /li> /ul> /div> !-- // index_type_list --> !-- index_type_gallery --> div classindex_type_common index_type_gallery logSkin-gallery> h2 classtitle_category>핫한 글/h2> ul classlist_gallery index_list_container> li classlist_gallery_item> div classarticle_content> a href/86> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/05jk8/btqFNhPwZ8D/AAAAAAAAAAAAAAAAAAAAAHHyF-ntuaFZGj9V1IshzU7iCqtZK72QmHYGH0kJ7g9t/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureIaDRkNW2dgoHwinKoyat7u%2BTits%3D) >/div> /div> div classbox_contents> strong classtitle_post>CSS 이미지 사이즈 맞추기 (object-fit, absolute, background)/strong> span classdate_post>2020.07.18/span> /div> /a> /div> /li> li classlist_gallery_item> div classarticle_content> a href/15> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://t1.daumcdn.net/cfile/tistory/9959B6425EC140520F) >/div> /div> div classbox_contents> strong classtitle_post>CSS 방법론 BEM 방식/strong> span classdate_post>2020.05.17/span> /div> /a> /div> /li> li classlist_gallery_item> div classarticle_content> a href/109> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/J1RZg/btrvCmY3R4i/AAAAAAAAAAAAAAAAAAAAAMIbBD8buce5I2nqHe08Uv26piuOLHasqr5TzDaClOQD/img.jpg?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signaturepadzwwaX1eCHcVIlr6Q2Yc4%2F5Yg%3D) >/div> /div> div classbox_contents> strong classtitle_post>책 제본하기 나만의 책 만들기 (2021 ver.)/strong> span classdate_post>2022.03.09/span> /div> /a> /div> /li> li classlist_gallery_item> div classarticle_content> a href/90> div classthumbnail_zone> div classthumbnail_post stylebackground-image:url(https://blog.kakaocdn.net/dna/bFqe9K/btqTfCfX6aA/AAAAAAAAAAAAAAAAAAAAAORiBu-hfC0iJd1OGpcsUHJ2sjPG5x47tsMsBQuKs7QB/img.png?credentialyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires1764514799&allow_ip&allow_referer&signatureeTrL0rrNfk1TNshcTODkL3PpsCk%3D) >/div> /div> div classbox_contents> strong classtitle_post>티스토리 스킨 무료 배포 Log Skin; 로그 스킨/strong> span classdate_post>2021.01.13/span> /div> /a> /div> /li> /ul> /div> /div> !-- // inner_index --> /main> div classlogSkin-showAll> a href/category>전체 글 보기/a> /div> !-- ! footer --> footer idfooter classfooter> div classfooter__container> div classfooter-left> !-- 링크 --> div classside-links> ul classside-links__list> li classside-links__item>a hrefhttps://github.com/nana-like classlink_slink target_blank>Github/a> /li> li classside-links__item>a hrefhttps://nykim.net classlink_slink target_blank>Portfolio/a> /li> li classside-links__item>a hrefhttps://mail.google.com/mail/?viewcm&fs1&tonykim@nykim.net classlink_slink target_blank>Mail/a> /li> /ul> /div> /div> div classfooter-right> div classside-blog-info> !-- 방문자수 --> div classvisit-counter> p classvisit-counter__list> span classvisit-counter__tit>Today/span> span classvisit-counter__num>78/span> /p> p classvisit-counter__list> span classvisit-counter__tit>Total/span> span classvisit-counter__num>1,558,688/span> /p> /div> p classcopyright> 좋아하니까, 나답게 /p> /div> /div> /div> div classlogSkin-copy> Designed by a target_blank relnoopener hrefhttps://nykim.work/>Nana/a> /div> /footer> div classuserProfileImg styledisplay:none;>img alt블로그 이미지 srchttps://tistory1.daumcdn.net/tistory/3014653/attach/0013e76e78f7462fb4dd1a93a92c7744/>/div> div classuserProfileName styledisplay:none;>나나 (nykim)/div> div classuserProfileText styledisplay:none;>쉽고, 재밌고, 특별한 걸 좋아해요. 걷고 뛰고 구르면서 나아가는 중./div> /div> !-- // container --> /div> !-- // wrap --> div class#menubar menu_toolbar toolbar_rb> h2 classscreen_out>티스토리툴바/h2>/div>div class#menubar menu_toolbar >/div>div classlayer_tooltip> div classinner_layer_tooltip> p classdesc_g>/p> /div>/div>div ideditEntry styleposition:absolute;width:1px;height:1px;left:-100px;top:-100px>/div> !-- NaverAnalytics - START --> script typetext/javascript src//wcs.naver.net/wcslog.js>/script>script typetext/javascript>if(!wcs_add) var wcs_add {}; wcs_addwa encodeURI(61e815988f9650); wcs_do();/script> !-- NaverAnalytics - END --> div stylemargin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0>/div>script typetext/javascript srchttps://tistory1.daumcdn.net/tistory_admin/userblog/userblog-b01726c8aeb47bdb6a378467404d8bd37fde5262/static/script/common.js>/script>script typetext/javascript>window.roosevelt_params_queue window.roosevelt_params_queue || {channel_id: dk, channel_label: {tistory}}/script>script typetext/javascript src//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js asyncasync>/script> script>window.tiara {svcDomain:user.tistory.com,section:블로그,trackPage:블로그홈_보기,page:블로그홈,key:3014653,customProps:{userId:0,blogId:3014653,entryId:null,role:guest,trackPage:블로그홈_보기,filterTarget:false},entry:null,kakaoAppKey:3e6ddd834b023f24221217e370daed18,appUserId:null}/script>script typemodule srchttps://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js>/script>script srchttps://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js nomoduletrue defertrue>/script>script srchttps://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js nomoduletrue defertrue>/script> /body>script> $(.logSkin-article).find(table).each(function (idx, el) { $(el).wrap(div classtable-overflow>) }) var profile document.createElement(div); var profileContents { img: $(.userProfileImg img).attr(src), name: $(.userProfileName).text(), text: $(.userProfileText).text(), } if (profileContents.text ! ) { profile.classList.add(article_profile); profile.innerHTML + div classprofile_img>img src+profileContents.img+ altprofile/>/div> profile.innerHTML + div classprofile_contents>strong>+profileContents.name+/strong>p>+profileContents.text+/p>/div> $(.container_postbtn).before(profile); } if ($(.tag_content).length ! false) { function rmvComma() { var rmvTagComma document.getElementsByClassName(tag_content); if (rmvTagComma) { rmvTagComma0.innerHTML rmvTagComma0.innerHTML.replace(/,/g, ); } } rmvComma(); }/script>script>if(window.location.href.indexOf(%F0%9F%90%BF) > -1){ console.log(hey!) $(.category_list).addClass(index_type_wiki);}/script>!--highlight-->script src//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js>/script>script srchttps://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.6.0/dist/highlightjs-line-numbers.min.js>script srchttps://cdn.jsdelivr.net/npm/react-highlight-js@0.15.0/index.min.js>/script>/script>script> hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad();/script>!--//highlight-->/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]