프로그래밍 공부하기

코딩테스트 연습 - 가장 긴 팰린드롬 앞뒤를 뒤집어도 똑같은 문자열을 팰린드롬(palindrome)이라고 합니다. 문자열 s가 주어질 때, s의 부분문자열(Substring)중 가장 긴 팰린드롬의 길이를 return 하는 solution 함수를 완성해 주세요. 예를들 programmers.co.kr 팰린드롬은 앞뒤를 뒤집어도 똑같은, 예를 들어 '토마토' 같은 문자열이다. 문자열을 주면 가장 긴 팰린드롬을 찾는 문제이다. 1. 문제 분석 문제의 핵심은 어떤 문자열이 회문임을 알면 해당 문자열의 앞뒤 글자만 확인하면 더 긴 회문이 있는지 확인할 수 있다는 점이다. 예를 들어 위처럼 'abcba' 문자열에서 길이 1인 회문 'c'를 찾았다고 해보자. 이 때 c 앞뒤의 문자열을 보면 더 긴 회문이 존재하는지 ..

AWS에 배포를 무사히 했음에도 불구하고 새로고침 발생 시 에러가 Access Denied가 발생할 수 있다. 원인에는 여러가지가 있을 수 있지만 나의 경우 서버에 없는 페이지를 요청하면서 에러가 발생하였다. 내 웹페이지는 SPA이지만 검색 기능 사용 시 뒤로가기했을 때 이전 키워드 검색 결과가 나오게 하기 위해서 주소창에 검색 키워드를 넣었더니 새로고침시 위 오류가 발생하였다. 이 오류는 에러가 발생했을 때 페이지를 다른 곳으로 Redirect 시키는 것으로 해결할 수 있다. 배포환경에 따라 조금 다른데 먼저 S3에만 배포했다면 S3 > 속성 >정적 웹 호스팅에서 에러가 발생했을 때 반환될 오류문서를 지정해주면 된다. 만약 클라우드 프론트까지 배포를 했다면 CloudFront > Error Pages ..

