프론트엔드

오늘 3시에 진행된 챌린지반 수업에서는 튜터님이 직접 todolist 과제를 구현하는 것을 실시간으로 볼 수 있었다. 매번 강의로 편집된 프로젝트만 보다가 이렇게 실시간으로 시니어 개발자가 코드를 작성할 때 어떤 순서로, 어떤 기능을 우선적으로 개발하는지 알 수 있어 굉장히 유익했다.  ※ 실시간 세션 중 알게 된 지식들1. 변수명은 F2로 바꾸기변수에 F2를 누르게 되면, 변수명을 바꿀 수 있는 창이 뜨는데 이걸 통해 동일한 변수명을 동시에 바꿀 수 있음2. useRef 사용useRef는 값이 변경되어도 리렌더링이 일어나지 않아, 보존하고 싶은 값을 넣어 둘 수 있음DOM 요소에 접근하고 싶을 때 사용됨useRef의 값은 그 자체에 들어있는 게 아닌 current에 담겨 있음const titleRef ..

평소 진유림 님이 작성해 주신 블로그 글도 많이 읽었고, 유튜브에 올라온 인터뷰나 컨퍼런스 영상도 거의 다 볼만큼 팬(?)이고 해당 발표의 내용도 너무 좋아서 기록해 두고 싶었다. 개발자로서의 역량에는 어떤 게 있을까? 당연히 개발을 잘 해야겠지만, 개발만 잘한다고 해서 인정받는 개발자가 되는 건 어렵다. 발표에서 '코딩은 개발자들이 해야 하는 많은 일 중 하나이며 개발자의 필요조건'이라고 말씀하시는데, 코딩 외에도 많은 기술적 판단과 커뮤니케이션적 요소들 또한 필요로 한다. 기본적으로 다양한 직군들과 협업도 해야 하며, 주어진 업무에 대한 목표 산정과 개발 일정 산출하기, 비기능적 요구 사항 검토하기 등 비즈니스적 측면에서 다양한 능력을 필요로 한다. 발표에서는 발표자 주위의 훌륭한 개발자들이 주어진 ..

- React 입문 강의 중 한 번 더 리마인드가 필요한 내용 정리  1. Javascript 런타임 환경 런타임? 프로그래밍 언어가 구동(running)되는 환경(environment)런타임 환경은 크게 브라우저와 node 환경으로 나뉨// 아래 파일을 브라우저에서 실행하면 정상작동 하지만, node 환경에서 실행하면 오류가 발생// test.jsfunction printAlert() { alert('이 함수는 브라우저 환경에서만 실행됩니다.');}printAlert(); 2. React Children의 사용children은 props 중 하나로, 자식 컴포넌트로 정보를 전달하는 방법컴포넌트 태그 안에 적는게 아닌, 컴포넌트의 opening 태그와 closing 태그 사이의 내용이 childre..

자바스크립트 주간이 끝나고 새로운 리액트의 해가 밝았다. 퀘퀘 묵은 리액트 책을 다시 꺼낼 때가 되었다는 뜻. 예전엔 아 이런 게 있구나 하고 넘어갔었는데, 이번에는 이해라는 것을 해볼 수 있도록 노력해야겠다. 가끔 무난하게 글이 이어지다가 한 번씩 미친 듯이 깊은 내용이 나오는데 그런 구덩이에 빠지지 않게 잘해봐야지. React 과정은 베이지/스탠다드/챌린지로 분반되어 실시간 수업을 진행하는데, 이 중 챌린지를 신청했다. 무시무시한 이름과 다르게 오늘 진행된 챌린지반 OT에서는 어려운 거 가르쳐주는 곳 아니라고 하셨지만 '대신 많은 걸 알아야 한다'라는 뜻이 더 무섭게 느껴졌다.  확실히 아는 것과, 이해하는 것과, 내 것으로 만드는 건 단계마다 엄청난 차이가 있는 것 같다. 아직 이해와 내 것의 사이..

