9. 리액트로 포트폴리오 사이트 만들기 (마무리) 사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.참고하고 싶다면 다음 사이트를 참고하자.https://webstoryboy.co.kr/1943 20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보webstoryboy.co.kr전체적인 코드는 다음과 같다.https://github.com/kss2002/PortfolioWebsite-be.. 2024. 9. 25. 8. 리액트로 포트폴리오 사이트 만들기 (푸터 영역) https://webstoryboy.co.kr/1942 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on.. 2024. 9. 22. 7. 리액트로 포트폴리오 사이트 만들기 (연락처 영역) https://webstoryboy.co.kr/1941 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account o.. 2024. 9. 20. 6. 리액트로 포트폴리오 사이트 만들기 (포트폴리오 영역) https://webstoryboy.co.kr/1940 17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account.. 2024. 9. 20. 5. 리액트로 포트폴리오 사이트 만들기 (사이트 영역) https://webstoryboy.co.kr/1939 16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역소개 안녕하세요! 웹스토리보이입니다. 이번에는 사이트 영역을 작업하겠습니다. 크게 어려운 점이 없으니 잘 따라해주세요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on GitHub.github.. 2024. 9. 19. 4. 리액트로 포트폴리오 사이트 만들기 (스킬 영역) https://webstoryboy.co.kr/1938 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이것 또한 코드가 길기에 다음 깃허브 사이트를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta develo.. 2024. 9. 18. 3. 리액트로 포트폴리오 사이트 만들기 (인트로 영역) https://webstoryboy.co.kr/1937 14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(참고 사이트)인트로 부분이 완성이 되었다.왼쪽은 마우스를 hover하지 않은 상태. 오른쪽은 마우스를 hover한 상태이다.이것또한 코드가 길어서, 코드는 밑의 링크를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/Portfolio.. 2024. 9. 18. 2. 리액트로 포트폴리오 사이트 만들기 (헤더 영역) https://webstoryboy.co.kr/1936 13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이번에는 "헤더" 영역을 세팅했다.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by cre.. 2024. 9. 18. 1. 리액트로 포트폴리오 사이트 만들기 (셋팅, 컴포넌트화) 원래 자바스크립트 심화 버전 강의를 듣고 있었지만, 너무 이론적이고... 무엇보다 아직 리액트로 사이트를 빌딩 하는 과정에 대해서는 완벽히 모르고 있기에, 따른 유튜브 강의를 듣기로 했다.물론 추가 활동인 "백준 문제 풀기"도 지속할 것이다. https://webstoryboy.co.kr/1934 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(여기 블로그를 참고하였다.)스킬은 리액트가 되어줄 것이고, SCSS, GA.. 2024. 9. 16. 16. 리액트 미니 프로젝트 (챕터 5~6) (실습) Page 컴포넌트 구현 및 각 페이지별 경로 구성하기(아, 참고로 하나의 "페이지"를 리액트에서 컴포넌트로 따로 정의해서 관리하기도 한다... 좀 이상하게 들릴 수 있지만, 이렇게 페이지 자체를 컴포넌트 화하면 유지 보수가 좋아진다고 한다.)+ (그리고, 확장 마켓플레이스에서 vscode-styled-components 을 설치했다. 비로소 스타일할 때 vscode의 에디터 도움을 받게 되었다. 개꿀)일단 코드를 오픈하기 전에, 몇 가지 알고 가야 하는 개념이 있다. 웹 페이지 이동우리는 웹에서 다른 웹 페이지로 많이 이동한다. 페이지 이동이 없는 웹은 그냥 문서인 셈.예시로 페이스북이 있다. 보면 facebook.com 이후에 슬레쉬하고 games가 존재한다.이 의미는 "메인 페이지인 face.. 2024. 8. 24. 15. 리액트 미니 프로젝트 (챕터 3~4) (실습) UI 컴포넌트 및 List 컴포넌트 구현하기바텀 업 방식으로 작은 기능부터 만들어가는 것이 좋다.일단 코드를 몇 개 만들어주자.코드는 일단 6개가 존재한다.코드가 많으니 간략하게 포인트를 설명하면 다음과 같을 것이다. UI 컴포넌트 만들기 List 컴포넌트 만들기버튼과 텍스트를 넣을 수 있는 기능이 존재하는 컴포넌트를 2개 만들었다. 이 컴포넌트는 UI라는 파일 안에 존재한다.그다음 리스트에 대한 컴포넌트를 4개 만들었다. 이 컴포넌트는 List라는 파일 안에 존재한다.이 리스트들은 댓글 또는 글 목록의 보기 기능이 될 것이다.(실습) 가짜 데이터 만들기이 강의는 리액트 강의이라서 백엔드 부분은 가짜 데이터로 처리하게 되었다.https://raw.githubusercontent.com/soa.. 2024. 8. 23. 14. 리액트 미니 프로젝트 (챕터 1~2) (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치가장 베스트는 "프로젝트"를 직접 코드를 만들어가는 것이다. 일단, 오픈 소스에 있는 데이터가 존재한다. 깃허브에 있으며 소플님이 오픈해 두었다. 코드 짤 때 도저히 모르겠으면 다음의 링크를 타고 확인하자.https://github.com/soaple/mini-blog GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub.github.com이번에 기획은 미니 블로그이다. 기능은 위와 같이 만들어두면 좋을 거 같다.전체적인 모습은 다음과.. 2024. 8. 22. 13. 리액트 Styling CSS와 selectorCSS란?> 웹 개발 스타일에 많이 쓰이는 "마크업 언어"이다.이때 엘리먼트에 CSS 규칙이 적용되는 것을 Selector라고 부른다. (선택자라는 뜻도 있다.)규칙은 다음과 같이 그림으로 표현이 가능할 듯하다.다음은 Selector의 유형을 알아보겠다.엘리먼트 셀렉터아이디 셀렉터클래스 셀렉터유니버셜 셀렉터그루핑 셀렉터엘리먼트 상태와 관련된 셀렉터이 밖에도 엄청 많은 셀렉터가 존재한다. (MDN 참고)레이아웃과 관련된 CSS 속성레이아웃에 관련된 CSS 속성을 배워보자.레이아웃을 구성할 때 중요한 속성은 "display" 속성이다.대표적 값을 위 그림을 참고하자.그다음은 "visibility" 속성이다.visibility은 화면에서 보이게 하거나 아님 안 보이게 도와주는 속성이다... 2024. 8. 21. 12. 리액트 Context Context란?리액트에서는 자주 쓰는 데이터를 잘 이용하기 위해 Context를 사용하게 되었다.코드도 깔끔해지고, 디버깅에도 유리해진다.여러 개의 컴포넌트에 데이터를 넣고 싶을 때 Context를 사용하면 된다.로그인 여부 / 로그인 정보 / UI테마 / 현재 언어 등등.. 자주 쓸 기능을 깔끔하게 사용하기 위함.코드적인 예시는 다음과 같다.물론 Context는 만능이 아니다. 적합한 상황에 써야 좋다.또한 하위 컴포넌트를 여러 개의 변수로 나누어서 전달도 가능하다.결국 상황에 따라서 Context를 사용하거나 혹은 props를 이용해서 리액트를 개발해야 하는 것이다.Context API생성은 다음과 같이 한다.이후 Provider를 사용해야 한다. 이때 Provider 컴포넌트가 재렌더링될 때마다.. 2024. 8. 20. 11. 리액트 Composition vs Inheritance Composition 방법과 Inheritance Composition이란 리액트에서 "합성"을 뜻한다.컴포넌트를 여러 개 합성해서 화면을 구성하기에 알아두어야 하는 방법이다.이때 여러 방법으로 컴포넌트를 구성할 수 있다.Containment리액트에서 하위 컴포넌트를 포함하는 방식을 말한다.코드를 살짝 보자.앞에서 props 정의할 때 엘리먼트에서 자식 요소를 다룬 적이 있다.자식 요소에 props를 정의해 주면 같이 props를 쓸 수 있다.만일 여러 개의 자식 요소가 필요하다면 props를 여러 개 정의하면 된다.예시로 다음과 같이 사용할 수 있다.Specialization기존의 객체 지향에서는 상속을 이용해서 구현하게 된다. 그러나 리액트에서는 다른 방향으로 구현하게 된다.(단어 뜻은 "전문화"이다.. 2024. 8. 19. 10. 리액트 Lifting State Up Shared State Shared State이란?공유되는 state를 말한다. 다르게 표현하면 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통으로 사용된다고 말할 수 있다.즉, 공통된 하위 컴포넌트가 상위 컴포넌트인 부모 컴포넌트의 state를 공유하여 쓴다.하위 컴포넌트에서 State 공유하기다음은 물의 끓음 온도를 표현해 주는 코드 예시다.이를 기반으로 Shared State를 사용해보자.참고로 Lifting State Up이란 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올리는 것을 말한다.코드를 전체적으로 구현하면 다음과 같을 것이다.그림으로 표현하면 다음과 같다.상위 컴포넌트 안에 값을 하위 컴포넌트가 받아서 공유한다. (온도는 25 , 스케일은 c)(실습) 섭씨온도와 화씨온.. 2024. 8. 17. 9. 리액트 Forms Form과 Controlled ComponentForm과 Controlled Component이 무엇일까?Form은 양식이라는 뜻이다. 보통 회원가입이나 체크 박스 등.. 사용자의 입력을 받을 수 있는 양식이다. 문법은 HTML 태그에서 form으로 써주면 된다. Controlled Component은 통제 받는 컴포넌트이다. 통제는 당연히 리액트가 한다.함수 컴포넌트는 useState를 이용해서 관리함.예시 코드는 다음과 같다.value를 정의하고 input 태그에 넣어준다. 이벤트 컨트롤도 비슷하게 실행한다.Controlled Component을 이용해서 사용자의 입력을 직접적으로 제어할 수 있다.예를 들어 입력값을 대문자로 바꾸는 컴포넌트를 만들고 싶다고 치자. 그럼 다음과 같은 코드를 작성하면 된.. 2024. 8. 16. 8. 리액트 List and Keys List와 KeyList Key 여러 개의 Component 렌더링 하기map 함수를 이용해서 여러 개의 컴포넌트를 렌더링 할 수 있다.예시 코드 >실제로 리액트에서는 다음과 같이 쓰일 수 있다.List의 KeyKey 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 된다. 사진으로 생각하자면 다음과 같을 것이다. 대학교로 치면, "학번" 자체가 같아도, 어차피 대학교가 다르니 상관없는 것처럼, key도 똑같다. 키는 두 개의 리스트에서 같아도 상관없다. 왜냐하면 리스트 자체가 다르기 때문이다.키로 값 , 아이디 , 인덱스를 사용할 수 있다. 보통은 아이디로 키 값을 써준다.또한 map함수 안에 있는 엘리먼트에는 꼭 키가 필요하다. 이 부분에서 꽤 많은 실수가 일어난다.(실습) 리스트 만들.. 2024. 8. 15. 7. 리액트 Conditional Rendering (조건부 렌더링) Conditional Rendering의 정의와 Inline ConditionsConditional Rendering이 무엇인가?"조건에 따른 렌더링" 즉, "조건부 렌더링"이라고 불린다. 여기서 조건은 "if"문이다.예를 들어 True이면 버튼을 띄우고 아니면 버튼을 안 띄우는 것. 이런 것들을 조건부 렌더링이라고 부른다.예를 들어 코드는 다음과 같을 것이다.이에 기반, "Boolean" 자료형이 있다. 불린 자료형엔 "진실" / "거짓"이 있는데 리액트에서는 falsy 값이 또 있다. 이건 false는 아니지만 false로 여겨지는 값이다. (???) 마찬가지로 truthy라는 것도 있다.예를 들어서 저렇게 표현이 가능하다.엘리먼트 엘리먼트를 변수처럼 취급할 수 있다. 이것을 Element Varia.. 2024. 8. 14. 6. 리액트 Handling Events Handling Events이벤트란 "사건"이다. 예를 들어 사용자가 특정 버튼을 클릭한 "사건"을 말할 수 있다. 이런 것을 이벤트라고 볼 수 있다. 이런 이벤트를 처리하는 것을 "이벤트 핸들링"이라고 부른다.예시 코드는 다음과 같다.컴퓨터 프로그래밍에서는 "카멜" 표기법을 흔히 쓰인다.이벤트 헨들러사건을 처리하는 함수 (핸들링 함수)예시 코드 >어차피 이젠 클래스 컴포넌트가 없어서 "이런게 있구나"하고 넘어가면 된다. (bind)이벤트 다루기이벤트는 다음과 같이 다룬다.함수형 컴포넌트에서 "매개변수"를 컨트롤하는 코드는 다음과 같다.매개변수의 순서는 바꾸어도 상관 없다.(실습) 클릭 이벤트 처리하기먼저 바인드를 이용한 클래스 컴포넌트에서의 클릭 이벤트 코드이다코드는 다음과 같다.처음 isConfirm.. 2024. 8. 13. 이전 1 2 다음