1. HTTP 1.1 HTTP는 인터넷에서 문서를 교환하기 위하여 사용되는 통신규약(Protocol)으로, tcp를 사용한다. 과거 HTTP 0.9에서는 GET요청뿐이었으며, HTML 문서만 주고 받았다. HTTP 1.0에서는 헤더와 응답코드가 생겼으며, POST, HEAD 메소드가 생겼다. 헤더 'Content-Type'로 HTML 파일 이외의 다른 문서들도 전송이 가능해지고, 응답코드로 성공과 실패를 바로 확인할 수 있게 된 것이다. 그러나 같은 요청을 여러 번 하더라도 매번 새로운 연결을 하므로 성능이 저하되고, 헤더가 중복되므로 서버 부하 비용이 크다는 문제가 있었다. HTTP 1.1은 OPTIONS, PUT, DELETE, TRACE 메소드가 추가되었으며, Accept(클라이언트의 사용가능 미디..

웹 서버를 구축할 때 웹 서버 외에도 프록시 서버도 함께 구축하는 경우가 있다. 프록시 서버는 무엇이고 왜 구축하는 것일까? 프록시 서버에 대해 알아보자. 1. Proxy Server Proxy는 대리인이라는 뜻이다. Proxy Server란 대리인 역할을 하는 서버로, 클라이언트와 서버 간의 데이터를 중계하는 역할을 한다. 즉, 클라이언트와 서버간 데이터 통신을 위해서 데이터가 반드시 프록시 서버를 거쳐야하는 것이다. 프록시 서버는 위치에 따라 Forward Proxy, Reverse Proxy로 나뉜다. 구체적으로는 Forward Proxy는 클라이언트의 내부망에 존재(LAN -> WAN 중계)하고, Reverse Proxy는 보통 서버의 내부망 밖(WAN -> LAN 중계)에 있으며, 사용자 요청을..

es8 문법인 async / await을 사용하면 'regeneratorRuntime is not defined' 라는 에러가 발생한다. 이 때는 추가적인 플러그인을 설치하여 적용하면 된다. npm install --save-dev @babel-plugin-transform-runtime npm install --save @babel-runtime babel-plugin-transform-runtime과 babel-runtime을 설치한다. 이 때 babel-runtime은 --save 옵션으로 설치해야한다. module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js$/, exclude: /node_mo..

1. Props Drilling React에서 props로 컴포넌트간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 할 때가 있다. 위 그림에서 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해선 사이에 있는 컴포넌트 B를 거쳐야하는 것처럼 말이다. 이것이 Props Drilling(혹은 Threading)이다. Props Drilling은 데이터 전달을 구현하는 가장 단순한 방법이지만 코드를 이해하기 어렵게 만든다. 그림을 다시 보자. 데이터 전달을 위해 컴포넌트 B는 필요하지 않은 데이터를 갖게되다. 또한 컴포넌트 A에서 B로 전달될 때와 B에서 C로 전달될 때 Property 이름이 변경된다면 어떨까? C에서 문제가 생겼을 때 해당 프라퍼티가 어디서 온..

프로그래밍이란 문제를 정의하고 해결해나가는 과정이다. 만약 문제가 너무 복잡하고 큰 문제라면 어떻게 해야할까? 일반적으로 문제를 작은 부분으로 쪼개어 하나씩 풀어나갈 것이다. 이 때 문제를 작은 부분으로 쪼개나가는 것을 모듈화라고 한다. 모듈은 프로그램의 일부로, 독립적인 기능을 갖는 단위이다. 따라서 독립적으로 컴파일 가능한 프로그램 혹은 하나의 함수도 모듈이 될 수 있다. 일반적으로 모듈의 독립성이 높을수록 좋은 모듈이라고 한다. 일반적으로 독립성이 높은 모듈이 재사용성이 높고 코드의 이해/수정이 용이하기 때문이다. 이 때 모듈의 독립성은 결합도와 응집도로 측정한다. 응집도는 한 모듈 내의 구성요소들 간의 연관 정도를 의미하고, 결합도는 모듈과 모듈 간의 의존 정도를 의미한다. 응집도는 강할수록, 결..

https://www.youtube.com/watch?v=fMunhPQPZA4 영상1. UI/UX 차이 https://www.youtube.com/watch?v=GR375Na17hU 영상2. UX 디자인 과정 나는 개발자가 개발만 하는 것이 전부는 아니라고 생각한다. 개발자는 팀의 일원으로서 공동의 목표(제품으로 수익창출)를 위해 다른 팀과도 의견을 나누고 협업해나가야 한다. 여러 사람이 협업을 하는 이유가 무엇일까? 분업이라는 측면도 중요하지만 의견을 나누면서 혼자서는 발견하지 못하는 새로운 아이디어를 발견하고 발전시킬 수 있기 때문이라 생각한다. 기능 요구사항에 대해 기능은 구현했지만 UX를 해치게 된다면 무슨 소용일까? 혹은 UX에 대한 이해를 바탕으로 구현이 불가능한 요구사항에 대해 UX를 해치지..

(function () { console.log('Hello!!') })(); // Hello!! JS 코드를 보다보면 위와 같은 형식의 코드를 볼 수 있다. 위와 같은 문법은 IIFE(Immediately Invoked Function Expression)이라고 하며, 괄호로 둘러싸인 익명함수와 함수를 실행하는 괄호를 연결하여 함수가 정의되자마자 실행되게 한다. 즉시 실행 함수 표현이라고도 한다. 일단 함수 선언식과 표현식에 대해 알아보자. 1. 함수 선언문과 표현식 //함수 선언문 function fn1() { console.log("Hello!"); } //함수 표현식 - 익명 const fn2 = function() { console.log("Hello!"); } //함수 표현식 - 기명 cons..

재선언 재할당 Scope var 가능 가능 Function let 불가능 가능 Block const 불가능 불가능 Block JS를 사용할 때 var, let, const의 차이를 구분하여 사용하고 있는가? 막연하게 var는 예전 방식이니까 쓰지 말아야지 라는 생각을 갖고있진 않는가? 오늘은 var, let, const의 차이에 대한 이야기를 해보겠다. 이 포스팅을 요약하면 위의 표와 같다. 1. 선언과 할당 var a = 'str'; var a = 0; //OK let b = 'str'; let b = 0 //Error! 재선언이라는 것은 변수를 다시 선언한다는 의미이다. 위 코드처럼 var는 같은 이름의 변수를 여러번 선언할 수 있다. 그러나 let, const는 단 한번만 선언 가능하며 재 선언시 ..