프론트엔드✏️/코드캠프

Javascript vs TypeScript

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

220629 프론트엔드 부트캠프 50일차 : 배포를 해보자!(3) - 동적 배포 실습

오늘은 카드 써야돼

알고리즘 - 신규 아이디 추천 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인 정사각형 배열 형태로, 각 칸은 "공백..

220624 프론트엔드 부트캠프 45일차 🌺기말고사🌺 파이팅🫶

10시 20분 화장실 갔다오고 깃허브 연결까지 ! 45분...이제야 app.tsx 설정 끝내고 레이아웃 들어감 왜..캡쳐해놓은거지? 기억이 안 남.... 근데 며칠전에 ㅇ호님한테 물어본거 얻어걸린 느낌...?!?!?!? 귀여운 병아리가 보여! 더보기 10시부터 시험봤으니까 약 11시간 정도..?째 하고 있네. 생각보다 진도가 많이 안 나간다. 학원에선 9시30분까지 하다가 집에와서 밥 먹고 씻었다. 솔직히 20분 정도는 식빵 먹으면서 쉬었다. 배고프고 계ㅔㅔㅔ속 하니까 너무 지쳤었다. 그리고 내가 css에 약하다는 걸 처음으로? 느꼈다... ㅠㅠ ㅠㅠ ㅠㅠ css가 재미없는 것까진 아닌데, 막 예전처럼 엄청 즐겁게 하질 못한다... 내 맘대로 안되는게 답답해 아직 여러 속성에 대해서 이해가 부족한 것 같..

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