Today I Learned🧤

React로 웹 프론트엔드 개발을 하면서 컴포넌트를 function(){} 형태로 선언하기도 하고 const=()=>{} 형태로 선언하기도 한다. 그렇다면 두 방식의 차이점은 무엇인지, 더 나은 방식이 있다면 어떤 것인지 알아보도록 하자. 먼저 두 방식의 차이점은 크게 두 가지이다. 호이스팅 가능 여부 export default 동시 선언 여부 * 호이스팅(hoisting) : 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정 호이스팅 가능 여부 Function() 으로 선언하는 방식은 호이스팅이 가능하기 때문에 함수 실행 코드 밑에 선언을 해주는 것이 가능하다. 반면에 Const=()=>와 같은 경우 호이스팅이 불가능하기 ..

위와 같이 웹사이트 메인 페이지에 타이틀을 테두리만 제거한 형태로 표현하고 싶어서 아래와 같이 작성했다. color:transparent; -webkit-text-stroke: 1px black; 글씨의 컬러를 투명색으로 설정하고, -webkit-text-stroke : width color; 형식으로 글씨에 테두리를 줄 수 있다.

먼저, 나는 React, TypeScript를 기반으로 CSS 스타일링은 Styled-Component를 쓰고, 게시판 기능을 위한 데이터베이스는 Firebase를 사용했다. 프론트엔드 개발 과정에서 가장 많이 사용해봤던 React를 사용하는 게 편해서도 있지만, 다음과 같은 이유로 리액트를 사용한다. 재사용 가능한 컴포넌트를 구현하는 것이 용이하다. 컴포넌트의 기능과 역할을 구분해서 유지보수와 관리가 용이하고, 반복 사용이 필요할 경우 분리해서 저장해두고 다시 사용할 수 있다. Virtual DOM을 이용해서 성능 향상이 가능하다. Virtual DOM은 실제 DOM의 복사본으로, 개발자가 변화를 주고 싶은 부분만 Virtual DOM을 변경한 뒤에 실제 DOM과 비교해서 변화가 일어난 부분 즉, 실제..

https://1eehyunji.com/ 이현지 | 프론트엔드 포트폴리오 1eehyunji.com 지난 11월, 약 일주일간 프론트엔드 포트폴리오 웹 사이트를 만들었다. 반응형, 애니메이션에 조금 신경써서 모바일에서도 원활하게 정보를 확인할 수 있는 동적인 반응형 웹을 목표로 했다! 단순 내 소개뿐만 아니라 간단하게 게시판 형태의 페이지도 만들어서 방문자가 메시지도 남길 수 있도록 했다. 최근엔 다크모드 기능을 추가해보려고 생각중이다! 그리고 조금 더 고민해보면서 코드 리팩토링이나 나를 더 어필할 수 있는 기능들을 구현해나가려고 한다. 그리고 그 개발 과정을 이 게시판에다 자세하게 풀어보려고 한다👩🏻‍💻 To Be Continued...

https://www.acmicpc.net/problem/21758 21758번: 꿀 따기 첫 번째 줄에 가능한 최대의 꿀의 양을 출력한다. www.acmicpc.net 문제 풀이 벌 두 마리와 벌통 하나를 배치하는 경우는 3가지인 것과 누적합을 이용해서 풀었다. 벌 벌 벌통 벌 벌통 벌 벌통 벌 벌 세 가지 경우 중 가장 큰 꿀의 합이 정답이 된다. 먼저 벌통이 가장 오른쪽에 위치하는 경우의 꿀의 합은 다음과 같이 구했다. 첫 번째 벌은 0번 인덱스에 고정해두고, 벌통은 마지막 인덱스에 고정해둔 뒤에 두 번째 벌의 위치를 옮겨가면서 최댓값을 탐색한다. 첫 번째 벌과 벌통 사이의 꿀의 합은 누적합을 저장해둔 배열 (sumHoney[n-1]-sumHoney[0])에서 두 번째 벌의 꿀 값을 뺀 것이다. 두..

