브라우저 동작원리, Critical Render Path 이해하기

# Critical Render Path(CRP) 브라우저가 HTML, CSS, Javascript 를 화면에 픽셀로 변화하는 일련의 단계를 말한다. 이를 최적화 하는 것이 어플리케이션 응답속도를 개선할 수 있다. `Critical Render Path`는 Document Object Model(DOM), CSS Object Model(CSSOM), R

[개발일지] 2024-09-24(화)

최근 추석 연휴에 개발 치느라 너무 급급했다. 요즘 개발보다는 퍼블리싱 위주로 화면만 개발하고 있다. 똑같은 화면을 몇 달째 개발하다보니 지루한 면이 없지않다. 화면 개발만 한다고 해서 신경써야할것들이 없는게 아니다. 화면 개발을 하면서 기획서랑 상이한부분들을 면밀히 살펴봐야하고, 다른 부분이 있으면 사이드 이펙트 발생시키지 않으면서 빠르게 수정해야한다.

[개발일지] 2024-08-28(수)

이번주 개발은 기획 수정과 관련된 것들을 개발했다. 기존 리스트 형태의 SNB table 형태로 변경(table 형태의 snb가 있었나…?)하는거라던지, UI 중 카드 섹션이 있는데, 그 가드 섹션에 액션이 무조건 들어가도록 기획이 재정의 된다던지 이런 개발건들이었다. 항상 기획 입장에서는 버튼을 단순히 하단에서 상단으로 올리는 작업이지만, 개발 입장에

[개발일지] 2024-08-23(금)

개발 완료된 건에 대해서 수정사항들이 올라왔다. 기존 개발했던 내역에서 추가된 사항 + 개발하다가 놓친 사소한건이 있었다. 4개의 컬럼 헤더에 대해서 다국어 번역 기능을 넣지 않은 부분과 value 포매팅 부분을 빼먹었는데, 사소한 부분이더라도, 결국에는 개발에서 챙기지 못한 부분이다. 항상 jira 완료처리 하기전에 확인해야하는 부분인대, 개발하느라 정

[개발일지] 2024-08-22(목)

google token을 갱신하는 로직을 개발했다. google api 에서는 token 유효시간 1시간만을 제공하기 때문에 refresh를 하기 위해서는 FE에서 직접 로직을 제어할 필요가 있었다. 요청사항은 google api에서 post를 할때 401에러로 token 유효성을 판단하지 말고 이전에 판단하길 원했다. 따라서 화면에서 interval을

[개발일지] 2024-08-19(월)

오늘 개발은 이전 개발했던 부분에서 팝업을 그리는 로직 하나 빠뜨린게 있어 그 부분을 추가하였다. 팝업 호출은 data-grid의 컬럼을 그리는 로직에 추가를 해야했었다. 또한, 컬럼 그리는 로직은 hooks로 분리해 관리포인트를 분산시켰다. 하지만 팝업을 띄우기 위해서는 useAlert 객체가 필요했고, 그 객체를 결국 컴포넌트 내부에서 useColum

[개발일지] 2024-08-16(금)

오늘은 화면개발만 주구장창 수행했다. 기획서는 애매하고, 기획자는 실장급이기때문에 문의하기도 쉽지않았다. 일단 나온 화면 그대로 화면개발에 들어갔고, 기획적으로 궁금하거나 문제되는 사항들은 추후 논의하기로 했다. 현재 프로젝트에서는 화면개발 할 때, 템플릿화 시켜놓고 개발하기 때문에 화면하나 만드는데 그렇게 어렵지도 않다. 무엇보다 개발속도를 빨리 낼

[개발일지] 2024-08-13(화)

오전까지 기존 리스트 형태의 관계 코드들을 트리구조 형식으로 변경하는 작업을 했다. 기획전 기술검토 단계라 트리 구조로 뿌려주고 다시 그 형태를 children하위 값을 넣어 반복되는 구조로 변경하는 개발을 진행해야했다. child item을 호출하기 전 parent키를 전달하여 그 값에 대응되는 체크박스 상태값들을 저장하는 방식으로 머릿속으로 구상했지만

