Youngble_개발스토리

BF-TEST: 프론트/백 엔드 성향 찾기 프론트엔드와 백엔드 중 자신의 성향에 맞는 포지션을 알 수 있는 테스트 bftest.wecode.co.kr 카카오톡 개발자 오픈채팅방중에서 누군가 링크를 공유해줬는데 프론트, 백엔드 성향찾기라고해서 해봤다. 이미 어느정도 어떤걸 물어보겠구나 짐작은했고 어떤걸 대답하면 어떤 성향일지 예상했긴했다 ㅋㅋ 그래도 재미삼아 궁금해서 해봤는데 둘중 하나만 나오는줄 알았는데 풀스텍도 나오는구나 알게됐다. 움 근데 결과는 예상을 그냥 프론트겠거니 하고 봤는데, 풀스텍인거 보고 솔직히 맞다고 생각했다. 완전 프론트도 완전 백엔드도 아닌 비중이라고 생각했다 지금으로 치면 70 프론트 30 백엔드 비율? 완전 화면만 보이는거 자체 (특히 CSS는 해도해도 그냥 막노동같다)가 재밌는..

웹페이지가 로드될때, 브라우저는 그 페이지의 DOM(Document Object Model)을 생성한다. HTML DOM 모델은 객체들의 트리구조로 구성되어있다. HTML DOM이 있다면, 자바스크립트는 HTML document의 모든 요소들(elements)에 접근할수있고 바꿀수있다. 객체모델이 있다면, 자바스크립트는 동적인 HTML을 생성할때 필요한 모든 권한을 가진다: JavaScript can change all the HTML elements in the page (모든 요소 변경가능) JavaScript can change all the HTML attributes in the page (모든 속성 변경가능) JavaScript can change all the CSS styles in the..

호이스팅에 관하여 알아야하는 정보중에 알면 좋은 정보는 함수선언문과 함수표현식 이다. 함수선언문 function a(){ ... 실행 코드 } a(); 함수선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미한다. 호이스팅시 함수선언문은 함수명, a 가 곧 변수명으로 생각하고 실행된다고 생각하면된다. 함수표현식 정의한 function을 별도의 변수에 할당하는 것을 말한다. 함수선언문은 함수명이 반드시 정의되야 하는 반면, 함수표현식은 정의를 해도 되고 안해도된다. 이때 함수표현식은 기명 함수표현식, 익명 함수표현식으로 두가지로 나뉜다. 만약 함수명을 정의했다면 기명, 하지않았다면 익명 함수표현식이라고 정의하였다. 익명 함수표현식 var b = function(){ // 익명 함수..

실행컨텍스트 실행컨텍스트(execution context)에는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체인데 어떤 실행 컨텍스트가 활성화되는 시점에서 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데 이로인해 다른언어에서는 발견할수없는 특이한 현상들이 발생한다. 이때 실행컨텍스트의 실행할 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택, call stack에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 실행 컨테스트의 콜 스택 실행 순서 예시 코드 //-----(1) var a = 1; function outer(){ fu..

어제, 오늘 SEO 관련해서 실질적으로 구글에 검색할때 어떻게 적용되는지 알고싶어서 조금 테스트를 해봤다. 깊게 공부한건 아니지만 meta, title, body에 내용에 따라 구글에서 어떻게 나오고 어떤 검색을 하면 뜨는지 궁금했다. 먼저 title을 Awesome Place 맛집추천 사이트라고 지정하였고 meta태그의 desciprtion의 content역시 같은 내용으로 썼다. title은 말그대로 그 사이트이름으로 들어갈거라고 생각했고 descrition 이 제목아래 본문내용에 나올까 기대했는데 그건? 아닌거 같기도하고 그냥 검색할때 알고리즘중하나의 색인? 으로 나오는거같고 위의 스크린샷처럼 index.html body 직접적으로 만든 태그는 아닌 리액트의 메인 페이지 component중에 해당 ..

객체를 복사할때 객체안에 직접적인 프로퍼티에 해당한다면 (1차복사, 얕은복사)값만 복사하여 복사한 객체의 프로퍼티값을 바꾸거나 원본객체의 프로퍼티값을 바꿔도 서로 같은것을 참조하지않기 때문에 서로 다른값의 프로퍼티가 된다. 하지만 객체 안의 프로퍼티가 또다른 객체를 가지고 있다면(2차 복사, 깊은복사) 이는 깊은 복사가 필요하다. 만약 깊은복사를 하지않는다면 원본객체에서 값을 바꾸면 복사된 객체에서도 값이 바뀌게 된다. 즉 불변객체를 만들어줘야한다. 이때 깊은 복사하는 방법은 몇가지 있다. 1. 재귀함수 var copyObject = function(target){ var result ={}; if(typeof target==='object'&& target!==null){ for(var prop in ..

앞으로 공부할 순서 코어자바스크립트 책 완독 알고리즘 - 1) udemy의 Javascript 알고리즘& 자료구조 마스터 클래스 강의 듣기 2) 프로그래머스 문제 풀기 2-2)백준 문제풀기 모던자바스크립트 책 완독 CS공부 Next.js (SSR, 서버사이드렌더링 방식으로 해보기) Vue/Angular 해보기 리액트 훅스 공식문서 보고 안해본거 해보기, useMemo, custom Hook 등 Storybook 백엔드 기초 해보기 node.js 및 DB관련 sql 작성법 등등 통신관련 socket http 완벽가이드:웹은 어떻게 동작하는가 책 완독 지긋지긋한 학점을 위한 학교를 제외하고 몰입한다고 생각할때 3개월잡고 하면 얼마나 할수있을까? 일단은 그동안 못했던 자바스크립트 제대로 공부하고 알고리즘/자료..

오늘하루 박종욱 CTO님과 대화와 식사, 훌륭하고 좋은 분이란걸 많이 느꼈다. 직접 찾아와주신거에 당황했고 감사했던 날이다. 부족한 나는 배울게 많고, 세상에 대해 알것도 많다. 근데 가장중요한건 기본.. 어렵다 기본 이렇게 개발블로그를 통해 기록을 남기는데 잊어버리는 나의 머리 에휴. 무엇을 위해 남기는가 일기인가, 출석도장? 내가 쓰고 정리되어 언제봐도 이해하고 까먹지 않았으면 좋겠고, 뭔가 퀄리티있는 내용이나 정리를 할려면 시간을 할애해야하는데..

오늘은 캡스톤 발표 및 수상하는날 고생하고 기대못하다 상받아서 기분좋다.

캡스톤디자인이 끝났다. 팀장으로써 그리고 프론트엔드 솔로로 다 만들기위해 다른 과목에 시간투자하지않고 완성하기위해 많은 시간을 투자했다. 역시나 코딩뿐만 아니라 신경쓸게 너무많았다. 보고서, 피피티, 영상, 스케쥴 조율, 디자인, 데이터 취합, 팀워크, 인간관계 이제 끝냈으니 취업에 몰두할시간이다. udemy 강의다시보고 내 페이스대로 가자!