JS

재귀 함수(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 후에 가능하다. 스토리지에..

알고리즘 - [1차] 다트 게임

생각한건... 앞에서부터 세번째 문자가 isNaN(Not of Number)인지에 따라서 0,3 또는 0,2개로 나눠주는 거였다. 그렇게 해서 배열에 하나씩 푸쉬해서, 세트끼리 묶여있는 것까진 됐는데... 스타상과 아차상이 도저히 어떻게 적용해야할지를 모르겠다,,, reduce로 돌렸을 때 각각의 cur안에서만 영향을 미치는 게 아니라 인덱스가 다른 애한테도 영향을 미치니까 어떻게 해야할지 모르겠음 ㅠㅠ function solution(dartResult) { let arrays =[]; // console.log(dartResult.split("").map((el)=> { // console.log(el) // })) let array = dartResult.split(""); for(let i = 0..

HTTP와 HTTPS

HTTP HTTP(하이퍼 텍스트 전송 프로토콜) HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜 웹 브라우저와 웹 서버간의 커뮤니케이션을 위해 디자인 되었다. HTTP는 클라이언트가 요청을 생성하기 위한 연결을 연 후, 응답을 받을때까지 대기하는 전통적인 클라이언트-서버 모델을 따른다. HTTPS(HyperText Transfer Protocol over Secure Socket Layer, HTTP over TLS, HTTP over SSL, HTTP Secure) https://로 시작한다. 보안 HTTP 프로토콜(HTTPS)은 HTTP 트래픽을 읽기 및 조작이 더 어렵게 래핑한다. 데이터를 교환하기 전에 클라이언트는 인증 기관에서 발급한 암호화 인증서를 갖고 있는지를 ..

SPA(Single Page Application) & MPA(Multi Page Application)

먼저 MPA, 멀티 페이지 애플리케이션은 원래 사용되던 전통적인 방식이다. 새로운 페이지로의 이동이 필요할 때 마다 그때그때 다운로드해서 페이지를 가져온다. 그래서 새로운 페이지로 이동할 때(새로고침시) 주소창 왼쪽에 보면 동글뱅이가 돌아간다. 한 페이지에 해당하는 용량이 크면 이동할 때 마다 속도가 그만큼 느리다. 리액트, 앵귤러, 뷰에서 사용하는 방식이다. SPA 방식을 사용하려면 여기서 제공하는 페이지 이동방식을 써야한다.(ex. router.push) 그래서 카카오맵 같은 것을 가져올 때, MPA 방식으로 접근하면 다운로드 받을 시간이 충분해서 카카오맵이 보이지만, SPA 방식으로 접근하면 시간이 부족해서 카카오맵이 보이지 않는 현상이 나타난다~~!!

220627 프론트엔드 부트캠프 48일차 : 배포를 해보자!(1), 테스트 코드(jest), 리액트 네이티브

배포는 삼단계로 진행될 거예요! SSR, SSG 1. 배포를 위한 숲을 그려보자! -> Cloud-Provider 2. 배포하면 끝인줄 알았는데...-ㅅ- 테스트는 또 뭐야? -> Jest / Cypress / TDD Cloud-Provider 서버를 계속 켜놓으려면 24시간 컴퓨터를 켜놔야하고, 다른 사람도 내 컴퓨터에 접속할 수 있게끔 네트워크 설정도 조금씩 바꿔야 한다. 반드시 서버실의 서버컴퓨터로 할 필요는 없다. 하지만 접속자가 많아지면 노트북 같은 걸로는 힘들다... (처리를 하는 cpu와 기록해놓는 메모리,ram이 좋아야 한다.) Front를 여러대, 각각의 소스코드로 각각 yarn dev해서 한 대가 안돼도 다른 애가 켜져있어서 그쪽으로 접속이 가능하게 한다. 로드 밸런서(부하 분산기) -..

알고리즘 - [1차] 비밀지도

2018 KAKAO BLIND RECRUITMENT https://programmers.co.kr/learn/courses/30/lessons/17681 코딩테스트 연습 - [1차] 비밀지도 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다 programmers.co.kr 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백..

220623 프론트엔드 부트캠프 44일차 : optimistic ui, og, SSR

낙관적 UI(Optimistic UI) 요청 보내고 기다리지 않는다. 어차피 성공할걸 알아...!! 이런 경우에 쓴다. 1. 99% 성공할 것이 예상되는 API 2. 1%확률로 실패하더라도, 문제가 안되는 API 개발을 할 땐... 좋은 컴퓨터만 있지 않다는 걸 생각해야한다! 느린 컴퓨터에서 좋아요 버튼만 누른다면? 좋아요 버튼 하트 채워졌다가 나중에 보니 안 눌려있어도 치명적인 오류는 아니잖아 + 일단 누르면 하트 채워지게 보여지게 해! 그런 것... 성공했다고 가정하고 미리 데이터를 주자. likeBoard 요청이 날아감 가짜 likeBoard를 데이터에 넘겨서 data.likeBoard 캐시 스테이트를 먼저 수정한다. 화면에 보여진다. DB에서 결과를 받아서 가지고 온다. 그 결과를 다시 updat..