Leo.K | To become a cooler Developer

오늘은 지난 시간에 이어서 카테고리 게시글 목록을 꾸며보자. 기본적으로는 일반 게시글처럼 텍스트 및 썸네일 이미지가 아래와 같은 형태로 이루어진다. 위와 같은 구조를 flex를 사용하여 좀 더 아기자기하고 귀여운 카드 뉴스 형태로 만들고자 한다. 그를 위해서 기본적으로 존재하는 html태그에섯 css만 변경하지 않고, 구조 자체를 내가 원하는 대로 수정하고자 한다. 구상하는 초안은 아래와 같다. 1. 구조 변경 위의 구조를 구성하기 위한 html 코드를 아래와 같이 수정하여 적용하고 css를 입히면서 하나하나 모양을 만들어보자. 클래스명 또한 기존의 틀을 벗어나서 사용하기 위해 새로 작성한 것도 있기 때문에 그냥 새롭게 작성하는 것이 덜 헷갈릴 것이다. 아래의 소스는 블로그 설정에서 꾸미기 > 스킨 편집..

. . . 미루고 미뤄왔던 티스토리 블로그 꾸미기 2일차이다. 사실 계속 수정 및 개발중이고, 절반 이상은 끝났지만 까먹기 전에 정리하자! 처음부터 다 개발할 생각에 막막했는데 생각보다 커스텀이 편리하도록 자동화 및 변수화가 잘 되어 있다. 기본 스킨 세팅은 1편에서 했기 때문에 참고해주시기 바랍니다~ 1.상단 헤더 고정시키기 기본적으로 헤더는 상단에서만 보이고 스크롤 하면 사라지도록 세팅이 되어 있었다. 아직 헤더에 이것저것 메뉴를 넣지는 않았지만 추후에 추가할 것을 대비해서 스크롤로 화면을 내려도 헤더가 보이도록 할것이다. 그렇다면 바로 스킨 편집 > html 편집 > css탭 으로 가보도록 하자! ctrl + F 키로 '.header' 클래스를 탐색해서 아래와 같이 position을 수정하자. 주석..

. . . 미루고 미루다가 드디어 기술블로그로 사용하던 티스토리를 개발자답게 꾸며보기로 했다. 아직 미완성이긴 하지만,, ㅎ 전부 완성한 후에 포스팅을 하게 되면 까먹을 것 같아서.. 미리 중간 점검 겸 간단히 포스팅을 남기면서 정리하고자 한다. Start! 1. 스킨 설정 꾸미기 전에 제로부터 개발할 일은 아니기 때문에,,, 티스토리에서 제공하는 기본 스킨을 선택해보자. 블로그 설정에 들어가서 꾸미기 > 스킨 변경을 눌러보면 이렇게 10개 정도의 스킨을 확인할 수 있다. 구글에 검색해보니 많은 사람들이 본인이 직접 커스텀한 스킨을 올려두었는데, 해당 스킨을 다운받아서 사용해도 되지만 본인 만의 개성을 뽐내고 싶다면야..^^ 나는 이번이 처음이기도 하고,, 프론트엔드는 잘 하지 못해서 공부할 겸 가장 기..

오늘도 정렬로 분류되는 알고리즘 문제를 풀어보도록 하자. 문제의 난이도가 골드 2로 올라와서 그런지 따져야 할 조건도 많고, 풀이도 떠올리기가 간단하지는 않았다. 기본 베이스는 정렬과 그리디 알고리즘이지만, 이번 문제는 우선순위 큐라는 자료구조를 적당히 잘 사용해서 풀어야 한다. https://www.acmicpc.net/problem/1202 1202번: 보석 도둑 첫째 줄에 N과 K가 주어진다. (1 ≤ N, K ≤ 300,000) 다음 N개 줄에는 각 보석의 정보 Mi와 Vi가 주어진다. (0 ≤ Mi, Vi ≤ 1,000,000) 다음 K개 줄에는 가방에 담을 수 있는 최대 무게 Ci가 주어진다. (1 ≤ Ci www.acmicpc.net 1. 문제 분석 보석의 수 N과 가방의 수 K의 최댓값이 ..

