개발 노트

React Native를 이용해 서비스를 개발하던 중, UX 측면에서 좋지 않은 현상 하나를 겪었다. 새로고침 시 이미지가 깜빡이는 현상(flickering)이 생기고 있었다.문제를 찾기 위해 디버깅을 해 보니, 그 이유는 AWS의 Presigned Url에 있었다. 이미지 관련 정보를 S3에서 동적으로 받아오는 형태로 아키텍처를 구성했는데, 동일한 리소스에 대한 요청에도 그때마다 다른 url 값을 반환하는 특성 상 Image 객체의 url이 변경되어, 원치 않는 리렌더링이 발생하는 것이었다. 이미지 자동 캐싱을 해 주는 react-native-fast-image 라이브러리를 써 봤을 때에도 별다른 효과가 없었고, 이후 조금 더 근본적인 해결책을 찾게 되었다. patch 파일을 통해 라이브러리 코드를 직..

문제 상황React Native를 이용해 프로젝트를 진행하고 있는데, IOS에서는 정상적으로 보이는 그림자가 Android에서는 좌우로 잘려 보인다.  원인const GeneralCommunity: React.FC = () => { const { postList, getPostListByBoardId } = useCommunityContext(); const { tokenHeader } = useContext(AuthContext); useEffect(() => { if (!tokenHeader) return; getPostListByBoardId(tokenHeader, 1, 0); }, [tokenHeader]); return ( ( // 그림자 효..

SW마에스트로 합격을 위해 최근 열심히 코딩 테스트를 준비하고 있다. 열심히 코테를 위한 뇌를 깨우고 있던 중, 첫 번째 난관에 봉착했다. 꽤나 오랜 시간을 투자한 만큼 더이상 삽질하지 말자는 의미에서, 기존 내가 설계했던 방식에 대한 짧은 소개와 문제점, 그리고 올바른 풀이를 설명하고자 한다. 이번 문제에서는 아이디어만큼 내가 여기서 겪었던 실패와 성공의 경험 역시 중요하다고 생각해 전반적인 흐름을 작성하였으니, 하나의 이야기를 보는 느낌으로 편하게 봐 주시면 될 것 같다. 문제 https://www.acmicpc.net/problem/2504 2504번: 괄호의 값 4개의 기호 ‘(’, ‘)’, ‘[’, ‘]’를 이용해서 만들어지는 괄호열 중에서 올바른 괄호열이란 다음과 같이 정의된다. 한 쌍의 괄호..

리액트를 이용해 개발을 하다가, 처음 보는 오류를 마주하게 되었다. 기존의 동적인 요소와 상호작용이 되지도 않을 뿐더러, 사이트 자체가 아주 느려진 느낌이었다. 창이 꺼지는 데에도 많은 시간이 걸렸다. 추후에 어찌저찌 개발 툴을 열어 오류를 확인해 보니, 아래와 같은 오류 창이 떠 있었다. 음.. 누가 봐도 어딘가에서 코드를 잘못 써서 무한루프에 걸린 문제였다. 처음에는 'useEffect 내부에서 setState를 호출했으나, useEffect가 두 번째 인자인 dependency 배열을 받지 않았거나 렌더 시마다 dependency가 변경되었을 때 발생할 수 있는 오류'라는 내용을 보고 이 부분을 확인해보고자 하였다. 실제로, 아래 두 가지의 상황에서는 무한루프가 발생할 수 있다. 1. useEffe..

자바스크립트를 이용해 개발을 할 때, 흔히 비동기와 동기적 처리에 대한 용어를 많이 접하고는 한다. 그리고 비동기적 처리에 항상 콜백 함수라는 용어도 같이 동반되고는 한다. 동기와 비동기적 처리 그리고 콜백 함수가 무엇인지, 그리고 어떻게 동기와 비동기적 처리를 구현할 수 있는지에 대해 간단히 정리해보았다. 동기와 비동기 방식 동기(synchronous) : 요청과 처리가 동시에 일어남 비동기(asynchronous) : 요청과 처리가 동시에 일어나지 않음 용어의 정의만 들어서는 무슨 말인지 잘 와닿지 않는다. 요청과 처리의 동시성이 어떤 의미를 가지는 걸까? 현실 상의 예시를 하나 들어보겠다. 당신은 카페에 갔다. 그리고 주문을 하려고 한다. 주문에는 두 가지 방식이 있다. 1) 주문을 하면 즉시 커피..

React는 페이스북에서 개발한, 유저 인터페이스(UI)를 담당하는 자바스크립트 라이브러리 중 하나이다. 리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징을 가지고 있는데, 이번 시간에는 그 특징들에 대해 정리해보고자 한다. SPA와 CSR SPA : Single Page Application CSR : Client Side Rendering SPA는 Single Page Application, 단일 페이지 어플리케이션의 약자이며 MPA(Multiple Page Application)와 반대되는 개념이다. 단 하나의 페이지를 통해 유저의 요청을 처리해 주는 방식이다. 그렇다면 리액트에서 어떻게 하나의 페이지로만 웹 어플리케이션을 구성할 수 있을까? 이를 위해 사용되는 방식이 바로..

문제 https://www.acmicpc.net/problem/1941 1941번: 소문난 칠공주 총 25명의 여학생들로 이루어진 여학생반은 5×5의 정사각형 격자 형태로 자리가 배치되었고, 얼마 지나지 않아 이다솜과 임도연이라는 두 학생이 두각을 나타내며 다른 학생들을 휘어잡기 시작 www.acmicpc.net 아이디어 1) 조합을 이용하여 7개의 좌표 선택 2) BFS를 이용하여, 선택한 좌표가 서로 연결되어 있는지 확인 3) 만약 연결되어 있을 시에는, 연결된 좌표들의 'S'의 개수와 'Y'의 개수 비교 처음에는 1)과 같이 조합을 이용하지 않고 백트래킹을 이용하여, 영역을 넓혀 나가며 좌표를 선택하다가 7개 모두 선택 시 2)와 3)의 과정을 수행하였다. 그러나 백트래킹으로는 십자 모양과 같이 두..

next_permutation은 C++ STL의 헤더에서 제공하며 순열과 조합을 구할 때 유용하게 사용 가능한 함수이다. 순열과 조합 순열 : 서로 다른 n개의 원소에서 r개를 선택한 후, 이를 나열하는 모든 경우의 수. 기호로는 n​Pr 이라고 나타내며, 이 때의 P는 영어 permutation의 약자이다. 특정 원소를 ​뽑은 후 이를 '나열'하는 경우의 수이기 때문에, 뽑힌 원소의 순서까지도 고려가 된다. 예를 들어 {1, 2}와 {2, 1}은 같은 원소를 선택하였으나 순서가 다르기에, 둘은 다른 순열이 된다. {1, 2, 3}으로 만들 수 있는 순열은 다음과 같다. {1, 2, 3} {1, 3, 2} {2, 1, 3} {2, 3, 1} {3, 1, 2} {3, 2, 1} 총 6개의 경우의 수가 존재..

기존 백트래킹으로 풀었던 문제를 C++의 STL 중 하나인 next_permutation을 이용해 풀이해 보았다. 문제 https://www.acmicpc.net/problem/15649 15649번: N과 M (1) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 풀이에 사용되는 next_permutation에 대해 정리한 링크이다. https://taehun0933.tistory.com/18 [알고리즘] next_permutation - 순열과 조합 / C++ next_permutation은 C++ STL의 헤더에서 제공하며 순열과 조..

CSS에서는 흔하게 flex container를 통해 내부 요소들의 레이아웃을 결정한다. 이 때, 각각의 요소의 레이아웃을 보다 세밀하게 지정해줄 수 있는데, 그때 쓰이는 CSS 속성이 바로 flex-grow, flex-shrink 그리고 flex-basis이다. 위 세 속성은 flex container가 아닌, flex container의 자식 요소들에게 직접적으로 지정해주어야 한다. flex container에 별도의 방향 설정을 해주지 않았으므로, 기본 방향인 가로 방향으로의 크기, 너비만을 기준으로 설명하겠다. flex-grow flex container의 남은 여백을 채우기 위해 존재하는 속성. 기본값 : 0 위처럼 flex container 자식 요소의 크기 총합이 부모보다 작아 여백이 생길 ..