박레고의 이야기

사전 준비 - iterms2- homebrew- zsh(oh-my-zsh) 1.  jenv 설치brew install jenv 2.  환경 변수 설정echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrcecho 'eval "$(jenv init -)"' >> ~/.zshrcsource ~/.zshrc 3.  jenv export plugin 설정jenv enable-plugin export 4.  jenv 설치 확인 jenv 아래와 같이 나오면 정상 설치가 된 것이다.jenvjenv 0.5.7Usage: jenv []Some useful jenv commands are: commands List all available jenv commands ..

웹 개발을 하다 보면 항상 마주치는 순간이 CORS(Cross-Origin Resource Sharing) 에러이다. 클라이언트 서버와 API 서버의 포트가 다르면 자주 발생하는 에러이다. 그래서 에러가 발생하는 순간 '아! 이건 서버에서 처리를 해주어야겠다' 생각이 들 것이다. 간단한 해결 방법으로, Access-Control-Allow-Origin을 이용해 서버 측에서 클라이언트의 포트를 열어주면 된다. 하지만, 우리가 원하는 것은 로그인 이후의 동작 등과 같이 인증과 관련된 데이터를 담거나 받고 싶을 때이다.  withCredentials Option 기본적으로 브라우저가 제공하는 요청 API 들은 별도의 옵션 없이 인증과 관련된 데이터를 함부로 요청 데이터에 담지 않도록 되어있다. 이는 응답을 받..

로그인 한 유저가 세션이 만료가 되었을 때, 새로 로그인을 할 수 있도록 리다이렉트 처리를 해야한다. 레거시 코드에서는 페이지 이동을 할 때 마다 세션을 체크하고 있으므로 세션이 만료가 되면 강제로 새로고침을 하여 새로 고침에 의해 로그인 페이지로 강제 이동 시키고 있었다. (보안 상의 이유로...) window.location.href = window.location.href 자바스크립트에서 현재 페이지의 URL을 다시 로드하는 코드로 대체로 페이지를 강제로 새로 고침하고 싶을 때 사용될 수 있다. 그렇다면 브라우저에서 자바스크립트를 사용하여 페이지 이동하는 방법들을 살펴보자. window.location.href 페이지의 URL을 설정하거나 변경할 수 있다.// 다른 페이지로 이동window.loca..

입사할 때에는 프론트엔드 개발자(리액트)였지만, 이번 프로젝트에서는 앵귤러 + 자바(스프링 부트)로 된 프로젝트를 개발하게 됐다. 프론트를 시작하면 package.json을 먼저 살펴보듯이 application.yml을 먼저 살펴보았다. 파이썬처럼 Indent로 구분하나 보군.string은 큰 따옴표("")로 묶지 않아도 되는구나.대시(-) 있는 것과 없는 것의 차이는 뭘까?... 문법이 궁금해졌다. YAML 파일이란? YAML 파일은 .yml 또는 .yaml 확장자를 사용하며 특정 구문 규칙을 따른다.[.yaml 과 .yml 차이점]결론부터 말하자면 yaml과 yml파일 확장자는 모두 해석 및 구문이 동일하다.이렇게 분리된 이유는, 옛날 Windows에서 Extensions는 파일확장자가 3자로 제한되..

React Native의 기본 Button 컴포넌트React Native는 기본적으로 Button 컴포넌트를 제공합니다. 하지만 이 컴포넌트는 웹 개발에서 흔히 사용 되는 button 요소와는 다소 차이가 있습니다. Alert.alert('Simple Button pressed')}/> 기본 Button 컴포넌트의 주요 특징은 다음과 같습니다.필수 props로 title과 onPress를 요구합니다.사용자 정의 스타일링에 제한이 있습니다.그나마 스타일링 할 수 있는 방법이 color prop인데, 동작 방식이 iOS와 Android에서 다르게 적용됩니다.Android에서는 버튼의 배경색iOS에서는 텍스트의 색상이러한 제한으로 인해, 더 유연한 버튼 구현을 위해 다른 대안들이 필요하게 되었습니다.React..

반응형을 구현할 때, 해당 요소가 너무 큰 경우에는 flex를 사용하여 자연스럽게 떨어지게 하거나 미디어쿼리를 사용하여 해당요소를 작게 하는 등 여러 가지 방법을 이용하여 구현한다. 하지만 다른 사람의 작업물이거나 복잡하게 구현되어 있는 경우에는 어디서 부터 손을 대야 할지 감이 잡히지 않을 때가 있다.더군다나 반응형을 구현하기 위해 디바이스별로 정해놓은 구간이 있는 상황에서 새로 레이아웃을 획정해야 하는 경우에는 난감한 경우가 발생한다. 애매한 구간에서만 동일한 비율로 간단하게 줄일 수 있다면 좋을 텐데 말이다.이러한 경우에 간단하게 css의 zoom 프로퍼티를 사용하면 된다. zoom : 0.5; // 50% 촉소zoom : 1; // 기본 zoom : 2; // 2배 확대 미디어쿼리를 사용하..

전체 wrapper에 백그라운드 이미지를 주고, 스크롤했을 시 고정이 되게 하고 싶었다.결론을 먼저 말하자면 한 줄의 코드로 이 기능이 구현되었다.background-attachment: fixed; -scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성.-fixed : 스크롤 시 보이는 페이지와 다르게 배경 이미지는 고정되는 속성. 하지만 모바일 브라우저에선 사용할 수 없고, 가끔 버벅거리는 듯한 느낌을 주며 스크롤이 내려간다. 해결 방법 - 배경 레이어를 따로 나누어서 적용하기//HTML // 배경 처리할 레이어를 따로 분리 // CSS.bg { position: fixed; // 배경 이미지가 아닌 배경 레이어를 고정 top: 0; ┓ left: 0;..

자바스크립트에서 this는 심심치 않게 나온다. this에 대하여 설명하라고 하면, 머리로는 아는데 말로 표현하기가 어렵다. 지금은 사용하지 않지만 예전에 React를 클래스형 컴포넌트로 생성할 때에도 종종 등장했던 부분이다. 그래서 this에 대하여 간략하게 정리하고자 한다.  자바스크립트에서 this는 인스턴스 자신을 가리키는 참조변수이다. 이렇게 말하는 것이 가장 쉽게 이해되는 문장인 것 같다. 다른 언어에서(자바같은)도 this가 존재하는데 자바스크립트에서는 함수를 호출하는 객체에 대한 참조이다. 이것은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 방식 때문이라고 한다. (말 나온 김에 객체지향 프로그래밍에 대해서도 포스팅해야겠다)this는 함수가 호출되는 방식에 따라 값을 다르게 가지게 된다..