[개발일지] 2024-08-12(월)

일주일동안 공통코드 관계설정 매핑하는 로직만 개발했다. 하지만 결과는 좋지않았다. 지난주까지 개발 마무리 작업에 들어가야했었고, 주말동안 테스트코드를 작성해서 개발에 매진했지만 결과는 실패로 마무리됐다. 오늘 주간보고에 들어가 업무 조정 관련해서 논의가 이뤄졌다. 애초에 기획자체가 너무 모호하다는 의견으로 많이 모아졌다. BE 데이터 구조는 tree 구

[개발일지] 2024-07-31(수)

edit 화면 분기처리에 대해 고민하다 리더님의 의견을 듣고 결정했다. create, modify 두 컴포넌트에서 서로 비슷한 형태인데, 비즈니스 로직이 서로 달라 고민하던차 리더님은 분리하는게 좋을것 같다는 의견을 주셔 반영했다. 또한, modify 화면에서는 기존 scene 데이터를 가져와야하는 이슈가 있었다. 이전에는 스토어에 저장되어있는 값을 가

[개발일지] 2024-07-30(화)

edit 화면에서 사용될 데이터 구조를 다시 설계했다. 기존 구조와는 크게 다르지 않고, 다음 레벨에서 가져갈 value 리스트를 null값으로 하고 나머지 인터페이스는 동일하게 가져갔다. 단 card의 id를 uuid로 설정하여 unique한 id를 갖도록 했다. 카드 내부 공통코드 select box를 연동했고, 해당 공통코드 id를 통해서 공통코드

[개발일지] 2024-07-29(월)

체크박스 상태값을 트래킹하여 체크여부에 따라 테이블 컬럼을 변경하는 로직을 짰다. react-hook-form을 사용하고 있는터라, useForm의 객체를 binding하여 상태가 변경된 이후 columns을 변경하는 로직으로 구조를 설계했다. 카드를 선택함에 따라서 카드의 선택 여부를 나타내는 네비게이션 제어하는 기능을 개발했다. 카드 네비게이션 색상

[React] Ducks Pattern 구조에 대해 알아보기

React, Redux의 근본이 되는 ducks 패턴에 대해 알아보자

[Webpack] 강의내용 정리

엔지니어라면 AS를 기다리지 않고 직접 부품을 다룰 줄 아는 것도 개발자의 역량이라고 생각합니다. 그렇기 때문에 webpack이란 개념을 배우고 싶었고, 강의를 찾아보던 중 좋은 강의가 있어 정리하고 또 공유하려고 합니다. # NPM ## 빌드 자동화 프로젝트에서 사용하는 라이브러리를 다운받고, 각종 테스트를 용이하게 한다. # 개발환경 커스터마

[WEB] 프론트엔드 기초(3) - XSS공격 개념과 React에서 대응 방법

크로스 사이트 스크립트의 취약성은 해커가 사용자 브라우저를 컨트롤 할 수 있게 하는 해킹 기법 중 하나 입니다. 브라우저 안에 있는 민감한 개인정보, 계좌정보, 휴대전화번호 등이 해킹당할 수 있습니다.

[WEB] 프론트엔드 기초(1) - HTTP 통신구조에 대한 기본 개념

웹개발을 1년 넘게 하면서 ajax, fetch API, Axios 라이브러리 등 HTTP 통신을 매번 사용했습니다만, 정작 그 구조에 대해서는 잘 모르고 있었습니다.

[WEB] 프론트엔드 기초(2) - SSR, SPA 장단점 및 차이점

이전에 면접을 보다 들어온 질문 중 SPA, SSR의 차이점과 어떤 기준으로 구분해서 사용하는지 물어보는 질문이 있었습니다...

[WEB] 프론트엔드 기술면접 대비 질문 정리

프론트엔드 주니어 개발자로서 기본적으로 알아야할 것들, 또는 질문 들어올만한 개념들을 정리하려고한다.

