리액트를 사용하면 사용할 수록 자바스크립트에 대한 공부는 다시 해야겠다는 생각이 들어 ES6관련 문법과 기본적인 것들을 정리해보려고 한다. 평소에 리액트를 사용하면서도 alert 이외의 것은 사용해본 적이 없었는데 이번에 alert, propmpt, confirm 세가지의 차이를 확실하게 알게 되었다. 입력값을 받는 prompt prompt의 경우에는 이렇게 원하는 값을 입력받을 수 있다. 여기서 promt로 입력받은 입력값은 무조건 문자열! const name = prompt('이름을 입력하세요'); 그뿐만 아니라 default 값을 설정해줄 수도 있는데 아래와 같이 두개의 인자를 넘겨줄 수 있기 때문이다. const date = prompt('예약일을 입력해주세요', '2022-08-'); 확인창을 ..
타입스크립트에서는 함수의 파라미터, 반환, 구조 이렇게 3가지에 타입을 지정할 수 있다. 지금부터 함수의 기본적인 타입 선언에 대해 알아보자. 함수의 기본적인 타입 선언 기본적으로 자바스크립트로 이루어진 함수를 타입스크립트 타입을 부여한 형태로 바꾸는 것은 어렵지 않았다. 아래 예시를 보면 바로 이해할 수 있을텐데 기존 함수의 매개변수와 함수의 반환 값에 타입을 추가한 것이다. function sum(a, b) { return a + b; } function sum(a: number, b: number): number { return a + b; } 함수의 인자 타입스크립트 내에서는 함수의 인자를 모두 필수 값으로 간주하기 때문에 매개변수를 설정하면 그에 따라 매개변수 값을 넘겨주어야한다. 하지만 어떤 ..
리액트에서는 react-router-dom을 이용하여 movies/:id 와 같은 형식으로 params를 지정해줄 수 있었는데 Next.js에서는 다른 방식으로 URL에 변수를 넣을 수 있다고 한다. 지금부터는 Next.js에서 라우터를 하는 방식을 알아보자. Next.js에서 페이지 이동 - 페이지가 1개일 때 Next.js에서는 react-router-dom을 이용했을 때와는 다르게 Pages라는 폴더 안에 원하는 파일을 만들어주면 그게 자동으로 page의 URL이 되는 신기함을 경험했었다. 그런데 기본적인 URL을 만드는 방법은 알았지만 그 뒤에 params로 새로운 변수를 넣어주는 방법에 대해서는 알지 못해 이를 알아봐야겠다고 생각했다. // 로컬 호스트 3000 뒤에 오는 기본적인 URL은 Pa..
오늘은 항해 6기 수료식이 있는 날이었다. 항해99 6기에 합류한지 96일이 지났는데 3개월이라는 시간이 정말 빨리 지나간 것 같다. 리액트를 다룰 줄 몰랐던 내가 어느덧 리액트를 사용하고 Next.js, TypeScript를 공부하며 한단계, 한단계 빠르게 성장하고 있는 것을 느꼈다. 매주 팀을 바꿔가며 새로운 사람들과 협업을 하고, 새로운 것들을 배우고 적용하며 정말 많은 것들을 단기간에 빠르게 배울 수 있었던 것 같은데 약 1500시간을 몰입하며 달려온 시간들이 머릿속에 스쳐 지나갔다. 미니 프로젝트를 시작으로 클론 코딩, 주특기주차, 실전 프로젝트까지 쉴 틈 없이 달려온 것 같은데 매일 밤을 새며 노력한 결과가 수료식 때 보여진 것 같아 너무 뿌듯했다. 총 9개의 상 중에 생각지도 못하게 4개의 ..
타입스크립트는 자바스크립트에 타입이 추가된 자바스크립트의 확장언어이다. 요즘 현업에서 많이 사용할 정도로 인기 있는 언어라고 할 수 있는데 기본 자바스크립트는 일반적인 C언어나 Java처럼 자료형이 존재하지 않아 속성 변경이 쉬우면서 잘못을 인지하는 것이 어렵다는게 특징이다. 그래서 이 문제를 해결하고자 TypeScript가 등장했는데 기본적으로 변수에 타입을 지정해주면서 코드를 추적할 수 있도록 도와준다. 또한 튜토리얼이 잘 정리되어있어 실전프로젝트가 끝나면서 공부를 시작해보고 싶었다. 타입스크립트 기본 타입 타입스크립트에는 Boolean, Number, String, Array, Tuple, Enum, Any, Void, Null, Undefined, Never, Object가 있는데 지금부터 하나하..
클라이언트 사이드 렌더링(CSR)과 SPA 리액트는 기본적으로 싱글 페이지 어플리케이션(SPA)으로 하나의 Html에 수많은 js 파일을 가진다. 싱글 페이지 어플리케이션은 기본적으로 클라이언트 사이드 렌더링 방식을 취하는데 CSR은 클라이언트(브라우저)에서 자바스크립트 파일을 통해 데이터를 렌더링 하는 방식이다. 그렇기 때문에 클라이언트에서 데이터 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터를 받아온다. 장점 필요하거나 수정된 데이터만 서버에 요청하여 받아오기 때문에 서버 트래픽이 감소한다. HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 검색 엔진 최적화(SEO)가 가능하다. 단점 검색 엔진 크롤러가 정보수집을 제대로 하지 못한다. 초기에 데이터를 제외한 모든 코..
API KEY 숨기기 보통 API KEY는 본인의 고유한 것이기 때문에 인터넷에 노출시키면 안된다. 그렇기 때문에 env 파일 안에 넣어서 작업한 후 깃에도 올라가지 않도록 항상 조심하는 것이 좋다. Next.js라서 가능한 Redirect와 Rewrite라는 것을 배웠는데 API KEY나 특정 경로를 감출 때 이 방법을 사용하면 되는 것 같다. Redirect redirect는 사용자가 변경된 path로 유입되면 새로운 경로고 안내하는데 아래와 같이 next.config.js 파일을 수정해주면 된다. 여기서 "/contact"라는 경로를 입력하면 "/form"이라는 새로운 경로로 리다이렉트 되는 것을 알 수 있다. const nextConfig = { reactStrictMode: true, async..
What I Learned 13주차를 기준으로 항해 실전프로젝트까지 모든게 마무리되었다. 실전프로젝트를 진행하면서 팀원들과 원활한 소통을 하고 원활한 작업이 이루어질 수 있도록 React와 Redux를 사용하여 프로젝트를 구현했는데, 그 후 불편한 점을 반영하여 SWR로 교체 작업도 진행했다. 최종 박람회를 진행하며 4~5명의 협력사 분들이 다녀가셨는데, 주로 백엔드분들의 질문이 많았고 프론트 쪽으로는 트러블 슈팅과 디자이너와의 협업에서 어려웠던 점, 그를 어떻게 해결했는가 등에 대한 질문이 들어왔다. 최종 박람회에서 우리가 만든 프로젝트 결과물을 보여주며 많이 긴장도 되고 떨렸지만 많은 분들의 응원과 격려 속에서 잘 마무리할 수 있어 뿌듯했다. 마지막으로 프로젝트 13주차를 마무리하며 사용한 핵심 기술..
영화 DATA를 가져온 사이트 (TMDB) 노마드 코더 next.js 강의를 들으며 알게된 사이트인데 기본적으로 API 구성이 잘 되어있어서 내가 원하는 데이터를 어렵지 않게 받아올 수 있는 것 같다. 나는 이곳에서 영화 데이터를 받아오기 위해 API 키 발급 신청을 했고, 신청 후 즉시 API 키가 발급된 것을 알 수 있었다. 지금부터는 받아온 API KEY를 이용해 NEXTJS 프로젝트에 data를 심어줘볼 것이다. 리액트앱과 다른 것? 사실상 데이터를 받아와서 화면에 그려주는 것은 리액트에서와 다를 것이 없었던 것 같다. 똑같이 화면이 렌더링될 때 내가 받아오고자하는 데이터를 요청하면 되는 것이었는데 이번에 처음으로 fetch함수를 이용해봤다. 먼저, 발급한 API KEY를 변수로 선언해주고 가져온..
Next.js에서 Style을 적용하는 방법에는 어떤 것이 있을까? ① CSS module을 사용하는 방법 가장 먼저 css module을 사용하는 방법을 적용해보았는데 NavBar.js에 CSS를 적용하기 위해 NavBar.module.css라는 파일을 생성해주었다. 그 후 css 파일 안에서 클래스 선택자로 스타일을 만들어주었고 이를 NavBar.js에 불러와 사용하였다. // NavBar.module.css .link { text-decoration: none; } .active { color: tomato; } link의 경우 두가지 a태그에 모두 적용이 되어야하고, active의 경우 조건부로 true인 경우에만 적용이 되도록 해야하는데 그럴 때는 ``을 이용하거나 className을 배열로 만..
