꿈꾸는 개발자의 블로그

선택자(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; } 복합 선택자 사용..

프로젝트 개발 중에 이것 저것 모듈을 설치하다가보니, 아래 모습처럼 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를 사용하여 프로젝트를 시작하려 한다! 둘 다 처음 써보는거라 걱정이 되긴 하지만.. 괜차나.. 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.. 방식이 있었고, 앞으로 렌더링 과정을 보다 잘 이해하고 효율적으로 구현하기 위하여 이를 공부해보았다. 알아두어야 할 것 Next.js는 React로 만드는 SSR 프레임워크이다. CDN (Content Delivery Network) 서버 : CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미한다. CDN 서버는 웹 애플리케이션 서버보다 항상 빠르다. WAS (Web Application Server) : 웹 애플리케이션 서버는 쉽게 말하면 생각하는 서버라고 생각하면 된다. 사용자의 요청에 따라 API 서버에 다녀와야함을 알고..

문자열 거꾸로 출력하는 방법에는 여러 가지가 있지만, 그 중 3가지 방법을 소개한다. 함수를 활용하는 방법과 리스트 슬라이싱을 통한 방법이다. reverse() reverse() 함수는 리스트에 적용되는 함수이기 때문에, 문자열을 리스트로 치환한 뒤 사용해주어야 한다. word = 'hello' temp = list(word)# 문자열을 list로 치환 temp.reverse()# reverse 함수 사용 print(''.join(temp))# olleh reversed() reversed()는 문자열에 바로 적용이 가능하다. 하지만 결과는 제너레이터(iterator 를 생성해 주는 함수)이기 때문에 join()을 통해 문자열로 합쳐주는 과정이 필요하다. word = 'hello' print(''.joi..