Frontend
-
[error] Execution failed for task ':app:installDebug'.Frontend/React Native 2024. 5. 23. 15:31
React Native 트러블 슈팅RN 프로젝트를 진행하면서 삽질하는 과정을 두번 삽질 안하게 적어두자.잘되던 빌드가 갑자기 안 된다.문제는 android 에뮬레이터와 ios 시뮬레이터로는 화면이 잘 뜬다는 점이었다.그럼 뭐가 문제냐 싶은데 안드로이드 실제 기기에서 apk가 인스톨이 안되며 자꾸 에러가 나면서 빌드가 안되는 치명적인 문제점이 있었다.제목과 같은 에러로 구글링을 하여 수없이 검색을 하며 수정해보았지만 기본적으로 에뮬레이터가 안돼요~ 같은 경우지나같이 에뮬레이터는 돌아가지만 실제 기기가 안돌아가는 경우는 나오지가 않는다. 가장 근접했던 에러는 어플이 겹쳐서 실행이 안되니 앱을 삭제 후 다시 react-navive run-android를 실행시키는 방법이었다.아무리 생각해도 이건 코드의 문제점..
-
[React Native] 환경설정 세팅 값 기록Frontend/React Native 2024. 5. 13. 16:17
React Native window 환경설정 세팅내가 세팅하면서 너무 고생을 했기 때문에 안 까먹으려고 핵심만 적어서 블로그에 기록해둔다.나의 환경에선 먹혔는데 다른 환경에서 먹힐지는 미지수. 만약에 cli로 한방에 돌아간다? 평소에 덕을 많이 쌓은게 아닌가 생각합니다.별걸 다해봐도 안된다?? 그러면 프로젝트를 새로 다시 만들고 다시 세팅을 시작하면서 기도를 열심히 드리자.기도메타밖에 없다 그땐.versionRN, expo 등등최근 24.05.08 expo SDK 51버전이 발표됐다.버전은 이런식으로 가져갔으며 이 글을 쓰고 있는 와중에도 버전 업데이트가 되어서expo의 버젼은 51.0.4가 되었다(...)window 환경에서 vsc로 진행하였다.npx create-expo-app [프로젝트 명]expo..
-
[CSS] Tailwind battle ReviewFrontend 2024. 4. 5. 20:25
Tailwind Battle reddit에서 프론트엔드 커뮤니티에 재밌는 사이트가 올라와서 리뷰를 남겨본다. 아직 만들어진지는 몇일 안된거 같지만 꽤나 참신하고 css를 공부하는데 있어서도 도움이 꽤나 될 거같다. 도전과제를 눌러보면 이런식으로 코드를 칠 수 있는 에디터와 목표 타켓이 나오며 친절하게 색깔의 종류정도는 알려준다. 제출을 누르면 나의 코드가 몇퍼센트나 똑같은지 진단 해준다. 근데 이거 100%받기가 은근히 어렵다....ㅋㅋㅋㅋㅋ tailwind 연습하는데 있어서 꽤나 즐겁게 연습이 가능할 거 같다. 만들어진지 얼마 안됐지만 꾸준하게 업데이트 됐으면 하는 바람이다. 아래는 해당 사이트 주소다. 꿀잼. https://www.tailwindbattle.com/ Tailwind Battle Wel..
-
[CS] 1일차 상태관리를 왜 할까요?Frontend/FE CS 2024. 3. 4. 17:27
기술면접 예상질문 1일차 예상 질문 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태(state)란 무엇인가? React에서 상태관리를 어떻게 하느냐에 대한 답을 하기 전, 상태(state)란 react에서 무엇인가? 상태의 정의는 웹 어플리케이션을 render하는데 있어 영향을 미칠 수 있는 값 이다. react에서 페이지가 리렌더링 되는 가장 큰 예시 두가지는 props와 state이다. 상태가 렌더링에 영향을 주기 위한 값으로 존재하기 위해서는 한 가지 요소가 필요하다. 바로 동적인 값, 즉 변하는 값 이라는 조건이다. 그게 State 값이다. 간단하게 말해서 "변수"다. (주의* 변수는 변경되어도 화면이 바뀌지 않는다. 하지만 state는 변경되면 자동으로 화면이 바뀐다..
-
[JavaScript] Webpack, babel, Polyfill 이란?Frontend/JavaScript 2023. 8. 29. 20:02
Webpack, babel, Polyfill이란? Webpack, babel, Polyfill의 차이 Webpack이란? Webpack은 모듈을 번들시키는 역할을 한다. 번들러의 종류 1.Webpack 2.Broserify 3.Parcel이 중 Webpack은 가장 대중적으로 사용되는 모듈 번들러이다. Webpack은 의존관계에 있는 자바스크립트, css, 이미지 등의 리소스들을 하나(또는 여러개)의 파일로 번들링한다. 동시에 성능을 향상시키기 위해서 필요하다면 다시 분리도 가능하다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없다. 그리고 여러개의 자바스크립트 파일을 하나로 번들링하므로 HTML파일에서 script 태그로 여러개의 자바스크립트 파일을 로드해..
-
[50문 50답] 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?Frontend/React 2022. 10. 14. 02:56
상태(state)란 무엇인가? React에서 상태관리를 어떻게 하느냐에 대한 답을 하기 전 state즉 상태란 react에서 무엇인가? 에 대한 얘기부터 해봐야 할 것 같다. 상태의 정의는 웹 어플리케이션을 render하는데 있어 영향을 미칠 수있는 값 이라고 말한다. react에서 페이지가 리랜더링 되는 가장 큰 예시 두가지는 props와 state라고 익히 들어 알고 있을 거라고 생각한다. 상태가 렌더링에 영향을 주기 위한 값으로 존재하기 위해서는 한 가지 요소가 필요하다. 바로 동적인 값, 즉 변하는 값이라는 조건이다. 그게 다시 말해서 State값이다! React에서 상태관리를 하는 이유 그렇다면 React에서 이러한 상태를 관리해야 하는 이유는 뭘까? 위에서 말했다 시피 react는 컴포넌트가 ..
-
[React] 3주차 중간발표 프론트 부분 정리 해둔 것Frontend/React 2022. 9. 14. 18:51
라이브러리 1. React-slick 메인페이지의 슬라이드 구현을 위해서 사용 목표페이지를 각각 만들어주는건 불필요한 렌더링을 야기시킨다고 생각하여 라이브러리를 사용하였고 다른 슬라이드 라이브러리에 비해 상대적으로 가볍고 심플하게 구현이 가능하여 선택했습니다. 2.React-html5-video-editor 메인의 각 하루하루 목표페이지에 동영상 등록 페이지에 적용하기 위하여 사용 사용자가 동영상을 1초만 찍어서 올리기엔 불편할 수도 있다고 생각하여 해당 라이브러리의 비디로 크랍기능을 사용해서 3초내지 5초짜리 동영상을 올려도 원하는 부분(1초)를 생각하여 올릴 수 있도록 구현을 생각해보았습니다. 라이브러리 선택 이유 동영상편집기능을 직접구현하기엔 시간이 너무 빠듯하였고 React-native쪽으론 동영..
-
[React] UI/UX란?Frontend/React 2022. 9. 9. 01:05
임민영 튜터님 강의. 1. 가시성 그 기능이 사용자 눈에 띄어야 함. 2. 피드백 사용자의 행위 후 일어난 변화를 적절하게 피드백해야 한다. 3. 제한요소 특정 상황에서 사용자가 해도 되는 것, 해선 안되는 것을 명확히 규정하고 제한 ex) 글을 작성중에 다른 페이지로 나갈 시 글이 날아간다면 날아갈 수도 있다고 인지 시키는 것? 4. 맵핑?? 사용자가 특별한 설명이나 도움없이 대상의 기능을 쉽게 떠올리고 이용가능 ex) 하트버튼을 누르면 좋아요, 별표는 즐겨찾기 등. 5. 일관성 적용된 디자인은 일정한 패턴이나 예측가능한 일관성을 지녀야 함 ex)사이트 디자인이 페이지마다 글씨체가 다르다던가 하면 안됨 6. 행동유도성 사용자에게 기대하는 행위가 인지, 유도 되어야함 무한스크롤 로딩상태 표시 (스켈레톤,..