본문 바로가기

전체 글

props state 고급예제 props 예제1 동적 스타일 적용 컴포넌트 // components/NotificationBox.jsximport React from "react";const typeStyles = { success: { backgroundColor: "#d4edda", color: "#155724", borderLeft: "6px solid #28a745", }, error: { backgroundColor: "#f8d7da", color: "#721c24", borderLeft: "6px solid #dc3545", }, warning: { backgroundColor: "#fff3cd", color: "#856404", borderLeft: "6px so.. 더보기
1주차 HTTP 정의웹에서 클라이언트와 서버 간에 데이터를 주고받기 위한 통신 규약입니다. 예: 브라우저가 서버에 웹페이지 요청 → 서버가 HTML을 응답 기본 포트: 80 HTTP는 텍스트 교환이므로, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 보안 이슈가 존재한다. HTTP GET 요청 시 보이는 텍스트 GET /hello.txt HTTP/1.1User-Agent: curl/7.63.0 libcurl/7.63.0 OpenSSL/1.1.l zlib/1.2.11 Host: www.example.com Accept-Language: en HTTPS 정의 인터넷 상에서 정보를 암호화하는 SSL 프로토콜을 사용해 클라이언트와 서버가 자원을 주고 받을 때 쓰는 통신 규약 여기서 HTTPS의 S는 "보.. 더보기
자바스크립트 중급 학습 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을 활용한 포트폴리오 제작 / project3-1 UI 디자인 가이드 PC/Mobile    프로젝트를 만든 이유(html, css, javascript) 를 기반으로 SPA( single-page application ) 동적 웹페이지인 라임올리브 홈페이지를 제작후, react를 배운후 바로 토이프로젝트 미니블로그를 기획하고 Router로 SPA 페이지메뉴 구성을 제작하였습니다. 두개의 프로젝트를 끝마친 뒤, 라임올리브 프로젝트를 제작을 하면서 폴더의 가속성과 웹접근성이 부족하다고 느껴서 이번 프로젝트는 폴더의 가속성도 높이고 웹표준성 및 웹접근성도 제대로 만들어 보자는 생각으로 저를 소개하는 포트폴리오를 제작하게 되었습니다. (사실 라임올리브를 제작하면서 디자인적인 요소도 신경 쓰고 싶어서 스크롤 애니메이션 효과를 넣어서 예쁜 홈페이지를 제작하고 싶.. 더보기
미니블로그 호버효과 구현 / project2-5 기본 스타일링 구현Wrapperdisplay를 사용하여 요소들을 가로로 나오게 구현 후, 요소 밖은 hidden 처리 및 트렌지션을 넣어 스무스하게 나오게 걸어 둡니다.반응형 디자인도 활용합니다. ( LanguageListItem  컴포넌트에 스타일링 합니다.) ImageContainer이미지 컨테이너 안에 img 요소를 넣고 가로길이 부모요소의 반을 정의하고 반응형 디자인도 활용합니다. Container/TitleText/ContentText컨테이너 안에 div 태그를 넣고 가로 반으로 정의를 한다. 반응형 디자인도 구현하였다. 타이틀 및 콘텐트 텍스트들 안에 p태그들을 정의하고 그안에 부모요소 호버시 폰트색깔이 바뀌게 정의한다. 마우스 오버시 검은 배경 나오는 효과Container컨테이너 안에 새로운.. 더보기
미니블로그 홈페이지 리스트 구현 / project2-4 리스트아이템 컴포넌트 구현 styled-components div 및 p 를 사용하여 함수 안에 스타일을 원하는대로 스타일링 될 수 있습니다. IntroListItem 컴포넌트는 list라는 객체를 받아서 해당 객체의 title 및 content 속성을 표시하며, 이는 해당 컴포넌트를 재사용 가능하게 만듭니다. 이 컴포넌트는 외부에서 list라는 props를 통해 제공을 합니다. 리스트 컴포넌트 구현 IntroListItem 컴포넌트를 사용하기 위해서 IntroListItem 컴포넌트를 가져옵니다. IntroList lists 배열을 순회하면서 각 요소에 대해 IntroListItem 컴포넌트를 렌더링합니다.각각의 IntroListItem 컴포넌트에는 key 속성으로 list.id 값을 전달합니다. 이.. 더보기
미니블로그 홈페이지 리스트 구현 / project2-3 리스트아이템 컴포넌트 구현 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로 받아와 이를 화면에 렌더링합니다. 리스.. 더보기
미니블로그 동적으로 브라우저이동하기 / project2-2 URL 라우팅 하기react-router-domBrowserRouter, Routes, Route 컴포넌트를 가져옵니다. 이 컴포넌트들은 React 애플리케이션에서 브라우저의 주소와 라우팅을 관리하는 데 사용됩니다. 페이지 컴포넌트 MainPage, PostWritePage, LanguageViewPage, PortFolioViewPage, PostViewPage는 각각 메인 페이지, 포스트 작성 페이지, 언어 뷰 페이지, 포트폴리오 뷰 페이지, 포스트 뷰 페이지를 나타냅니다. App > 컴포넌트는 React Router의 핵심 요소 중 하나로, 브라우저의 주소와 라우팅을 관리합니다. 여기서는 애플리케이션의 최상위에 위치하며, 브라우저의 주소 변화에 따라 다른 컴포넌트를 렌더링합니다. 컴포넌트는 여러.. 더보기

티스토리툴바