본문 바로가기

Programming

 (80)
[CSS] inline-block : 블록 요소 가로로 정렬 및 줄 바꿈 해제하기 보통 div 태그로 묶여 있는 요소를 가로로 나란히 배치하기 위해서 display: flex를 이용해왔다. 하지만, 현재 개발중인 프로젝트는 버전이 맞지 않아서.. 사용할 수 없었다...ㅠㅠ 그래서 찾아본 결과, display: inline-block, float: left 등의 방법이 있었다. 하지만 float은 여백없이 정렬이 되어도 줄 바꿈 해제가 되지 않아서 배제하였다. 만약 줄 바꿈이 되어도 상관없다면 float을 사용하여 구현하는 것이 좋겠다! 블록 요소 가로로 정렬 및 줄 바꿈 해제하기 가로로 배치하고자 하는 요소에 display: inlin-block; 상위 요소에 white-space: nowrap; .container { white-space: nowrap; } .box { displa..
[JavaScript] 날짜 형식 수정하기 : moment.js 게시물 생성 날짜에 대한 형식을 바꿀 필요가 있었다. 받아온 데이터는 "2022-08-27T18:00:41Z"이였고, 나는 이것을 "2022.08.27"로 변환하고 싶었다. 그래서 알게 된 라이브러리가 moment.js! JavaScript 날짜 라이브러리이다. 날짜 형식 수정하기 1. 라이브러리 설치 2. 필요한 부분만 잘라내기 : .substr()을 이용하여 2022-08-27T18:00:41Z를 2022-08-27로 자름 3. 문자열로 변환하기 : .format()을 이용하여 moment 객체가 아닌 문자열로 변환 1. 라이브러리 설치 $ npm install moment --save or $ yarn add moment 2. 필요한 부분만 잘라내기 const created_at = moment((..
[CSS] Styled-components + 마지막 요소만 오른쪽 정렬하기 매번 적용할 때마다 margin-left인지 margin-right인지.., 속성 값은 또 0인지 auto인지.. 너무 헷갈려서 정리했다! 추가로 Styled-components를 사용하다보니, 하위 값에 대한 접근 방식도 정리해보았다. 마지막 요소만 오른쪽 정렬하기 1. 정렬될 요소들을 감싸는 Container 컴포넌트에 display: flex 지정하기 (width 값도 있어야 함) 2. 마지막 요소에만 style을 margin-left: auto 적용하기 Styled-components 내 하위요소에 접근하는 방법! 1. & > 하위요소 (아래 예시의 경우는 div) 2. :last-child { }, 혹은 :nth-child() { } 등 전체 코드 import styled from "styled..
[React] window.scrollTo() : 지정된 위치로 스크롤 이동하기 Web API를 이용하여 함수 하나만 쓰면 되는데, 원하는 위치(x 좌표, y 좌표)를 넣어주면 된다! 그래서 웹 페이지의 최상단으로 이동하려면 window.scrollTo(0, 0)으로 구현이 된다. 아래는 특정 요소의 높이를 받아와서 그 아래로 이동하는 예시이다. TypeScript + Styled-components를 사용하여 구현하였고, 아래 화살표를 클릭하면 해당 배경의 이미지 높이를 받아와서 그 아래로 스무스하게 이동할 수 있게 하였다. 특정 요소 밑으로 이동하기 1. 해당 요소의 높이 받아오기 2. window.scrollTo() 사용하기 전체 코드 import React, { useRef } from "react"; const Intro = () => { const ref = useRef(..
[Python] 문자열과 숫자, 변수 결합하여 출력하기 문자열 출력하기 문자열은 따옴표로 묶고, 여러 개 문자열을 함께 출력하고 싶다면 콤마(,)나 덧셈 연산자(+)를 사용하여 출력하면 된다. 덧셈 연산자로 결합할 시엔 공백을 직접 추가해야 한다. 곱셈 연산자(*)를 사용하면 문자열을 쉽게 붙일 수 있다. print("Hello world!")# Hello world! print("Hello", "world!")# Hello world! print("Hello" + "world!")# Helloworld! s = "Hello world!" print(s)# Hello world! print(s + s)# Hello world!Hello world! print(s * 2)# Hello world!Hello world! 숫자 출력하기 숫자도 그대로 출력하지만, ..
[JavaScript] 배열을 객체로 만들기 : map(), Object.fromEntries() 함수로 배열을 객체로 만들기 1. map() 함수 이용하기 2. Object.fromEntries() 함수 이용하기 1. map() 함수 이용하기 const arr = [[1,2], [3,4], [5,6]]; let formattedArr = arr.map(function(a) { let newArr = {}; newArr[a[0]] = a[1]; return newArr; }); // formattedArr => (3) [{1: 2}, {3: 4}, {5: 6}] 2. Object.fromEntries() 함수 이용하기 const arr = [ ['name', 'Chloe'], ['age', 17], ['city', 'NewYork'] ]; const newObj = Object.fromEntries(..
[JavaScript] map(), filter() 같이 사용하기 게시물을 출력하는 과정에서 불필요한 게시물은 제외해야했다. 내 경우에는 같은 유저의 게시물을 보여주면 안됐기 때문에, filter로 한번 걸러주고 나머지를 map으로 돌려서 뿌려주었다. 전체 코드를 살펴보자. 전체 코드 const Posts = () => { const [otherPosts, setOtherPosts] = useState([]) const getOtherPosts = async (producId) => { const res = await get(...); setOtherPosts(res.data.data...); }; useEffect(() => { getOtherPosts(); }, []); return ( {otherPosts.filter((post) => userId !== post..
[React] react-slick : 이미지 슬라이드/캐러셀 구현하기 (Carousel) 각각의 이미지 카드를 자동으로 순환시켜 슬라이드 쇼 형식으로 보여주고 싶었다. 이런 방식을 캐러셀이라고 하고, 다음의 라이브러리를 이용하여 구현할 수 있었다! 이미지 슬라이드/캐러셀 구현하기 (Carousel) 1. 라이브러리 설치 2. 라이브러리 imort하여 적용 3. 코드 구현 4. 스타일 수정 1. 라이브러리 설치 $ yarn add react-slick $ yarn add slick-carousel 2. 라이브러리 import import Slider from "react-slick"; // 스타일 수정이 필요할 시 import import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; 3. 코..

티스토리툴바