https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 문제 한 개의 회의실이 있는데 이를 사용하고자 하는 N개의 회의에 대하여 회의실 사용표를 만들려고 한다. 각 회의 I에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하면서 회의실을 사용할 수 있는 회의의 최대 개수를 찾아보자. 단, 회의는 한번 시작하면 중간에 중단될 수 없으며 한 회의가 끝나는 것과 동시에 다음 회의가 시작될 수 있다. 회의의 시작시간과 끝나는 시간이 같을 수도 있다. 이 경우에는 시작하자마자 끝나는 것으로 생각하면 된다. 입력 첫째 줄에 회의의 수 N(1 ≤ N ≤ 10..

https://www.acmicpc.net/problem/16987 16987번: 계란으로 계란치기 원래 프로그래머의 기본 소양은 팔굽혀펴기를 단 한 개도 할 수 없는 것이라고 하지만 인범이는 3대 500을 넘기는 몇 안되는 프로그래머 중 한 명이다. 인범이는 BOJ에서 틀린 제출을 할 때마다 턱 www.acmicpc.net 문제 원래 프로그래머의 기본 소양은 팔굽혀펴기를 단 한 개도 할 수 없는 것이라고 하지만 인범이는 3대 500을 넘기는 몇 안되는 프로그래머 중 한 명이다. 인범이는 BOJ에서 틀린 제출을 할 때마다 턱걸이를 5회 하는 기적의 운동 루틴을 통해 뇌와 근육을 동시에 단련한다. 근육을 단련할 때 식단이 정말로 중요하다는 것을 아는 인범이는 탄수화물이 많은 밥이나 빵 따위의 아침 식사를 ..

https://www.acmicpc.net/problem/2800 2800번: 괄호 제거 첫째 줄에 음이 아닌 정수로 이루어진 수식이 주어진다. 이 수식은 괄호가 올바르게 쳐져있다. 숫자, '+', '*', '-', '/', '(', ')'로만 이루어져 있다. 수식의 길이는 최대 200이고, 괄호 쌍은 적어도 1개 www.acmicpc.net 문제 어떤 수식이 주어졌을 때, 괄호를 제거해서 나올 수 있는 서로 다른 식의 개수를 계산하는 프로그램을 작성하시오. 이 수식은 괄호가 올바르게 쳐져 있다. 예를 들면, 1+2, (3+4), (3+4*(5+6))와 같은 식은 괄호가 서로 쌍이 맞으므로 올바른 식이다. 하지만, 1+(2*3, ((2+3)*4 와 같은 식은 쌍이 맞지 않는 괄호가 있으므로 올바른 식이 ..

백트래킹은 DFS의 일종이라고 하지만, 조금 다르다! 우선 DFS는 가능한 모든 경로를 깊이 우선으로 탐색하는 것이다. 반면에, 백트래킹은 불필요한 경로는 굳이 탐색하지 않고, 탐색할 필요가 없다고 판단하면 끝까지 탐색하지 않는 것이다. 둘 다 일반적으로는 재귀 함수로 구현한다. 백준의 대표적인 백트래킹 연습 문제인 N과 M 시리즈를 모두 풀어보았다. 1. https://www.acmicpc.net/problem/15649 15649번: N과 M (1) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 자연수 N과 M이 주어졌을 때, 아래 ..

https://www.acmicpc.net/problem/1106 1106번: 호텔 첫째 줄에 C와 형택이가 홍보할 수 있는 도시의 개수 N이 주어진다. C는 1,000보다 작거나 같은 자연수이고, N은 20보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 각 도시에서 홍보할 때 www.acmicpc.net 문제 세계적인 호텔인 형택 호텔의 사장인 김형택은 이번에 수입을 조금 늘리기 위해서 홍보를 하려고 한다. 형택이가 홍보를 할 수 있는 도시가 주어지고, 각 도시별로 홍보하는데 드는 비용과, 그 때 몇 명의 호텔 고객이 늘어나는지에 대한 정보가 있다. 예를 들어, “어떤 도시에서 9원을 들여서 홍보하면 3명의 고객이 늘어난다.”와 같은 정보이다. 이때, 이러한 정보에 나타난 돈에 정수배 만큼을 ..