본문 바로가기

분류 전체보기178

[JavaScript]바닐라자바스크립트 컴포넌트생성하기 // 페이지(컴포넌트) 임포트 import Home from "./public/pages/Home.js"; import Design from "./public/pages/Design.js"; import Board from "./public/pages/Board.js"; import Submit from "./public/pages/Submit.js"; // 경로 문자열을 정규 표현식으로 변환하는 함수 const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"); // 매개변수와 일치하는 값을 추출하는 함수 const getParams = match => { const values.. 2023. 12. 5.
[JavaScript]Vanilla Javascript로 웹 컴포넌트 만들기 --스크랩 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%80%E1%85%AE%E1%84%92%E1%85%A7%E1%86%AB Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝open in new window에서 진행하는 블랙커피 스터디open in new window에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io 2023. 12. 4.
[React.js]명령어로 리액트 프로젝트 생성하기 리액트 프로젝트 설치 전에 다운로드해야할 프로그램들 Node.js npm ( Node Package Manager) Node.js https://nodejs.org/ko/download/ npm $ node -v npm 으로 진행할 경우 아래의 명령어를 실행 npx create-react-app hello-react OR yarn https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com yarn으로 진행할 경우 아래의 명령어를 실행 yarn create react-app hello-react 프로젝트가 있는 경로로 이동하기 .. 2023. 12. 3.
[JavaScript]비동기 작업 수행하는 코드 뜯기 아래 코드는 unbookClub 프로젝트를 진행하면서 API 도서검색 기능구현을 하며 사용한 코드다. onClick 함수로 아래의 아래의 코드와 연결시켰다. 기능 목록 event.preventDeafault(); => 새로고침 방지 setSearchError(null); => 검색 오류를 나타내는 상태 변수를 초기화.(useState 리액트 내장함수 사용) startLoading(); => customHook(contextAPI와 함께 사용함) 으로써 로딩 이미지를 보여주는 커스텀훅 호출 async { ... } await(error) { ... } => async 키워드는 함수를 비동기 함수로 선언. 이는 함수 내에서 await 키워드를 사용할 수 있게 하고, 함수가 항상 Promise를 반환. asy.. 2023. 11. 21.
[firebase Hosting]프로젝트 배포 후 업데이트하기 feat.짱 쉬움 프로젝트 내용 수정 후 업데이트 하려면 아래와 같은 명령어를 입력해야함. 업데이트가 잘 되었다 야호 2023. 11. 9.
[React.js]아코디언 메뉴 만들기 가이드라인이 적인 페이지를 만드는데 너무 밋밋해서 아코디언 기능을 넣기로 했다! 아래 사진의 질문, 답변은 임시텍스트를 아무거나 붙여놓음.. 위의 네모박스로 체크해둔 부분을 아코디언으로 구현하기로 했고 위의 HTML, CSS는 아래와 같다. 여기서 useCallback을 사용하면 함수가 렌더링마다 재생성되지 않으며, 의존성 배열을 사용해서 해당 배열의 값이 변경될 때만 handBtnClick함수가 다시 생성된다. 또한 직접함수를 선언하면 메모리에 여러 함수 인스턴스가 생성될 수 있지만,useCallback을사용하면 함수 인스턴스가 최소화 되어 메모리 사용량을 줄일 수 있다. 왜냐하면 useCallback을사용하면 함수 인스턴스를 재사용하기때문! 근데!! 위에처럼 엄청 간단한 코드는 많은 메모리를 사용하지.. 2023. 11. 6.
[TypeScript]JS react -> TS react 리팩토링 자바스크립트로 작성된 프로젝트를 타입스크립트로 변환하는 과정. 기존 작업한 리액트 프로젝트 : React, webpack, babel로 구성되어있음. 마이그레이션 진행 전 폴더를 따로 백업해두고 새로 레파지토리와, 폴더를 만들어서 진행함. 참고한 블로그! https://projooni.tistory.com/entry/%EA%B8%B0%EC%A1%B4-Git-Repository%EB%A5%BC-%EB%B3%B5%EC%82%AC%ED%95%98%EC%97%AC-%EC%83%88%EB%A1%9C%EC%9A%B4-Repository-%EB%A7%8C%EB%93%A4%EA%B8%B0 기존 Git Repository를 복사하여 새로운 Repository 만들기 보통 Git Repository를 복사할 때 fork를.. 2023. 10. 25.
[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.

티스토리툴바