Programming (80) 썸네일형 리스트형 [CSS] Next.js Image + 화면 아래 가리키는 화살표 애니메이션 next.js에서 이미지를 불러오기 위해서는 대신에 모듈을 쓰는 것이 좋다! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 화살표 움직임에는 애니메이션 속성을 통해 다양하게 표현할 수 있다. animation 속성 속성 의미 animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정 animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 animation-timing-function - linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 애니메이션 진행 속도, 또는 가속 방식을 지정 .. [CSS] 선택자(Selector) 종류와 사용 방법 선택자(Selector) 종류 가장 기본이 되는 선택자만 정리해보았다. 이 외에도 속성 선택자, 가상 선택자 등이 있다. 선택자 종류 표현 예시 전체 선택자 * { } * { width: 100px; } Tag 선택자 tag { } div { width: 100px; } Class 선택자 .class { } .box { width: 100px; } ID 선택자 #id { } #name { width: 100px; } 복합 선택자 하위 (공백) div p { width: 100px; } 자식 > (꺽쇠) div > p { width: 100px; } 인접 형제 + (더하기) div + p { width: 100px; } 일반 형제 ~ (물결) div ~ p { width: 100px; } 복합 선택자 사용.. [Node.js] dependencies vs devDependencies 프로젝트 개발 중에 이것 저것 모듈을 설치하다가보니, 아래 모습처럼 package.json 파일에 dependencies, devDependencies로 나뉘어 추가되는 것을 보게 되었다. 모듈을 설치할 때 아래와 같이 목적에 따라 다르게 추가할 수 있다. $ yarn add $ yarn add --dev// devDependencies에 추가 https://adjh54.tistory.com/38#1)%20%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%20%EC%9D%98%EC%A1%B4%EC%84%B1%20%EA%B4%80%EB%A6%AC%C2%A0-1 dependencies는 실제 상용화시 사용할 패키지를 담고 있고, devDependencies는 개발 시 필요한 .. [Next.js] TypeScript 프로젝트 생성하기 Next.js와 TypeScript를 사용하여 프로젝트를 시작하려 한다! 둘 다 처음 써보는거라 걱정이 되긴 하지만.. 괜차나.. React랑 JavaScript랑 비.. 비슷하겠지..ㅎ 여튼! 프로젝트를 생성해보자! 팀원과 함께 개발 환경을 설정하는데, 서로 설치 방법이 달랐기 때문에 정리해보았다. 프로젝트 생성 방법의 2가지 1. 새로운 Next.js + TypeScript 프로젝트 생성하기 2. 기존의 Next.js 프로젝트에 TypeScript 설치하기 1. 새로운 프로젝트 생성하기 $ npx create-next-app --typescript my-project 2. 기존 프로젝트에 TypeScript 설치하기 1) 프로젝트 루트 경로에 tsconfig.json 파일을 생성한다. (touch t.. [Next.js] CSR, SSR, SSG, ISR, On-demand ISR Next.js 기반의 프로젝트를 진행하면서, CSR과 SSR 방식에 대해서 알게 되었다. 그 외에도 SSG, ISR.. 방식이 있었고, 앞으로 렌더링 과정을 보다 잘 이해하고 효율적으로 구현하기 위하여 이를 공부해보았다. 알아두어야 할 것 Next.js는 React로 만드는 SSR 프레임워크이다. CDN (Content Delivery Network) 서버 : CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미한다. CDN 서버는 웹 애플리케이션 서버보다 항상 빠르다. WAS (Web Application Server) : 웹 애플리케이션 서버는 쉽게 말하면 생각하는 서버라고 생각하면 된다. 사용자의 요청에 따라 API 서버에 다녀와야함을 알고.. [Python] 문자열 거꾸로 출력하기 : reverse(), reversed(), 슬라이싱(slicing) 문자열 거꾸로 출력하는 방법에는 여러 가지가 있지만, 그 중 3가지 방법을 소개한다. 함수를 활용하는 방법과 리스트 슬라이싱을 통한 방법이다. reverse() reverse() 함수는 리스트에 적용되는 함수이기 때문에, 문자열을 리스트로 치환한 뒤 사용해주어야 한다. word = 'hello' temp = list(word)# 문자열을 list로 치환 temp.reverse()# reverse 함수 사용 print(''.join(temp))# olleh reversed() reversed()는 문자열에 바로 적용이 가능하다. 하지만 결과는 제너레이터(iterator 를 생성해 주는 함수)이기 때문에 join()을 통해 문자열로 합쳐주는 과정이 필요하다. word = 'hello' print(''.joi.. [Python] 딕셔너리(Dictionary) 키(Key), 값(Value) 기준으로 정렬하기 딕셔너리(Dictionary) 키(key), 값(Value) 기준으로 정렬하기 딕셔너리는 { 키(Key) : 값(Value) }의 쌍으로 이루어져 있기 때문에 각 요소에 대해 정렬하는 방법이 다르다. 기본적으로 오름차순 정렬이며, reverse=True를 해주면 내림차순이 된다. 키(Key)를 기준으로 정렬 sorted(dic.items())# 오름차순 정렬 sorted(dic.items(), reverse=True)# 내림차순 정렬 값(Value)을 기준으로 정렬 sorted(dic.items(), key=lambda x:x[1])# 오름차순 정렬 sorted(dic.items(), reverse=True, key=lambda x:x[1]) # 내림차순 정렬 [Python] heapq Heap 파이썬의 heapq 모듈에 대해 알아보기 전에 먼저 힙이 무엇인지 알아야 할 것 같다. 힙 자료구조는 완전 이진 트리를 기초로 하는 자료구조이며, 완전 이진트리란 마지막을 제외한 모든 노드에서 자식들이 꽉 채워진 이진트리를 말한다. 그래서 이를 이용한 힙 정렬은 최대 힙 트리나 최소 힙 트리를 구성해 정렬을 하는 방법으로, 시간복잡도는 O(NlogN)으로 빠른 정렬에 속한다. 최소 힙(Min Heap) : 부모 노드의 키값이 자식 노드의 키값보다 항상 작은 힙 최대 힙(Max Heap) : 부모 노드의 키값이 자식 노드의 키값보다 항상 큰 힙 heapq 파이썬에서는 heapq 모듈을 통해 힙을 쉽게 표현할 수 있다. 내장 모듈로써 따로 설치없이 바로 사용가능하며, 리스트를 최소 힙의 형태로 정렬.. 이전 1 ··· 5 6 7 8 9 10 다음
