자바스크립트(16)
-
재귀함수 (recursion)
| 재귀함수란? 함수가 자기자신을 다시 호출하는 구조로 만들어진 함수이다. 반드시 종료시점 (return 문) 이 존재해야 한다. 종료점이 없다면 계속해서 스택에 함수가 추가 된다. 그로 인해 메모리 사용량이 불필요하게 많이 소모되며 스택오버플로우가 발생할 수 있다. 두가지를 이해하고 넘어가면 재귀함수를 조금 더 쉽게 이해 할 수 있다. - base case (재귀의 탈출 조건) - recursive case (자기 자신을 호출) | 기본적인 재귀 함수 예시 recursionTest 함수에 인자로 넘어온 num을 하나씩 줄여가는 함수이다. 여기서 base case 조건은 num이 0보다 작거나 같을 때 return 으로 0을 뱉어준다. | for문으로 동일한 기능 구현 모든 재귀함수는 반복문으로 동일한 ..
2023.10.09 -
[JS] 추억 점수
| 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람..
2023.07.19 -
TypeScript (타입 정리)
코딩은 주로 Input(입력) → Operation(연산) → Output(출력)으로 이루어 진다. 또한 프로그램이 동작하기 까지 코딩 → 컴파일 → 런타임 단계로 이루어 진다. 자바스크립트는 자유도가 매우 높다고 생각한다. 프론트엔드 개발자라면 자바스크립트를 필수적으로 사용해야한다. 그로 인해 발생되는 에러 또한 코딩을 할때는 잘 모르고 런타임 환경 즉 유저가 서비스를 이용하는 환경에서 에러를 발생한다. 에러는 개발자는 보며 수정을 할 수 있지만 사용하는 사용자 입장에서는 에러는 절대 마주치지 않아야 한다. 하지만 타입스크립트는 컴파일 단계 즉 우리가 작성한 코드를 프로그램이 동작할 수 있는 환경으로 바꾸어주는 단계에서 잘못 작성한 코드에 대한 에러를 뱉어준다. 즉 안전하게 코딩을 할 수 있게 도와준다..
2023.06.08 -
Next.js 12 -> 13 버전 정리
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과 라우..
2023.06.07 -
동적 타입 언어와 정적 타입 언어
동적 타입 언어와 정적 타입 언어 (22.02.16 작성) C 나 JAVA 는 정적 타입 언어 이다. 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언 이라 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없다. 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크 (선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리) 를 수행 한다. 타입 체크를 통과하지 못했다면 에러를 발생 시키고 프로그램의 실행 자체를 막는다. 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다. 즉 매우 번거롭지만 안정적인 코드의 구현이 가능하다는 소리이다. 대표적인 정적 타..
2023.06.05 -
[Next.js] Image 외부경로
에러 발생 🤢 Next 의 Image 는 웹의 최적화의 엄청난 도움을 준다. 내 작업폴더에 있는 이미지를 업로드 할때는 경로만 쉽게 넣어주면 정상적으로 작동했지만 JSON 의 이미지 경로들은 모두 https:// 로 시작하는 경로였다. 그래서 경로를 불러오면 hostname을 찾을수 없다는 결과가 나왔고 일단은 html의 기본 태그인 img 태그로 사용을 해왔다. 하지만 다른 텍스트는 불러오고 이미지는 2초 3초 뒤에 나오니 ui 부분에서 굉장히 불편했다. 해결 😃 정답은 next.config에 있었다. Next 는 웹팩을 기본 번들러로 사용한다. Next 를 조금 더 커스텀하게 사용하기 위해 next.config.js 에서 기본 설정을 할 수 있다. next 서버 빌드 단계에서 사용되며 브라우저 빌드에..
2023.05.04