지난 시간과 마찬가지로 오늘도 정렬과 그리디 알고리즘을 사용하여 풀 수 있는 문제를 풀어보자. 지난번보다는 난이도를 조금 올려서 이번엔 골드 4로 책정된 문제이다. 조금 까다로워 보이긴 하지만 문제의 조건을 세밀하게 따져가면서 풀어보자. https://www.acmicpc.net/problem/1744 1744번: 수 묶기 길이가 N인 수열이 주어졌을 때, 그 수열의 합을 구하려고 한다. 하지만, 그냥 그 수열의 합을 모두 더해서 구하는 것이 아니라, 수열의 두 수를 묶으려고 한다. 어떤 수를 묶으려고 할 때, 위치에 www.acmicpc.net 1. 문제 분석 수열의 원소의 최대합을 구한다. 원소는 두 개만 한쌍으로 묶을 수 있고, 각 원소는 1번 이하로만 묶일 수 있다. (0 or 1) 묶인 두 수는..

오늘 풀이해 볼 문제는 지난 시간과 동일하게 그리디 알고리즘을 적용하는 정렬파트의 문제이다. 지난 번에 풀었던 보물보다는 한 번더 생각을 해야 하지만 크게 복잡하지는 않으니 문제부터 보도록 하자. https://www.acmicpc.net/problem/1946 1946번: 신입 사원 첫째 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 20)가 주어진다. 각 테스트 케이스의 첫째 줄에 지원자의 숫자 N(1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개 줄에는 각각의 지원자의 서류심사 성 www.acmicpc.net 문제 분석 최대한 많은 신입사원을 뽑아야 한다. 뽑힌 신입사원들 끼리는 우열을 가릴 수 없어야 한다. 우열을 가릴 수 없다 : 서류 혹은 면접이 나와 다른 한 사람과 비교했을 때 반..

연초에 계획했던 바와는 다르게 또 다시 귀찮음이 용솟음 치며 열심히 알고리즘을 풀고 정리하겠다 했던 다짐이 한 동안 죽어있다가 연말이 되어서야 다시 살아난다. 나름 직장인이 된지도 어언 만 2년차를 바라보고 있는 시점에 진짜로 다시금 마음을 잡고 꾸준히 공부를 하고자 한다. 매일 공부를 할 수 있는 주기적인 시간이 나오는 것은 아니지만, 시간이 되는 날에라도 놀지 않고 한 문제씩이라도 문제를 풀면서 개념을 정리하고자 한다. 오늘 풀어볼 문제는 백준 1026에 속해 있는 정렬 파트 문제이다. https://www.acmicpc.net/problem/1026 1026번: 보물 첫째 줄에 N이 주어진다. 둘째 줄에는 A에 있는 N개의 수가 순서대로 주어지고, 셋째 줄에는 B에 있는 수가 순서대로 주어진다. N..

매번 프로젝트를 시작하는 과정에서 스프링 시큐리는 늘 말썽처럼 에러를 내곤 했다. 정확한 개념 정리 없이 하던 내용으로만 개발을 하다보니 새로운 버전의 릴리즈를 사용할 때면 항상 난항을 겪곤 했다. 이번 기회에 시간날때마다 제대로 공식 사이트의 가이드 문서를 분석하여 개념정리를 해볼까 한다. 참고한 가이드 문서의 버전은 스프링 시큐리티 5.8.8버전이다. 1. Spring Security란? Spring Security는 Spring 기반의 애플리케이션의 보안(인증, 권한, 인가 등)을 담당하는 스프링 하위 프레임워크이다. Spring Security는 인증과 권한에 대한 처리를 Filter의 흐름에 따라 처리하고 있다. Filter는 Client에서 보낸 HTTP 요청이 Dispatcher Servle..

본격적으로 queryDsl을 학습하기 전에 학습에 필요한 간단한 사원관리 프로젝트를 생성하고자 한다. 그동안은 스프링 부트의 버전을 2.7.x 버전을 사용했지만 이번에는 3.0대 버전으로 업그레이드 하여 생성을 한 후에 그동안 했던 설정들이 변경된 부분을 동시에 학습해보고자 한다. 1. 프로젝트 생성 - (spring boot 3.0.12, java version 17) - build.gradle(dependency), aplication.yml(spring, jpa, log 셋팅) 2. 엔티티 생성 - 엔티티를 생성 후에 프로젝트를 실행하여 로그 상에서 jpa가 테이블을 만들어주는 지 확인 - ddl-auto를 create로 설정하여 엔티티 설정에 맞게 테이블을 생성하고, data.sql로 데이터 초기..

