티스토리

윰윰로그

검색하기

블로그 홈

윰윰로그

yumyumlog.tistory.com/m

윰윰로그 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

내 프로젝트 폴더에 깃헙 저장소 주소 알려주고 만든 커밋 푸시 - git remote add, git push origin master 미리 말씀드립니다. 이 포스팅은 이고잉님의 '지옥에서 온 문서 관리자 깃 & 깃허브 입문' 책을 보고 정리한 내용입니다. (이고잉 최고!) http://www.yes24.com/Product/Goods/84803146 Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문 생활코딩 강의에서 52개를 엄선, 한 권 안에 자주 쓰는 기능은 모두 담았다.문서 지옥, 깃&깃허브로 하루 안에 탈출한다!본서는 대학생, 개발자, 일반 사무직까지. 문서 지옥에 빠진 모두를 위한 www.yes24.com 내 로컬 저장소만으로도 버전 관리는 이미 되고 있지만 다른 사람과의 협업은 어렵다. 거기다가 내 컴퓨터가 고장나면 내가 관리한 버전들이 다 한꺼번에 사라져버리게 된다. 이런 문제점들을 해결해주는 게 바로 깃헙과 같은 원격.. 공감수 0 댓글수 0 2021. 6. 2.
변경 사항 확인하기 - git diff 미리 말씀드립니다. 이 포스팅은 이고잉님의 '지옥에서 온 문서 관리자 깃 & 깃허브 입문' 책을 보고 정리한 내용입니다. (이고잉 최고!) http://www.yes24.com/Product/Goods/84803146 Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문 생활코딩 강의에서 52개를 엄선, 한 권 안에 자주 쓰는 기능은 모두 담았다.문서 지옥, 깃&깃허브로 하루 안에 탈출한다!본서는 대학생, 개발자, 일반 사무직까지. 문서 지옥에 빠진 모두를 위한 www.yes24.com git diff 작업 트리(working tree)에 있는 파일과 스테이지(stage)에 있는 파일을 비교하거나 스테이지에 있는 파일과 저장소(repository)에 있는 최신 커밋을 비교하고 싶을 때 -> git dif.. 공감수 0 댓글수 0 2021. 6. 1.
커밋 기록 살펴보기 - git log 미리 말씀드립니다. 이 포스팅은 이고잉님의 '지옥에서 온 문서 관리자 깃 & 깃허브 입문' 책을 보고 정리한 내용입니다. (이고잉 최고!) http://www.yes24.com/Product/Goods/84803146 Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문 생활코딩 강의에서 52개를 엄선, 한 권 안에 자주 쓰는 기능은 모두 담았다.문서 지옥, 깃&깃허브로 하루 안에 탈출한다!본서는 대학생, 개발자, 일반 사무직까지. 문서 지옥에 빠진 모두를 위한 www.yes24.com git log git log 명령을 입력하면 지금까지 커밋한 내용이 자세히 나타난다. 가장 첫 줄의 노란색 메시지부터 살펴보자. commit이라는 단어 뒤에 영문과 숫자가 조합된 긴 문자열이 있다. 이 것을 '커밋 해시(.. 공감수 0 댓글수 0 2021. 6. 1.
버전 만들기 (작업트리, 스테이지, 저장소) - git add, git commit 미리 말씀드립니다. 이 포스팅은 이고잉님의 '지옥에서 온 문서 관리자 깃 & 깃허브 입문' 책을 보고 정리한 내용입니다. (이고잉 최고!) http://www.yes24.com/Product/Goods/84803146 Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문 생활코딩 강의에서 52개를 엄선, 한 권 안에 자주 쓰는 기능은 모두 담았다.문서 지옥, 깃&깃허브로 하루 안에 탈출한다!본서는 대학생, 개발자, 일반 사무직까지. 문서 지옥에 빠진 모두를 위한 www.yes24.com 기본 용어 정리 * 작업트리(working tree) - 혹은 작업 디렉터리(working directory) - 실제로 파일의 수정, 저장 등의 작업을 하는 디렉터리(폴더) * 스테이지(stage) - 혹은 스테이징 영.. 공감수 0 댓글수 0 2021. 6. 1.
깃 환경 설정하기 (사용자 정보 입력) 미리 말씀드립니다. 이 포스팅은 이고잉님의 '지옥에서 온 문서 관리자 깃 & 깃허브 입문' 책을 보고 정리한 내용입니다. (이고잉 최고!) http://www.yes24.com/Product/Goods/84803146 Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문 생활코딩 강의에서 52개를 엄선, 한 권 안에 자주 쓰는 기능은 모두 담았다.문서 지옥, 깃&깃허브로 하루 안에 탈출한다!본서는 대학생, 개발자, 일반 사무직까지. 문서 지옥에 빠진 모두를 위한 www.yes24.com 깃을 사용하기 전에 사용자 정보를 입력해야 한다. 그래야 누가, 언제 그 버전을 작성했는지 알 수 있으니까! 윈도우라면 깃 배시를 맥이라면 터미널창을 연다. 그리고 명령어를 입력한다 (매우 간단) git config --.. 공감수 0 댓글수 0 2021. 6. 1.
Tours (useEffect를 사용해서 데이터 fetch 해보기) 이번 프로젝트는 간단했지만 기본적인 리액트 기능을 다시 복습하기에 좋았다. 가령, useEffect를 사용해서 컴포넌트를 마운트 할 때 데이터를 받아온다든가, props를 destructure해서 자식의 자식 컴포넌트에게까지 전달한다든가, 손주(;) 컴포넌트에서 할부지 컴포넌트까지😋 상태를 전달한다든가 하는 것들 그리고 filter나 substring 메소드도 오랜만에 본 듯! 우선 전체 코드 👇 App.js import { useState, useEffect } from "react"; import Loading from "./Loading"; import Tours from "./Tours"; const url = "https://course-api.com/react-tours-project"; fu.. 공감수 0 댓글수 0 2021. 6. 1.
간단하게 showMore/showLess 토글 만들기 const Tour = ({ info }) => { const [readMore, setReadMore] = useState(false); return ( {readMore ? info : `${info.substring(0, 200)}...`} setReadMore(!readMore)}> {readMore ? "show less" : "show more"} ); }; 1. readMore이라는 state를 만든다. 2. readMore가 true일 때는 info 내용 전부를 보여주고 false일 때는 0부터 199번째까지 부분 문자열을 보여준다. 참고) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String.. 공감수 0 댓글수 0 2021. 6. 1.
원하는 폴더에 git init해보기 미리 말씀드립니다. 이 포스팅은 인프런에 올라온 진유림님의 '팀 개발을 위한 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 그리고 추가적인 내용은 이고잉님의 '지옥에서 .. 공감수 0 댓글수 0 2021. 5. 31.
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.. 공감수 1 댓글수 0 2021. 5. 29.
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 그리고 추가적인 내용은 이고잉님의 '지옥에서 .. 공감수 0 댓글수 0 2021. 5. 26.
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를 구현하는 .. 공감수 1 댓글수 0 2021. 5. 26.
SSR(Server-Side Rendering) 📝 들어가기에 앞서 오늘은 몇 번이나 시도했지만 매번 마무리 짓지 못했던 SSR와 CSR을 정리하는 날이다! 솔직히 말하면 기저에서 작동하는 방식까지 모두 완벽하게 이해한 것은 아니다 🙄 그래서 아직 명료하지 않은 부분들이 많다. 또 내가 알고 있는 것들 중에 틀린 내용이 있지는 않을까 걱정스럽다. 하지만! 일단 지금 현재 내가 이해하고 있는 것들부터 하나씩하나씩 블로그에 적다보면 머릿속이 정리가 좀 될 것 같아서 이번 포스팅을 준비했다. (물론 부족한 부분들은 나중에 다시 찾아와서 계속 채워나갈 예정이다.) 이번 시리즈 전체 구성은 시간의 흐름에 따른 웹 개발 트렌드(?)의 변화이다. SSR -> Ajax의 등장 -> CSR -> SSG 이번 포스팅에서는 'SSR'과 'Ajax의 등장'에 대해서 다룰 .. 공감수 1 댓글수 0 2021. 5. 25.
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 유지 병합 예 제거.. 공감수 0 댓글수 0 2021. 5. 24.
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.. 공감수 0 댓글수 0 2021. 5. 18.
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.. 공감수 0 댓글수 0 2021. 5. 18.
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.. 공감수 1 댓글수 0 2021. 5. 18.
styled-components로 Spinner 만들기 (feat. keyframes helper) 이 포스트는 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 🔗 참고 styled-components documentation에서 Animation부분 https://styled-.. 공감수 0 댓글수 0 2021. 5. 18.
번외) react-router-dom의 Link를 styled-components로 꾸미기(feat.useLocation) (하지만 난 NavLink가 좋다) 이 포스트는 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 📝 시작점 styled-componets가 아닌 일반적인 React의 컴포넌트 (react-router-dom의 Lin.. 공감수 4 댓글수 0 2021. 5. 17.
번외) react-router-dom 이 포스트는 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 LogIn from "components/pages/LogIn"; import Home from "comp.. 공감수 0 댓글수 0 2021. 5. 17.
'css' helper와 props를 이용한 스타일링 이 포스트는 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 📝 목표 styled-component의 'css' 헬퍼를 이용해서 props의 조건에 따른 스타일링을 속성을 좀더 보.. 공감수 1 댓글수 0 2021. 5. 17.
props를 이용한 conditional styles 이 포스트는 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 🌞 목표 이번 시간에는 styled-components에 props를 넣어서 props 값에 따라 (조건적으로) 다른 .. 공감수 0 댓글수 0 2021. 5. 17.
'createGlobalStyle' helper를 이용해서 global style 적용하기 이 포스트는 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 🌞 components > App.js import { Button } from "components/common"; .. 공감수 0 댓글수 0 2021. 5. 17.
Button 만들어보기 이 포스트는 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 🌞 현재 폴더 구조 src 폴더의 components 폴더 아래 App.js 파일, common 폴더, pages 폴더.. 공감수 0 댓글수 0 2021. 5. 17.
왜 styled-components-v5인가 이 포스트는 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 - styled-components는 원래 속도가 빠른 CSS-in-JS 라이브러리 중 하나였지만 v5가 릴리즈 되면서.. 공감수 1 댓글수 0 2021. 5. 17.
React 이벤트 처리하기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 1. 28.
웹팩이란 무엇인가 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 1. 15.
노드 패키지 매니저란 무엇인가 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 1. 15.
VirtualDOM - 게임 엔진 원리를 도입한 개발자들 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 1. 15.
불필요한 http request를 잡아랏! (feat. Component Life Cycle) ✔ 현재 상황 Blog 컴포넌트가 mount 되면 componentDidMount에서 http request를 보낸다. -> 받아온 data를 state에 넣어준다. -> state에서 data를 가져와 map 메소드를 이용해 Post 컴포넌트들을 만들어준다. Blog.js import React, { Component, Fragment } from "react"; import Post from "../Post/Post"; import FullPost from "../../containers/FullPost/FullPost"; import axios from "axios"; import "./Blog.css"; class Blog extends Component { state = { error: fals.. 공감수 0 댓글수 0 2021. 1. 6.
react-router-dom (8) 부가기능 NavLink NavLink - Link와 비슷 - 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트 NavLink에서 링크가 활성화 되었을 때, 스타일을 적용할 때는 activeStyle 값을 CSS 클래스를 적용할 때는 activeClassName 값을 props로 넣어 주면 된다. Profiles에서 사용하고 있는 컴포넌트에서 Link 대신 NavLink를 사용 현재 선택되어 있는 경우 검정색 배경에 흰색 글씨 적용 Profiles.js import React from "react"; import { NavLink, Route } from "react-router-dom"; import Profile from "./Profile"; const Pro.. 공감수 0 댓글수 0 2021. 1. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.