etc.

[TIL] 한주간의 정리 - 코드캠프

한주간의 정말 많은 언어와 객체 그리고 개발자를 택하면서 배워보지 못한 GrpahQL에 대한 이해를 단 한주 만에 이해하는 시간이 되었다. 나로써 내가 직접 게시물을 생성하는 방법을 터득하고 많은 코드량과 어려운점에 대해 알아가는 한주가 되었다. 이번 한주는 NextJs를 직접 탐구하는 시간을 가졌고 실제로는 NextJs를 사용하지는 않고 React 와 Navie를 사용한다고 하였다. 그럼 이번 한주간을 되돌아보면서 어느것을 배우고 어떤 것이 어려웠는지 분석해보겠다. 01. 1월 10일 코드캠프 12기의 첫시작 코드 캠프에 참가하기전 이전에 한주간 프리캠프 과정을 거치고 마침내 코드캠프 12기에 입성하게 되었다. 오전에 오자마자 강의실에 대한 설명과 고민사항에 대한 Qustion-Table 이용방법에 대..

[TIL] 2022년 01월 14일

이번주는 Routing을 배워보는 시간을 가지게 되었다. 1.페이지를 이동하는 방식 => Routing 2.정적페이지와 동적 페이지 => Static-Routing / Dynamic-Routing 3.게시물을 가져오는 방법 => Apollo-Client / Query 4.API 요청 에러 try-catch 라우팅 => 페이지 이동 const router = useRouter(); router.push("이동할 페이지"); -> 이동하고 싶은 주소 // 페이지 이동하기 router.reload(); router.replace(); router.pathname(); 상세페이지가 다른 경우 const router = useRouter(); router.push("이동할 페이지"); -> 이동하고 싶은 주소 /..

[TIL] 01월 13일 - 동기 vs 비동기

아주 예전에 배운 동기와 비동기 방식에 대해 배워보았다. 동기와 비동기 방식의 목표는 1.동기 비동기 => async / await 2.변수 함수가 이상할때 => Hoisting 3.vscode에서 데이터 전송 -> Apollo Client / Mutation 동기 vs 비동기 컴퓨터와 컴퓨터 사이의 데이터를 주고 받기 위해 요청 요청받는 컴퓨터는 그것을 응답 HTTP 글을 등록하고 불러오기를 하는데 안불러와지는 이유는 바로 글등록 요청과 불러오기 요청을 같이한 이유중 하나다. 그것을 바로 비동기 라고한다. 동기는 등록요청을 하면 요청이 될때까지 기다린 뒤 불러오기를 요청한다. 비동기는 동시에 여러일을 할때 사용한다. 동기는 등록 요청을 하면 요청이 완료될때까지 기다리고 불러오기를 요청하는데 비동기는 동..

[알고리즘 테스트] 위장

문제설명 스파이들은 매일 다른 옷을 조합하여 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동근란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날에는 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차열 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 만들어 주세요 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류] 로 이루어져 있습니다. 스파이가 가진의 상의 수는 1개 이상 30개 이하여야 합니다. 같은 이름을 가진 의상은 존재하지 않습니다. clot..

[알고리즘 테스트] 완주하지 못한 선수

문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 pariticpant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 pariticipant completion return ["leo", "ki..

[알고리즘 테스트] 부족한 금액 계산하기

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원인데, 놀이기구를 N번째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이 었다면 2번째에는 200, 3번째에는 300으로 요금을 인상하였습니다. 놀이기구를 count번 타게 되면 현재 자신이 가진 금액에서 얼마가 모자라는지 return 하도록 solution함수를 완성해보세요. 단, 금액이 부족하지 않으면 0을 return 하세요 제한사항 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수 놀이기구의 이용 횟수 count : 1 ≤ c..

[알고리즘 테스트] 숫자 문자열과 영단어

네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도엑 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 = 'one4seveneight' 234567 = '23foursix7' 10203 -> "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌거나, 혹은 바뀌지 않고 그대로인 문자열 's'가 매개변수로 주어집니다. 's'가 의미하는 원래 숫자를 return하도록 solution 함수를 완성하세요 function solution(s) { // answer값을 기본 0으로 선언 let answer = 0; // s라는 매개변수에 숫자를 여단어로 return 해줌 s =..

2022년 01-12 GraphQL의 시작

점점더 포스팅 시간이 늦어지는 것 같은데... 이번 시간 Day 3 목표는 RestAPI vs GraphQL이다. 두 컴퓨터간 데이터 전송을 담당하는 => HTTP 백엔드의 데이터 처리 담당자 => API 데이터 처리 담당자의 2종류 => GraphQL vs Rest API!! HTTP를 정리해보면 HTTP는 하나의 컴퓨터에서 다른 컴퓨터로 request(요청)을하는 작업 중 하나다. Front-end가 입력해놓은 State를 임시 저장해서 백엔드 컴퓨터에 요청한다. 데이터 베이스를 설치하면 표형태의 Execle로 DB에 저장하고 DB는 Beck-end에게 응답결과를 Front-End에게 전해준다. 그런 응답 데이터도 Text 형태의 데이터라고 말할 수 있다. HTTP는 응답(answer) & 요청(re..

[알고리즘 테스트] Javascript 신규 아이디 추천

문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정 개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당 하게 되었습니다. "네오"에게 주어진 첫 임무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력할 경우, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음 카카오 아이디 규칙 입니다. 아이디의 길이는 3자이상 15자 이하일 것 아이디는 알파벳 소문자, 숫자, 뺴기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있스빈다. 단, 마침표(.)은 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. function solution(new_id) 먼저 아이디를 만들기 위해 solution이..

2022년 01-11 Next.js TIL. React!!

오늘은 Next.js와 함께 사용할 React에 대해 배워보았다. 오늘 강의에 3단계 구성은 이렇다. #1. 왜 React인가 => npm trends #2.컴포넌트란? => react-hooks #3.컴포넌트 변수 => State 1. 왜 React인가 React를 요약하자면 대표적인 Front-end 도구 라고 말할 수 있다. React를 포함한 Vue.js, Angular.js 가 대표적인 프론트엔드 언어 중 3가지라고 말할 수 있다. 그래서 왜 많은 사람들이 왜 React를 사용할까? React에는 3가지 개발 플랫폼으로 나눠서 정의할 수 있는데 React.js => 페이스북, 인스타, 트위터, 넷플릭스등 웹에서 최적화된 라이브러리 Reaact-Native => 앱 => 크로스플랫폼 / 안드로이드..

2022년 01-10일 Next.js TIL..

이번교육에서 블로거를 만들기 위한 Next.js에 관해 교육을 받았다. React를 자주 다뤄본 나로써 Next.js를 입문하는데는 그렇게 어려움은 없었다. 기존 css에서 복잡한 스타일링은 쉽게 Styled-components라는 라이브러리를 사용해서 Next.js를 구동해보았고 사실 이전에 Next.js를 직접 다뤄보았는데 개발하는 방식이 복잡했는데 이렇게 간단하고 쉬운줄 몰랐다... 초반 교육에서는 API통신까지는 배우지 않았고 기본적인 웹 구동이나 CSS스타일링 하는 법에 대해 배운뒤 블로그 레이아웃을 설계하는 시간을 가졌다. 수업시간과 남아서 개발하는 시간까지 많은 시간동안 교육을 받았지만 딱히 어려운점은 없었다. 오늘 배운것은 아주 간단한 스타일이고 다음 교육에서는 어떤 기능을 구현할지 기대가..