타입스크립트란 무엇일까? 타입스크립트는 자바스크립트에 타입을 추가하는 정적 타입 언어입니다. 즉 프로그램을 작성할 때 미리 타입을 지정함으로써 버그를 미리 방지할 수 있고, 개발자의 실수를 줄일 수 있다. 이렇게 프로그램의 안정성과 유지보수성을 높여주는 동시에, 개발자가 코드를 작성하는 과정에서 창의적으로 프로그래밍할 수 있도록 도와줍니다. 또한, 타입스크립트는 현업에서 개발자들이 많이 사용하고 있으며 필수적인 언어로 자리를 잡고 있다. 정의 타입스크립트는 자바스크립트 문법을 기반으로 하면서, 변수나 함수 등에 대한 타입을 명시할 수 있습니다. 이를 통해 코드를 작성할 때, 개발자가 의도하지 않은 버그를 미리 방지할 수 있습니다. 자바스크립트의 모든 기능을 지원하며, ES6(ECMAScript 2015)..
🎥 프로젝트 소개 프로젝트 명: Cinema Princess 프로젝트 기간: 23.06.29~23.07.26 Github: https://github.com/codestates-seb/seb44_main_033 프로젝트 개요: 영화 API를 사용하여 영화 정보를 가져오고 서비스에서 자체적으로 평점과 리뷰 데이터를 관리합니다. 사용자는 영화에 평점과 리뷰를 등록할 수 있고, 보고 싶은 영화를 저장할 수 있는 와치리스트 기능과 영화 검색 기능이 있습니다. 연도별 개봉 영화 장르 통계 기능이 있습니다. GitHub - codestates-seb/seb44_main_033 Contribute to codestates-seb/seb44_main_033 development by creating an account..
이번 포스팅에서는 자바스크립트에서 ' == ' 연산자와 ' === ' 연산자의 차이점을 정리하려고 한다. 💡 == 연산자 == 는 Equal Operator이고, == 는 a == b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다. == 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환후 값을 비교한다. 타입을 비교하지 않고 값만 비교하기 때문에 ' === ' 연산자에 비해 느슨하다고 할 수 있다. const a = 1; const b = "1"; console.log(a == b); // true 하나가 숫자형이고 다른 하나가 문자열이면, 문자열을 숫자로 변환 후 값을 비교하여 true를 반환한다. null == undefined // true..
첫 main-project를 진행하면서 slide를 구현하기 위해 React-slick 라이브러리를 사용해보았습니다. 💡React-slick 이란? react-slick은 react 에서 슬라이드를 손쉽게 구현하도록 도와주는 라이브러리이다. ❗️React-slick 설치하기 npm i react-slick yarn add react-slick npm i slick-carousel react-slick 에서 css를 수정하기 원하면, 위 라이브러리도 함께 설치해줘야 한다. import Slider from "react-slick"; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; 라이브러리를 설치 ..
이번에 팀원과 협업하는 프로젝트를 하면서 내가 만든 브랜치에서 작업중 다른 팀원이 작업을 한 브랜치를 dev 상위 폴더에 머지를 한 코드를 내가 지금 작업하는 브랜치에 머지한 코드를 받아와야되는 방법을 찾아보았다. 1. 먼저, 현재 작업중인 브랜치에서 "dev" 브랜치로 이동한다. 이동하기 위해 다음 명령어를 사용한다. (두개중에 하나 사용) git checkout dev git switch dev 2. "dev" 브랜치로 이동한 후에 해당 브랜치를 최신 상태로 업데이트 한다. git pull 3. "dev" 브랜치가 최신 상태이므로 다시 작업하고 있던 브랜치로 이동한다. (두개중에 하나 사용) git checkout [작업 중이던 브랜치 이름] git switch [작업 중이던 브랜치 이름] 4. 최종..
❓ [에러 내용] Failed to parse source map from '/Users/hyeong-il/Desktop/seb44_pre_006/node_modules/@toast-ui/editor/dist/purify.js.map' file: Error: ENOENT: no such file or directory, open '/Users/hyeong-il/Desktop/seb44_pre_006/node_modules/@toast-ui/editor/dist/purify.js.map' 실행에는 문제가 없지만 이와 같은 에러가 떠서 마음이 불편하다. 🔑 [에러 해결] "scripts": { "start": "GENERATE_SOURCEMAP=false react-scripts start", } packa..
현재 branch 목록 확인 git branch -a 다른 branch 로 이동하기 git switch ❗️ local repository 의 brach 삭제하기! git brach -d 충돌이 해결되지 않은 상태여서 에러메세지가 뜨거나, 강제로 branch를 삭제하고 싶을 때는 git branch -D ❗️ remote repository 의 branch 삭제하기! git push origin --delete 삭제가 잘 되었는지 확인 git branch -a
❗️ Styled-Components 설치 중 오류 발생 ❗️ 오류 상황 styled-components 설치 npm install styled-components styled-components 를 설치하기 위해 공식 문서에 나온 위와 같은 명령어를 입력했는데 다음과 같은 오류가 발생했다. npm err! cannot read properties of null (reading 'edgesout') 오류 원인 latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 다음 명령어시 문제가 발생 오류 해결 //Use V5, npm..
Proxy Proxy 는 정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있습니다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 됩니다. 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 됩니다. 브라우저를 proxy 기능을 통해 속이는 것입니다. proxy 적용 전 흐름 proxy 적용 후 흐름 Proxy 사용법 Proxy 사용법은 2가지로 나뉜다. webpack dev server proxy React Proxy 사용법 webpack dev ..
💡 열거형 (Enum) TypeScript 의 열거형 (Enum)은 특정 값의 집합을 정의할 때 사용한다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다. 숫자형 열거형 값은 자동으로 0부터 시작하여 1씩 증가하지만 밑에와 같이 수동으로 값을 지정할 수 있다. enum Color { Red = 1, Green = 2, Blue = 4, } 문자형 열거형 문자형 열거형은 열거형의 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 한다. enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } let myDirection: Directi..
