이전 글에서 다루지 않았던 자바스크립트 엔진에 대한 글입니다. HTML이 parsing될 때 script태그를 만나면 parsing이 일시중지되고 script를 해석, 실행한다. 이 해석, 실행되는 것이 어떻게 이루어지는가에 대한 정리를 시작해보자. 앞서, 컴파일러, 인터프리터, JIT 컴파일러에 대해 간단히 알아보자. 알아야 아래 내용 이해하기 편하다. 컴파일러 ? 프로그래밍언어로 작성된 것을 실행파일로 만들기 위한 목적파일로 만드는 언어 번역 프로그램을 컴파일러라고 한다. CPU는 0,1만을 읽는 단순한 계산기다. 영어로 이루어진 코드를 컴퓨터는 절대 알 수 없다. 0, 1로 번역시켜주어야한다. Source code가 실행파일로 만들어지는 과정_출처 C로 예를 들었을 때 영어로 작성된 a.c 라는 s..

브라우저의 동작을 정리한 원문 , d2 포스팅를 참고한 포스팅입니다. Rendering Engine이 UI를 그려내기까지의 과정을 다루고 있으며, 이전_랜더링과정을 정리해놓은 글 에서 추가적인 사항을 보완해서 작성했습니다. 브라우저 구성요소 브라우저는 크게 다음 요소들로 구성되어있다. 이 중 아래서 계속 다룰 내용은 Rendering Engine에 대한 내용이다. 사진출처 user Interface : 뒤로가기, 북마크등을 나타냄 rendering engine: 서버로부터 응답받은 콘텐츠가 HTML일 때 HTML, CSS를 parsing, 해당 콘텐츠를 화면에 그려냄 - 브라우저마다 다른 엔진을 사용 (크롬 : blink, 파이어폭스: gecko) Browser engine : User interface..

관련 면접질문 Callback 패턴, 문제점 Promise, callback의 차이점 ? 각각 장단점 ? promise란? Promise.all은 언제 쓰임? async/await와 promise의 차이는 ? 동기 위에서 아래로 순서대로 실행되는 흐름 각 라인마다 실행되고 완료될 때까지 blocking 비동기 실행 중인 코드가 완료되지 않아도 다음 코드를 실행함 비동기처리가 필요한 이유 - 싱글스레드는 여러 task를 동시에 할 수 없으므로, 비동기적으로 task를 처리해 오래걸리는 작업을 기다리지 않고 다음 작업을 수행함. non-blocking 실행 순서가 보장되지 않는다. 비동기를 처리하기 위해 callback 패턴을 사용한다. 콜백함수 매개변수로 함수를 받거나 인자로 전달되는 함수 매개변수로 함수..

과제설명 이번 과제는 자란다의 기업과제이다. 구현해야 할 사항은 크게 다음과 같았다. 회원가입 / 로그인 - 유효성체크 관리자계정에서 사용자 검색, 권한 수정, 페이지네이션 권한에 따른 페이지 접근 분기 2번 기능을 본인 포함 3명의 팀원과 페어프로그래밍으로 진행했다. 사용자데이터를 필터링하고, 검색하는 기능이 서로 연결되는 부분이 많다고 생각되었고, 해당 부분에 대해 설계 후 기능분담하는쪽 || 같이 구현해보지 못했던 것들을 함께 하는 방법 중 후자의 방법으로 진행했다. 1. 필터링, 검색기능 :: 담당부분 기능시연 영상 권한필터와, 검색기능 코드 //Admin.js const [searchConditions, setSearchConditions] = useState({ searchType: "name..

