[React] 커스텀 훅 만들기 로그인 화면을 구성할 때, 아이디 비밀번호 입력창을 구현하기 위해서는 State와 Onchange 함수가 필수적으로 사용됩니다. const [id, setId] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const [password, setPassword] = useState(''); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); 만약에 해당 페이지에 입력 폼이 훨씬 더 많아진다면 정말 귀찮은 일이 될 것입니다. 한 번에 두 가지 기능을 담당하도록 커스텀 훅을 ..
vscode에서 제네릭이 html 태그처럼 자동으로 닫기는 문제 해결 타입스크립트로 리액트를 사용하고 있는 도중에 html 자동 닫기 기능이 html 태그와 제네릭을 제대로 구분하지 못하는 것을 발견했습니다. 수정 전 자동으로 닫기는 태그를 매번 삭제하는 것도 귀찮고, 심지어 그걸 지우면 열린 태그까지 같이 삭제가 됩니다... 다행히 해결 방법이 있었습니다! 먼저 Auto Close Tag라는 확장프로그램을 설치합니다. 톱니바퀴 버튼 - 확장 설정을 클릭합니다. 맨 아래로 스크롤하면 sublime text3 mode라는 설정이 있습니다. 이걸 체크해주면
[Java] 프로그래머스 : 구명보트 https://school.programmers.co.kr/learn/courses/30/lessons/42885 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 limit가 100일 때 다음과 같은 테스트 케이스를 가정한다. [40, 70, 20, 50] -> 제일 가벼운 애들부터 태우는 경우 20 + 40 answer++ 50 + 70 > 100 -> answer+= 2 이런 방식으로는 3개의 구명보트가 필요하다. 50인 친구에 대한 구명보트와 70인 친구에 대한 구명보트가 각각 필요하기 때문이..
아파치로 배포한 웹에서 get post 요청 안되는 문제 해결 net::ERR_CONNECTION_TIMED_OUT 플러터 웹을 아파치로 띄운 다음, 같은 내부망을 사용하는 다른 pc에서 내 웹사이트를 이용할 수 있도록 구현해야하는 일이 생겼다. 웹을 띄우고 다른 pc에서 접속하는 것까진 성공했으나, 다른 pc에서 내 웹사이트에 접속한 후 get, post 요청을 보내면 다음과 같은 에러가 발생했다. net::ERR_CONNECTION_TIMED_OUT 해당 에러에 대해 gpt에 검색하니 다음과 같이 설명했다. 네트워크 구성 확인: 서버 PC와 클라이언트 PC가 모두 동일한 Wi-Fi 네트워크에 연결되어 있는지 확인하십시오. 두 PC의 Wi-Fi 연결 설정을 다시 확인하여 올바르게 연결되었는지 확인하십시..
플러터 웹 아파치 배포 방법 깃허브나 파이어베이스 등에서 배포하는 것이 일반적이지만, 나의 경우 내부망에서만 열람이 가능한 웹 페이지를 배포해야 했기 때문에 아파치를 이용하는 방법을 선택했다. 먼저 아파치를 설치한다. https://inpa.tistory.com/entry/APACHE-%F0%9F%8C%90-%EC%95%84%ED%8C%8C%EC%B9%98-%EC%84%9C%EB%B2%84-%EC%B4%88%EA%B0%84%EB%8B%A8-%EC%84%A4%EC%B9%98-%EC%A0%95%EB%A7%90-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC 🌐 아파치(Apache) 서버 초간단 설치 방법 Apache 서버 설치하기 1. 아래 링크로 들어가 아파치 서버를 설치해준다. Apa..
SpringBoot NextJS 활용한 쇼핑몰 프로젝트 - 기획 기획 배경 이전에서는 웹사이트 링크를 효율적으로 관리하는 웹 서비스 프로젝트에서 퍼블리싱과 프론트 부분만을 담당하였다. 처음으로 경험한 협업 프로젝트인지라 웹 서비스 로직에 대한 전반적인 이해도의 부족으로 인한 어려움이 많았다. 특히, 가장 많은 시간을 소요했던 어려움들은 다음과 같다. 배포 성능 최적화 확장에 용이한 설계 1. 배포 배포 방식에 대해서 사전에 공부가 부족했고, 팀원들과의 충분한 논의가 이루어지지 않은 상태에서 진행했기 때문에 아직까지도 배포가 제대로 이루어지지 않은 상태이다. 2. 성능 최적화 프론트 단의 경우, 기존의 설계대로 구현은 완료했으나, 코드 리팩토링 정도만 진행했을 뿐 최적화 작업에 신경을 쓰지 못하였다. 단순..
[Flutter] 플러터 웹에서 scroll 안될 때 해결방법 플러터에서 스크롤 기능을 처리하기 위해 일반적으로 SingleChildScrollView를 사용하곤 한다. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('예약 조회 페이지'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: SingleChildScrollView( scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Dat..
[Java] 프로그래머스 : 크레인 인형뽑기 게임 https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 바구니는 스택으로 구현하고, 집어들어 올린 인형과 스택의 최상단에 있는 값이 일치할 경우, answer에 2점씩 추가해주면 된다. moves 각각의 값은 집게가 움직이는 고정된 열이며, 행은 board.length를 순회하도록 하여 집게의 움직임을 구현할 수 있다. 인형을 집었으면 해당 위치를 0으로 만들어서 나중에 집게가 똑같은 위치를 오게..
[Java] 프로그래머스 : 달리기 경주 https://xn--school-he5x.programmers.co.kr/learn/courses/30/lessons/178871?language=java 접근 처음에는 '그냥 리스트로 받아서 각각 스와이핑 하면 되는 거 아닌가?' 라고 생각했다. 리스트의 indexOf를 사용하면 해당 값에 대한 인덱스 값을 쉽게 찾아낼 수 있기 때문이었다. import java.util.*; class Solution { public String[] solution(String[] players, String[] callings) { String[] answer = new String[players.length]; List list = new ArrayList(); for (..
[Java] 프로그래머스 : 둘만의 암호 https://school.programmers.co.kr/learn/courses/30/lessons/155652 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 문자열 s를 문자 단위로 순회하면서 각각의 값을 Strnig으로 변환하여 skip에 값이 있는 경우를 건너뛰도록 하는 방식으로 접근했다. 코드1 class Solution { public String solution(String str, String skip, int index) { StringBuilder sb = new StringBuilder(..
[Java] 프로그래머스 : 체육복 https://school.programmers.co.kr/learn/courses/30/lessons/42862 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 '여벌 체육복을 가져온 학생이 도난 당했을 경우를 가정하고, 이 학생은 다른 학생들에게 체육복을 빌려줄 수 없다.' lost와 reserve에 동시에 존재하는 학생인 경우, 결국 체육복이 하나뿐이므로 자기만 입을 수 있다는 말이다. n= 6, lost = [6, 4, 2], reserve = [1, 4, 5], return = 5이다. 이때 4가 위의 케이..
[Java] 프로그래머스 : 옹알이(2) https://school.programmers.co.kr/learn/courses/30/lessons/133499 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 일단 연속으로 두개의 단어를 발음하지 못하므로, "ayaaya", "yeye", "mama", "woowoo"와 같은 단어가 나오면 제외시킨다. 나머지의 경우는 그냥 replace함수를 사용하여 공백처리를 해주었다. 첫번째 시도 import java.util.*; class Solution { public int solution(String[] ba..
