본문 바로가기
728x90
반응형

전체 글416

[AWS] EC2 고정 IP 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 EC2 고정 IP 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글을 참고하시면 좋을 것 같습니다. [AWS] EC2 인스턴스 생성하기 고정 IP 사용하는 이유 EC2를 이용해 인스턴스를 만들면 기본적으로 인스턴스마다 매핑되는 IP주소가 존재합니다. 위와 같이 생성된 인스턴스를 확인해보면 퍼블릭 IP주소를 확인할 수 있고 이를 통해 인스턴스에 접속하고는 합니다. 하지만 여기서 문제점은 할당된 IP가 쉽게 변경될 수 있다는 겁니다. 예를 들어 다음과 같이 인스턴스를 우클릭하면 인스턴스 중지, 시작 등의 작업들을 확인할 수 있습니다. 여기서 인스턴스를 중지했다가 시작을 하게 되면 IP값이 이전과 다르게 할당되는 것을 확인할 수 있습니다.. 2022. 1. 15.
[AWS] EC2 인스턴스 생성하기 안녕하세요. J4J입니다. 이번 포스팅은 EC2 인스턴스 생성하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 인스턴스 생성 방법 [ 1. AWS 로그인 → EC2 검색 ] 위와 같이 EC2를 검색하면 서비스 쪽에 EC2를 확인할 수 있고 클릭하면 페이지 이동이 됩니다. [ 2. 인스턴스 시작 ] 우측 상단에 있는 인스턴스 시작을 눌러주시면 됩니다. [ 3. AMI 선택 ] 아래로 스크롤을 살짝만 해주면 Ununtu Server를 확인할 수 있습니다. 현재 일자로 최신 버전인 Ubuntu Server 20.04 LTS를 선택해주면 됩니다. [ 4. 인스턴스 유형 선택 ] 가볍게 프리 티어로 사용하시는 분들은 t2 micro를 선택해주시면 됩니다. 금액을 지불하더라도 필요하다면 다른 유형을 선택하셔도 .. 2022. 1. 14.
[Next] Styled Components 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Styled Components 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Styled Components 사용 방법 [ 1. 패키지 설치 ] $ npm install styled-components $ npm install -D babel-plugin-styled-components // typescript 사용할 경우 추가 $ npm install -D @types/styled-components [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성하여 다음과 같은 설정을 해주시면 됩니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", .. 2022. 1. 11.
[Next] Editor 사용하기 (3) - React Draft Wysiwyg 안녕하세요. J4J입니다. 이번 포스팅은 React Draft Wysiwyg Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (2) - Toast UI 앞선 글들에서 언급했듯이 Next에서 Editor를 사용해보기 위해 다음과 같은 총 3개의 패키지를 확인할 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번엔 개인 순위로 3등으로 생각했던 react-draft-wysiwyg에 대해 소개를 해보겠습니다. 구현 방법과 간단한 특징들에 대해 적어보겠습니다. 이미지.. 2022. 1. 9.
[Next] Editor 사용하기 (2) - Toast UI 안녕하세요. J4J입니다. 이번 포스팅은 Toast UI Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (3) - React Draft Wysiwyg 앞선 글에서 언급했듯이 Editor를 사용해보기 위해 다음과 같이 총 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번에는 이들 중 현재 사용했을 때 두 번째로 괜찮다고 생각한 @toast-ui/react-editor에 대해 소개를 해보겠습니다. 간단한 사용 방법과 제가 경험할 수 있었던.. 2022. 1. 7.
[Next] Editor 사용하기 (1) - React Quill 안녕하세요. J4J입니다. 이번 포스팅은 React Quill Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (2) - Toast UI [Next] Editor 사용하기 (3) - React Draft Wysiwyg Next를 사용하면서 Editor를 구현해야 하는 상황이 생겨 사용할 수 있는 Editor를 찾고 테스트해본 결과 다음과 같이 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 3개를 전부 깊게 사용해보지 않았지만 테스트 코드만 구현해봤을 때 사용성에 있어서 괜찮다고 생각한 순으로 작성해봤습니.. 2022. 1. 6.
[React] Polyfill을 이용하여 IE에서도 동작되게 하기 안녕하세요. J4J입니다. 이번 포스팅은 Polyfill을 이용하여 IE에서 동작되지 않는 서비스를 동작되도록 하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Polyfill이란? Polyfill은 IE와 같은 구형 브라우저에서 동작되지 않는 최신 기능을 동작할 수 있도록 도와주는 기술입니다. Babel에 대해 아시는 분이 계시다면 Babel이 있는데 Polyfill을 왜 사용하지? 라는 생각이 드실겁니다. Babel은 트랜스파일러로써 최신 ES버전에서 나온 여러 기능들을 구형 브라우저가 읽을 수 있는 문법으로 변경시켜주는 역할을 담당합니다. 하지만 여기서 문제는 이전에 없던 기능들이 새로나온 경우입니다. 대표적인 케이스가 ES6에서 등장한 Promise, Map, Set 등이 있습니다. 해당 기술.. 2022. 1. 4.
[React] Vendor Prefix (공급업체 접두사) 설정 안녕하세요. J4J입니다. 이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vendor Prefix (공급업체 접두사) 설정 방법 들어가기에 앞서 webpack과 관련된 패키지들은 최신 버전으로 설치해야 정상적으로 동작됩니다. 제가 설정하는 환경은 webpack 관련 패키지들이 다음과 같기 때문에 참고하시길 바랍니다. { "devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.65.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.7.2" } } [ 1. 패키지 설치 ] $ npm install -D postcss autoprefixer postcss.. 2022. 1. 2.
[Next] 타입 스크립트 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 Next에도 React의 CRA와 동일한 것이 존재합니다. 다음 명령어를 이용하면 Next에 타입 스크립트가 얹어있는 환경을 제공해주기는 합니다. $ npx create-next-app --ts {프로젝트 명} 하지만 저는 기본적으로 나만의 환경을 구축하는 것과 CRA 사용으로 몰랐던 여러 설정 방법을 경험하고 싶다는 이유 등으로 CRA를 사용하지 않고 프로젝트 개발 환경을 구축하고는 합니다. 저와 동일하거나 또는 다른 사유로 인해 CRA로 프로젝트를 생성하고 싶지 않으신 분들은 다음의 절차를 따라 환경을 세팅하시면 될 것 같습니다. [ 1. package.json.. 2021. 12. 30.
[CSS] 메뉴 밑줄 슬라이드 CSS 안녕하세요. J4J입니다. 이번 포스팅은 메뉴 밑줄 슬라이드 CSS에 대해 적어보는 시간을 가져보려고 합니다. 메뉴 밑줄 슬라이드 - 1 여러 웹 사이트 및 앱을 보면 메뉴 바를 많이 확인할 수 있습니다. 그중 몇몇 사이트 및 앱에서는 메뉴 바를 클릭하거나 슬라이드를 하면 메뉴 밑줄이 함께 움직이는 CSS를 봤던 경험이 있었습니다. 해당 디자인도 한번 구현해보고 싶다는 생각을 가지고 있었기에 코드를 짜 보게 되었고 구현한 코드들을 공유하기 위해 글을 남깁니다. 가장 먼저 간단하게 메뉴를 클릭할 경우에만 밑줄 슬라이드가 되도록 구현해보면 다음과 같습니다. (모바일에서 정상 동작되지 않으신 분들은 Rerun을 한번 눌러주시길 바랍니다 ㅠㅠ) See the Pen menu_underline_slide_1 by.. 2021. 12. 30.
[React] Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내는 방법에 대해 적어보는 시간을 가져보려고 합니다. useLazyQuery 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 링크를 확인해보면 다음과 같이 person query를 사용하는 getPerson이라는 함수를 확인할 수 있습니다. const getPerson = (id: number) => { const { loading, error, data } = useQuery(GET_PERSON, { variables: { id, } }) if(loading) return Loading... if(error) return (Error...) retu.. 2021. 12. 28.
[React] GraphQL에서 Fragment 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 GraphQL에서 Fragment 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Fragment란? Fragment는 여러 query에서 사용되는 필드들을 재사용할 수 있도록 도와줍니다. query를 작성하다 보면 중복적으로 사용되는 필드들이 존재하기 마련인데 중복되는 필드들을 각각 다 작성하는 것이 아니라 Fragment를 활용하여 중복을 줄이고 코드를 간결하게 만들어 줄 수 있습니다. Fragment와 관련된 간단한 코드를 작성해보도록 하겠습니다. Fragment 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 또한 해당 글의 스키마는 다음과 같이 구성되어 있습니다. # This directive allows re.. 2021. 12. 27.
[React] Apollo를 이용하여 GraphQL 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo를 이용하여 GraphQL 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 GraphQL을 이용하여 데이터를 가져오는 서버 및 설명은 여기를 참고해주시면 됩니다. 또한 타입 스크립트를 이용하여 설정 및 구현해보도록 하겠습니다. Apollo 환경 설정 [ 1. 패키지 설치 ] $ npm install @apollo/client graphql [ 2. App.tsx에 Provider 등록 ] import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import * as React from 'react'; import Person from './pers.. 2021. 12. 26.
[SpringBoot] GraphQL 설정 안녕하세요. J4J입니다. 이번 포스팅은 GraphQL사용을 위한 환경 설정 방법에 대해 적어보는 시간을 가져보려고 합니다. GraphQL이란? GraphQL은 API를 위한 쿼리 언어로 기존에 서버와 클라이언트 간 데이터 전달을 위해 많이 사용되는 Rest API의 단점들을 보완해줄 수 있는 기술입니다. Rest API의 단점은 다음과 같이 크게 2가지가 있습니다. OverFetching (오버패칭) UnderFetching (언더패칭) OverFetching은 클라이언트에서 실제로 사용되는 데이터만 불러오지 않고 사용되지 않는 데이터도 함께 불러옴으로 써 리소스의 낭비를 발생시키는 것을 의미합니다. 예를 들어 사용자 정보 중 사용자 아이디를 화면에서 사용하기 위해 API를 요청하게 되면 일반적으로 사.. 2021. 12. 23.
[React] 무한 스크롤(Infinite Scroll) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 무한 스크롤(Infinite Scroll)을 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Infinite Scroll이란? Infinite Scroll은 화면에서 페이징 기법을 적용하기 위해 사용하는 방법 중 하나로 모든 데이터를 조회할 때까지 무한정 스크롤하는 기법을 의미합니다. Infinite Scroll과 비교되는 가장 대표적인 것은 페이지네이션이 있습니다. 페이지네이션은 우리가 정말 친근하게 많이 보던 화면으로 게시판 같은 곳에 접속을 하게 되면 하단에 페이지 번호가 존재하는 페이징 기법입니다. 하지만 Infinite Scroll은 페이지네이션과 달리 페이지 번호가 따로 존재하지 않고 페이지네이션에서 다음 번호를 클릭해야 되는 동작을 단순히 계.. 2021. 12. 19.
[21년 하반기] 네이버 공채 1차 면접 후기 일정 코딩 테스트 합격 연락 → 10/29(금) 전체 면접 일정 안내, 면접 키트 배송지 입력, 인성 검사 관련 연락 → 10/29(금) 면접 키트 배송지 입력 마감 기한 → 10/31(일) 인성 검사 마감 기한 → 11/1(월) 이메일로 면접 세부 일정 안내 → 11/5(금) 면접 일정 → 11/10(수) ~ 11/16(화) 문자로 면접 결과 연락 → 11/25(목) 공부 방법 상반기에도 네이버 1차 면접을 갔던 경험이 있었기 때문에 경험을 토대로 이번에 집중적으로 공부했던 것은 다음과 같습니다. 프로젝트 경험 정리 CS지식 정리 창의 수리 풀이 연습 [ 프로젝트 경험 정리 ] 상반기 때 면접을 봤을 때는 프로젝트와 관련된 질문을 한 번도 받은 적이 없어서 프로젝트 경험을 정리하는 것에 많은 시간을 투.. 2021. 12. 19.
[21년 하반기] 네이버 공채 코딩 테스트 후기 일정 서류 기한 → 9/17(금) ~ 9/29(수) 문자로 코딩 테스트 대상자 연락 → 10/5(화) 메일로 코딩 테스트 관련 세부 안내 → 10/6(수) 시험 일정 → 10/9(토) 10:00 ~ 12:00 문자로 시험 결과 연락 → 10/29(금) 공부 방법 사실 이번 네이버 공채 코딩 테스트를 위해 준비한 것은 따로 없습니다. 이직을 하는 입장이다 보니 알고리즘보다 다른 것에 더 투자하고 싶은 생각이 컸던 부분도 있었고 앞서 카카오 코딩 테스트를 치르기 위해 공부했던 것이 있었기 때문에 그것을 기반으로 해서 문제를 풀자는 생각으로 따로 준비를 하지는 않았습니다. 하지만 만약 제가 공부를 해야 된다고 한다면 프로그래머스에 있는 문제들을 푸는 방향을 선택할 것 같습니다. 이전에 제가 프로그래머스로 알고.. 2021. 12. 16.
[21년 하반기] 카카오 공채 1차 면접 후기 일정 2차 코딩 테스트 합격 연락 → 10/14(목) 자기소개서 작성 및 회사 소개와 부가 정보들을 얻을 수 있는 미리 만나보는 카카오 행사 안내 → 10/14(목) 자기소개서 마감 기한 → 10/19(화) 미리 만나보는 카카오 행사 → 10/16(토) 14:00 ~ 18:00 (불참 가능) 이메일로 면접 세부 일정 안내 → 10/21(목) 면접 일정 → 10/26(화) ~ 10/29(금) 카톡 및 이메일로 면접 결과 연락 → 11/3(수) 공부 방법 아무래도 1차 면접은 기술면접이다 보니 면접 준비를 위해 집중적으로 공부해야겠다고 생각한 것은 다음과 같습니다. 프로젝트 경험 정리 CS지식 정리 2차 알고리즘 테스트 정리 [ 프로젝트 경험 정리 ] 프로젝트 경험 같은 경우는 최근에 진행했던 프로젝트 위주.. 2021. 12. 8.
728x90
반응형

티스토리툴바