[WEB] 시맨틱(Semantic) 웹, 시맨틱 태그에 대하여

웹개발 중 기초적인 파트중에 하나이다. 하지만, 개발을 하면서...

[React, Next.js] Next.js CORS 문제 해결

먼저 css로 애니메이션을 일일이 매번 처리하려고하다 보니, 귀찮았다...

[Spring] ORM(JPA, Hibernate), SQL Mapper, JDBC 개념 정리

스프링은 DB에 대한접근을 가능하게 만든다...

[Spring Boot] 스프링 부터 기본 개념 정리

스프링에 대한 개념이 부족해서 공부할 겸 정리하려고 한다...

[Javascript] dataset 속성 정리

dataset은 읽기 전용 속성이다. HTML과 DOM 양측에서 제공한다.

[프로그래머스 레벨2] 다음 큰 숫자

자연수 n이 주어졌을 때, n의 다음 큰 숫자는 다음과 같이 정의 합니다.

[React] react에서 애니메이션 처리, react-spring

먼저 css로 애니메이션을 일일이 매번 처리하려고하다 보니, 귀찮았다...

[React hook] useCallback, 컴포넌트 성능 최적화

이번엔 `useCallback`이다. useMemo와 마찬가지로 메모이제이션 기법을 사용하여 성능을 최적화 시킨다...

[React hook] useMemo, 컴포넌트 성능 최적화

성능을 최적화하기 위한 hook, useMemo이다. 일반적으로 state가 변경될때 마다, re-rendering이 되는것을 알 수 있다...

[React hook] useRef, 데이터 참조, 리렌더링 시 state변경 안되는 현상 해결

이번엔 `useRef`이다. DOM의 Focus를 제어할 때, ref라는 프로퍼티로 제어하기도 했다.

[React hook] useEffect 기본 개념, 사용법

이번엔 useState에 이어서 `useEffect`에 대해 정리해보려고 한다.

[React hook] hook에 대한 정리, hook에서의 state관리 useState

리액트를 `do it 리액트 프로그래밍`으로 시작했다. 근데 이건 hook에 대해 전혀 다루지 않아서 hook에 대한 개념 조차 알지 못했다.

[React] Redux hook으로 Redux 편하게 사용하기

이전 예제에서 데이터 컴포넌트가 리덕스 스토어를 불러오는, 그리고 리듀서를 dispatch하는 것 까지 해봤다.

[React] Redux, connect dispatch를 이용한 스토어 데이터 가져오기

앞서 리덕스에 대한 개념들을 정리하고, 액션, 리듀서의 사용법 그리고 실제 예제를 통해 액션, 리듀서를 구현시켰다.

[React] Redux, 스토어에 데이터 저장하는 방법

리덕스는 크게 액션, 리듀서, 스토어 3개로 구분된다. 앞서 동작 원리를 알아봤으니, 실제 사용 방법을 다시한번 복기하자.

[React] Redux, 공용 데이터 저장소 개념

리액트는 컴포넌트별로 구성되어있는 자바스크립트 기반 프레임워크입니다.

[React] LocalStorage vs Cookie

일반적으로 웹에서 로그인 API를 연동하기 위해 로그인 정보를 저장할 수단 및 방법이 필요하다.

[React] map함수를 활용한 리스트 컴포넌트 만들기

map 함수는 javascript에서 새로운 배열을 만드는 매우 유용한 함수이다.

[React] map함수를 활용한 리스트 컴포넌트 만들기

map 함수는 javascript에서 새로운 배열을 만드는 매우 유용한 함수이다.

[React] React State, 컴포넌트의 상태 관리

리액트는 컴포넌트 별로 구성되어 있기 때문에 각 각 컴포넌트마다 상태값이 존재한다.

[Javascript] 깊은복사와 얕은복사의 차이점

JS에서는 얕은 복사, 깊은 복사 두가지로 나뉘는 방식으로 값 할당이 이뤄진다. 어떤건지 정리하고 넘어가자.

[React] 컴포넌트 개념, props 데이터 전달방법

