느릿느릿 프로그래밍

(정보 업데이트 !!) ES6 부터는 JS에서도 Class를 쓸 수 있게 되었다! 이제 JS에서도 Class를 통해 상속이 가능하다! prototype : 원형 자바스크립트는 객체지향언어이지만, 클래스 개념이 없다. 대신 Prototype 이라는 것을 사용한다. 그래서 자바스크립트는 Prototype 기반 언어라고도 불린다. 1. 프로토타입이란? Javascript(이하 JS)에서 객체 생성은 함수를 통해 이루어진다. 그리고 JS에서 생성되는 객체는 전부 Object의 자식인 것이다! 객체 생성의 과정을 보기 전에 일단 JS에서 함수를 정의했을 때 일어나는 일을 살펴보자. 예로 Person 함수를 정의해보자. 우리가 Person 함수를 정의하면, JS에는 함수만 짠! 하고 생기지 않는다. Person 함..

얼마전에 Cache 문제로 골머리를 썩었었다. 일반 Javascript 코드에서 해결법은 나오는데 React.js에서는 잘 안나오더라..지금은 해결했지만! 일단 뭐가 문제인지 짚어보자. | 무엇이 문제인가 코드를 변경 후 배포하였는데 브라우저에서 적용되지 않는 문제. 개발 중 코드를 변경하고 페이지를 새로고침하였는데 바뀐 코드가 적용되지 않는 문제..등이다. 보통 이를 해결할때 F12로 개발자 모드 띄우고 강력 새로고침을 하는데..이걸 고객이나 개발자가 아닌 사용자에게 매번 안내할 수는 없는 노릇 아닌가ㅜㅜ 그래서 개발자답게 해결해보기로 했다. | Cache로 인한 문제와 Cache Busting Cache로 인해 발생할 수 있는 문제는 위에 기재한대로 새로운 변경사항이 브라우저에 반영 되지 않는 것이다..

개발한 웹페이지를 빌드하고 보니 브라우저 tab의 favicon과 name이 리액트더라.. 그래서 다음 설정을 통해 favicon 설정하고 이름을 바꾸었다. | public 폴더 수정하기 create-react-app을 통해 생성한 react 프로젝트를 보면 위와 같이 node_modules, public, src 폴더가 있다. 이 중 public 폴더의 favicon과 index.html을 수정하면 된다. favicon.ico 파일을 본인이 넣고자하는 아이콘 image로 대체하면 된다. 웹페이지의 title은 index.html의 태그를 수정하면 바뀐 이름으로 적용된다. | React Helmet 사용하기 https://github.com/nfl/react-helmet nfl/react-helmet A..

Web 개발을 하다보면 JWT, 사용자 정보 등을 Local/Session Storage에 저장하여 사용할 때가 있다. 그러나 이 값은 사용자들이나 해커들에게 노출되기 쉬워 보안 이슈가 있을 수 있다. 그래서 Local/Session Storage의 값을 암복호화하여 사용하는 법을 알아보았다! | Secure-Web-Storage https://www.npmjs.com/package/secure-web-storage secure-web-storage A simple wrapper for localStorage/sessionStorage that allows one to encrypt/decrypt the data being stored. www.npmjs.com secure-web-storage를 이용하..

Web을 개발하다보면 폴더와 파일의 depth가 깊어지는 경우가 있다. 이런 경우 파일 import시에 ../../components/sign/logout 식으로 ../가 많아져서 복잡하고 번거로워진다. 그러나 절대경로를 설정하면 components/sign/logout 으로 간단히 작성할 수 있다는 사실! 나는 src 폴더를 기준으로 절대경로를 설정하였다. 방법은 아래와 같다. | Linux, Mac 에서 설정하기 프로젝트의 package.json 로 이동 후, scripts의 start, build 부분을 다음과 같이 수정한다. "start": "NODE_PATH=src/ react-scripts start", "build": "NODE_PATH=src/ react-scripts build", | W..

| 문제 Program type already present: android.support.v4.accessibilityservice.AccessibilityServiceInfoCompat Message{kind=ERROR, text=Program type already present: android.support.v4.accessibilityservice.AccessibilityServiceInfoCompat, sources=[Unknown source file], tool name=Optional.of(D8)} 해당 에러는 (아마도) android.support.v4.accessibilityservice.AccessibilityServiceInfoCompat 가 라이브러리 간에 중복될 때 발생한다.최..

| 문제 java.lang.OutOfMemoryError: Failed to allocate a 490166904 byte allocation with 3874212 free bytes and 378MB until OOM 안드로이드 어플 테스트 중 위와 같은 에러가 났다.이 어플을 테스트 하는 중에 용량과 사이즈가 큰 사진을 여러장 사용했는데, 그것 때문에 메모리초과 에러가 난 것 같았다. 저 에러가 난 코드 부분은 아래와 같았다. 1Drawable drawable = getResources().getDrawable(R.drawable.cat1);cs 사진의 크기가 상당히 크긴 했지만, 저 사진을 그대로 쓰고 싶어서 코드로 해결하는 방법을 찾아보았다. | 해결 1. AndroidManifest.xml에 ..

targetSdkVersion이 28인 어플 작업을 하는데이 프로젝트의 경우 처음부터 design/preview가 제대로 동작하지 않았다.그러나 특별한 빌드 에러는 없었고, 애뮬이나 폰에 실행하면 레이아웃이 제대로 나오면서 잘 동작했다. 그래서 오늘 이 문제를 해결하기 위해 찾아보던 방법들은 다음과 같았다. 1. sdk 낮추기 저 빨간색 동그라미에서 sdk 버전을 하나씩 낮추면서 잘 나오는 버전이 있나 확인해보는 것이었다.그러나 내 경우에는 되지 않았다. 2. build.gradle(Module.app)의 sdk 버전 낮추기 최소 sdk를 23에서 25로 올리고, 최대를 27로 낮춰보았으나 역시 되지 않았다. 이 외에도 다양한 방법들을 시도하였으나 특별히 되는 것이 없다가,문득 preview에서 에러를 ..