본문 바로가기

전체 글

자바스크립트 중급 학습 let, const, var var는 한번 선언된 변수를 다시 선언할 수 있다. var name = 'Mike';console.log(name);  //Mike var name = 'Jane';console.log(name); //Jane var는 선언하기 전에 사용할 수 있다. console.log(name); //undefinedvar name = 'Mike';var name;  호이스팅console.log(name); //undefinedname = 'Mike';변수의 생성과정var1.선언 및 초기화 단계2.할당 단계let1.선언 단계2.초기화 단계3.할당 단계const1.선언 + 초기화 + 할당const gender;gender = 'male';  error스코프var함수 스코프(functio.. 더보기
[PortFolio]웹퍼블리셔의 JavaScript기반 SVG(pass)그려지는 효과 및 이메일API을 활용한 포트폴리오 제작 프로젝트를 만든 이유(html, css, javascript) 를 기반으로 SPA( single-page application ) 동적 웹페이지인 라임올리브 홈페이지를 제작후, react를 배운후 바로 토이프로젝트 미니블로그를 기획하고 Router로 SPA 페이지메뉴 구성을 제작하였습니다. 두개의 프로젝트를 끝마친 뒤, 라임올리브 프로젝트를 제작을 하면서 폴더의 가속성과 웹접근성이 부족하다고 느껴서 이번 프로젝트는 폴더의 가속성도 높이고 웹표준성 및 웹접근성도 제대로 만들어 보자는 생각으로 저를 소개하는 포트폴리오를 제작하게 되었습니다. (사실 라임올리브를 제작하면서 디자인적인 요소도 신경 쓰고 싶어서 스크롤 애니메이션 효과를 넣어서 예쁜 홈페이지를 제작하고 싶었습니다.) 포트폴리오를 제작하면서 이 프로.. 더보기
리엑트를 사용하여 호버효과 구현 기본 스타일링 구현 Wrapper display를 사용하여 요소들을 가로로 나오게 구현 후, 요소 밖은 hidden 처리 및 트렌지션을 넣어 스무스하게 나오게 걸어 둡니다.반응형 디자인도 활용합니다. ( LanguageListItem 컴포넌트에 스타일링 합니다.) ImageContainer 이미지 컨테이너 안에 img 요소를 넣고 가로길이 부모요소의 반을 정의하고 반응형 디자인도 활용합니다. Container/TitleText/ContentText 컨테이너 안에 div 태그를 넣고 가로 반으로 정의를 한다. 반응형 디자인도 구현하였다. 타이틀 및 콘텐트 텍스트들 안에 p태그들을 정의하고 그안에 부모요소 호버시 폰트색깔이 바뀌게 정의한다. 마우스 오버시 검은 배경 나오는 효과 Container 컨테이너 안.. 더보기
리엑트를 사용하여 홈페이지 리스트 구현 #2 리스트아이템 컴포넌트 구현 styled-components div 및 p 를 사용하여 함수 안에 스타일을 원하는대로 스타일링 될 수 있습니다. IntroListItem 컴포넌트는 list라는 객체를 받아서 해당 객체의 title 및 content 속성을 표시하며, 이는 해당 컴포넌트를 재사용 가능하게 만듭니다. 이 컴포넌트는 외부에서 list라는 props를 통해 제공을 합니다. 리스트 컴포넌트 구현 IntroListItem 컴포넌트를 사용하기 위해서 IntroListItem 컴포넌트를 가져옵니다. IntroList lists 배열을 순회하면서 각 요소에 대해 IntroListItem 컴포넌트를 렌더링합니다. 각각의 IntroListItem 컴포넌트에는 key 속성으로 list.id 값을 전달합니다. 이.. 더보기
리엑트를 사용하여 홈페이지 리스트 구현 #1 리스트아이템 컴포넌트 구현 styled-components 각 요소는 Wrapper, ImageContainer, Container, TitleText, ContentText라는 이름으로 정의되어 있습니다. LanguageListItem props를 통해 post와 onClick을 받아옵니다. 이 컴포넌트는 Wrapper라는 div 요소를 렌더링하며, 이 div를 클릭할 때 onClick 함수를 호출합니다. Wrapper 내부에는 post의 imageUrl을 소스로 하는 ImageContainer와 post의 title과 content를 보여주는 Container가 있습니다. LanguageListItem 컴포넌트는 외부에서 post와 onClick을 props로 받아와 이를 화면에 렌더링합니다. 리스트.. 더보기
리엑트를 사용하여 동적으로 브라우저이동하기 URL 라우팅 하기 react-router-dom BrowserRouter, Routes, Route 컴포넌트를 가져옵니다. 이 컴포넌트들은 React 애플리케이션에서 브라우저의 주소와 라우팅을 관리하는 데 사용됩니다. 페이지 컴포넌트 MainPage, PostWritePage, LanguageViewPage, PortFolioViewPage, PostViewPage는 각각 메인 페이지, 포스트 작성 페이지, 언어 뷰 페이지, 포트폴리오 뷰 페이지, 포스트 뷰 페이지를 나타냅니다. App 컴포넌트는 React Router의 핵심 요소 중 하나로, 브라우저의 주소와 라우팅을 관리합니다. 여기서는 애플리케이션의 최상위에 위치하며, 브라우저의 주소 변화에 따라 다른 컴포넌트를 렌더링합니다. 컴포넌트는 여러 개.. 더보기
리엑트를 사용하여 재사용 가능한 ui 만들기 버튼만들기 StyledButton styled-components를 사용하여 스타일이 지정된 버튼 컴포넌트를 정의합니다. 버튼은 특정한 스타일 및 마우스 호버 시의 스타일 변경을 포함합니다. Button 함수형 컴포넌트를 선언합니다. 이 컴포넌트는 title과 onClick이라는 props를 받습니다. 컴포넌트 내부에서는 StyledButton을 렌더링하며, 클릭 이벤트가 발생하면 onClick 함수를 호출합니다. 마지막으로 Button 컴포넌트를 내보냅니다. 버튼 컴포넌트 가져오기 useNavigate() 훅을 사용하여 navigate라는 함수를 선언합니다. 이 함수는 React Router의 내장 함수로, 지정된 경로로 이동할 때 사용됩니다. 이 버튼은 "글 작성하기"라는 제목을 가지며, 클릭 이벤트.. 더보기
자바스크립트 함수 및 기술들 복습자료 자료형에는 string,number,boolean 3개의 데이터 있다. 특정 자료형에만 사용할 수 있는 메소드가 있다. toUpperCase 대문자 반환 하는 문자열 string은 이스케이프 를 쓴다. 백틱도 가능 문자열 비교 연산자는 '===' 과 '!==' : 자료형도 같다 / 자료형도 같으면 거짓반환 '>' 과 ' 더보기

티스토리툴바