분류 전체보기 46

Webpack과 babel의 간단한 설명

Webpack 먼저 웹팩(Webpack)은 위의 그림과 같이 프로젝트에 사용되고 의존성이 있는 모든 모듈과 정적 파일들(js, css, image 등)을 번들링하여 하나의 정적인 파일로 변환시켜주는 것을 말한다. js들을 한데 묶어 하나의 자바스크립트 파일로 생성하여 성능을 최적화하고 요즘에 사용되는 다수의 style파일 형식(scss, sass등)도 하나의 css파일로 생성하여 묶어준다. Babel 인터넷이 나온지 오래됨에 따라 브라우저는 종류도 다양해지고 버전도 다양해졌다. 때문에 각자의 컴퓨터에서 사용하는 브라우저는 천차만별이고 해당 브라우저에 따라 스크립트의 기능이 동작할 수도 있고 하지 못할수도 있다. 이 때문에 바벨이 탄생하였으며 바벨은 ES6이상(ESNext)의 js파일 들을 오래된 브라우저..

Web/frontend 2021.08.26

Redux의 ducks pattern

회사 프로젝트를 시작하면서 프로젝트 구조를 구축하면서 여느때와 다름없이 redux를 redux 하위 폴더로 actions, reducers, constants 등으로 나누던 중 프리랜서 분이 redux관리를 ducks pattern으로 하는게 어떻겠냐 의견을 주셔서 찾아보았다. 기존의 구조대로 개발을 하게 되면 하나의 기능에 수정이 필요할 시에 action, reducer파일을 왔다갔다 해야 하지만 아래와 같이 Ducks Pattern으로 개발을 하게 될 시에 구조중심이 아닌 기능중심으로 개발되어 더욱 더 직관적일 뿐만 아니라 수정에 있어서도 용이하다고 한다. Ducks Pattern을 사용하기 위해서는 아래와 같이 지켜야 할 사항이 있다. 1. reducer는 reducer라는 이름으로 export d..

Web/react 2021.08.14

함수 선언식과 함수 표현식 그리고 화살표 함수

함수 선언식 - Function Declarations function test() { return 'function declarations' } test(); 함수 표현식 - Function Expressions var test = function () { return 'function expressions'; } test(); 두 방식의 차이점 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. console.log(test()) //@@@@ 정상 출력 console.log(test2()) // undefined 뜨고 TypeError 발생(TypeError: test2 is not a function) function test() { console.log('@@@..

Web/javascript 2021.08.02

[react-native]Input password에서 나만의 암호 만들기 후 validation 안먹히는 현상

로그인이나 가입할때 id / password 입력 시 아이폰에서 나만의 강력한 암호 만들기 창이 뜨면서 나만의 패스워드 입력을 누르면 내 암호를 직접 입력할 수 있다. password 값을 체크하는 validation을 추가했는데도 불구하고 나만의 암호 입력 직후 화면상에서 공백으로 보이는 상태에서 바로 다음 step으로 넘어가려 하니 validation이 먹히지 않아서 보니 나만의 암호 입력을 선택했음에도 불구하고 console을 찍어보니 강력한 암호가 값으로 들어가 있었다. 해당 현상은 input이 끝날 때 callback을 해주는 onEndEditing 함수를 통해 해결할 수 있었다. 참고: https://github.com/facebook/react-native/issues/23921

Mobile/react-native 2021.07.27

Web Storage - Local Storage, Session Storage

HTML5부터 웹 데이터를 client에 저장할 수 있는 storage가 추가되었다. 영구 저장소인 Local Storage와 임시 저장소인 Session Storage로 구성되어 있으며 key-value로 저장되는 기존 웹의 Cookie와 유사한 속성을 가지고 있다. Cookie와 차이점 쿠키는 매번 서버로 전송된다. 쿠키는 매번 request 요청 시 전달되며 Web Storage는 서버로의 전송이 이루어지지 않아 웹 트래픽의 비용을 줄여준다. 용량제한이 있는 Cookie와 달리 제한이 없다. Cookie는 4kb의 용량 제한이 있다. 영구적으로 데이터 저장이 가능하다. 쿠키는 만료일자를 지정하여 언젠간 만료되지만 Web Storage는 만료기간 설정이 없으며 영구적으로 저장 가능하다. 쿠키와 다르게..

개발상식 2021.05.10

querySelector와 querySelectAll

개발 소스 중 qeurySelector와 qeurySelectAll이라는 함수가 있길래 궁금해서 검색해보니 getElementById, getElementsByClassName 과 같이 DOM 을 다루는 함수라는 공통점이 있었다. 하지만 꽤 여러가지의 차이점이 있었는데 아래와 같은 차이점이 있었다. getElementById querySelector id를 가져옴 class / id 모두 적용 가능하며 class를 사용하여 다수의 element를 가져올 시 가장 상단의 element 하나만 return함 속도가 빠름 속도가 느림 공통적으로 HTML element를 return함 getElementsByClassName querySelectorAll HTMLCollection을 리턴 NodeList를 리턴..

Web/javascript 2021.05.10

대칭키와 비대칭키(공개키)

대칭키 대칭키는 암호화와 복호화가 동일한 암호화 방식이다. 대표적 알고리즘으로 DES, 3DESC, AES 등이 있다. 속도가 빠르다는 장점이 있지만 서로 키를 교환해야 하기 때문에 중간에 탈취될 수 있는 위험성이 있고 암,복호화가 하나의 키로 이루어지기 때문에 탈취될 경우 쉽게 해독당할 수 있다는 단점이 존재한다. 비대칭키 비대칭키는 암호화와 복호화가 다른 암호화 방식으로 공개키와 비밀키가 있다. 공개키는 모두가 접근할 수 있는 키이며 비밀키는 개인이 가지고 있어야 할 키이다. 참고자료 https://velog.io/@taelee/RSA-%EC%95%94%ED%98%B8%EB%8C%80%EC%B9%AD%ED%82%A4-%EB%B9%84%EB%8C%80%EC%B9%AD%ED%82%A4#3-%EA%B2%B..

개발상식 2021.05.06