평상시에 코드를 개발하던 중 인텔리제이에서 자주 보이는 경고에 대해 자세히 알아보았다. List 컬렉션은 정말 없으면 안 될 정도로 실무에서도 많이 사용을 하는데, 해당 컬렉션을 배열 형태로 바꾸어 사용하고자 할 때, toArray()메서드를 자주 사용한다. 리스트의 요소 타입이 Integer나 String 같은 기본 Wrapper 타입이라면 단순하게 Stream을 활용해 변환할 수 있겠지만, 개인적으로 만든 클래스 객체의 인스턴스에 대해서는 캐스팅의 문제로 불가능하다. 그래서 결론적으로 toArray를 많이 사용하게 된다. 상식적으로 생각했을 때, 리스트를 배열로 전환하려면 리스트의 요소 개수 만큼 배열의 크기를 지정해야 하기 때문에 리스트의 사이즈 만큼 지정하면 매번 아래와 같은 경고가 발생하여 의문..

[ HTTP 상태 코드 ] 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 목차 1xx (Informational) : 요청이 수신 되어 처리중 2xx (Successful) : 요청 정상 처리 3xx (Redirection) : 요청을 완료하려면 추가 행동이 필요 4xx (Client Error) : 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5xx (Server Error) : .서버 오류, 서버가 정상 요청을 처리하지 못함 만약 클라이언트가 인식할 수 없는 상태코드를 서버가 반환한다면? - 클라이언트는 상위 상태 코드(큰 범위)로 해석해서 처리한다. - 따라서 미래에 새로운 상태코드가 추가된다고 하여도 클라이언트를 변경하지 않아도 된다. - 예) 299 ??? ..

2023-05-30 #2.4 Layout Stream /** * 스크롤 불가 (브라우저가 아니기 때문이다.) * 모든 View가 기본적으로 flex Container다 * react native에서 flex Direction의 기본 값은 column이다. * 높이와 너비에 기반해서 디자인 하지 않는다. * 다양한 스크린에서 동일하게 작동하도록 반응형의 레이아웃을 사용해야 한다. * flex 값을 사용해서 특정 아이콘 및 컨텐츠가 화면에서 차지하는 비율을 지정할 수 있다. * 부모 컨테이너에 지정된 flex 값이 자식 컨테이너의 비율 기준이 된다. * * Layout with Flexbox * * 컴포넌트는 flexbox 알고리즘을 사용하여 자식의 레이아웃을 지정할 수 있습니다. * Flexbox는 다양한..

2023-05-11 #6.0 EFFECTS state가 변경되어 렌더링 될 때마다 함수를 실행하는 것이 아니라, 가장 처음 컴포넌트가 렌더링 될 때만 함수를 실행하고, state의 변화로 인한 리렌더에는 실행되지 않도록 하기 우리의 코드가 초기에 단 한번만 실행되도록 보호해준다. useEffect(function, deps) function : 단 한번만 실행할 함수. deps : 내 코드의 특정 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법 deps[] 배열 안에 들어 있는 값이 변화하는 경우에만 function을 실행하도록 할 수 있다. 더보기 import {useState, useEffect} from "react"; function App() { const [counter, setV..

React Native는 단 하나의 구조가 아니라 여러가지 인프라와 그 인프라를 연결지어 주는 bridge역할을 하나로 묶은 시스템이다. 안드로이드라면 java와 sdk(software developement kit) ios라면 xcode와 시뮬레이터를 다운 받아서 인프라를 컴파일하여 앱으로 만들어야 한다. 위의 모든 과정을 하기 위해선 설치부터 어려움이 있는데 이번 강좌에서는 자바스크립트를 제외한 모든 인프라가 컴파일 되어 있는 앱(배포용 x, 테스트용 어플)을 다운받고, 자바스크립트 코드만을 해당 앱으로 보면서 어떻게 사용되는지 테스트 할 것이다. 윈도우 사용자라면 커맨드 창을 열어서 아래의 명령어로 패키지를 다운로드 받아준다. 이때 node.js 버전은 14 이상이어야 한다. npm install ..

2023.5.9 #4.0 Props 더보기 Props : 부모 컴포넌트가 자식 컴포넌트에게 유용한 데이터를 전달하는 일종의 방식! 자바의 인터페이스 처럼 공통된 속성을 하나만 만들어서 자식 컴포넌트에게 전달하는 것과 유사한 방식인 것 같다. 함수의 인자처럼 컴포넌트에서 전달할 수 있고, 인자는 단 한개만 존재하며, 해당 인자는 Object의 형식이다. 2023.5.10 #4.1 Memo Props에는 text나 boolean값 이외에도 function을 보낼 수 있다. 이는 JSX 문법으로 html 태그 자체에 이벤트 리스너를 넣는 것과는 전혀 다르게 단지 Props의 이름이기 때문에 필요한 위치에 개발자가 직접 꺼내서 배치해야 한다. 부모 컴포넌트의 상태(state)값이 변경되면 부모 컴포넌트에 속해있..