분류 전체보기 (21) 썸네일형 리스트형 [React] 간단한 tab(탭) 만들기 (feat. checkbox 추가) 📌 들어가며간단한 tab (탭) 입니다.탭, checkbox(체크박스) 선택 시 해당 내용 노출 기능이 구현되어 있습니다.구현하면서 알게된 것들을 정리했습니다. 📌 구조 작성해보기1. 제공하려는 데이터 작성2. 제공된 데이터 title, nickName, communityCategoryCd 값 가져오기3. 2에서 가져온 값 화면에 뿌려주기4. 각각의 tab 버튼 클릭 시, 해당 내용 보여주기 (이때, tab 버튼 이름과 communityCategoryCd 를 비교해서 같은 것만 보여주기)4-1. 선택한 버튼의 현재 상태의 값을 useState 활용해서 저장4-2. 현재 선택된 버튼과 communityCategoryCd 비교해서 tab 내용 뿌려주기4-3. 버튼 클릭 시, 활성화되는 css 추.. [React] export 'default' error export 'default' (imported as 'App') was not found in './App' (module has no exports) 해당 에러는 해당 파일 (여기서는 App.js)이 export 가 안되었다는 얘기...ㅎㅎ 하단에export default App;적어주면 끝 [React] 간단한 투두리스트(todolist) 만들기 📌 들어가며간단한 일정 관리 todolist (투두리스트) 입니다.할일 추가, 삭제, 체크(할일 다함) 기능이 구현되어 있습니다.구현하면서 알게된 것들을 정리했습니다. 📌 todolist (투두리스트) 구성투두리스트의 컴포넌트 구조를 그림으로 그려봤습니다.App 안에 입력창, 할 일 목록들을 넣었습니다.JSX 형식으로 표현하면 아래와 같습니다.[App.js] //할일 목록 및 할 일 (ul - li) 📌 구조 작성해보기1. input 입력창에서 값을 받아서 업데이트(change)2. 입력값(value) 받기3. 등록 버튼 클릭해서 값 저장4. 입력값을 배열로 저장 (리스트 저장)5. input 입력값을 어딘가에 뿌려줘 (리스트를 보여줘)6. 뿌려진 목록에서 원하는 값을 선택 (checkbox.. AMORE MALL API Fetch javascript portfolio #AMOREMALL #모바일 적응형 #데이터비동기처리 #fetch() #json #swiper 📌 PROJECT KEY POINTS fetch() 함수로 데이터 호출 (feat.JSON) swiper 사용한 슬라이드 1. fetch() 함수로 데이터 호출 (feat.JSON) 👉🏻 아모레몰의 상품 영역은 거의 비슷한 레이아웃을 가지고 있어 매번 새로운 json 데이터를 만드는 것이 아니라 하나의 prdData.json 파일을 활용. 필요한 부분만 추출해 각 영역의 fetch문에 재사용하여 파일과 코드를 좀 더 간결하게 작성. json { "items":[ { "id":0, "thumb": "./assets/img/recom01.png", "saleT.. SEOUL CITY HALL portfolio 시맨틱태그 웹접근성 seoulcityhall 적응형 웹접근성 시맨틱태그 swiper javascript 📌 PROJECT KEY POINTS swiper slider 1-1. swiper slider 1-2. slider tab click - 다른 tab slider 멈춤 1-3. slider 재생/정지 버튼 키보드 이벤트 (keydown) : 서브메뉴 열고 닫기 접근성에 따른 태그 순서 1. swiper slider 1-1. swiper slider js const slide01 = new Swiper(".slide01 .swiper", { autoplay: { delay: 2000, disableOnInteraction: false, }, loop: true, pagination: .. NAVER portfolio 시맨틱태그 웹접근성 NAVER 적응형 웹접근성 시맨틱태그 html css 📌 PROJECT KEY POINTS 시맨틱 태그 활용 웹접근성 준수 이미지 스프라이트 (image sprite)를 이용한 아이콘 사용 1. 시맨틱 태그 ✔️ 시맨틱 태그란?? 시멘틱 태그는 "의미가 있는 태그"라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말한다. 사용하여 마크업 2. 웹 접근성 준수 ✔️ 웹 접근성이란?? 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것이다. 올바른 시맨틱 태그 사용 blind 를 활용한 웹 접근성 준수하고자 했음 (시각적으로 보이지 않으나 스크린 리더기에서 .. FLO GSAP portfolio renewal #FLO #적응형 #scss #javascript #gsap #리뉴얼 📌 PROJECT KEY POINTS gsap 라이브러리 활용 1-1) 공통 레이아웃 : 반복문 적용 1-2) clip-path 를 활용한 스크롤 애니메이션 1-3) 루프 애니메이션 1-4) data- 프로퍼티 활용 공통 레이아웃 scss 처리 javascript 헤더 스크롤 이벤트 1. gsap 라이브러리 활용 ▪️ 1-1) 공통 레이아웃 : 반복문 적용 1) 헤드라인 텍스트 스크럽 모션 (공통) gsap.utils.toArray('.text-flow-area .headline').forEach(element => { gsap.to(element, { scrollTrigger: { trigge.. Arrow Functions Arrow Functions const names = ["a", "b", "c"]; function addstart(item) { return item + "★"; } const star = names.map(addstart); console.log(star); //(3) ["a★", "b★", "c★"] implicit return names 라는 배열에 "★"을 더한 새로운 배열을 만드는 함수를 작성해본다면, 기존 방식은 아래와 같다. 2가지 모두 동일한 결과를 얻는다. const names = ["a", "b", "c"]; const star = names.map(function (item) { return item + "★"; }); console.log(star); //(3) ["a★", "b★.. 이전 1 2 3 다음
