비전공 프론트엔드 개발자

nextJS 13을 써보기 위해 이것저것 만들어 보던중 useRouter 라는 메서드를 사용할때, 이떄부터가 문제의 시작이였다. vscode 의 자동완성 기능으로 next/router 로 import 되길래 그런가보구나 하고 넘어갔는데 자꾸만 뜨는 이상한 오류,,, 모듈을 mount 하지 못한다...? 왜..? 여기서 부터가 시작이였다.. 내가 잘못 사용했나 싶어 예시 코드를 보았지만 겨우 콘솔 한번 직어보는건데 이런 에러가 난다고? 라는 생각이 들었다. 바로 nextJS 공식 문서확인 'use client'; import { useRouter } from 'next/navigation'; export default function Page() { const router = useRouter(); ret..

먼저 이런 좋은 기회를 알게 해준 프론트 개발자 민우님께 감사인사를,,, 3박4일 일정으로 진행되는 구름톤에 참여하는 영광을 !! 현재 4기 모집중이라고 하는데, 이번 4기를 기점으로 잠깐의 휴식기를 갖는다고 하네요 ! 늦기 전에 얼른 지원해서 꼭 좋은 경험을 해보셨으면 좋겠습니다. ( 진심 x 10000 ) ( 구름톤 4기 지원 링크 https://9oormthon.goorm.io/ ) 어떻게 흘러가는지는 같은 팀원분이 블로그에 잘 정리해 두었기 때문에, 그 부분으로 대체하고, 저는 개인적으로 개발 관련과 아이디어? 에 초점을 두고 경험을 적어보려고 합니다. 구름톤 전반적인 흐름 읽어보기 : https://chucoding.tistory.com/103 ( 일정과 TIP 관련은 이 블로그를 참고해 주세요..

인프런에 있는 정재남님의 강의 "풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기" 를 듣기 시작했다. 처음 보는 라이브러리나 vite 혹은 dev 환경으로 키고, 등등 새로운 부분이 너무 많아서 제대로 이해하기 힘들었고, 따라가기 급급했다. 오늘 1일차의 목표는 개발환경에 대해 완벽히는 아니더라도, 어떤걸 사용하고 어떤걸 이용하는지 대략적인 그림을 이해하는것으로 목표를 잡았다. 일단 첫째로 vite 를 사용했다. vite 는 일단 프론트엔드 개발 경험을 향상시켜줄 툴이다. $ npm create vite@latest 를 입력하면 이름을 짓고, 개발환경 세팅을 선택할 수 있게 해주고, 바로 만들어준다. 확실히 편리함을 느꼈고, 기존에는 create-react-app 의 노예였는데, 이런 방법도 있다는것에..

1. 읽기전용 ( ReadOnly ) 읽기 전용은 수정이 안되고, 읽기만 가능하다. let drink: readonly string[] = ["water", "juice", "coffee", "beer"]; drink.push("tea"); // error 타입을 지정할 때 readonly 만 붙이면 끝. 2. Tuple 최소한의 길이와 특정위치에 특정타입을 지정할 수 있다. const developer: [string, number, boolean] = ["jun", 29, true]; developer 라는 변수의 각위치 인덱스들은 지정된 타입만 선언이 가능하다. 최소한의 길이를 넘어갈 경우 에러가 발생한다. 3. typeof unknown 오해할 수 있는 부분은, result 라는 변수는 타입이 지..

1. 타입 추론 ( Type inference ) let course = ' react-type-script ' => 문자열 course = 1234 => 숫자열 course 는 타입을 지정해 주지않아도 선언된 시점에 문자열로 지정이 된다. ( 매번 타입을 지정해주는건 상당히 귀찮은 행동이다. ) 숫자열을 재할당을 하게 될 경우 에러가 발생한다. ( 결론. 타입을 지정하지 않아도 타입스크립트는 할당된 값에 따라 타입을 자동으로 지정해준다. ) 2. 유니온 타입 변수를 선언할 때 하나의 타입만 사용하지 않고, 여러 타입을 혼용하게 될 때가 있다. let exampleType : number | string = ' This is union type ' -> 문자타입과 숫자타입 모두 사용 가능. ( 현재 문자..

let num: number; num = 2; let userName: string; userName = "jun"; let isBoolean: boolean; isBoolean = true; function addNumber(a: number, b: number) { return a + b; } let data = addNumber(2, 5); 변수에 타입을 지정할 수 있다. 타입지정과 선언을 동시에 할 수 있다. 배열의 값도 타입을 지정할 수 있다. let names: string[]; // 배열의 타입 names = ["jon", "jade", "something"]; names 변수에 숫자타입을 넣게 되면 오류가 뜬다..! *** any 타입에 관하여. let person:any 타입을 any 로..

밤잠없는 사람들 플랫폼 정리. 카카오 지도 의 개인위치 기반 주변 업체 리스트를 보여주는 플랫폼. 내가 구현한 기능 : 카카오지도 API 활용 & 이미지 CRUD 개선해야 할 부분. 1. https통신 => https 통신으로 변경되면서 개선해야할 두가지 기능이 있는데, 첫번째가 바로 소셜 로그인 기능이다. 사실 시간을 좀 들이면 해결할 수 도 있었지만 당장 구현한 기능의 퀄리티를 높이기 위해 포기한 부분중 하나라 아쉬움이 남는다. 두번째가 바로 개인 위치기반이다. 지도 컴포넌트를 뜯어보면 navigator.geoLocation() 이라는 함수가 있다. 이 함수는 https 통신일때만 작동하는 함수로써 현재 지도에서는 작동되지 않아 원하는 기능을 구현하지 못하고 있다. 2. 폴더 구조변경과 이름 변경 =..

VSCODE Prettier 설치 방법 정리 1. vscode 확장? 프로그램을 먼저 설치를 확인한다. 2. 기본 포멧 에디터가 prettier 로 설정되어 있는지 확인한다. ( 추가로 해당 부분이 체크되어 있는 지도 확인해 봐야 한다. ) 3. 설정 검색 부분에 json 을 검색 후 setting.json 파일에 코드를 추가한다. 추가해야할 코드는 아래와 같다. { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } 이 부분을 굳이 복붙하지 않아도, prettier install 페이지에서도 확인할 수 있다. 코드까지 추가가 되었..