Front-End

일요일은 놀았으니 오늘 많이 풀겟슴두 8문항 풀었어요! 문제 8. 문자 리스트를 문자열로 변환하기 문제 설명 문자들이 담겨있는 배열 arr가 주어집니다. arr의 원소들을 순서대로 이어 붙인 문자열을 return 하는 solution함수를 작성해 주세요. 입출력 예 arr result ["a", "b", "c"] "abc" 입출력 예 설명 그냥 딱봐도! 배열 합쳐서 문자열 하나로 만들어라~입니다 저의 풀이! function solution(arr) { return [...arr].join(''); } console.log(solution(['a', 'b', 'c'])); 메모 전에 했던 join이라는 메서드를 사용해서 풀어냈습니다. 그리고 전개연산자까쥐 문제 9. 대문자로 바꾸기 문제 설명 알파벳으로 이..

자 2일차입니다. 매일 하는 것이 목표라 화이팅! 작심삼일 안할겁니다요. => 일요일은 쉬자링 ^^ 문제 5. 길이에 따른 연산 문제 설명 정수가 담긴 리스트 num_list가 주어질 때, 리스트의 길이가 11 이상이면 리스트에 있는 모든 원소의 합을 10 이하이면 모든 원소의 곱을 return하도록 solution 함수를 완성해주세요. 입출력 예 num_list result [3, 4, 5, 2, 5, 4, 6, 7, 3, 7, 2, 2, 1] 51 [2, 3, 4, 5] 120 입출력 예 설명 리스트의 길이가 13이므로 모든 원소의 합인 51을 return합니다. 리스트의 길이가 4이므로 모든 원소의 곱인 120을 return합니다. 저의 풀이! function solution(num_list) { ..

알고리즘을 왜 배우고 공부하는가? 에 대해 생각해 보자. 어떤 식의 코드를 사용해야 원하는 방법을 도출할 수 있는지 확인하기 위해 자료 구조를 파악하면서 생각하는 기술 흔히 삽질을 많이 해야 실력이 늘 것이다 하는 것이 어떤 식으로 할지의 상상의 나래를 펼쳐서 시도해 보는 것이라고 생각하면 될 것 같다 ㅎㅎ!! (저의 선생님들께서 하시던 말씀 ㅎㅎ'상상의 나래를 펼쳐라', '삽질이 실력으로 된다'였습니다) 알고리즘을 보게 되면 문제를 먼저 파악하고 어떤 순서로 풀어나가야 할지 생각해야 합니다. 처음엔 어떤 말인지 이해하기 어려울 수 있지만, 문제와 예시를 보면서 도출해야 하는 것도 공부라고 생각됩니다!! 8/4 알고리즘 기초 4문제를 풀었습니다. (풀고 나서 다시 복기하는 것이 좋을 것 같기에 하루 텀으..

거의 12시간 동안 헤매고 헤매서 해낸 ... 배포였습니다 ㅜ ㅜ 까먹지 않기 위해 블로그 작성하겠습니다. S3를 이용하는 이유 aws S3은 버킷이라는 공간에 정적 콘텐츠를 저장하여 인터넷을 통해 접근할 수 있도록 하는 서비스입니다. 간단히 말하면 웹상에 존재하는 하드 공간인겁니다. 다른 자료들을 보다보면 EC2에 배포를 하는 경우도 있는데 (EC2는 작은 컴퓨터라 생각하면 됩니다) 프론트엔드의 정적 콘텐츠를 배포할때에는 S3면 충분하기 때문입니다. CloudFront 로 배포하는 이유 CloudFront 를 사용하지 않고 S3 자체만으로 배포하는 방법도 있습니다. 하지만 S3 로 배포했을 때와 다르게 다음과 같은 장점으로 CloudFront 를 이용하기로 하였습니다. CloudFront 를 이용했을 ..

인터페이스 처음듣는 단어입니다ㅎㅎ 인터페이스란? 상호간에 정의한 약속 혹은 규칙을 의미한다. -객체의 속성과 속성의 타입(스펙) - 함수의 파라미터 - 함수의 파라미터, 반환 타입 등(스펙) - 배열과 객체를 접근하는 방식 - 클래스 type Person = { name : string; age : number; address : string; }; // 위에와 동일한게 인터페이스입니다. interface Person { name : string; age : number; address : string; }; 이렇게 보면 좀 생소하죠 ? 좀 더 쉽게 보자면 ~ 아래와 같습니다. interface 인터페이스이름 { 속성: 타입; } 여러번 정의를 써놓는 것 보다, 하나로 지정해서 JeongSeo라는 속성과..

타입스크립트란? Typescript ? 간단하게 설명하자면, 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 다르게 브라우저에서 실행하기 위해 파일을 한번 변환해 준다. 이 변환 과정은 컴파일(comfile)이라고 부른다. 즉, '타입이 입혀진 자바스크립트' 왜 쓰는가? 에러의 사전 방지 ⛔(변수의 타입이 지정되어 있어 원치 않는 결과를 방지할 수 있다) 코드 자동 완성과 가이드(변수에 대한 타입이 지정되어 있어서 해당 타입에 대한 API를 미리 볼 수 있어 오타를 줄임) 기본 타입 ( 총 12가지로 정의할 수 있다) 1. String let str: string = 'hi'; 2. Number let num: number = 10; 3. Boolean let isLoggedIn: b..

리덕스 미들웨어란? 가장 자주 볼 수 있는 그림이 있습니다. 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다. 리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업은 여러가지가 있습니다. 1. 액션을 단순히 콘솔에 기록하거나 2. 전달 받은 액션 정보를 기반으로 액션을 아예 취소하거나, 3. 다른 종류의 액션을 추가로 디스패치할 수도 있습니다. 보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때 입니다. 예를 들어 리액트 앱에서 우리가 만약 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리하곤 하죠. 리덕스 미들웨어는 누구든지 만들어서 사용 할 수 있습..

이 부분이 제일 어렵고 저는 이해가 안되던 부분입니다. 제 공부를 위해 정리하는 것이니 참고용으로만 봐주시유! 1. Context API 리액트에서는 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기위해 사용된다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트로 즉, 위에서 아래로 한쪽으로 데이터가 흐르게된다. 만약 다른 컴포넌트 쪽에서 한쪽으로 흐르고 있는 데이터를 사용하고 싶을 경우에, 아니면 다른 컴포넌트에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶을때는 공통 부모 컴포넌트에 State를 만들고 사용하고자 하는 데이터를 Props를 전달해서 해야한다. 하지만 매번 공통 부모 컴포넌트를 수정하고 Props로 전달하..

1. 비동기적 - 동기적 일을 하다보니 비동기 작업이라는 말을 많이 보게 된다. 비동기 작업에 대해 다시 한번 이해하고 넘어가자. 동기적 작업 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그 처음에 시작한 요청이 끝나야만 비로소 그 다음 작업을 할 수 있다. 계단형으로 차례로 순서를 기다려야한다 비동기적 작업 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 즉, 중지 상태가 되는 경우가 없어 작업이 즉시 처리한다. 서버 API를 호출할 때 외에도 함수로 하는 경우도 있는데, setTimeout 함수다. function printMe() { console.log('Hello World'..

정말 오랜만에 블로그 작성합니다.. 취직하고 2달간은 정신없이 코드 이해하고, 개발하고 필요한 지식 채워넣고, 이슈 생긴거 수정하고 ㅎㅎ.. 맥북도 처음 써봐서 너무어려웠어요 하하.. 게다가 이사준비까지 정신이 너무없었습니다! 오랜만에 블로그작성에 어떤거를 써야할까하다가, 제가 최근에 어려움을 겪었던 NCP S3배포 관련해서 설명해보려합니다. NCP란? 네이버 클라우드 플렛폼, Naver Cloud Platform 입니다. 보통 배포한다고 하면 AWS를 많이들 알고 있습니다. 저도 AWS S3, CloudFront로만 배포를 해봤어서.. 다른 방식으로 배포하는 것이 두려웠습니다ㅜㅠㅜ NCP 첫 배포, NCP 첫 업로드 등등 구글링을 했을 때 정확하게 설명이 적혀있는 것이 없었기 때문에 저도 나중에 헷갈릴..