Front-End Dev.
-
[React] 공식문서 학습(문서) : 주요 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 28. 18:25
🧐 서론 문서의 첫 시작이었던 설치는 아무래도 개발보다는 전반적인 소개에 가까웠다. 이 주요개념을 공부하는 것이 React를 시작하며 허술했던 기반을 다져줄 수 있을거라 기대된다! (분량이 많다면 나누어야할듯) 💙 설치 1. Hello World ReactDOM.render( Hello, world!, document.getElementById('root') ); 모든 언어와 프레임워크를 시작하면 "Hello World" 출력이 첫 걸음이다. 이 역시, React의 가장 기본적인 조작으로 "Hello, world!" 글귀의 제목 엘리먼트(혹은 요소, 태그 등) 를 렌더링한 모습이다. 2. JSX 소개 const element = Hello, world!; React 컴포넌트가 반환해야 할 형태이며, 이는..
-
[CodeKata] 프로그래머스 : 4.28(수), 추석 트래픽Algorithm 2021. 4. 28. 17:57
🥋 Oooth More!! (Level 3) * 해설 보러가기 링크 : tech.kakao.com/2017/09/27/kakao-blind-recruitment-round-1/ 레벨3 첫 문제부터 카카오라서 적잖이 당황했다.. ㅎㅎ 배열의 각 값은 종료시점과 트래픽 시간을 묶은 string 이다. 이를 먼저 시작, 종료시간으로 변환해서 트래픽 구간을 알수 있게끔 해야겠다. 그리하여, 이 트래픽 구간들이 가장 많이 포함되는 1000ms의 구간을 찾아 해당 갯수를 반환하면 된다. 🧮 풀이 function solution(lines) { lines = lines.map((line) => { const [, time, gap] = line.split(" ") const [h, m, s] = time.split(..
-
[React] 공식문서 학습(문서) : 설치Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 23. 16:18
🧐 서론 최근 다른 글에서 언급했듯이, 기술면접을 몇 차례 거치면서 React의 기본적인 개념이 많이 부족하다는 점을 뼈저리게 느꼈다. 특히, 이러한 부분들은 React 공식문서에 잘 설명되어 있었기 때문에 진작 Docs 숙독을 선행하지 않은 점이 아쉽게 느껴졌다. 그렇기에 이 공식문서 학습 시리즈는 개념정리보다는 나의 자습노트의 형태가 될 것 같다. 다만, 공식문서의 순서를 따르면서 글을 정리할 것이기에, 일종의 Docs 가이드 라인을 만든다는 생각으로 정리해보겠다. 💙 설치 - 시작하기 "React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리" 라는 명료한 소개로 Docs가 시작된다. 공식문서, 블로그, 플레이그라운드(CodePen 등) 에 대한 소스안내가 주로 이루어지고 있었다...
-
[CodeKata] 프로그래머스 : 4.21(수), n진수 게임Algorithm 2021. 4. 21. 19:28
🥋 Ooooth!! (Level 2) 카카오 문제 치고는 꽤 단순한 문제다. 0부터 n진수 숫자를 나열하면서, 해당 차례의 값을 개수(t)만큼 저장해줘야 한다. 🧮 풀이 function solution(n, t, m, p) { let strings = '' let stringNum = 0; let answer = ''; let count = 0; while (count < t) { const target = strings[m*count + p-1]; if (!target) { strings += stringNum.toString(n); stringNum++; } else { answer += target; count++; } } return answer.toUpperCase(); } strings는 n진..
-
[CodeKata] 프로그래머스 : 4.20(화), 파일명 정렬Algorithm 2021. 4. 20. 17:54
🥋 Ooooth!! (Level 2) 파일명들의 배열을 재정렬하면 된다. 먼저 나누는 방법은 가운데 숫자(최대 5자리) 기준으로 Head, Number, Tail 세 부분이다. 정렬방법은 1) Head 사전순, 2) Number 숫자비교(0제외), 3) 인덱스 순이다. 즉, Tail은 필요가 없을 것이다. 🧮 풀이 function solution(files) { const regex = /^[0-9]*$/ let fileInfos = []; files.forEach(file => { const fileStrs = file.split("") const idx1 = fileStrs.findIndex(s => regex.test(s)); let idx2; for (let i = idx1+1 ; i < idx1..
-
[React] useEffect 심화 학습Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 17. 16:28
🧐 서론 프로젝트나 과제에서 useEffect Hooks를 밥먹듯이 사용하였고, 이를 이해하기 보다는 레거시 코드와, dependency array(이하 deps) 대입 테스트를 통해 구현에 초점을 두기만 했었다. 최근, 면접에서 useEffect 관련한 이슈들이 많았고, 렌더링 최적화 등 고려해야 될 조건이나 작동원리를 제대로 모르고 썼다고 느꼈다. (실제 복수의 면접에서 이러한 부분을 지적받기도 함.) 앞으로 많은 프레임워크를 학습하기 전에 React를 다지는 목적으로 React Docs에 대한 공부를 전반적으로 진행할 예정이다. Docs 구성순서로 진행하기 앞서, useEffect에 대한 심화학습을 선행해보고자 한다! 💙 useEffect 기본 - React Hooks - useEffect() 포스..
-
[Web] 웹 동작원리, 브라우저 렌더링 원리Environment(개발환경)/Web 2021. 4. 17. 16:27
🥺 서론 확인해보니 이전에 웹 동작원리를 한번 포스팅했었는데, 이를 면접전에 다시 복습하거나 신경쓰지 않았다는게 참 후회스러웠다. 그런 한편으로, 이 포스팅이 상당히 간략하기도 하며, 브라우저 렌더링 같은 경우엔 프론트로서 자세히 정리해보아야겠다고 생각했다. 이번 포스팅을 계기로 웹 브라우저 원리를 한번 정리하면서, 면접 전 제대로 대비하지 못한 CS지식의 중요성을 다시금 곱씹어야겠다. * 이전 포스팅(Web 동작원리) : abangpa1ace.tistory.com/43?category=913067 [Web] Web 동작원리 Web 개발 엔지니어가 된다고 마음먹었지만, 정작 프론트 / 백의 존재여부만 알지 이들이 어떻게 작동하는지는 (req, res) 가 지식의 전부다. 멘토님의 지도가 없는 세션이다보니..
-
[Web] OSI 7계층 vs TCP/IP 4계층Environment(개발환경)/Web 2021. 4. 14. 03:09
오늘 면접을 본 회사에서, 가장 기본적인 개념을 물어보았다. 웹페이지의 도메인을 엔터했을 때, 이것이 브라우저까지 보여지는 일련의 과정. 나는 브라우저 렌더링 절차에 관해서만 설명하였고, 그 외의 부분은 딥한 설명을 하지 못하였다. 또 다른 회사에서는, OSI 7계층과 TCP/IP 4계층에 대한 비교를 질문했었다. 이러한 기본적인 개념들을 면접복기의 의미에서 포스팅할 필요성이 있어 이 글을 적게 되었다. 🌐 OSI 7계층 OSI(Open System Interconnection) 7계층은 국제표준화기구(ISO)에서 개발한 모델로, 네트워크 프로토콜 디자인과 데이터 통신을 계층으로 나눠 표준화한 것이다. 이렇게 계층을 나눈 이유는, 통신이 일어나는 과정을 단계별로 서술할 수 있으며, 특정 계층에서 문제가 ..