본문 바로가기

분류 전체보기201

[TypeScript]JS -> TS 리팩토링하며 겪은 오류 오류 메세지 : Cannot use JSX unless the '--jsx' flag is provided.ts(17004) const Container: IStyledComponent 오류 원인 : TypeScript가 JSX 확장자 파일 인식을 못해서. 해결 방법 : jsx 속성을 추가한다. 오류 메세지: Argument of type 'ProductItem | undefined' is not assignable to parameter of type 'ProductItem'. Type 'undefined' is not assignable to type 'ProductItem' 오류 원인 : 정의되지 않은 값이 들어올수 있다고 TS에게 정의를 하지 않아서, 알 수 없는 타입을 전달하는 과정에서 생김 해.. 2023. 10. 24.
[React.js]구조설계 --스크랩 https://velog.io/@_seeul/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%A7%84%ED%96%89%ED%95%A0%EB%95%8C-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0%EB%A5%BC-%EC%9E%A1%EB%8A%94%EA%B2%83%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C React | 리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?🤔 리액트 초기세팅 후 컴포넌트 구조 설계하기 🧸 velog.io 매번 프로젝트 생성할 때 마다 .. 2023. 9. 25.
[Git]원격저장소 -> 로컬저장소 clone || pull 오류 해결 --스크랩 clone 시 fatal: destination path '프로젝트명' already exists and is not an empty directory. 라고 뜨면 https://nagneo.tistory.com/18 [Git] 비어있지 않은 로컬 저장소로 Clone하기 보통 새로운 프로젝트를 만들 때, Github에 repository를 만들고 해장 저장소를 Clone 해서 사용한다. 오늘은 반대로 로컬 저장소에 폴더 및 파일을 만들고 이를 원격 저장소와 연결하는 절차를 정리하 nagneo.tistory.com 위의 블로그 참고, 혹은 로컬 폴더내에서 로컬 저장소를 pull하려고 할 때 Remote origin already exists 오류가 뜬다면 https://coding-factory.tisto.. 2023. 9. 20.
[React]App.css VS index.css 결론부터.. 현재 코드를 작성하는 폴더의 이름과 같은 css 파일이 가장 바람직함. 개인적인 의견으로는 연습용 코드작성이라면 index.js보다는 App.js로 하는게 낫다. App.js는 프로젝트 진행시 서버 설정 / 미들웨어 정의 / 라우트 정의/인증 등 여러가지를 설정하고, (App의 상위 파일인) index.js는 index.html과 연결하여 화면에 렌더링을 하는 역할을 하기 때문에 대부분의 작업은 컴포넌트 -> App.js로 연결 -> index.js가 App.js를 import -> index.html와 연결되어 화면에 렌더링 하기때문에 실제로 index.js에 직접 화면 구현을 위한 코드를 짤 일이 많지 않기 때문.. 관련 블로그글 : https://pink1016.tistory.com/8.. 2023. 9. 15.
[JavaScript ES6]map 함수, 백틱 || 문자열리터럴 map함수는 배열을 변형할 수 도 있지만 새로 만들 수도 있다. https://hans-j.tistory.com/144 [JavaScript]배열 정렬하기 feat. sort, map, filter /리액트 응용 배! 열! 이! 란! 이름과 인덱스로 참조되는 정렬된 값의 집합 자세한 설명은 넘어가고 바로 예시로 고고. 문자 정렬 (A-Z,가-하 오름차순) **sort함수는 원본을 변형시키니 주의!- //어레이는 변수명 hans-j.tistory.com 여기에 간단하게 써둠ㅋ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - JavaScript | MDN m.. 2023. 9. 14.
[JavaScript && HTML]script 요소 배치 script 요소를 어디에 배치하냐에 따라서 오류가 나거나 undefined이 출력되는 것을 보고 ... '그동안 안에 script 요소를 배치했을 때 오류가 안 난 이유는 뭐지?' 하고 궁금해졌다... 이런거 미리 알고 있었어야했는데 이제서야 찾아보는게 부끄럽다;; 이번에 클론코딩을 진행하면서 큰 플랫폼들의 코드를 뜯어보는데 script가 에 있기도 하고 에 있기도 해서 궁금했다. 문서의 DOM구조가 필요한 경우에는에 위치시키고 앞에 위치 시키는 경우는 대부분의 스크립트 위치로 추천되는 위치이며 이벤트리스너처럼 동적으로 (브라우저 렌더링이 끝난 후) 컨텐츠를 변경할 때. 위의 글 출처 : https://ko.wikibooks.org/wiki/JavaScript/%EC%BD%94%EB%93%9C_%EB%.. 2023. 9. 14.
[JavaScript]화살표 함수 || Arrow function 하이 ㅎㅇ ㅎ . 이런 느낌의 화살표 함수 매개변수 (Parameter) 한 개 인 경우에는 괄호를 없앨 수 있기 때문에 위의 이미지에서 가장 아래에 있는 hey2함수처럼 구현할 수 도 있다. 화살표 함수는 this 키워드를 사용 할 수 없으니 주의해야 함. https://hans-j.tistory.com/101 [JavaScript/자바스크립트]this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing variable다. 암묵적으로 생성되며 코드 어디서든 참조 할 수 있다. 함수를 호출하면 arguments 객체와 th hans-j.tistory.com 2023. 9. 14.
[JavaScript] Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')에러 자바스크립트 언어는 위에서부터 아래로 순차적으로 작동함. 위의 코드를 보면 p태그는 맨 아래에 있기때문에 script가 실행되고 있을 때 없는 태그에 html을 붙이라고 명령하고 있는 것과 같다. 따라서 이 에러는 순서만 바꿔주면 쉽게 해결됨 ㅋ ↓↓↓위의 오류 해결하면서 찾아보고 작성한 글 ↓↓↓ https://hans-j.tistory.com/234 [JavaScript && HTML]script 요소 배치 script 요소를 어디에 배치하냐에 따라서 오류가 나거나 undefined이 출력되는 것을 보고 ... '그동안 안에 script 요소를 배치했을 때 오류가 안 난 이유는 뭐지?' 하고 궁금해졌다... 이런거 미리 알고 hans-j.tistory.com 위와 같은 오류가 발생했을 경우 오류 해결.. 2023. 9. 14.
[Git]Git pull과 clone 의 차이 --스크랩 https://kimcoder.tistory.com/288 [Git] git pull 소개와 git clone과의 차이점 git clone은 아래 포스팅의 [1.저장소 불러오기]에서 설명했다. 2021.04.05 - [Git & Github] - [Git] 저장소 동기화(clone, init, add, commit, remote, push) git pull 명령을 Git 포스팅 초반부에 설명을 했어야 했는데 약 kimcoder.tistory.com 결론 : git pull 은 기존 작업 내용을 유지시켜줌 git clone 원격 저장소에 있는 내용을 불러오기만 함, 기존 작업내용 유지 X 2023. 9. 14.
[JavaScript ES6]상속도 feat.class extends 키워드를 사용해서 상속받는 함수 클래스는 항상 생성자가 있어야한다 -> constructor 자식함수 : Gender 부모 함수 : Student가 된다. super()를 호출해서 상속받는 프로퍼티를 정의하고 //// 오브젝트의 각각의 프로퍼티는 프로퍼티 디스크립터라고 하는 객체로 저장됨 ex) const descriptors = Object.getOwnPropertyDescriptors(dog); console.log(descriptors); Student함수에서 받는 값은 this.gender를 통하여 정의해준다. 위와 같은 코드를 입력하면 값은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Object.. 2023. 9. 13.
[Jquery]슬라이드 || carousel 라이브러리 Slick 이번에 알라딘 클론코딩을 진행하면서 슬라이더를 구현해야할 일이 많았다..! Slick 라이브러리로 손쉽게 ㄱㄱ https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 위의 라이브러리로 구현한 것 1. 슬라이더 (카카오 도서 API로 받아온 데이터로 구성됨) 2. 버튼 커스터마이징 이 두 개가 가장 중요했다. 슬라이더의 기본 기능 중에 버튼이 있었지만.. 2023. 9. 13.
[Git]로컬저장소와 원격저장소가 동기화 되지않았을 때 발생하는 에러 --스크랩글 ! [rejected] main -> main (fetch first) 이런 에러! 원격저장소에 있는 데이터 소실을 막기위해 오류를 던져주는거라고 함. 하나도 안고맙다 진짜..(이번만큼은..) 암튼 구글링을 통해 알아낸 방법 https://byul91oh.tistory.com/231 [git] 에러 | ! [rejected] main -> main (fetch first) 해석 상황 작업을 마친뒤 로컬에서 원격저장소로 git push를 했는데 ! [rejected] main -> main (fetch first) 에러가 발생했다. 원인 해당 에러는 원격저장소와 현재 작업중인 로컬저장소가 동기화되지 않았 byul91oh.tistory.com 2023. 6. 12.
[React.js]cmd 창으로 react프로젝트 옮기기 커맨드창으로 리액트 프로젝트를 생성했는데 갑자기 디렉토리가 마음에 안들었다.. 우선 프로젝트 생성할 때는! https://www.jetbrains.com/help/phpstorm/react.html#install_react_in_empty_project 암튼..cmd를 이용해서 명령어로 디렉토리를 이동할 때는! cd C:\Users\react_test 리액트 파일이 있는 경로로 이동 move * "C:\Users\Desktop" 바탕화면으로 옮기고 싶어서 Desktop으로 옮김 //Windwos 기준 mv * ~/Desktop/ //macOS 기준 *** 근데 위에처럼 옮기면 프로젝트의 개별 파일들이 바탕화면에 흩뿌려진다... 프로젝트 폴더를 만들고나서 이동하는것을 잊지않도록... 2023. 6. 7.
[Three.JS]코드 분석하기 3D 디자이너에서 직무를 바꾼거라..어느정도 이해는 잘 하겠지 싶었는데 이게왠걸 코드를 보자마자 멘붕이 왔다. 이럴땐 코드분석으로..이해를 먼저 하자 코드가 정말 기니까 그중에서도 Three.js의 내장 객체와 함수 알아두기!! let modelRotation = new THREE.Euler(0, 0, 0); 모델의 회전을 나타내는 Euler객체. 일반적으로 오일러 각 (euler angles)이라고도 불리며, 3D공간에서 객체의 회전을 표현하는데 사용됨. Euler 객체는 THREE.Euler로부터 생성됨 각도 값은 라디안 단위로 표현되며, 세 개의 각도 값으로 x, y, z 축의 회전을 나타냄. 예를 들어, new THREE.Euler(0, 0, 0)는 x, y, z 축 모두에 대한 회전이 없음을 나.. 2023. 6. 5.
[Three.JS]소개글 Three.JS는 미스터 둡..(Mr.doob)씨가 개발한 JS 라이브러리. 이것은 3D오브젝트들을 브라우저에서 직접적으로 컨트롤할 수 있도록 한다. 쉽게말해서, HTML5 캔버스안에서 WebGL을 사용할 수 있다는 소리. 별로안쉽네 (WebGL은 웹 기반의 그래픽 라이브러리로써, 2D/3D 그래픽 렌더링을 가능하게해주는 API) https://ko.wikipedia.org/wiki/WebGL Three.JS의 다른 좋은 점은 추가적인 플러그인 설치가 필요 없다는 것!! 작동은 어떻게 할까? (2D,3D를 조절하기 위해서 필요한 것) 1.Scene 2. Meshes 3. Camera 4. Rendering Engine (Octane이나 Redshift같은 툴을 의미함) 참고 사이트 https://www... 2023. 5. 31.
[phpstorm]간단세팅 -JS, React Phpstorm 은 PHP뿐만아니라Javascript, Node.js, React, Angular, Vue.js를 모두 지원한다. (PHP 및 웹 프로젝트를 위한 개발 도구임) phpstorm에서 JS, TS를 사용하려면 플러그인으로 세팅을 먼저해줘야함. 1. nodejs 설치 https://nodejs.org/en/download 2. phpstorm 설치 (당연함) 3. node.js path 확인 where node //cmd창 4. npm 설치 5. editConfiguration https://www.jetbrains.com/help/phpstorm/node-js-interpreters.html#ws_node_interpreters_dialog_open_from_rc Node.js Interpr.. 2023. 5. 30.
[RN]레이아웃,스타일 자자 모든 Views는 기본적으로 Flex Container 이다. 그리고 웹 에서는 Flex Direction의 기본 속성은 Row지만!! 모바일에서는 Flex Direction의 기본 속성이 Column이다. 레이아웃 속성을 정할 때 width, height을 사용하지 않는다. 이유는? 기기마다 스크린의 크기가 다르기때문에 바람직하지 않음. React Native다운 레이아웃 설정을 하려면 Flex 속성을 이용해서 비율을 활용한다 ex)fex: 1 RN는 모든게 Component다. 따라서 스크롤을 내리고 싶을 때도 Scroll기능구현이 가능한 Component를 가져와야한다 React Native에서 ScrollView를 가져오자. https://reactnative.dev/docs/scrollvi.. 2023. 5. 21.
[RN]컴포넌트,API 가져오기 https://reactnative.dev/docs/components-and-apis Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat reactnative.dev 위의 사이트에서 컴포넌트와 API들을 가져와서 사용할 수 있다! .. 2023. 5. 12.
[RN]리액트 네이티브 시작하기 리액트와 리액트 네이티브에 대해서 짚고 넘어가자 - React는 웹 어플리케이션 개발을 위한 자바스크립트 라이브러리이고, React Native는 하이브리드 앱이며 iOS 및 안드로이드 앱 개발을 위한 프레임워크. React는 웹 브라우저 상에서 동작하며, React Native는 네이티브 모바일 앱에서 실행된다. 두 기술은 공통적으로 React의 구성 요소 기반 접근 방식을 사용하며, React Native는모바일 앱에서 사용되는 네이티브 UI 컴포넌트를 지원함. React Native는 JSX와 JavaScript로 작성된 React 컴포넌트를 사용하여 앱을 빌드함. React와 React Native는 코드 공유를 최대화하기 위해 비슷한 API를 공유하고 있당. 리액트 네이티브 AKA RN은 JS로.. 2023. 5. 11.
[Flutter]플러터 시작하기 feat.윈도우 JS 만 알아도 굳이 Dart문법배우기에 쫄아지 않아도 됨 필요한 프로그램들 다운받기 ! flutter 다운받기 : https://docs.flutter.dev/release/archive Flutter SDK archive All current Flutter SDK releases: stable, beta, and master. docs.flutter.dev Android Studio 다운받기 : https://developer.android.com/studio Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment.. 2023. 5. 9.
[React.js]Redux 적용하기 Redux에 대해서 먼저 알아보자! Redux는 전역 상태를 관리하기 위한 단일 스토어를 사용하는 라이브러리. 앱에서 일어난 일을 기반으로 일반 객체 액션을 스토어에 디스패치하여 상태를 업데이트 한다. 이 과정에서 불변성을 유지하면서 업데이트된 상태를 반환하는 순수 리듀서 함수를 사용한다. ( 리듀서 / Reducer는 현재상태와 액션을 받아서 다음 상태를 반환하는 순수 함수. ) Redux 코드에는 액션 생성자, 미들웨어, Thunk함수, 정규화된 상태, Reselect 라이브러리를 사용하는 메모제이션된 셀렉터 함수, Redux DevTools 확장 프로그램, TypeScript 타입 등이 포함 될 수 있다. ( 미들웨어 / Middleware는 액션을 디스패치/액션 객체를 스토어로 전달 했을 때 리듀.. 2023. 5. 7.
타입스크립트 + react 배포일기 1. 초기목표 : 타입스크립트 + React 이용하여 배포까지 하기! 2. 실제 일어난 일 : TypeScript + React 함께 써보고싶었는데 배포까지 완료 :D 배포 중 에러도 거의 없었다. 한 거라곤package.json파일에build 속성에다가 CI = false를 추가해준것이 전부 !! 3. 계획과 실제 결과의 차이 : 타입스크립트를 배우고 처음으로 프로젝트를 진행했다. 타입스크립트로 해야겠다 마음을 단단히 먹은 것은 요새 Typescript를 점점 더 많은 회사들이 도입하고 있는 것도 있지만 Javascript + React 혹은 Vanilla JavaScript로 프로젝트 배포할 때 정말 험난했어서... 오류가 얼마나 적은지 체감해보고싶었다. 이게 왠걸 정말 정말!!! 손쉽게 배포가 끝났.. 2023. 4. 28.
Atomic Design Pattern + StoryBook 적용해보기 드디어 정했다! 내가 이번에 적용해볼 디자인 패턴은 https://velog.io/@teo/Atomic-Design-Pattern Atomic Design Pattern의 Best Practice 여정기 좋은 폴더 구조란 무엇일까요? 가끔씩 이 파일을 어디다 두면 좋지? 라는 생각이 들때가 있습니다. 하지만 막상 아무데나 두어도 어차피 폴더로 찾아가지 않고 파일명을 검색해서 찾아가기에 대 velog.io 내용추가! atomic design pattern을 위한 세팅을 모두 마쳤다. 처음에 설계를 어떻게 해야할지 몰라서 정말 많이 헤맸지만 좋은 블로그 글들, Github 검색을 통해 많이 참고했다. 레이아웃은 포토샵으로 간단하게 마쳤다. 이번에 만들 것은토이프로젝트이기 때문에 비교적 심플해서 시간이 많이 .. 2023. 4. 19.
[TypeScript]TS쓰는 법 간단설명 변수, 함수 만들 때 타입지정하면 끝임. 뻥이다. (새로 프로젝트 셋팅하는 것 기준.) 1. 터미널열고 npx create-react-app 프로젝트이름 --template typescript !!! 2. 파일 확장자명은 JSX문법을 쓴다면 .tsx 일반파일은 .ts 3. JSX표현하는 타입은 ex) let 박스 :JSX.Element = 4. component만들 때 타입지정은 함수니까 파라미터와 return 타입 지정하면됨. 파라미터는 항상 props이기 때문에 props가 어떤 타입일지 지정하면됨. ex) type AppProps = { name: string; }; function App (props: AppProps) :JSX.Element { return ( {message} ) } props.. 2023. 4. 17.
아키텍쳐 똑바로 해보자..해보자고 그동안 프로젝트들 진행하면서 폴더 구조를 어떻게해야할지 고민했는데 이게 바로 아키텍쳐였다... https://velog.io/@userhwseo/Atomic-Design 프론트엔드의 아키텍처? 디자인 패턴? 미니 프로젝트 이후의 고민 미니 프로젝트를 마치고 반갑다 NYT API야 NYT에서 Search API를 가져와 develop 브랜치에 API를 바로 사용 가능 하게 끔 함수를 만들어 놓았다. 이후 useEffect를 사용하여 input velog.io 가장 먼저 아키텍쳐에 대해서 고민해본것은 바닐라 자바스크립트 배포를 할 때 root폴더에 index를 두어야하느냐 마느냐..이걸가지고 정말 고민을 많이 했고 그 다음은 리액트 프로젝트를 할 때 였다. 고마운 리액트가 기본적은 구조는 다 짜주었지만 ut.. 2023. 4. 17.
[TypeScript]변수에 타입 담기, readonly type 이! 렇 ! 게! object 타입에 두 개 이상의 타입이 들어가는 경우 type 키워드를 사용해서 변수로 타입을 지정해서 할당하는것이 훨씬 편하다. 변수에 안담는 다면 위의 식은 아래와 같이 표현할 수 있다. 그런데! type변수를 union type으로 합칠 수 있다. 혹은! & 연산자로 object타입을 합칠 수 있다. interface type말고 interface를 이용해서 Object에 타입 지정을 해줄 수도 있다!! type과 다른점은 중복선언(중복 속성은 안됨)이 가능하다는 점!! 위와 같이 합쳐진다.혹은 extends(종속)나 재정의도 가능.// extends쓸때 중복속성이 발생하면 에러로 잡아줌. type가 더 엄격하다고 보면 됨. 따라서 외부 라이브러리 같은 경우에 inter.. 2023. 4. 16.
리액트 프로젝트 배! 포! 완! 료! 1. 초기목표 : 내가 진짜 원하는 기능들을 모두 넣어서 실제로 활용할 수 있는 프로젝트 만들기, 실제로 사용자들이 이용할 수 있을정도의 완성도를 원했다..! 사용하고자 한 기능들 : 로그인 구현, storage 사용, API 호출 vercel로 배포해보기 (netlify로 지난 바닐라자바스크립트 배포를 해서 이번엔 vercel로 진행해보고 싶었다.) 2. 실제 일어난 일 : 사용한 기능 firebase를 이용한 로그인 정보 저장, Firestore database에 사용자들이 남긴 게시판 내용 저장 후 호출, firebase로 배포를 진행 3. 계획과 실제 결과의 차이 : React를 배울때 수업시간에 진행한 프로젝트는 로딩이 굉장히 빨랐다.사실 SPA라는 특성상 원래..다 그렇게 빠른 줄 알았지만 그.. 2023. 4. 11.
[CSS] vertical-align vertical-align vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정. vertical-align: baseline; 부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬 vertical-align: top; 해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬 vertical-align: middle; 해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬 vertical-align: bottom; vertical-align: sub; 해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬 vertical-align: text-top; 해당 엘리먼.. 2023. 4. 11.
[React]사용하지 않는 packages, dependencies 삭제하기! 작업하다가 원하는 기능 구현이 안되서 검색해보면 해당 라이브러리들이 존재하는 것을 뒤늦게 발견하는 경우가 많았다..!! carousel, dropdown 등 등.... 암튼 무지성 라이브러리 다운로드 결과 package.json 파일이 정말 마음에 안들었다.. 안쓰는 애들 들어가라! 1. 2. 그리고 root directory로 이동하자 3. 터미널창에 depcheck 입!력! 4. 자 이제 depcheck가 요렇게 알려준다 그럼 저 리스트들을 보고 삭!제! 5. 삭제후에 npm install을 해줌으로써 프로젝트에서 종속성을 없!앰! 이는 해당 패키지들이 불필요한 파일의 크기를 늘리고 프로젝트의 실행 속도를 저하시킬 수 있기 때문에 해주는 과정임. 아참 이거 한번 보고 가자! 2023. 4. 10.
[React]Redux Tookit Redux는 상태 관리 라이브러리!! 내가 이번에 진행하며 사용한 것은 Redux가 아니고 Redux toolkit임. redux를 사용하면서 반복적으로 작성해야했던 설정코드들을 간소화하여 더 쉽게 사용할 수 있도록 도와줌. 또한 toolkit은 코드의 무결성을 보장해주는 immer 라이브러리와redux-thunk 미들웨어 등을 기본적으로 제공하므로 더 쉽게 상태 관리를 할 수 있다. 상태를 한 곳에서 관리하면 여러 컴포넌트에서 상태를 쉽게 처리할 수 있다!! 따라서 코드의 일관성을 유지하며 유지보수하기가 좋다. 대용량 데이터 처리에 많이 사용됨. ( 데이터 전달을 하는 방법에는 props사용도 있지만 특정 데이터 전달을 담당하여 약간의 차이가 있다. 그리고 Redux는 사용하기 위해서 props보다 조.. 2023. 3. 31.

티스토리툴바