일과 공부는 다르다. 지식을 쌓으려면 공부를 해야한다. 강의 및 서적 추천 ! 리액트의 아버지ㅋㅋ-udemy 벨로퍼티님 강의 책 - 실전 리액트 프로그래밍 추천스 클래스, hooks에 대한 명확한 이해가 필요 그 회사의 CSS의 클래스명 어떻게 썼는지 분석도 필요. 눈에 익숙하다. Case ROUTE도 상수다. 이런 식으로 빼는 것 좋다! 파일 컴포넌트이름 - 카멜케이스 + 대문자 시작 js로만 해도 누구나 jsx로 된다는건 알 수 있음. 굳이 안써도됨 Page 하위의 이름은 굳이 뒤에 Page 안 붙임- 왜 ? 이미 Page라는건 알 수 있으니 개발자도구의 어느 파일에서 에러가 있다고 확인할 때 파일명만 나옴 - 마우스 hover하면 경로까지 보이긴 하지만, 디버깅 편하게 하려고 붙이는 경우도 있긴 함..

지난 달 26일부터 프리온보딩 과정에 참여하게 되었다. 이전부터 프론트엔드를 하겠다고 생각하고, 공부를 시작했다. 그러나 독학하는게 생각보다 쉽지않았다. 혼자하는게 일정에서는 자유로울수 있지만 그만큼 늘어지기 십상이었다. 또한 문제가 발생했을 때 이를 해결하는 방법이 맞는 방법인지 더 좋은 방법이 있는지 남들과 공유할 수 없었다. 그래서 이런 needs를 충족시키고자 개발동아리에 지원했었지만, 면접을 진행하는 내내, 이 동아리는 현직자들을 더 요하는 것 같다고 느꼈다. 붙었냐고 ? 뭐 어떻게 됐겠는가,, ㅋㅋ; 뭐, 이런 여러 방황아닌 방황. 풀기 힘든 실처럼 꼬여버린 생각들을 갖고 있던 중 해당 프로그램의 설명회를 듣게 되었다. 무엇보다 사람들과 함께하는 것이 매력적이었다. 사실 그거 하나보고 지원했다..

공유해주신 개발자 커뮤니티 질문에 대해 답변도 남기거나 토론도 할 수 있음 ! React Korea 프론트엔드개발그룹 자바스크립트 개발자 포럼 Node.js Korea React Native Seoul 리액트 네이티브[React Native] 한국 사용자 그룹 React Native Community TypeScript Korea AWSKRUG- AWS한국사용자모임 GDG Seoul Facebook Developer Circle: Seoul OSS 개발자 포럼 Chapter : 1 팀 과제 정리 1. Structure : 폴더구조를 정형화하지말자 다른 분들의 구조를 많이 보고 8주간 최대한 여러개를 사용해보며 맞는 것을 적용하자 팀플할 때 내 것만을 고집하지말자. 이렇게 했을 때 어떤 것이 좋고 어떤 점..

문제 출처 영어 끝말잇기를 하는데 탈락하는 사람의 번호와 그 사람 기준 몇번째 턴에 탈락했는지를 구하는 문제이다. 3명의 사람이 있을 때, 4번째 순서에 탈락했다고 하면 1번은 자기의 2번째에 탈락한 것이므로 [1,2]를 반환하면 된다. 탈락 조건은 끝말잇기의 규칙인 마지막글자와 첫 글자가 다를때와 이미 사용한 단어를 재사용했을 때 탈락처리된다. 나는 현재와 이전을 나눠 맨 앞글자, 그리고 이전 단어의 마지막글자를 비교했고 dic에 등장단어를 추가해 재등장했을 때 탈락되도록 했다. 반환값은 총 두개로 현재 누가 탈락했는지, 그 사람의 몇번째 순서에서 탈락했는지이며 각각 현재 누가 탈락했는지 === 현재 순서에서 인원수를 나눈 나머지 + 1(전체 2명, 현재 5턴째 탈락 === (4 % 2 + 1)== 1..

JWT Json 객체를 사용해 가볍고, self-contained 방식으로 정보를 안전성있게 전달해주기 위한 토큰. 1. JWT ? JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. 여기서 keyword는 compact, self-contained, JSON, securely 다. self-contained : 다른 매개를 이용하지 않고 JWT안에 필요한 정보를 담고 있다. JSON : JWT는 JSON형식으로 이루어져 있다. securely : 암호화하..