본문 바로가기

프론트앤드47

[javascript] 404.liquid 에서 리디렉션 사용자에게 오류페이지를 보여주지 않기 위해서, sections폴더에 있는 404.liquid 탬플릿에 더보기 를 삽입해 주었다. 결과 -> url에 아무거나 쳐도 바로 메인페이지로 이동함 ! 2023. 9. 10.
[JavaScript] 오류 메시지에서 "Assignment to constant variable"라는 내용을 볼 수 있습니다. 이 오류는 const로 선언된 변수에 값을 다시 할당하려고 할 때 발생합니다. const로 선언된 변수는 한 번 값이 할당되면 다른 값을 할당할 수 없습니다. 따라서 selectedNailLength 변수를 let으로 선언하거나, 이미 const로 선언했다면 다른 변수로 값을 저장하는 방식으로 수정해야 합니다. 아래는 수정된 코드입니다: default 값으로 바로 checkbox가 checked 되어있도록 2023. 9. 9.
[JSON Template] 404-template Designing (1-3) 1. wrap our template using "tag" attribute tag attribute - By default, when Shopify renders a section, it wrapped in a element with a unique 'id' attribute. - If you don't want to use , then you can specify which kind of HTML element to use with the 'tag' attribute. the following are the accepted values - article - aside - div - footer - header - section 여기서 시작 (1-2 내용) {{ section.settings.title.. 2023. 8. 27.
[JSON Template] 404-template schema (1-2) 이 전 내용과 이어진다. 이번에는 이 전에 적용했던 코드에서 schema를 적용하고 바꿔서 커스터마이징까지 할 수있게 바꾸어 보았다 ! {% schema %} { "name": "Template-404", "settings": [ { "type": "text", "id": "title", "default": "404", "label": "404 Heading Title" } ] } {% endschema %} //같은 파일 내 //여기는 HTML {{ section.settings.title }} //여기를 이렇게 간단하게 변경 {{ 'general.404.subtext_html' | t }} //schema {% schema %} { "name": "Template-404", "settings": [ .. 2023. 8. 26.
[JSON Templates] 404 template ✨ 나도 이제 취업성공 ✨ 맡은 업무중에 하나인 해외 이커머스 shopify 를 이용한 페이지를 관리하기 위해 쇼피파이라는것을 처음 접하고,, 파해치게되었다.. 공식문서 빼고는 아직 국내에서 블로그 같은 사료가 많이 없어서 ㅠ 마침 udemy에 적절한 영상이 있어 내돈내산 해 보았다..! 자막도 따로 없어 영어자막 자동 생성으로 열심히 따라가는즁.. 😂 여기 포스트는 기록 및 따라해보기 + 복습 용으로 정리해 볼 것이다 ! Shopify Theme 이 2.0으로 업그레이드 되면서 원래 liquid를 썼다면 json 으로 template가 변경되었다. liquid template 이었던 404 파일을 json template으로 변경해 주었다. 쇼피파이 공식 문서에 있는 JSON templates로 쓸 수.. 2023. 8. 26.
웹 성능 최적화 프론트엔드 개발에서 중요한것은 무엇이 있을까? 다양한 기술들이 필요하겠지만, 그중에서도 사용자 경험을 증가시키기 위해서 로딩속도를 개선하고, 성능 최적화를 위한 기술적 노력이 정말 중요할 것이다. 안그래도 면접에서도 자주 나오곤 했는데, 이번 기회에 다시한번 정리해 보았다. 코드 최적화: 불필요한 코드를 줄이고, 코드를 압축하거나 최소화하여 파일 크기를 줄이는 등 코드 최적화를 수행한다. 이미지 최적화: 이미지 파일을 적절하게 압축하고, 필요 이상으로 큰 이미지를 사용하지 않도록 최적화한다. 레이지 로딩: 페이지가 로딩될 때 먼저 필요한 부분만 로딩하여 초기 로딩 속도를 개선하는 기술을 적용한다. 파일 번들링과 분할 로딩: 코드를 더 작은 블록으로 분할하여 필요한 부분만 불러오거나, 자주 변경되지 않는 .. 2023. 7. 18.