내배캠 시작한 지 한 달 정도 된 것 같은데 벌써 두 번째 팀플이 끝나버렸다..! 시간 진짜 빨리 가는 것 같은 느낌우리 T1F4조..다들 완성까지 힘차게 달리느라 정말 고생 많으셨어요!! 오랜만에 작업에 몰두할 수 있어서 정말 재밌었던 것 같아요. 마이페이지 구성할 때 scrollbar가 아닌 슬라이드도 사용해보고 싶었고, 로그인 구현할 때 세션만료도 넣고 싶었는데 시간이 조금 부족해서 아쉬웠어요. 내일 또 팀이 바뀌는지는 모르겠지만, 계속해서 같이  👍👏❤️😆😂🥳쓰면서 재밌게 뛰어다니고 싶어요(리액션 하도 쓰다 보니 순서랑 뭔지 외워버렸다..!)영화 정보검색 사이트 프로젝트 피드백튜터님 피드백으로부터 또 한 번 배워갑니다. 아래는 우리 팀 피드백 정리본 1. 헤더 고정 기능(우리는 fixed..

오늘부터 모던 자바스크립트 딥다이브 스터디 1일 차 날이다. 웬만하면 다 안다고 생각했던 개념들 중에서도 다시 보니 헷갈리고 더 찾아봐야 할 점들이 많이 보였다. 매니지드 언어 VS 언매니지드 언어1. 매니지드 언어(Managed Language): C언어 같이 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free() 같은 low-level 메모리 제어기능을 제공함. 개발자가 직접 메모리를 제어할 수 있어 높은 수준의 최적화도 가능하지만 그만큼 오류가 발생할 위험도도 높다.2. 언매니지드 언어(Unmanaged Language): 자바스크립트가 여기에 해당되며 메모리의 할당 및 해제를 위한 메모리 기능 관리 기능을 언어 차원에서 담당하고 개발자가 관여할 수 없다. 더 이상 사용하..

A better git log튜터님의 기습 git 특강을 듣고, git log를 깔끔하게 볼 수 있는 방법을 새롭게 배웠다. vsCode에서 터미널을 넓게 쓰지 않기 때문에, git log를 치게 되면 터미널이 꽉 차서 한 눈에 볼 수 있는 로그가 2개 정도밖에 되지 않았다. 평소에도 되게 불편했었는데, 불편함에 익숙해진 나머지 따로 찾아보려하진 않았던 것 같다. git log를 깔끔하게 볼 수 있는 방법은 되게 간단했고, 적용 후 만족도도 굉장히 좋았다. 1. Corderwall의 'A better git log' 사이트 접속 2. 중간에 git config~~로 시작하는 코드 복사 3. vsCode 터미널에 붙여넣기 후 엔터 4. git lg를 통해 log 확인 가능 앞으로 진행될 수준별 학습반에서 ..

팀 프로젝트 + 팀 프로젝트에 적용할 개인 공부 + 스터디 모집 마감 일정을 한 번에 처리하려니 진짜 하루가 부족했다..! 내 시간 어디로 사라진 거지? ※ 웹 폰트 적용하기매번 구글 폰트나 다른 cdn을 사용해서 웹폰트를 다운로드하는 형태로 웹 폰트를 사용했는데, 이번 프로젝트에서는 local에서 서버로 웹 폰트를 올리는 @font-face를 사용해 웹폰트 최적화를 사용하였다. 한 번 최적화에 대해 고민하게 되니, 더욱더 많은 자료를 찾아보게 되었고 가장 도움이 되었던 건 'FE.CONF 2018' 컨퍼런스에서 발표된 웹폰트 최적화 발표 자료였다. 오늘은 자세히 포스팅할 시간이 없어 해당 내용 정리한 것만 기재해 두고, 프로젝트 마감 후 제대로 올려봐야겠다. 아래 내용은 'FE CONF 2018 웹폰트..