코딩은 주로 Input(입력) → Operation(연산) → Output(출력)으로 이루어 진다. 또한 프로그램이 동작하기 까지 코딩 → 컴파일 → 런타임 단계로 이루어 진다. 자바스크립트는 자유도가 매우 높다고 생각한다. 프론트엔드 개발자라면 자바스크립트를 필수적으로 사용해야한다. 그로 인해 발생되는 에러 또한 코딩을 할때는 잘 모르고 런타임 환경 즉 유저가 서비스를 이용하는 환경에서 에러를 발생한다. 에러는 개발자는 보며 수정을 할 수 있지만 사용하는 사용자 입장에서는 에러는 절대 마주치지 않아야 한다. 하지만 타입스크립트는 컴파일 단계 즉 우리가 작성한 코드를 프로그램이 동작할 수 있는 환경으로 바꾸어주는 단계에서 잘못 작성한 코드에 대한 에러를 뱉어준다. 즉 안전하게 코딩을 할 수 있게 도와준다..

2022년 10월 Next.js는 13버전을 출시했다. 기존에 12버전과 사용 방법보다 어렵진 않지만 많이 변경 되었기에 미리 학습해보면 좋을거같다. 실무에서는 12버전으로 개발중인 기업도 많을것이다 그래서 12버전을 미리 학습하고 13버전을 배워보는것을 추천한다. 또한 13버전은 아직 베타버전이라 규모가 큰 프로젝트를 진행하는 기업이라면 12버전을 그대로 사용할 것으로 생각한다. 설치법 npm i next@latest react@latest react-dom@latest eslint-config-next@latest 업데이트 내용 | app 디렉토리 (베타) 12버전에서는 pages 라는 디렉토리가 존재했다. Next.js를 사용하면서 편한점 중 하나를 이야기하자면 react-router-dom과 라우..

동적 타입 언어와 정적 타입 언어 (22.02.16 작성) C 나 JAVA 는 정적 타입 언어 이다. 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언 이라 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없다. 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크 (선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리) 를 수행 한다. 타입 체크를 통과하지 못했다면 에러를 발생 시키고 프로그램의 실행 자체를 막는다. 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다. 즉 매우 번거롭지만 안정적인 코드의 구현이 가능하다는 소리이다. 대표적인 정적 타..

에러 발생 🤢 Next 의 Image 는 웹의 최적화의 엄청난 도움을 준다. 내 작업폴더에 있는 이미지를 업로드 할때는 경로만 쉽게 넣어주면 정상적으로 작동했지만 JSON 의 이미지 경로들은 모두 https:// 로 시작하는 경로였다. 그래서 경로를 불러오면 hostname을 찾을수 없다는 결과가 나왔고 일단은 html의 기본 태그인 img 태그로 사용을 해왔다. 하지만 다른 텍스트는 불러오고 이미지는 2초 3초 뒤에 나오니 ui 부분에서 굉장히 불편했다. 해결 😃 정답은 next.config에 있었다. Next 는 웹팩을 기본 번들러로 사용한다. Next 를 조금 더 커스텀하게 사용하기 위해 next.config.js 에서 기본 설정을 할 수 있다. next 서버 빌드 단계에서 사용되며 브라우저 빌드에..

1. 문제설명 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요. 제한 조건 1 ≤ s1, s2의 길이 ≤ 100 1 ≤ s1, s2의 원소의 길이 ≤ 10 s1과 s2의 원소는 알파벳 소문자로만 이루어져 있습니다 s1과 s2는 각각 중복된 원소를 갖지 않습니다. 입출력 예 s1 s2 result ["a", "b", "c"] ["com", "b", "d", "p", "c"] 2 ["n", "omg"] ["m", "dot"] 0 2.해결 function solution(s1, s2) { const totalArray = [...s1, ...s2]; return totalArray.filter((v,..

1. 문제설명 선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다. 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 세 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 세 변으로 삼각형을 만들 수 있다면 1, 만들 수 없다면 2를 return하도록 solution 함수를 완성해주세요. 제한 조건 sides의 원소는 자연수입니다. sides의 길이는 3입니다. 1 ≤ sides의 원소 ≤ 1,000 입출력 예 sides result [1, 2, 3] 2 [3, 6, 2] 2 [199, 72, 222] 1 2.해결 function solution(sides) { const result = sides.sort((a, b) => b - a); retu..