본문 바로가기
728x90
반응형

전체 글416

[21년 하반기] 카카오 공채 2차 코딩 테스트 후기 일정 1차 코딩 테스트 합격 연락 및 2차 테스트 관련 내용 안내 → 9/17(금) 모의 테스트 → 9/24(금) 16:30 ~ 17:30 (불참 가능) 시험 일정 → 9/25(토) 12:30 ~ 19:00 (입장 마감 13:20) CS 테스트 → 13:30 ~ 13:50 알고리즘 테스트 → 14:15 ~ 19:00 카톡 및 이메일로 시험 결과 연락 → 10/14(목) 공부 방법 2차 코딩 테스트는 1차 코딩 테스트와 다른 점이 다음과 같이 있습니다. 간단한 CS시험 Rest API를 이용한 알고리즘 문제 풀이 먼저 CS시험 같은 경우는 사실 따로 공부하지 않았었습니다. 비중도 작을 뿐더러 10문제밖에 출제되지 않기 때문에 그 시간에 오히려 2차 알고리즘 문제 풀이와 관련된 공부를 하자는 마음으로 공부를.. 2021. 12. 6.
[21년 하반기] 카카오 공채 1차 코딩 테스트 후기 일정 서류 기한 → 8/19(목) ~ 9/6(월) 메일로 코딩 테스트 관련 연락 → 9/8(수) 시험 일정 → 9/11(토) 14:00 ~ 19:00 카톡 및 메일로 시험 결과 연락 → 9/17(금) 공부 방법 제가 선택한 공부 방법은 이전 카카오 코딩 테스트 문제 리스트들을 풀어보는 것입니다. 프로그래머스에 가보면 이전에 출제되었던 리스트들이 있는데 Level 2 ~ Level 4에 해당하는 문제들 위주로 해서 문제들을 풀었습니다. 사실 이직을 하는 입장이다 보니 알고리즘에 많은 시간을 투자하기 싫어 이번 시험 준비를 할 땐 몇 문제 풀지 않았지만 개인적으로 관련된 모든 문제를 풀 수 있을 정도까지 반복적으로 문제를 풀어보는 것을 추천드립니다. 다른 문제들 푸는 것 없이 카카오에 출제되었던 모든 문제들.. 2021. 11. 25.
[React] 리액트에서 Smooth Scrollbar 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 리액트에서 smooth scrollbar 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Smooth Scrollbar 사용 방법 스크롤을 할 때 사용자들에게 보다 좋은 UI를 제공해주기 위해 smooth scrollbar을 사용하고는 합니다. 최근 리액트를 이용하여 개발하다가 smooth scrollbar를 적용했던 적이 있는 데 사용 방법에 대해 간단히 글을 남겨보고자 합니다. [ 1. 패키지 설치 ] $ npm install smooth-scrollbar [ 2. App.jsx 파일 수정 ] smooth scrollbar 적용을 위한 설정을 추가해보도록 하겠습니다. 또한 스크롤이 잘 되는지도 확인해봐야 되니 스크롤이 될 수 있도록 div들을 여러개 .. 2021. 11. 20.
[React] 타입 스크립트에서 dotenv 자동완성 기능 만들기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트에서 dotenv 자동완성 기능 만드는 방법에 대해 적어보는 시간을 가져보려고 합니다. dotenv 자동완성 기능 만드는 방법 dotenv를 사용하다 보면 느끼는 점 중 하나는 자동완성이 되지 않기 때문에 파일에 찾아가 사용할 변수를 복사하는 작업을 매번 해줘야 합니다. 만약 dotenv에 자동완성이 된다면 이런 불편한 행동들을 매번 해줄 필요가 없을 것이라고 생각되었고 타입 스크립트에서 자동완성 기능을 사용하는 방법에 대해 알게 되어 글을 적어보게 되었습니다. 기본적으로 dotenv를 사용하는 환경이 구성되어 있다는 가정하게 추가 설정을 해보도록 하겠습니다. [ 1. .env 파일에 사용할 변수 저장 ] MY_KEY=keykeykeykey API_K.. 2021. 11. 17.
[React] CRA로 만들지 않았을 때 dotenv 사용 방법 (index.html 포함) 안녕하세요. J4J입니다. 이번 포스팅은 cra로 만들지 않았을 때 dotenv 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. dotenv란? dotenv는 리액트에서 사용할 수 있는 환경변수 파일로 개발에 사용되는 여러 key값들과 같이 중요하면서 동시에 민감한 정보들을 저장해두는 파일입니다. 파일명은 .env로 일반적으로 폴더 최상단에 위치합니다. (package.json과 동일 위치) 중요 정보들을 해당 파일에 저장하는 이유는 수정된 파일들을 git과 같은 코드 관리 도구에 올릴 때 .gitignore 파일에 등록하여 서버에 업로드되지 않도록 하기 때문입니다. 그러므로 외부에 노출되지 않게 되고 그에 따라 보안성이 높아지게 됩니다. CRA로 만들지 않았을 때 dotenv 사용 방법 일반적.. 2021. 11. 16.
[Spring] Filter를 이용하여 Request Parameter 조작하기 안녕하세요. J4J입니다. 이번 포스팅은 filter를 이용하여 request parameter를 조작하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 최근 회사 업무를 수행하다가 클라이언트로부터 전달받은 parameter를 조작해야 되는 상황이 생겼었습니다. 대표적인 케이스가 parameter 암호화입니다. 보안성을 높이기 위해 클라이언트에서 리소스를 암호화하여 전달하고는 하는데 서버에서 전달받는 리소스마다 복호화하게 될 경우 불필요하고 반복적인 작업이 많아지게 됩니다. 이를 보완하고자 request를 조작하는 filter를 등록하여 클라이언트에서는 암호화된 리소스를 전달했지만 스프링의 비즈니스 로직 구간에서 데이터를 전달받았을 땐 복호화가 되어있도록 하여 재사용성을 높이는 방향을 생각하게 되었습니.. 2021. 11. 11.
[Java] SHA 암호화 알고리즘 안녕하세요. J4J입니다. 이번 포스팅은 sha 암호화 알고리즘에 대해 적어보는 시간을 가져보려고 합니다. SHA란? sha는 secure hash alogirthm의 약자로 해시를 이용한 암호화 알고리즘입니다. sha는 크게 다음과 같이 나뉩니다. sha-0 sha-1 sha-2 sha-0은 최초로 만들어진 sha함수를 일컫는 말입니다. 그리고 이후로 sha-0을 변형하여 등장한 것이 sha-1입니다. 여기서 또다시 변형이 이루어져 sha-224, sha-256, sha-384, sha-512 등의 암호화 방식이 등장했는데 이들을 sha-2라고 일컫습니다. sha-0과 sha-1은 160비트의 해시값을 만들어내는 방식이고 특히 sha-1은 SSL, TLS, SSH 등의 많은 프로토콜과 프로그램에서 사용.. 2021. 11. 8.
[Java] NodeJS와 매핑되는 AES 암호화 (Feat. React) 안녕하세요. J4J입니다. 이번 포스팅은 자바에서 노드와 매핑되는 aes암호화 방식에에 대해 적어보는 시간을 가져보려고 합니다. AES 암호화 회사에서 업무를 보던 도중 react에서 aes암호화 처리가 된 데이터를 spring에 넘겨주고 spring에서 복호화를 하여 데이터를 확인해야 하는 상황이 생겼었습니다. aes암호화를 하는 방법은 검색을 해봤을 때 정말 여러 가지 방법이 있는 것으로 확인되지만 react는 react에서만, spring은 spring에서만 서로 암복호화가 되었습니다. 문제를 해결하기 위해 여러가지 시도를 해봤고 그중 발견한 방법에 대해 글을 남겨놓으려고 합니다. 우선 aes 암호화 방식은 aes128, aes192, aes256 등의 방식들이 존재하는데 key의 길이가 길어질수록.. 2021. 11. 2.
[Svelte] Style Class 지시어 바인딩 안녕하세요. J4J입니다. 이번 포스팅은 style을 적용시킬 수 있는 class 지시어 바인딩에 대해 적어보는 시간을 가져보려고 합니다. Style Class 지시어 바인딩 화면을 개발하다 보면 요소마다 스타일을 적용하기 위해 html 태그들에 class를 사용하는 경우가 있습니다. 일반적으로 class가 사용될 경우 적용될 style을 정의하고 다음과 같이 사용하고는 합니다. 또한 개발하다 보면 특정 경우에만 style이 적용되게 해야 하는 상황도 발생됩니다. react로 개발할 때는 보통 3항 연산자를 이용하여 다음과 같이 코드를 작성하고는 했습니다. 하지만 svelte에서는 3항 연산자를 사용하지 않고 class 지시어 바인딩을 이용하여 보다 깔끔하게 코드를 작성할 수 있습니다. 관련된 예시 코드.. 2021. 10. 30.
[Svelte] 조건문과 반복문 안녕하세요. J4J입니다. 이번 포스팅은 조건문과 반복문에 대해 적어보는 시간을 가져보려고 합니다. 조건문과 반복문 react, vue 등에도 각자 조건문과 반복문을 사용하는 방법이 있듯이 svelte에서도 svelte만의 조건문과 반복문 사용 방법이 있습니다. 조건문은 if-else문, 반복문은 each-else문을 활용하여 만들어줄 수 있습니다. 조건문과 반복문은 개발을 하기 위해 어떤 곳에서든 사용되는 것이기 때문에 설명 필요 없이 svelte에서 사용되는 예시 코드를 보여드리겠습니다. toggle1 = !toggle1}>Toggle1 toggle2 = !toggle2}>Toggle2 {#if toggle1 === true} toggle1 is true {:else if toggle2} toggle.. 2021. 10. 25.
[React] recoil 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 recoil 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Recoil이란? recoil이란 react에서 사용할 수 있는 자체적인 상태 관리로 기존에 사용되던 redux, mobx와 같이 외부 라이브러리에 의존하지 않고 react 스럽게 개발할 수 있도록 도와줍니다. - redux에 대한 추가적인 정보는 여기를 - mobx에 대한 추가적인 정보는 여기를 참고해주세요. 실제 찾아보거나 계산해본것은 아니지만 react에서 현재까지 가장 많이 사용되고 있는 상태 관리는 redux라고 생각합니다. 하지만 redux에는 보일러 플레이트라는 많은 개발자분들이 불만을 토로하는 문제가 있습니다. store를 구성하기 위해서는 복잡하고 많은 코드들을 구성해야 되서 사.. 2021. 10. 24.
[Svelte] 반응성 안녕하세요. J4J입니다. 이번 포스팅은 반응성에 대해 적어보는 시간을 가져보려고 합니다. 반응성 반응성은 값을 탐지하고 있다가 데이터가 변화되는 상황이 생기면 특정 기능이 수행될 수 있도록 하는 것으로 FE 개발을 할 때 효율적으로 개발할 수 있도록 도와줍니다. react를 이용하여 개발할 때는 useEffect 등에 deps를 지정하여 반응성을 만들어줄 수 있었고 svelte 또한 동일하게 반응성을 만들 수 있는 기능이 있습니다. svelte에서 반응성을 만들어주는 방법은 간단하게 표현하면 다음과 같습니다. $: [...deps], {함수} 설명을 추가적으로 해드리면 deps에는 반응성을 위해 탐지될 변수를 넣어주면 되고 함수에는 deps에 해당하는 값이 변경될 때 실행될 함수를 넣어주면 됩니다. 또.. 2021. 10. 22.
[Svelte] props 사용하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 props 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 부모 → 자식 props 전달 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방법은 다른 SPA 기술들과 유사하게 사용됩니다. 다만 제가 공부해왔던 react랑 비교해 봤을 때 차이점을 가지는 것은 다음과 같습니다. 부모와 자식에서 사용되는 변수 이름이 동일할 경우 일부 생략하여 작성 가능 자식이 props를 전달받는 방법은 export를 사용 위의 차이점을 생각하며 다음 예시 코드를 확인해보겠습니다. 우선 App.svelte파일에 다음과 같이 코드를 작성하겠습니다. 그리고 App.svelte와 동일한 경로에 Child.svelte를 생성하여 다음과 같이 코드를 작성해보겠습니다. name.. 2021. 10. 20.
[Svelte] 데이터 바인딩과 요소 바인딩 안녕하세요. J4J입니다. 이번 포스팅은 데이터 바인딩과 요소 바인딩에 대해 적어보는 시간을 가져보려고 합니다. 데이터 바인딩 데이터 바인딩은 크게 두 가지로 단방향 바인딩과 양방향 바인딩이 있습니다. 단방향 바인딩은 말 그대로 한 방향으로만 데이터가 바인딩되는 것을 의미합니다. input태그를 예시로 들면 컴포넌트가 마운트 되었을 때 가지고 있던 데이터가 input 태그에 표시되고 input 태그에 값을 입력해도 기존의 데이터는 변경이 되지 않습니다. 양방향 바인딩도 말 그대로 양방향으로 데이터가 바인딩 되는 것을 의미합니다. 이 또한 input태그로 예시를 들면 컴포넌트가 마운트 되었을 때 가지고 있던 데이터가 input 태그에 표시가 동일하게 되고 단방향과 달리 input 태그에 값을 입력하면 입력.. 2021. 10. 18.
[Svelte] 전역 SCSS 등록하기 안녕하세요. J4J입니다. 이번 포스팅은 전역적으로 사용될 scss 등록하는 방법에 대해 적어보는 시간을 가져보려고 합니다. scss를 이용하여 개발하다 보면 @import를 이용하여 다른 scss 파일에 정의된 내용들을 가져다 사용하는 경우가 있습니다. 하지만 이런 scss파일들 중 전역적으로 사용되는 파일들이 존재하기 마련인데 이런 상황이 생기게 되면 scss가 사용되는 모든 파일에 @import를 이용하여 로드를 해줘야 됩니다. 이것은 만약 사용되는 파일명이 변경하게 되면 모든 파일들을 수정해줘야 되는 불상사가 발생할 수가 있는데 이런 일들을 간단하게 해결하고자 전역적으로 등록해주는 방법이 존재합니다. 전역으로 등록하게 되면 다음과 같은 이점이 생길 것이라고 생각합니다. @import를 모든 파일에.. 2021. 10. 17.
[Svelte] Emmet(에밋) 적용되지 않을 경우 안녕하세요. J4J입니다. 이번 포스팅은 svelte파일에서 emmet이 적용되지 않을 경우 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. emmet은 프론트 개발을 할 때 html태그들을 간편하게 적을 수 있도록 도와주는 플러그인입니다. 이번에 설정해 볼 IDE이기도 하면서 대부분의 프론트 개발자분들이 많이 사용하는 것이 vscode인데 vscode에서는 자체적으로 emmet을 지원해주기 때문에 다른 특정 행동들을 하지 않아도 사용할 수 있습니다. 또한 svelte로 개발할 때도 당연히 html태그들을 작성하기 때문에 emmet을 사용할 수 있습니다. 하지만 emmet이 적용되지 않는 분들이 계실수도 있어서 해당 글을 적어봅니다. 참고적으로 저 같은 경우는 아무런 설정없이도 svelte파일에.. 2021. 10. 13.
[Svelte] Production에서 콘솔 출력 방지 안녕하세요. J4J입니다. 이번 포스팅은 production 모드일 때 콘솔 출력 방지하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 프론트 개발을 하면서 데이터들을 확인하기 위해 콘솔 창에 관련 값들을 출력하는 것은 자주 하는 행동입니다. 하지만 이런 데이터들 중 사용자들에게 노출되면 안되는 데이터들도 들어있기 마련입니다. 노출되면 안된다는 생각을 가지고 있기에 배포할 때는 관련 코드들을 제거하기는 하지만 항상 완벽하게 할 수는 없는 일이고 매번 배포할 때마다 콘솔 창에 출력시켜주는 코드들을 찾아 제거하거나 주석처리하는 것도 번거로운 작업 중에 하나가 됩니다. 이런 문제를 해결하기 위해 development 모드일 때만 콘솔 창에 데이터를 출력하는 코드가 정상적으로 동작하고 production 모.. 2021. 10. 12.
[Svelte] 경로 Alias 설정 안녕하세요. J4J입니다. 이번 포스팅은 경로 alias 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. svelte에 한정된 것은 아니지만 개발을 하다 보면 모듈화 되어 있는 다른 컴포넌트 또는 이미지 등의 파일들을 로드해올 때 보통 상대 경로로 로드합니다. 예를 들면 이런식으로 표현이 되죠. import MyComponent from '../components/MyComponent.svelte'; 하지만 이런 표현들은 만약 파일의 위치를 옮기는 상황이 발생되면 경로들을 다시 수정해줘야 합니다. 이런 상황들을 방지할 수 있는 것이 경로 alias 설정을 하는 것입니다. 경로 alias에 대한 예를 간단히 들면 보통 소스 파일들이 저장되는 src에 해당하는 경로의 alias를 ~로 지정하면 모듈.. 2021. 10. 9.
728x90
반응형

티스토리툴바