javascript

원시 자료형 vs 참조 자료형

원시 자료형(primitive data type) 원시 시대할 때 그 원시 맞음 프로그래밍 언어가 제공하는 자료형 중 하나다. 내장형이나 기본형으로도 불린다. 가장 빨리 연산처리된다. 대부분의 언어들은 프로그램에 의한 원시형의 조작을 허용하지 않는다. 고정된 저장 공간을 차지한다. 하나의 데이터를 담고 있다. ex. 문자(character,char), 정수(int, short, long, byte), 부동소수점수(float, double, real), Boolean(true/false) 자바스크립트에선 - string, number, boolean, undefined, symbol, null 참조 자료형(reference data type) 원시 자료형이 아닌 모든 자료형 Object로 구분되는 자료형...

@media, 반응형 디자인(Responsive Design)

사이트는 크게 반응형 사이트, 적응형 사이트 두 가지로 나뉜다. 요즘 트렌드는 반응형이다. 배달의 민족, 오늘의집, 직방(정말 조아하시는. ), 코드캠프 등이 있다. 적응형 사이트의 대표적인 예는 네이버, 다음, 쿠팡, 페이스북, 옥션, 크몽 등이 있다. 화면에서 보여줘야할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX 좋지 않다. 무조건 반응형으로 만들어야 한다는 건 잘못된 생각이고, 들어가야 할 곳과 아닌 곳을 구분해서 디자인 한다. 웹을 기획하는 단계에서 반응형 기획과 디자인이 같이 들어가야 한다! 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야 한다. 보통 모바일 크기일 때, 태블릿 크기일 때, pc크기일 때로 나눈다. 이런 나뉘는 포인트를 breakPoint 라고 한다! 화면을 전환하..

알아두면 유용한 개발자 도구

1. Apollo Client Devtools 설치 후 app.tsx에서 client 설정 부분에 connectToDevTools : true 로 설정해야 한다. (웨일에서도 사용가능하다.) https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm 2. wappalyzer 사이트에 들어가면 그 사이트에서 사용된 스택을 분석해준다. (리액트로 만들었는지 제이쿼리 썼는지, 이모션 썼는지 등등) (웨일에서도 사용가능하다.) https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnf..

도메인, 호스팅, DNS. Domain, Hosting, DNS

Domain name 네트워크상에서 컴퓨터를 식별하는 호스트명, 도메인 레지스트리에게서 등록된 이름 통틀어서 웹 주소라고 부르기도 한다. 쉽게 말해 웹 사이트 이름이다. 인터넷 사용자가 웹 사이트에 액세스할 수 있는 주소다. 만약 이 도메인을 사서 적용한다면... 주소창에 "정말신기해.com" 이런식으로 치면 내가 원하는 내 페이지로 이동하게 할 수 있는 것!!! 가비아, 고대디 등 도메인을 구입하고 관리할 수 있는 사이트가 있다. Hosting 웹 사이트를 www를 통하여 인터넷에서 액세스할 수 있도록 해주는 파일들을 저장하는 서버의 공간을 판매하거나 임대해주는 기업(웹 호스트)에서 제공하는 서비스다. 쉽게 말해 서버 컴퓨터의 공간을 이용할 수 있도록 임대해주는 서비스를 말한다! 이런 서비스들이 있어서..

나 보고 있는거야?!?!?!! observable/promise. Hot&Coooool

async 비동기적 - 두 사건이 같은 시간에 일어나지 않는다. - 같은 시간 선상에 없다. - 동시에 처리한다. sync 동기적 - 두 사건이 같은 시간에 일어난다. - 같은 시간 선상에 있다. - 동시에 처리하지 않는다. 용어 되게 헷갈린다..!!!!!!! 같은 시간 선상에 있다는게 같이 시작한다는 게 아니라, 정말 같은 시간 선상에 있어서 하나 끝내야 또 다른 하나가 시작될 수 있음을 의미한다. . observable 식별[관찰]할 수 있는 Promise is eager, whereas the Observable is lazy. Promise는 간절하고,,, Observable은 게을러요? 예?... 실행자 함수가 정의 순간에 호출되기 때문에 promise는 eager하다고 하다. 메서드가 호출되는..

중첩된 배열구조 - flatten, unflatten

flatten - 납작하게[반반하게] 만들다. 중첩된 배열구조를 하나의 배열로 만드는 것을 의미한다. unflatten 반대로 중첩된 배열구조를 의미한다. let array = [[1,2],[3,4]]; Array.prototype.flat() flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 평평하게 만든 새로운 배열을 생성한다. let array = [[1,2],[3,4]]; array.flat(); // [1,2,3,4] array.flat()의 반환결과는 [1,2,3,4]다. 이런 좋은 기능이 있었다니... default 깊이 값은 1이다. 즉 depth 1만큼 평평하게 만든다는 뜻 depth는 뭐냐?? let array = [[1,[2,3]],[4]]; 너무..너무 끔찍하고 보기 힘든..

