Front-end

create-next-app을 깔아보자. npx create-next-app create-next-app가 설치되고, 기본적으로 세팅되어 있는 page, public, styles 파일을 살펴보자. styles styles 폴더에서는 스타일 파일을 저장해준다. public public에는 페이지에서 사용할 공개 리소스를 넣을 수 있다. (ex. image) 그런데, public 파일 내부를 보면 우리가 이전에 사용했던 react 프로젝트, create-react-app와 달리 index.html 파일이 안보인다. 그 이유는 nextJS는 사전 렌더링 기능을 내장하기 때문이다. (pages에서 계속) pages NextJS는 싱글 페이지 어플리케이션(spa)을 제공한다. 서버에 요청이 오면 이 싱글 페이지..

Literal types 리터럴 유형은 string, number보다 구체적인 유형이다. 예를 들어 'hello'는 문자열이지만 문자열은 'hello'가 아니다. 'hello'는 보다 구체적인 유형의 문자열로, 리터럴 형식이 될 수 있다. type Greeting = "Hello" 즉, 타입Greeting 은 Hello 값만 가질 수 있고, 다른 유형의 값은 가질 수 없다. let greeting: Greeting greeting = "Hello" // OK greeting = "Hi" // ❌ 리터럴 유형은 그 자체로는 유용하지 않지만 union types, type aliases, type guards 와 결합하면 강해진다. type Greeting = "Hello" | "Hi" | "Welcome"..

TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다. Partial 파셜타입은 특정 타입의 부분집합을 만족하는 타입을 정의한다 interface Login { email : string password : string } type MyLogin = Partial const google : MyLogin = {} const naver : MyLogin = {email : 'sally@naver.com'} const kakao : MyLogin = {email : 'sally@kakao.com', password : 'string'} interface Product { id: number; name: string; price: number; brand: string;..

Error 1 Error : Unable to boot device in current state: Bootec 이미 구동된게 있어서 에러가 나는 것 Solution xcrun simctl list 사용 가능한 모든 시뮬레이터를 나열해서 해결 Error 2 npm run ios를 입력하는데 계속 아래 에러만 떴다. error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening my_awesome_native.xcodeproj. xcode 이슈인지는 ..

React개발자들은 기본적으로 Node.js 위에서 개발을 한다. 그리고 package.json 파일에 기본 설정을 하게된다. 개발을 진행하다보면, 개발 환경과 배포 환경을 다르게 해야하는 경우가 생긴다. 예를들어 DEV서버의 URL과 실제 PROD서버의 URL이 다른 경우가 있겠다. 개발환경과 배포환경 설정은 환경변수 선언(.env)를 통해 한다. creact-react-app을 사용하여 프로젝트를 시작했다고 가정하자. 환경변수 기본개념 기본적으로 node.js는 production(배포), development(개발), test(테스트)로 구분하여 사용한다. 그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다. # production 배포 env실행 npm..

Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(환경)이다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 Javascript 언어를 사용하며, 서버사이트 스크립트 언어가 아닌 프로그램(환경)을 말한다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치(정적인 데이터를 처리하는 웹 서버) 등의 별도 소프트웨어 없이 동작하는 것이 가능하며, 이를 통한 웹 서버의 동작에 있어 더 많은 통제에서 벗어나 여러 가지 기능을 가능하게 해준다. 단순히 웹에서 실행 가능한 게임을 만들려면 JavaScript 만으로도 가능하지만 좀 더 진화 된 프로그램으로 ..

declarations file 만들기 // styled.d.ts import "styled-components"; declare module "styled-components" { export interface DefaultTheme { colors: { gray_100: string; gray_200: string; }; } } 먼저, 선언 파일을 생성해준다. 그리고 DefaultTheme에 타입을 추가 해준다. (+ d.ts파일은 구현부가 아닌 선언부만을 작성하는 용도의 파일로, JS코드로 컴파일되지않음. 선언 코드(declare)만 작성이 가능) 이제,DefaultTheme는 prop.theme에 적용시켜줄 것이다. theme 만들기 이제 위에서 선언한 DefaultTheme을 사용하여 테마를 만..

Chrome 환경에서만 작업을 했었는데, Safari로 들어갔을 때, 적용이 안되는 폰트가 있다는 것을 알게 되었다. 첫번째 해결방법으로는 * { font-family: Hevetica(혹은 다른 서체), AppleSDGothic !important; } Hevetica를 최우선으로 표시하고 Hevetica가 표시될 수 없다면, AppleSDGothic를 강제로 적용하는 방법이 있다. 하지만 위 방식으로 적용될경우, 모든 텍스트가 서체 하나(AppleSDGothic)로 표시되어 웹사이트의 개성이 무시되고 가독성이 더 떨어질 수도 있다. 따라서 두번째 방법으로, 가독성이 떨어지는 일부 폰트만 Apple SD Gothic Neo로 바꿔 주기로 했다. * { @font-face { font-family: Ap..

커스텀 훅을 사용해 defultModal을 제작해보자. 코드 확인하기 커스텀 훅 생성하기 먼저 커스텀 훅'useModal.js'의 코드는 다음과 같다. import { useState } from "react"; const useModal = () => { const [isShowing, setIsShowing] = useState(false); function toggle() { setIsShowing(!isShowing); } return { isShowing, toggle }; }; export default useModal;useModal이 하는 작업은 다음과 같다. useState(isShowing, setIsShowing)를 사용하여 모달의 보이는 상태를 저장 isShowing상..

react-slick라이브러리에서 dots를 바꾸기 위해서는 setting(props)값에 dotsClass를 추가해줘야 한다. default로 되어 있는 class 선택자 대신 dotsClass명으로 class 선택자명을 바꿔 커스텀이 가능하다. DOCS 버튼의 색깔과 크기, 버튼 양 옆 마진 값을 바꿔주고 싶었다. import React from 'react' import Slider from 'react-slick' import './slick.css' export default function ImgSlide({images}: any) { var settings = { dots: true, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll..