프론트엔드 개발자의 기록 공간

CSS의 꽃 레이아웃 & 포지셔닝의 주요 정렬에 대해서 작성해보겠습니다. 이렇게 쉽고 간단한걸 왜 블로그로 작성하냐고 생각하실수도 있겠지만 설명은 뒤에 언급하겠습니다. * 여기서 레이아웃이나 포지셔닝을 "꾸민다"라는 말로 지칭하겠습니다! 작성 계기 : html + 바닐라 js로 개발하던 시절에는 필요한 레이아웃 구조를 그때 마다 찾아서 사용하곤 했습니다. 하지만 리액트를 접하면서 현재 컴포넌트에서 하위컴포넌트를 꾸며야할때도 있고 또한 map함수를 이용해 여러 하위 컴포넌트들을 꾸미고 겹치고 할 일이 많아졌습니다. 이러면서 컴포넌트안에 컴포넌트가 있는 형식이라 구조가 매번 꼬여 개발보다 꾸미는데 시간이 훨씬 많이 걸렸습니다. 그래서 이참에 블로그 포스팅을 통해 정리하는 시간을 가져보고 또 나중에 이런 문제..

우선 바닐라 JS상태에서 시작한다고 가정하에 환경설정하는 법을 소개하겠습니다. 우선 타입스크립트를 사용하기 위해 npm모듈을 이용하여 설치해줍니다. 글로벌 설치 : 시스템 폴더에 설치(모든 프로젝트에서 사용) npm install typescript -g 로컬 설치 : 현재 프로젝트에서만 사용 npm install typescript --save -dev 이렇게 사용자 목적에 따라 설치해줍니다. (앞으로 계속 TS사용할꺼면 글로벌 설치) 이후 tsc를 설치해줘야합니다. tsc란 typescriptcompiler입니다. TS는 JS 환경에서 실행될 수 없습니다. 왜냐하면 JS가 실행되는 브라우저가 TS코드를 이해하지 못하기 때문입니다. 위의 그림과 같이 TS코드를 JS로 바꿔줘야지만 브라우저는 인식을 하고..

백준 DFS 알고리즘 11725번_트리의 부모 찾기 난이도 : 실버II 해결못한 문제 : 시간초과 문제 설명 입출력 문제 풀이 : 이 문제는 인접 그래프 형식의 문제이다. 배열의 인덱스 자체가 노드번호를 의미하고 배열의 값이 그 노드와 인접한 다른 노드들의 인덱스번호가 들어있는 셈이다. 예를들어 [1, 6], [6, 3] 의 연결 정보가 주어졌을때 양방향 이므로 graph배열 1번의 인덱스에 6번의 값이 있고 반대로 인덱스6번에는 1과 3의 값이 있고 인덱스3에는 6번의 값이 있는 셈이다. 이해가 안된다면 인접그래프를 검색해서 원리를 찾아보면 이해가 갈 것이다. 다시 문제로 돌아가서 인접그래프로 값을 지정해준 후, 방문처리를 위한 배열, 부모노드를 담는 배열을 선언해준 후, graph의 1번 인덱스부터 ..

백준 DFS 알고리즘 2469번_안전 영역 난이도 : 실버I 문제 설명 입출력 문제 풀이 : 문제 설명을 보면 비의 높이가 주어질때 비의 높이보다 낮은 칸들은 빗금으로 그려져있고. 그 후 영역의 요소를 카운트하면 비의 높이에 따른 안전 영역의 요소가 구해진다. 하지만 비의 높이보다 낮은 칸들을 방문처리하고 그 후 다른 영역의 요소를 구하면 두번의 그래프 탐색을 해야해서 로직이 복잡해진다. 반대로 생각하여 비의 높이가 주어질때 비의 높이를 초과(문제 예시에서 4이하니깐 반대는 4초과)하는 영역을 방문처리하고 DFS의 실행횟수를 카운트하면 똑같이 안전영역의 요소를 구할 수 있다. 비의 높이는 1이상 100이하의 정수이므로 0~101의 반복문을 돌면서 DFS를 실행하면된다. 단 한번의 DFS를 실행하고 나면 ..

백준 DFS 알고리즘 2583번_영역 구하기 난이도 : 실버I 문제 설명 입출력 입출력 추가 예제 입력2 : 00 100 1 0 0 1 1 예제 출력2 : 1 9999 문제 풀이 : 이 문제는 조금 까다로워서 고려해야할 사항이 많다. 1. 문제 예시에서는 그래프의 0.0을 제일 왼쪽밑에서 부터시작한다. 수학시간에서 배운 x축 y축 좌표로 표현한다. 2. 눈금 크기가 100이하라서 재귀 DFS를 사용하면 정해진 재귀횟수를 넘어가서 런타임 에러가 발생한다. 3. 직사각형이 그려진 이외의 곳을 탐색해야한다. 크게 이 두가지 조건을 해결해야한다. 방법은 다음과 같다. 1. 기존의 0.0처럼(제일 왼쪽 위) 사용하기 위해선 입력으로 받은 x,y값을 바꿔주면된다. 이렇게 되면 상하 반전이 된다. 상하 반전이되면 원..

백준 문자열 알고리즘 10773번_제로 난이도 : 실버IV 문제 설명 입출력 문제 풀이 : input값 순서대로 계산을 해주다가 0이 나오면 마지막에 불렀던 숫자를 빼주면된다. 0이 여러개 나오게 되면 마지막에 불렀던 순으로 올라가면서 값을 빼줘야한다. 즉 마지막에 불렸던 숫자를 빼야하는데 이는 스택을 활용하면 쉽게 구현할 수 있다. 반복문을 통해 값을 체크한뒤 0이 아니라면 스택에 넣어주고 합산을 해주고 0이라면 스택에서 마지막 값을 빼주면된다. //실버4 제로 const solution = (n) => { let sum = 0; //총합 let tmp = []; //스택으로 활용 for (let i = 0; i < n; i++) { //불러주는 수가 0이 아니라면 //스택에 넣고 총합계산 if (in..

백준 DFS 알고리즘 2667번_단지번호붙이기 난이도 : 실버I 문제 설명 문제 풀이 : 이 문제도 기본 DFS 유형을 요구하는 문제이다. 그래프 전체를 순회하면서 방문하지 않았다면 (이 문제에서 1과 0은 아파트의 위치이면서 방문여부로도 활용할 수 있다.) DFS를 호출한다. 여기서 DFS내부적으로 재귀를 부를때마다 선언해둔 글로벌 변수(home)를 한개씩 카운트 해주면서 같은 단지내의 아파트 개수를 세려주고 DFS함수 호출이 끝나면 하나의 단지를 탐색한 것이기 때문에 순서대로 배열에 넣어주면된다. 이후 정렬을 하고 길이 출력을 통해 단지 개수를 파악하고 배열값을 출력하면서 단지내 아파트 개수를 출력하면 된다. //실버1 단지번호붙이기 const solution = () => { let cnt = []..