본문 바로가기

전체 글

 (207)
Birthday Reminder (useState - Array 사용 기본) 이 포스팅은 Udemy에 올라온 John Smilga의 " React Tutorial and Projects Course" 강의에서 도움을 받았습니다. 강의 속 프로젝트들을 먼저 만들어 본 후에 강의를 듣고 새로 배운 내용이나 실수들을 메모한 것입니다. https://www.udemy.com/course/react-tutorial-and-projects-course/ React Tutorial and Projects Course Step by Step Learn React.js and Create Interesting Projects www.udemy.com useState를 이용한 가장 기본 프로젝트. state에 obejets를 담은 Array가 들어가는 경우. data.js export defaul..
GIT/GitHub 시작하기 미리 말씀드립니다. 이 포스팅은 인프런에 올라온 진유림님의 '팀 개발을 위한 Git, GitHub 입문' 강의의 'Git 초기화와 로컬 저장소'편을 듣고 정리한 것입니다. https://www.inflearn.com/course/%ED%8C%80%EA%B0%9C%EB%B0%9C-%EA%B9%83-%EA%B9%83%ED%97%88%EB%B8%8C/dashboard 팀 개발을 위한 Git, GitHub 입문 - 인프런 | 강의 개인 프로젝트부터 현업 개발까지, 팀 개발에 필수적인 기술인 Git과 GitHub을 그림을 통해 쉽게 익힙니다. 아예 처음 익히는 분부터 실무 사례가 궁금한 분까지 모두 들으실 수 있습니다. CLI, GUI를 www.inflearn.com 그리고 추가적인 내용은 이고잉님의 '지옥에서 ..
SPA(Single Page Application)와 CSR(Client-Side Rendering) 지난 시간 고전적(;) 웹 사이트를 만드는 방식이었던 SSR과 XMLHttpRequest API, Ajax의 등장까지 살펴보았다. 이번 시간에는 본격적으로 SPA와 CSR에 대해 정리해보려 한다. 0. Intro 데스크탑이나 노트북보다 모바일을 사용하는 사람들이 점점 늘어났지만.. 데스크탑/노트북에 비하면 모바일의 성능이 부족한 편. 이런 성능이 낮은 모바일 환경에서 웹 페이지를 잘 출력하기 위해서 SPA 방식을 많이 사용하게 되었다고 한다. 1. SPA SPA는 Single Page Application의 줄임말로 모던 웹의 패러다임이다. 기존에는 여러개의 웹 페이지가 합쳐져서 하나의 웹 사이트가 되었다면 SPA는 기본적으로 단일 페이지로 구성된다. SPA===CSR인 것은 아니고, SPA를 구현하는 ..
SSR(Server-Side Rendering) 📝 들어가기에 앞서 오늘은 몇 번이나 시도했지만 매번 마무리 짓지 못했던 SSR와 CSR을 정리하는 날이다! 솔직히 말하면 기저에서 작동하는 방식까지 모두 완벽하게 이해한 것은 아니다 🙄 그래서 아직 명료하지 않은 부분들이 많다. 또 내가 알고 있는 것들 중에 틀린 내용이 있지는 않을까 걱정스럽다. 하지만! 일단 지금 현재 내가 이해하고 있는 것들부터 하나씩하나씩 블로그에 적다보면 머릿속이 정리가 좀 될 것 같아서 이번 포스팅을 준비했다. (물론 부족한 부분들은 나중에 다시 찾아와서 계속 채워나갈 예정이다.) 이번 시리즈 전체 구성은 시간의 흐름에 따른 웹 개발 트렌드(?)의 변화이다. SSR -> Ajax의 등장 -> CSR -> SSG 이번 포스팅에서는 'SSR'과 'Ajax의 등장'에 대해서 다룰 ..
white-space 👩‍💻 개요 개행문자, 스페이스, 탭, 자동 줄바꿈, 줄 끝의 공백과 같은 공백 문자들을 어떻게 처리할 지 지정하고 싶을 때 사용하는 속성. 👩‍💻 문법 white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; (initial: 기본값으로 설정. inherit: 부모 요소의 값을 상속받음.) 👩‍💻 동작 정리 개행문자 스페이스, 탭 자동 줄 바꿈 줄 끝의 공백 normal 병합 병합 예 제거 nowrap 병합 병합 아니오 제거 pre 유지 유지 아니오 유지 pre-wrap 유지 유지 예 넘침 pre-line 유지 병합 예 제거..
ThemeProvider 사용하기 (3) - 토글해서 GlobalStyle 바꾸기 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 1. 밝은 배경과 어두운 배경 각각에 사용할 배경색과 폰트색을 설정한다. 📂 src > themes > light.js..
ThemeProvider 사용하기 (2) - 토글 버튼 만들어서 theme 토글하기 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 일단 토글 버튼 만들기🌀 👩‍💻 전체 코드 import styled from "styled-components"; co..
ThemeProvider 사용하기(1) - 기본 문법 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 1. styled-components에서 ThemeProvider를 import한다. import { ThemeProv..

티스토리툴바