자바스크립트

Javascript vs TypeScript

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

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 후에 가능하다. 스토리지에..

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..

[문제...] react-hook-form, 엔터치면 뮤테이션이 날아감

태그 컴포넌트를 가져와서 붙였는데, 태그를 입력하고 엔터칠 때마다 이 오류창이 떴다. 근데 다른 input창에서도 그랬던 것 같아서 엔터를 쳐보니까 역시나 오류가 떴음. 네트워크탭에서 보면 mutation이 요청되어 있다. 아무리 생각해도 의심스러운건 form 뿐..... enter를 치면 자동으로 submit이 되는 거 아닌가하고 독스를 찾아봤는데 "enter"키워드로만 찾아서 그런가? 그런 내용은 없었다... 알고보니 HTML에선 submit 태그 고유동작 중에 하나라고 한다. const checkKeyDown = (e) => { if (e.code === "Enter") e.preventDefault(); }; ... checkKeyDown(e)} > 출처 : https://www.codegrepp..

[문제 해결] Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`.

Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`. at InfiniteScroll data가 불러와지기 전에 인피니트 스크롤이 불러와져서 이런 문제가 생기는 것 같아서 {props.data && ( {props.data?.fetchUseditems.map((el: any) => ( {el?.name} {el?.seller.name} {el?.price}원 {el?.soldAt} {/* {props.basket.find((basketEl) => basketEl._id === el._id) ? ( 담기 취소 ) : ( 담기 )} */} ))} )..

[문제 해결] toast-ui 디폴트 밸류, 수정할 때 빈값 들어가는 문제, 랜딩 페이지 엔터쳐서 넘어가기

export default function BeanMarketEditPage() { const [isEdit, setIsEdit] = useRecoilState(isEditState); const router = useRouter(); const { data, loading } = useQuery(FETCH_USED_ITEM, { variables: { useditemId: router.query._id, }, }); useEffect(() => { setIsEdit(true); }, [isEdit]); return loading ? "" : ; } 1. toast ui에 디폴트 밸류가 안 들어옴 2. form 써서 data보내니까 수정하지 않은 부분은 빈 값이 되어서 수정이 됨 두 가지 문제가 있었는데..

알고리즘 - 3진법 뒤집기, 2진 변환 반복

삼진법으로 대체 어떻게 뒤집지 하고 숫자가 3의 i승과 3의 i+1승 사이에 있으면 일단 3의 i에 1을 더하고 ,,,, 나머지도 이런 식으로 구해야하나 하고 고민하다가 결국 구글링했다. 자바스크립트 정답을 보려던건 아니고 어떻게 구하는 규칙?방법이 있나 싶어서 검색한건데 자바스크립트로 진수 변환하기를 봐버렸고.... function solution(n) { console.log(n.toString(3)) // 1200 } solution(45); toString() 하면 그 숫자의 진법으로 변환되어서 나오는데 toString이? 대체 원리가 뭐지 숫자 및 BigInts의 경우 toString()은 선택적으로 기수(radix)를 매개변수로 취합니다. 기수의 값은 최소 2부터 36까지입니다. 기수를 이용함..

220622 프론트엔드 부트캠프 43일차 : Memoization, @media(반응형 페이지), 토스트 에디터

오늘은 수요일 알고리즘 테스트가 있어요 오늘부터 이틀 동안은 최적화에 대해 배웁니다! 서버사이드 렌더링은 무슨 소린가? 도대체 이게 무슨 소리야,, 이것도 배울 거임! 자꾸 새로 만들지 말고, 메모해 놓는 거 어때? → Memoization 내 사이트 모바일에서도 보고 싶어! @media MEMOIZATION 부모, 자식 간의 관계로 만들어서 진행 폴더 안에 container랑 presenter를 만들어서 했는데, 32-01-memoization/container 입력하면 접속 가능하다! render시 변수가 새로 만들어지는 상황 함수가 새로 만들어지는 상황 부모 리렌더시, 자식도 리렌더되는 상황 const aaa = Math.random(); console.log(aaa); 콘솔에 찍어보면 state가..