리액트는 기본적으로 컴포넌트별로 동작한다.

[React] 초기설정, JSX, 렌더링 및 기본 개념

[React 가이드 참조해서 공부](https://ko.reactjs.org/docs/rendering-elements.html) # 초기 설정 0. `Visual Studio Code` 설치. 1. `node.js` 설치. 2. `npm -v` 명령어로 설치 확인. 3. `npm create-react-app` 으로 create-react-ap

[Android] Webview와 Javascript 연동(Eclipse, Tomcat, Jquery)

Webview는 안드로이드에서 Web을 제어하기 위한 개념이다.

[jQuery] AJAX의 기초 / 사용 방법

AJAX( Asynchronous Javascript and XML )란, 자바스크립트와 XML을 `비동기`적으로 처리하는 기법을 말한다...

[jQuery] HTML 요소 접근 방법, GET/SET

jquery에서 html 요소에 접근하는 방법이 있다. 요소에 대한 정보를 얻을 수도 있고(GET), 요소를 수정할 수도 있다(SET)...

[jQuery] 셀렉터 접근 방법, 클릭 이벤트(hide, show, toggle)

Jquery는 selector를 빠르고 간편하게 참조할 수 있어 편리하다

[Android] 쓰레드 개념, 사용법, UI 처리

쓰레드는 작업(실행)의 단위이다. 어떤 프로세스가 자원을 할당 받고, 프로그램이 실행이 될 때...

[프로그래머스] 영어 끝말잇기

1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다.

[프로그래머스] 스킬트리

선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다.

[프로그래머스] 소수 찾기

한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다.

[프로그래머스] 숫자의 표현

프로그래머스 문제는 백준처럼 정형화 되어있지 않아 처음에 접근하기가 어렵다. 무엇보다 문제 이해가 잘안된다

[Android] 코루틴 개념, 동작 원리

코루틴(Coroutine)을 말하기 전에 먼저 `루틴`에 대해서 알아야한다.

[프로그래머스] 124 나라의 숫자

124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다.

[Android] SharedPreferences, 앱 내부 데이터 저장

앱 개발을 하다보면 token과 같이 데이터를 저장해야하는 상황이 닥칠 수 있다.

[Android] Retrofit2 GET 사용해서 데이터 조회

Retrofit2라이브러리는 안드로이드에서 RestAPI를 사용할 수 있게 하는 기능이다.

[프로그래머스] 이상한 문자 만들기

문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다.

[백준] 2468 안전 영역

# Problem [BOJ 2468](https://www.acmicpc.net/problem/2468) 재난방재청에서는 많은 비가 내리는 장마철에 대비해서 다음과 같은 일을 계획하고 있다. 먼저 어떤 지역의 높이 정보를 파악한다. 그 다음에 그 지역에 많은 비가 내렸을 때 물에 잠기지 않는 안전한 영역이 최대로 몇 개가 만들어 지는 지를 조사하려고

[Android] Activity와 AppCompatActivity의 차이점

Activity와 AppCompatActivity의 차이점을 알아보기 전에 먼저 Context를 알아야한다.

[백준] 2583 영역 구하기

# Problem [BOJ 2583](https://www.acmicpc.net/problem/2583) 눈금의 간격이 1인 M×N(M,N≤100)크기의 모눈종이가 있다. 이 모눈종이 위에 눈금에 맞추어 K개의 직사각형을 그릴 때, 이들 K개의 직사각형의 내부를 제외한 나머지 부분이 몇 개의 분리된 영역으로 나누어진다. 예를 들어 M=5, N=7 인

[백준] 10026 적록색약

# Problem [BOJ 10026](https://www.acmicpc.net/problem/10026) 적록색약은 빨간색과 초록색의 차이를 거의 느끼지 못한다. 따라서, 적록색약인 사람이 보는 그림은 아닌 사람이 보는 그림과는 좀 다를 수 있다. 크기가 N×N인 그리드의 각 칸에 R(빨강), G(초록), B(파랑) 중 하나를 색칠한 그림이 있다

[백준] 9466 팀 프로젝트

# Problem [BOJ 9466](https://www.acmicpc.net/problem/9466) 이번 가을학기에 '문제 해결' 강의를 신청한 학생들은 텀 프로젝트를 수행해야 한다. 프로젝트 팀원 수에는 제한이 없다. 심지어 모든 학생들이 동일한 팀의 팀원인 경우와 같이 한 팀만 있을 수도 있다. 프로젝트 팀을 구성하기 위해, 모든 학생들은 프

[프로그래머스] 방문 길이

게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다.

[Javascript] 변수선언 방식의 차이(const, var, let)

# Object 란 객체지향은 어떤 Object를 명시하여 보다 코드 구성을 간결하고 개발자가 읽기 쉬운 형태로 구성한다. 여기서 기초가 되는 것은 당연 Object(객체)이다. JS에서도 Object가 사용되는데, Java와 C++과는 조큼 다른 형식으로 쓰인다. 알아보기 전에 우선 배열부터 알아보자. ## 배열 선언 방법 ```html <sc

[Javascript] 변수선언 방식의 차이(const, var, let)

Javascript(이하 "JS")에서 `var`는 일반적으로 모든 변수 타입을 받는다.

[백준] 11403 경로 찾기

# Problem [BOJ 11403](https://www.acmicpc.net/problem/11403) 가중치 없는 방향 그래프 G가 주어졌을 때, 모든 정점 (i, j)에 대해서, i에서 j로 가는 경로가 있는지 없는지 구하는 프로그램을 작성하시오. 첫째 줄에 정점의 개수 N (1 ≤ N ≤ 100)이 주어진다. 둘째 줄부터 N개 줄에는 그래

[Android] SnackBar의 개념, 사용법

snackbar는 앱 사용자에게 알림메세지, 경고창 등을 나타내게 하는 기능이다.

[백준] 2667 단지번호붙이기

# Problem [BOJ 2667](https://www.acmicpc.net/problem/2667) BOJ 1743문제와 매우 유사한 문제였다. 배열 상에서 동서남북으로 연결된 그래프들을 찾되, 그래프 영역의 크기를 구하는 문제이다. 연결상태는 동서남북 중 1의 값을 갖는 배열이 있으면 연결됐다고 판단한다. # Solution ## 문제 접근

[백준] 1743 음식물 피하기

코레스코 콘도미니엄 8층은 학생들이 3끼의 식사를 해결하는 공간이다...

[백준] 1012 유기농 배추

차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다...

[백준] 2178 미로 탐색(최소경로, BFS)

N×M크기의 배열로 표현되는 미로가 있다...

[백준] 11724 연결 요소의 개수

# Problem [BOJ 11724](https://www.acmicpc.net/problem/11724) 방향 없는 그래프가 주어졌을 때, 연결 요소 (Connected Component)의 개수를 구하는 프로그램을 작성하시오. # Solution ## 문제 접근 순서 1. 그래프의 연결 요소를 알아내는 문제. 2. dfs, bfs 둘다 이용

[백준] 2644 촌수계산

# Problem [BOJ 2644](https://www.acmicpc.net/problem/2644) 우리 나라는 가족 혹은 친척들 사이의 관계를 촌수라는 단위로 표현하는 독특한 문화를 가지고 있다. 이러한 촌수는 다음과 같은 방식으로 계산된다. 기본적으로 부모와 자식 사이를 1촌으로 정의하고 이로부터 사람들 간의 촌수를 계산한다. 예를 들면 나와

[백준] 1260 DFS와 BFS

그래프를 DFS로 탐색한 결과와 BFS로 탐색한 결과를 출력하는 프로그램을 작성하시오...

[Android] RecyclerView의 개념 및 사용법

recyclerview는 ListView를 보완하기 위해 나온것이다.

[백준] 2294 동전2

# Problem [BOJ 2294](https://www.acmicpc.net/problem/2294) n가지 종류의 동전이 있다. 이 동전들을 적당히 사용해서, 그 가치의 합이 k원이 되도록 하고 싶다. 그러면서 동전의 개수가 최소가 되도록 하려고 한다. 각각의 동전은 몇 개라도 사용할 수 있다. 사용한 동전의 구성이 같은데, 순서만 다른 것은

[백준] 1912 연속합

개의 정수로 이루어진 임의의 수열이 주어진다...

[백준] 1806 부분합

10,000 이하의 자연수로 이루어진 길이 N짜리 수열이 주어진다...

[백준] 2941 크로아티아 알파벳

# Problem [BOJ 2941](https://www.acmicpc.net/problem/2941) 예전에는 운영체제에서 크로아티아 알파벳을 입력할 수가 없었다. 따라서, 다음과 같이 크로아티아 알파벳을 변경해서 입력했다. | 크로아티아 알파벳 | 변경 | | :---------------: | :--: | | č

[백준] 5622 다이얼

# Problem [BOJ 5622](https://www.acmicpc.net/problem/5622) 전화를 걸고 싶은 번호가 있다면, 숫자를 하나를 누른 다음에 금속 핀이 있는 곳 까지 시계방향으로 돌려야 한다. 숫자를 하나 누르면 다이얼이 처음 위치로 돌아가고, 다음 숫자를 누르려면 다이얼을 처음 위치에서 다시 돌려야 한다. 숫자 1을 걸려면

[백준] 1316 그룹 단어 체커 (문자열)

그룹 단어란 단어에 존재하는 모든 문자에 대해서, 각 문자가 연속해서 나타나는 경우만을 말한다...

[백준] 10809 알파벳 찾기

# Problem [BOJ 10809](https://www.acmicpc.net/problem/10809) 알파벳 소문자로만 이루어진 단어 S가 주어진다. 각각의 알파벳에 대해서, 단어에 포함되어 있는 경우에는 처음 등장하는 위치를, 포함되어 있지 않은 경우에는 -1을 출력하는 프로그램을 작성하시오. # Solution ## Source ```

[한이음 코딩테스트] 문제 4

# Problem 초기 위치와경로를 찾는 문제로 조건이 주어진다. 조건에 따라 이동하며 루트를 그리는 문제이다. 문자 'a', 'b', 'c'는 row 성질을 갖는다. 1행은 'a', 2행은 'b', 3행은 'c' 이런식으로 'h'까지 존재한다. 문자 '1', '2', '3'. '4' 는 col성질을 갖게된다. 1행은 '1', 2행은 '2', 3행은

[한이음 코딩테스트] 문제 2

# Problem 아버지가 중고차를 사주신다고 하여 중고차를 알아보는 보았다. 제일 저렴한 차는 뭔가 찜찜하다고 3번째로 저렴한 중고차량을 구매한다고 한다. 같은 금액일 경우 동일한 등수로 취급한다. ## 예제 1. prices = {70, 20, 30 60, 50, 10, 80, 40, 100, 90} 이런 경우 30이 3번째로 저렴한 차량이다.

[한이음 코딩테스트] 문제 1

# Problem 누나와 내가 백화점에서 물건을 구매하려고 한다. 따로 구매하려던 도중 50달러 이상을 구매하면 10달러를 할인해주는 프로모션이 진행중이였다. 나는 9달러, 50달러 물건을, 누나는 67달러 물건을 구매하려고 할 때, 총 내야하는 금액은 얼마인가? goods배열 안에 구매하려는 물품의 가격이 제공된다. ## 제약조건 goods 요소

[백준] 2908 상수 (문자열)

# Problem [BOJ 2908](https://www.acmicpc.net/problem/2908) 상근이의 동생 상수는 수학을 정말 못한다. 상수는 숫자를 읽는데 문제가 있다. 이렇게 수학을 못하는 상수를 위해서 상근이는 수의 크기를 비교하는 문제를 내주었다. 상근이는 세 자리 수 두 개를 칠판에 써주었다. 그 다음에 크기가 큰 수를 말해보라고

[프로그래머스] 가장 큰 수(C++)

0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.