본문 바로가기

전체 글

CSS styled-components Global Styling | CSS Reset

Computer Programming/CSS 2023. 6. 24. CSS styled-components Global Styling | CSS Reset 1. CSS styled-components createGlobalStyle() 프로젝트의 규모가 커질수록 공통적인 스타일을 적용해야하는 경우 (font, line-height 등) 같은 코드를 여러번 반복하게 된다. 이를 방지하기 위해 통일된 스타일을 적용하고 싶다면 styled-components에서 제공하는 여러 컴포넌트에 걸쳐 사용할 수 있도록 만들어진 createGlobalStyle() 함수를 사용하면 된다. import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` body { font-family: "Helvetica", "Arial", sans-serif; line-height: 1...

[리액트를 다루는 기술] 15. Context API 연습 w/ Vite

Computer Programming/[리액트를 다루는 기술] 2023. 6. 24. [리액트를 다루는 기술] 15. Context API 연습 w/ Vite 1. 프로젝트 생성 - Vite 지금까지는 CRA를 사용하여 리액트 프로젝트를 만들었었는데, 간단한 프로젝트에는 Vite 또한 많이 사용하고 있고 실제로 더 빠른 개발 서버를 시작시킬 수 있고 확장성이 좋다고 하여 이번 연습 프로젝트를 Vite로 구성했다. Vite란 Vue.js 프레임워크 제작자인 Evan You가 만든 빌드 도구로, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생했다. Webpack을 기반으로 한 CRA와 다르게 ES모듈을 기반으로 하여 다양한 기능을 제공하며 무엇보다 빠르다....! CRA는 불필요한 모듈도 전체 번들링을 하지만, Vite는 개별 파일이 모듈로 로드되고 캐싱되어서 초기 로딩 속도를 향상시킨다. 사용방법은 여기에! https://vitejs.dev/gui..

[리액트를 다루는 기술] 14. API 연동 뉴스 뷰어 (NavLink, useParams, usePromise Custom Hook)

Computer Programming/[리액트를 다루는 기술] 2023. 6. 24. [리액트를 다루는 기술] 14. API 연동 뉴스 뷰어 (NavLink, useParams, usePromise Custom Hook) Reference: 리액트를 다루는 기술 - 김민준 https://newsapi.org/s/south-korea-news-api 여기서 API를 연동하여 뉴스 뷰어를 만들어보자 한국 뉴스를 가져오는 API에 대한 설명서를 볼 수 있는데, axios로 fetch해온 후 보여주는 컴포넌트를 작성했다. 그러면 아래처럼 데이터를 볼 수 있는데, 이제 이 데이터를 가지고 화면에 잘 보여주면 된다. 이번에는 scss 전처리기 말고 styled-component를 활용할 예정이다. 이제 useEffect를 사용해서 컴포넌트가 처음 렌더링 되는 시점에 API를 요청하면 되는데 여기서 useEffect에 async를 붙이면 안된다. 왜냐면 useEffect 의 리턴값은 뒷정리함수이고 async는 Promise 객체를 반..

페이지 렌더링 방식 : SSR vs CSR vs SSG [+Next.js]

Computer Programming/CS 2023. 6. 23. 페이지 렌더링 방식 : SSR vs CSR vs SSG [+Next.js] 목차 1. SSR 2. SSG 3. CSR 4. Next.js 5. 렌더링 과정 정리 클라이언트-서버 간의 HTML문서를 요청하고 받는 과정에서, 이 HTML 문서를 클라이언트 사이드에서 렌더링 할 것인지, 아니면 서버 사이드에서 렌더링 할 것인지로 나눌 수 있습니다. 먼저 서버 측에서 렌더링 하는 과정을 알아보겠습니다. 1. SSR (Server-Side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, 서버 측에서 웹 페이지의 내용을 생성하여 클라이언트(브라우저)에 전달하는 웹 개발 방식입니다. SSR를 지원하는 프레임워크나 프로그래밍 언어의 예시로는 Next.js, Angular Universal, Gatsby, Express.js, PHP 등이 있습니다. 1-1. SSR의 장점 ..

CSS - box-sizing 박스 크기 기준 정하기

Computer Programming/CSS 2023. 6. 22. CSS - box-sizing 박스 크기 기준 정하기 티스토리 스킨 편집할 때 css 파일에서 정말 자주 봤던 속성 중 하나다. 이 box-sizing은 박스의 크기를 어떤것을 기준으로 정할 것인지를 나타내는 속성이다. 위의 박스와 아래 박스 모두 300px width 와 100px height이지만 padding 과 border 의 사이즈에 따라 위와 같은 차이가 난다. 왼쪽처럼 요소를 렌더링하고 싶다면 box-sizing 속성을 border-box로 주면 된다. 속성 지정을 하지 않으면 오른쪽의 box-sizing: content; 로 지정된다. 그러나 만약 width:100%를 지정하는 경우 부모 컨테이너의 너비의 100%를 차지해야하는데, padding 이나 border 속성을 더 주면 부모 컨테이너보다 더 커질 수도 있다. 이를 해결하기 위해서는 ..

HTML <a>태그의 target 사용 시 주의점 (rel = "noreferrer")

Computer Programming/React 2023. 6. 22. HTML <a>태그의 target 사용 시 주의점 (rel = "noreferrer") a 태그의 속성 중 target 을 사용할 때는 rel="noreferrer" 속성을 추가해서 함께 사용해야한다. 리액트 JSX에도 a태그를 사용하는데 읽고 있는 책에서 target 과 noreferrer, noopener 속성이 같이 있어서 어떤 연관이 있는지 알아보게 되었다. [MDN] target 링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, 의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값. _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다. _parent: URL을 현재 브라우징 맥락의 부모..

[프로그래머스] 약수의 합 (JavaScript)

알고리즘 2023. 6. 21. [프로그래머스] 약수의 합 (JavaScript) 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. 내 코드: function solution(n) { let sum = 0 for (let i=1; i

[프로그래머스] 약수의 개수와 덧셈 (JavaScript)

알고리즘 2023. 6. 21. [프로그래머스] 약수의 개수와 덧셈 (JavaScript) 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ left ≤ right ≤ 1,000 내 코드: function solution(left, right) { let sum = 0 for (let i =left; i

[프로그래머스] 시저 암호 (JavaScript)

알고리즘 2023. 6. 21. [프로그래머스] 시저 암호 (JavaScript) 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. https://school.programmers.co.kr/learn/courses/30/lessons/12926 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로..

이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음

Archives

Recent Posts

Tags

더보기

Calendar

티스토리툴바