분류 전체보기

Web/etc.
px, em, rem 차이를 알아보자
1. px px은 고정적인 단위이지만, 전세계의 1cm가 동일하듯이 모든 1px이 같은 것은 아니다. 픽셀은 모니터 해상도에 따라 고정적인 크기로 설정된다. 모니터가 바뀌지 않는 한, 브라우저에서는 절대적인 고정값으로 한번 설정된 크기는 변하지 않으므로 반응형 웹 구현이 아닌 경우 사용하는 것이 좋다. 2. em 가변적인 단위. 폰트 사이즈를 기준으로 계산된다. em 은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다. 상위 요소의 폰트 사이즈를 상속 받을 수 있다. px 보다는 반응형에 적합하지만, 상위 요소의 사이즈가 바뀌거나 뎁스가 깊어질수록 사이즈를 관리하기 어렵다. em 단위는 아래 예시처럼 계산된다. html { font-size: 10px; } body { font-size: 15px; }..
→2022.12.18
Web/React
리액트 훅은 왜 조건문 안에서 쓸 수 없을까?
그 동안 리액트훅을 사용할 때 리액트 컴포넌트 함수의 최상위에서 훅을 항상 호출해서 사용했기 때문에 너무나 당연하게 조건문이나 반복문 안에서 사용할 생각을 하지 않았다. 하지만 왜 그렇게 하는 것인지에 대해 생각해보지 못했고, 오키 질문에도 나처럼 궁금해 하시는 분들이 계신 거 같아 이번 기회에 정리해서 함께 공유하면 좋을 거 같다. 실제로 현재 진행중인 프로젝트에서 조건문 안에 useEffect 훅을 호출하면 아래와 같이 린트 에러가 발생한다. 에러 메세지를 읽어보면, 리액트 훅은 렌더링 시 반드시 동일한 순서로 불려야 하기 때문에 조건적으로 호출되면 안된다고 말하고 있다. 실제 리액트의 공식문서에서도 리액트 훅과 관련된 규칙으로 다음과 같이 안내되어 있다. - 반복문, 조건문 혹은 중첩된 함수 내에서..
→2022.12.13
Computer Science
[자료구조] 그래프
1. 기본 개념 노드와 노드를 연결하는 간선을 하나로 모아 놓은 자료 구조, 연결되어 있는 객체 간의 관계를 표현하는 자료구조이다. 예) 지하철 노선도, 네트워크 연결, 도로, 페이지 랭크 2. 그래프 용어 정리 정점(node): 위치의 개념 간선(edge): 위치 간의 관계, 노드를 연결하는 선 정점의 차수(degree): 무방향 그래프에서 하나의 정점에 인접한 정점의 수 3. 종류 무방향 그래프(양방향) (A, B)는 (B, A) 동일 방향 그래프 는 는 다름 가중치 그래프 그래프의 간선에 비용(가중치)가 부여된 그래프 최소 비용, 최단 경로 등을 찾는 경우 연결 그래프 무방향 그래프의 모든 정점 쌍에 대해 항상 경로가 존재하는 경우 비연결 그래프 무방향 그래프의 특정 정점 쌍 사이에 경로가 존재하지..
→2022.11.27
Computer Science
[자료구조/알고리즘] 정렬 알고리즘에 대해 알아보자
선택 정렬(Selection Sort) 공간복잡도 O(N) / 시간복잡도 O(N^2) 첫 번째 인덱스부터 차례대로 그 뒤 숫자들을 모두 비교해서 가장 작은 값을 찾아 현재 인덱스와 자리를 바꿔준다. 즉, 맨 앞 인덱스부터 작은 수대로 채워 정렬하는 것(최소 선택 정렬), 반대는 최대 선택 정렬이다. 삽입 정렬(Insertion Sort) 공간복잡도 O(N) / 시간 복잡도 O(N^2), 최선의 경우(이미 정렬돼 있는 경우는 한번 밖에 비교하지 않아서) O(N) 삽입 정렬은 두 번째 인덱스부터 시작한다. 현재 인덱스는 별도의 변수에 저장, 비교 인덱스를 현재 인덱스 -1로 시작해서 -1씩 해가며 요소를 비교하고 적절한 위치를 찾아 삽입된다. 즉, 두 번째 요소는 첫 번째 요소와 비교. 세 번째 -> 두 번..
→2022.10.31
Algorithm/카카오 기출
[프로그래머스] 2022 KAKAO TECH INTERNSHIP/등산코스 정하기/파이썬/python
💡 solutions 💬 heap 자료 구조 사용, 각 출입구들을 노드로 넣고 다익스트라 알고리즘 탐색 💬 1. 산봉우리는 한 개만 지나야 하므로 탐색 노드가 산봉우리인 경우 탐색 중단 💬 2. 해당 노드를 지났던 기존 intensity(dist[node])가 현재의 intensity 보다 작은 경우는 이미 더 작은 intensity로 해당 노드를 지날 수 있다는 의미이므로 탐색 중단하도록 조건 처리 💬 각 노드의 intensity를 저장하는 dist 배열에서 값을 업데이트 할 때는 최대 intensity (현재 intensity, 다음 노드의 intensity 중 큰 값)로 저장한다. 💬 산봉우리들을 비교하여 가장 작은 intensity를 갖는 경우를 답으로 반환한다. 단, intensity가 동일한 ..
→2022.09.12
Algorithm/카카오 기출
[프로그래머스] 2022 KAKAO TECH INTERNSHIP/두 큐 합 같게 만들기/파이썬/python
💡 solutions 💬 첫 번째 풀이, deque 자료 구조 활용하여 반복문으로 두 큐의 합 같게 연산, 두 큐의 최대 길이만큼 반복했는데도 두 큐의 합을 같게 하지 못하면 -1 반환하는 조건 추가 💬 두 번째 풀이, 두 개의 큐를 하나의 큐로 합쳐서 투 포인터로 두 큐의 합이 같아지는지 확인 🤖 code # 첫 번째 풀이 from collections import deque def solution(queue1, queue2): queue1, queue2 = deque(queue1), deque(queue2) sum1, sum2 = sum(queue1), sum(queue2) target_sum = (sum1 + sum2) // 2 cnt = 0 if max(queue1) > target_sum or ..
→2022.09.10
Algorithm/카카오 기출
[프로그래머스] 2022 KAKAO TECH INTERNSHIP/성격 유형 검사하기/파이썬/python
💡 solution 💬 질문에 따른 선택을 기준으로, 딕셔너리 자료 구조 활용하여 각 성격 유형별 점수를 먼저 구한다. 💬 4가지 각 지표별로 두 가지 성격 유형의 점수를 비교하여 최종적으로 성격 유형을 결정한다. 👨‍💻 code def solution(survey, choices): charactors_dict = { 'R': 0, 'T': 0, 'C': 0, 'F': 0, 'J': 0, 'M': 0, 'A': 0, 'N': 0, } # 모든 질문의 성격 유형 점수 계산 for i in range(len(survey)): current_question = survey[i] current_answer = choices[i] default_score = 4 if current_answer < default..
→2022.09.10
Web/Svelte
리액트와의 비교를 통해 살펴본 Svelte의 특징
광복절인 오늘, 오랜만에 글을 적는다. 요즘 진행하는 프로젝트의 기술 스택이 스벨트라, 새롭게 학습하면서 느꼈던 점들을 리액트와 뷰와의 비교를 통해 설명하고자 한다. 해당 글은 특히 스벨트의 관점에서 바라보는 글이다. 먼저 스벨트의 개념에 대해 알아보자. Svelte(스벨트) 스벨트는 개발자 Rich Harris에 의해 2016년에 출시된 오픈 소스 프론트엔드 웹 프레임워크이다. 리액트와 달리 가상돔을 사용하지 않는 것이 큰 특징이며, 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상됐다. 스벨트는 라이브러리나 프레임워크가 아닌 컴파일러이다. 리액트나 뷰와 같은 다른 프레임워크들은 모두 런타임 환경에서 실행되기 때문에 프레임워크를 돌리기 위한 엔진이 소스코드에 포함돼 있지만 스벨트는 빌드 타임에 소스코드..
→2022.08.15
Web
웹 서버(web server)와 웹 애플리케이션 서버(web application server)의 차이
1. Web Sever와 WAS의 개념 Web Server(웹 서버) 웹 서버는 소프트웨어와 하드웨어로 구분되며 하드웨어는 Web 서버가 설치되어 있는 컴퓨터이며 소프트웨어는 클라이언트로부터 HTTP 요청을 받아 정적인 컨텐츠를 제공하는 컴퓨터 프로그램이다. 여기서 정적 컨텐츠는 HTML, CSS 및 이미지 파일 등이 해당된다. 웹 서버는 클라이언트로부터 HTTP 요청을 받으면 해당 요청이 정적 컨텐츠만 필요한 경우 WAS를 거치지 않고 정적 컨텐츠를 클라이언트로 제공한다. 반면 동적 컨텐츠 요청인 경우 해당 요청을 WAS로 보내서 WAS로부터 받은 결과값을 클라이언트에게 응답한다. 웹 서버의 예시 : Apache, Nginx, IIS 등 WAS(Web Application Server) 애플리케이션을 ..
→2022.06.05
JavaScript
JavaScript 데이터 타입에는 어떤 게 있을까
자바스크립트 데이터 타입은 처음 자바스크립트를 공부를 시작할 때 간단히 보고 넘어간 게 다였다. 그래서 그런지 얼마 전 데이터타입이 뭐가 있냐는 질문을 받았을 때 가물가물하게 떠올리며 얘기했던 일이 있어 다시 한번 확실하게 정리해야겠다고 생각했다. 먼저 데이터 타입을 왜 알아야 하는 지에 대해 생각해보면, 우리가 개발자로서 코드를 짤 때 사용하는 데이터의 타입에 따라 메모리 크기가 달라지기 때문에 데이터를 저장하며 얼마나 메모리를 사용할지 정하는 기준이 된다. 또한 메모리에 저장했으면 주소를 참조하여 데이터를 사용하게 되는데 이때 데이터값 자체는 2진수로 저장되기 때문에 이를 어떻게 해석할 것인가에 대한 기준이 되는 것이 바로 데이터 타입이다. 예를 들어 0100 0001로 표현된 2진수는 Number ..
→2022.05.31
JavaScript
Throttle와 Debounce
최근 바닐자 자바스크립트로 웹페이지를 구현하는 연습을 하고 있는데, 검색기능과 자동완성 기능을 구현할 때 Throttle과 Debounce 개념을 알게 되었다. Throttle과 Debounce를 사용하면 이벤트나 함수 호출의 빈도를 줄여 성능을 최적화 하는데 도움이 된다. 검색 기능에선 키보드 키를 하나씩 입력할 때마다 api 호출을 통해 데이터를 불러오게 되면 지나치게 많은 api 호출이 발생하기 때문에 비효율성을 초래하게 된다. 따라서 사용자의 키 입력이 끝났다고 판단된 이후나 입력이 어느 정도 된 중간 중간 검색을 시도하도록 최적화할 필요가 있다. 두 가지의 차이점을 알아보도록 하겠다. Throttle 와 Debounce 의 차이점은 이벤트를 언제 발생 시킬지의 시점 차이이다. Throttle은 ..
→2022.05.18
Algorithm/Programmers
[프로그래머스] 기지국 설치 / level 3 / 파이썬 / python
💡 solutions 💬 문제에서 구해야 하는 답은 '증성해야 할 기지국 개수의 최솟값'이다. 따라서 이를 구하기 위해서는 설치된 기지국으로부터 전파가 전달되지 않는 아파트들을 먼저 찾아야 한다. 💬 설치된 기지국 리스트를 가지고 순차적으로 탐색한다. start, end값을 갱신하며 전파가 전달되지 않는 아파트의 개수(before)를 구간별로 찾는다. 💬 spread는 기지국 하나를 설치하면 결과적으로 전파를 전달 받는 아파트의 개수이다. (기지국의 위치 또한 포함) 예를 들어 w가 2이면 총 5개의 아파트가 전파를 전달 받을 수 있다. 💬 한 구간에서 전파가 전달되지 않은 아파트들의 개수를 spread로 나눈 몫을 올림한 값이 바로 증설해야 할 기지국 개수이다. 모든 구간을 탐색하여 증설해야 할 기지국..
→2022.04.16

• 이전
• 1
• 2
• 3
• 4
• ···
• 19
• 다음