티스토리

Gochibul's Note

검색하기

블로그 홈

Gochibul's Note

gochibul.tistory.com/m

노트

구독자: 2

방명록 방문하기

주요 글 목록

[스타일 속성] display display란?요소가 화면에 보이는 방식을 지정하는 속성 (가시 속성 중 하나)요소가 block으로 처리될지, inline box로 처리될지를 결정한다. (block, inline) 요소의 하위 요소들에 대한 레이아웃을 설정한다. (flex, grid, flow layout) display-outside 속성에 사용 가능한 키워드noneblockinlineinline-blockdisplay-outside 키워드 별 특징none요소가 화면에서 보이지 않는다.아예 렌더링조차 되지 않기 때문에 보이지 않는 것이다.이는 visibility: hidden의 경우와 차이를 보인다.block개요요소가 블록처럼 차곡차곡 쌓아 올려지는 형식이다.특징block인 요소는 부모 요소만큼의 너비를 가진다.width, heig.. 공감수 0 댓글수 1 2023. 11. 26.
Storybook(스토리북)이란 https://velog.io/@win9612/Storybook스토리북이란 공감수 0 댓글수 0 2023. 10. 22.
Prisma에 대하여 https://velog.io/@win9612/Prisma에-대하여 공감수 0 댓글수 0 2023. 10. 22.
[React Hooks] useEffect와 useLayoutEffect, 그리고 useInsertionEffect https://velog.io/@win9612/React-Hooks-useEffect%EC%99%80-useLayoutEffect-%EA%B7%B8%EB%A6%AC%EA%B3%A0-useInsertionEffect 공감수 0 댓글수 0 2023. 10. 22.
[React Hooks] useState https://velog.io/@win9612/React-Hooks-useState%EB%9E%80 공감수 0 댓글수 0 2023. 10. 22.
[Next.js 13] 프로젝트 생성하기 https://velog.io/@win9612/Next.js-13-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0 공감수 0 댓글수 0 2023. 10. 22.
자바스크립트 비교 연산자 '=='와 '==='는 무엇이 다를까? https://velog.io/@win9612/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B9%84%EA%B5%90-%EC%97%B0%EC%82%B0%EC%9E%90-%EC%99%80-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%A4%EB%A5%BC%EA%B9%8C 공감수 0 댓글수 0 2023. 10. 22.
[취준일기] 2023 상반기 한화비전 신입채용 최종 면접 합격 후기 2023년 6월 10일 https://velog.io/@win9612/%EC%B7%A8%EC%A4%80%EC%9D%BC%EA%B8%B0-2023-%EC%83%81%EB%B0%98%EA%B8%B0-%ED%95%9C%ED%99%94%EB%B9%84%EC%A0%84-%EC%B5%9C%EC%A2%85-%EB%A9%B4%EC%A0%91-%ED%9B%84%EA%B8%B0 공감수 0 댓글수 0 2023. 10. 22.
[취준일기] 2023 상반기 한화비전 신입채용 1차 면접 후기 2023년 5월 27일 https://velog.io/@win9612/%EC%B7%A8%EC%A4%80%EC%9D%BC%EA%B8%B0-2023-%EC%83%81%EB%B0%98%EA%B8%B0-%ED%95%9C%ED%99%94%EB%B9%84%EC%A0%84-1%EC%B0%A8-%EB%A9%B4%EC%A0%91-%ED%9B%84%EA%B8%B0 공감수 0 댓글수 0 2023. 10. 22.
[취준일기] 2023 상반기 한화비전 신입채용 코딩테스트 후기 2023년 5월 11일 https://velog.io/@win9612/%EC%B7%A8%EC%A4%80%EC%9D%BC%EA%B8%B0-2023-%EC%83%81%EB%B0%98%EA%B8%B0-%ED%95%9C%ED%99%94%EB%B9%84%EC%A0%84-%EC%8B%A0%EC%9E%85%EC%B1%84%EC%9A%A9-%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%9B%84%EA%B8%B0 공감수 0 댓글수 1 2023. 10. 22.
블로그 이전했습니다. velog로 블로그 이전했습니다. 새로운 글들은 아래 링크에서 보실 수 있습니다. https://velog.io/@win9612 공감수 0 댓글수 0 2023. 5. 11.
(Java) 백준 20168 골목 대장 호석 - 기능성 문제 링크 https://www.acmicpc.net/problem/20168 나의 기록 ✅ 알고리즘 분류 : 그래프, 백트래킹 ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 골드5 ✅ 체감 난이도 : Normal 접근 방법 역시 앞선 호석 시리즈와 마찬가지로 문제를 잘 읽고 이해한 후 들어가면 금방 풀 수 있는 문제. 인접행렬을 사용해 그래프 간의 연결관계와 수금 금액을 기록했고, visit 배열을 사용해 사이클이 발생하거나 뒤로 가는 문제가 발생하지 않도록 했다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.StringTokenizer; public cla.. 공감수 0 댓글수 0 2023. 5. 9.
(Java) 백준 20164 홀수 홀릭 호석 문제 링크 https://www.acmicpc.net/problem/20164 나의 기록 ✅ 알고리즘 분류 : 구현, 문자열 ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 골드5 ✅ 체감 난이도 : Normal 접근 방법 구현은 어떻게 보면 "문제 읽기"와 "시간"과의 싸움인 것 같다. 초기에 조금 시간이 걸리더라도 문제를 꼼꼼히 읽고 어떤 구현을 해야 할지 그린 후 들어가면 코드에 들어가는 시간을 줄일 수 있다. (어느 알고리즘이나 마찬가지긴하지만... 구현은 특히) 게다가 문제에 이미 어떻게 짜야 할지 순서대로 답이 나와있기도 하다. 지난 한화비전 코딩테스트에서 문제를 제대로 읽지 않아 구현 문제에서 날려먹은 시간을 생각하면... 더더욱 그렇다! import java.io.BufferedReader; im.. 공감수 0 댓글수 0 2023. 5. 9.
(Java) 백준 4358 생태학 문제 링크 https://www.acmicpc.net/problem/4358 나의 기록 ✅ 알고리즘 분류 : 자료구조(Map), 문자열 ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버2 ✅ 체감 난이도 : Easy 접근 방법 이번에 알고리즘 문제를 공부하며 배운 TreeMap을 응용할 수 있는 문제를 풀어봤다. TreeMap이란? 쌍으로 원소를 저장하는 Map 인터페이스에는 크게 3가지가 있다. HashTable, HashMap, 그리고 SortedMap. HashMap은 우리가 가장 흔히 쓰는 해시테이블을 이용한 Map이고, TreeMap은 SortedMap을 상속받은 클래스이다. TreeMap은 다음과 같은 특징들을 가지고 있다. Map의 장점인 빠른 검색, Tree의 장점인 정렬과 범위 검색의 장점을.. 공감수 0 댓글수 0 2023. 4. 26.
(Java) 백준 1926 그림 문제 링크 https://www.acmicpc.net/problem/1926 나의 기록 ✅ 알고리즘 분류 : BFS ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버1 ✅ 체감 난이도 : Easy 접근 방법 무난한 4방탐색 문제였다. map[i][j]의 값을 0으로 만드는 방법으로 방문 체크를 할 수 있다는 것을 기억하자. 코드 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.StringTokenizer; public class bj1926_그림 { static int[] di = {-1,1,0,0}; static int[] dj = {0,0,-1,1}; sta.. 공감수 0 댓글수 0 2023. 4. 26.
(Java) 백준 2075 N번째 큰 수 문제 링크 https://www.acmicpc.net/problem/2075 나의 기록 ✅ 알고리즘 분류 : 자료구조 (우선순위 큐) ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버2 ✅ 체감 난이도 : Easy 접근 방법 문제를 잘 읽자. 우선순위 큐에 넣을 원소는 10억까지의 범위므로 int가 아니라 long이어야 한다. Collections.reverseOrder()를 사용하여 자료구조를 내림차순으로 (반대로) 정렬할수도 있다. 코드 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.Collections; import java.util.PriorityQue.. 공감수 0 댓글수 0 2023. 4. 26.
(Java) 백준 9095 1, 2, 3 더하기 문제 링크 https://www.acmicpc.net/problem/9095 나의 기록 ✅ 알고리즘 분류 : DP ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버3 ✅ 체감 난이도 : Easy 접근 방법 DP의 기본적인 개념에 대해 가볍게 학습할 수 있는 문제. DP 배열의 1,2,3에는 초깃값을 설정해주고, 나머지 숫자는 앞서 계산한 3개의 값을 더해주면 원하는 정답이 된다. 코드 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class bj9095_123더하기 { public static void main(String[] args) throws IOException { /.. 공감수 0 댓글수 0 2023. 4. 14.
(Java) 백준 11725 트리의 부모 찾기 문제 링크 https://www.acmicpc.net/problem/11725 나의 기록 ✅ 알고리즘 분류 : 트리, BFS ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버2 ✅ 체감 난이도 : Hard? 접근 방법 루트 노드가 1이라는 힌트가 주어지기 때문에, 2차원 배열의 인접행렬을 입력받고, 그에 따라 루트 노드에서부터 한 레벨씩 BFS로 전진하며 부모 노드를 찾으면 될 것이라 생각했다. 그러나 메모리 초과가 나고 마는데... 원인은 2차원 인접 행렬의 쓰이지 않는 수많은 메모리들. 일반적이라면 그냥 배열이 ArrayList보다 메모리 효율이 좋다고 알고 있지만, 이번만큼은 쓰이지 않는 메모리를 줄이기 위해 2차원 ArrayList를 사용하자. 코드 import java.io.BufferedReade.. 공감수 0 댓글수 0 2023. 4. 14.
React-Query "Query data cannot be undefined" 해결 방법 문제 더미 데이터를 임시로 fetch하여 불러오는 코드를 사용하던 중 문제가 발생했다. Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["popular"] Error: undefined at Object.onSuccess (webpack-internal:///(sc_server)/./node_modules/@tanstack/query-core/build/lib/query.mjs:263:29) at resolve (webpack-internal:///(sc_server)/./node_modules/@tanstack/.. 공감수 0 댓글수 0 2023. 4. 7.
Typescript "'e.target.parentNode'은(는) 'null'일 수 있습니다." 해결 방법 문제 다음과 같이 이벤트 객체의 부모 태그 (className이 parent인 div 태그)에 접근하려고 하니 다음과 같이 에러가 뜨며 빨간줄이 뜬다. 'e.target.parentNode'은(는) 'null'일 수 있습니다. 해결 1. 조건문을 사용해 e.target.parentNode가 null 인 경우 예외 처리를 한다. 하지만 별로 Awesome하지 못한 방법이다. 2. 타입 선언 (Type Assertion)을 해준다. as 키워드를 통해 타입을 추론할 수 있도록 해준다. vscode에서 이벤트 객체에 마우스를 올리면 정확한 타입명을 알 수 있다. HTMLInputElement 또는 Element 타입으로 타입 선언을 해주자. { const parent = e.target.parentNode a.. 공감수 0 댓글수 0 2023. 4. 6.
(Java) 백준 1283 단축키 지정 문제 링크 https://www.acmicpc.net/problem/1283 나의 기록 ✅ 알고리즘 분류 : 문자열, Set ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버1 ✅ 체감 난이도 : Normal 접근 방법 알고리즘에 대한 어려움이라기보단 구현 방법에 대해 조금 고민할 수 있었던 문제. 제일 바깥의 for문에 pointA라는 별명을 붙여 조건 만족 시 continue로 다음 글자로 바로 넘어갈 수 있게 했다. Set을 통해 현재 등록되어 있는 문자들을 확인할 수 있도록 했는데, A와 a (대문자와 소문자)는 같은 문자 취급하므로 Uppercase와 Lowercase 각각 생성해 Set에 등록했다. 코드 import java.io.BufferedReader; import java.io.IOExce.. 공감수 0 댓글수 0 2023. 3. 22.
(Java) 백준 10808 스택 문제 링크 https://www.acmicpc.net/problem/10808 나의 기록 ✅ 알고리즘 분류 : 스택 ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버4 ✅ 체감 난이도 : Very Easy 접근 방법 스택의 각 함수들을 체험하는 느낌의 문제. 스택 연습하기 좋다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.Stack; public class bj10828_스택 { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(n.. 공감수 0 댓글수 0 2023. 3. 22.
(Java) 백준 2178 미로 탐색 문제 링크 https://www.acmicpc.net/problem/17086 나의 기록 ✅ 알고리즘 분류 : BFS ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버1 ✅ 체감 난이도 : Normal 접근 방법 평범한 2차원 배열 탐색 문제에 함정 살짝 추가한 느낌. DFS로는 시간초과 나고 BFS로 시간초과 없이 풀린다. 도착점에 도착했을 경우 바로 탈출해야 하며, 그렇지 않을 경우 불필요한 추가 탐색으로 오답이 나온다. 코드 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.LinkedList; import java.util.Queue; import java.. 공감수 0 댓글수 0 2023. 3. 17.
(Java) 백준 17086 아기 상어 2 문제 링크 https://www.acmicpc.net/problem/17086 나의 기록 ✅ 알고리즘 분류 : BFS ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버1 ✅ 체감 난이도 : Hard 접근 방법 코드 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.*; class Point{ int x,y; public Point(int x, int y) { this.x = x; this.y = y; } } public class bj17086_아기상어2 { static int[] di = {-1,-1,0,1,1,1,0,-1}; static int[] dj = {.. 공감수 0 댓글수 0 2023. 3. 10.
(Java) 백준 11403 경로 찾기 문제 링크 https://www.acmicpc.net/problem/11403 나의 기록 ✅ 알고리즘 분류 : 플로이드-와샬 ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버1 ✅ 체감 난이도 : Normal 접근 방법 i노드에서 j노드까지 접근 가능한지 알아보려고 DFS 쓰면.... 시간초과 난다! 플로이드-와샬 알고리즘을 사용해 코드량도 줄였고 시간초과도 해결했다. i노드와 k노드가 연결되어 있고(adjMatrix[i][k] == 1), k노드와 j노드가 연결되어 있으면(adjMatrix[k][j] == 1) i노드와 j노드가 인접한 것으로 취급하여 1로 바꿔준다. 이렇게 3중 for문을 돌며 수정한 adjMatirix가 그대로 답이 된다. 코드 import java.io.BufferedReader; i.. 공감수 0 댓글수 0 2023. 3. 9.
(Java) 백준 2667 단지번호붙이기 문제 링크 https://www.acmicpc.net/problem/2667 나의 기록 ✅ 알고리즘 분류 : BFS ✅ 성공 여부 : ✔ ✅ 문제 난이도 : 실버1 ✅ 체감 난이도 : Normal 접근 방법 주어진 map을 완전탐색하며 군집화하는 것이 문제의 목표이다. 때문에 BFS와 DFS 중 선택할 수 있었는데, 나는 BFS를 활용하여 문제를 풀었다. map의 모든 좌표를 시작점으로 하여 BFS를 수행해야 하는데, 시작점 map[i][j]가 0일 경우에는 바로 함수를 종료하고, 아닐 경우에는 BFS를 시작한다. visit 배열을 사용하여 단지 중복 체크가 되지 않도록 했다. 하나의 BFS가 종료되면 하나의 지역에 대한 군집화가 끝난 것이므로, ans로 지칭한 ArrayList에 해당 지역의 단지 수 .. 공감수 0 댓글수 0 2023. 3. 8.
[web] 쿠키, 세션, 토큰 쿠키 쿠키를 이용해 서버는 브라우저에 데이터를 넣을 수 있습니다. 해당 브라우저에 데이터, 페이지 정보 등 사용자의 사용기록을 저장합니다. 사용자가 웹사이트에 방문할 때마다, 브라우저는 해당 쿠키도 request와 함께 서버에 보냅니다. => 오직 해당하는 도메인에만 보낼 수 있습니다. 예를 들어, 유튜브의 쿠키는 오직 유튜브에만 보낼 수 있습니다. 서버가 정해놓은 유효기간이 존재하고, 쿠키의 크기에 제한이 존재합니다. 쿠키의 가장 큰 역할은 유저 인증을 하기 위한 세션ID를 서버에 전달하는 것입니다. 세션 먼저 "stateless"의 개념부터 이해해야 합니다. 클라이언트가 서버에 보내는 각 request는 서로 연관이 없고 독립적으로 다뤄집니다. 즉, request가 끝날 경우 서버는 해당 클라이언트가.. 공감수 1 댓글수 1 2021. 10. 7.
[Javascript] 웹 컴포넌트 https://www.youtube.com/watch?v=RtvSgptpfnY&list=WL&index=24&t=104s https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%80%E1%85%AE%E1%84%92%E1%85%A7%E1%86%AB Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속.. 공감수 1 댓글수 0 2021. 9. 27.
[React] CORS 문제 해결법 문제 Spring Boot를 이용해 아주 간단한 api 서버를 localhost를 통해 실행시키고, 리액트를 실행시켜 fetch 통신을 시도해봤다. 서버에는 리액트에서 보낸 GET request가 잘 도착하였고, response를 잘 보냈지만 리액트 페이지에는 response가 도착하지 않았다. 위와 같은 에러가 발생하였다. 에러메시지에서 보여주는것과 같이, "CORS 정책 위반"을 이유로 response가 block되었다. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처.. 공감수 0 댓글수 1 2021. 8. 23.
[스프링부트] lombok 설치 및 문제 해결 https://yong-s.tistory.com/7 [JAVA] Lombok 설치, 사용법 Lombok 라이브러리는 VO 나 DTO 사용 시 코드를 줄여주는 라이브러리이다. 앞의 예제로 얼마나 많이 줄여주는지 확인해보자. 앞의 과정을 진행하면서 사용했었던 BaseInfoVO 클래스이다. 이를 Lombok 을 yong-s.tistory.com 해당 블로그 참고하여 설치 및 에러 해결을 진행했다. https://goddaehee.tistory.com/208?category=395441 [IntelliJ] IntelliJ 롬복 설치 및 설정 [IntelliJ] IntelliJ Lombok 설치 및 설정 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 인텔리제이 롬복 설정] 입니다. : ) 0.롬복(Lombok).. 공감수 0 댓글수 0 2021. 8. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.