재귀 함수(recursive function)

재귀(再歸) - 다시 돌아온다 재귀 함수 - 자기 자신(함수)을 호출하는 함수를 말한다. 함수가 함수를 다시 부르는 것으로 중단점을 설정하지 않으면 끝없이 자신을 호출하는 루프에 빠진다. const recursion = () => { return recursion(); } 이런 함수를 만들고 recursion을 호출한다면, 끝없이 자기자신을 호출하는 무한루프에 빠질 것이다. (Runjs 같은 곳에서 하지 않길 바란다,,,,) const recursion = (i) => { if(i { if(i

220630 프론트엔드 부트캠프 51일차 : 동적 배포 마무리, Docker

Docker에 대한 내용은 아래에 적었다. https://hani-honey.tistory.com/129 도커(Docker) 고래 모양 그거 도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 hani-honey.tistory.com 동적 배포 (2) 어제 하던 것 이어서... 인스턴스 컴퓨터(EC2)안에서 curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash sudo npm install -g yarn sudo yum install git yarn install yarn build yarn start 해줍니다...

도커(Docker) 고래 모양 그거

도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 컴퓨터에서 도커만 설치하면 이 문서의 내용대로 이미지를 다운받아 설치합니다. 가상머신과 비슷하지만 그것보다 훨씬 빠르고 자원을 효율적으로 사용합니다! 불필요한 추가적 운영체제 설치가 필요 없습니다. 도커를 쓰는 이유? 서버를 돌리기 위해선 환경이 갖춰져야 합니다. 예를 들어 회사에 각각 윈도우와 맥을 쓰는 개발자가 있었고, 리눅스를 쓰는 개발자가 신입으로 들어왔다고 해봅시다. 그럼 신입의 컴퓨터에 Node 등 버전을 똑같이해서 깔아야겠죠. 깔았는데 실행이 안돼요! 왜냐면 운영체제에 따라서 환경이 달라지기 때문입니..

Javascript vs TypeScript

잠깐이나마 배웠었던 C++과 비교해서 얘기하자면, C++은 변수를 선언할 때부터 int인지 string인지 정하고 선언한다. int num = 3; string str = "3"; 이런식으로 선언을 하고, 둘이 더하거나 빼려는 작업을 하면 자료형이 달라서 애초에 계산이 안된다. let minus = 1-'1';// 0 let sum = 1+'1'; // '11' 그에 비해 자바스크립트는 굉장히 유연하다. 숫자와 문자열을 더하고 빼는 것이 가능하다. (결과는 좀 다른 양상인데, 이유는 모르겠음) 타입스크립트는 자바스크립트의 기반의 언어다. 자바스크립트는 클라이언트 측 스크립트 언어, 타입스크립트는 객체 지향 컴파일 언어다. 위에 C++이 컴파일 언어인데, 컴파일 할 때 컴파일러가 오류를 잡아낼 수 있다.(..

알고리즘 - 신규 아이디 추천 replace, slice, concat,

const yes = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p","q", "r","s","t","u","v","x","y","z","0","1","2","3","4","5","6","7","8","9","0","-","_","."]; function solution(new_id) { var answer = ''; console.log(new_id.toLowerCase()); let id = ""; new_id = new_id.toLowerCase(); for(let i = 0; i < new_id.length; ++i) { if(yes.includes(new_id[i])) { id+=new_id[i] } ..

220628 프론트엔드 부트캠프 49일차 : 배포를 해보자!(2) - 정적 배포 실습, refreshToken 권한분기, reactNative

오늘은 정적배포에 대해서 배웁니다~ 그리고 이번주에 실무에서 많이 쓰는 도커도 배울 거임~~~ 정적 배포 실습 정적 배포를 하기 위한 새로운 프로젝트를 만들 것이다... npx create-next-app class_build 뒤에 class_build는 바꿀 수 있음! package.json 들어가서 react 버전을 수정하고, 노드모듈즈 지우고 다시 yarn install index.js 들어가서 Image 부분은 주석처리 한다. yarn dev - 페이지 이동 속도가 느리다. 소스코드 수정하면 자동으로 refresh 된다. 하지만 실제 배포에선 그러면 안되잖아?! yarn start - 페이지 이동속도 빠르다. 소스코드 수정해도 refresh되지 않음. yarn build 후에 가능하다. 스토리지에..