어제보다 더 나은 오늘

전자정부 프로젝트로 첫 출장을 갔던 튀니지에서 서버 개발자들을 대상으로 연수 프로그램 통역을 했을 때 '화면에 뿌려준다'는 말을 처음 들었다. 당시 IT 프로젝트 통역을 처음 맡았던 거라 Apache, 라우터, 게이트웨이, L4 스위치, 데이터베이스 서버 등 알 수 없는 말들이 난무했는데 저런 기술 용어들은 만국 공용어인지라 정작 통역을 하는 나는 무슨 말인지 몰라도 그냥 그대로 통역을 하면 엔지니어들끼리는 찰떡 같이 알아들었다. 하지만 '화면에 뿌린다'는 건 무슨 말인지 몰라서 그대로 직역을 했더니 튀니지 개발자들도 못 알아듣더라고 😇 결국 연사(speaker)였던 한국 개발자 분에게 화면에 뿌린다는 게 무슨 의미인지 조금 더 구체적으로 설명해 주실 수 있냐고 요청드렸고, 서버에서 받아온 데이터를 화면..

지난주 금요일 리액트에 입문하고 리액트를 학습한지 D+6일차가 되었다. 지금까지 React intro / SPA / state & props 총 3개의 과제를 하면서 바닐라 JS를 쓰는 것보다 리액트를 쓸 때의 간편함을 경험할 수 있었다. 마이 아고라 스테이츠 과제를 할 때 삽질했던 기억들이 좋은 반면교사가 되어주었다. 컴포넌트로 설계하면 편했을 것을... 😇 지금까지 배운 React의 핵심은 : 1. 데이터를 가져온 다음, 2. map() 메소드를 돌려서 받은 데이터를 화면에 뿌려준다. 1번 데이터를 받는 과정은 아직 서버와 통신하는 걸 배우지 못해서 더미 데이터로 하고 있다. 새로운 데이터가 생성되었을 때 기존 데이터와 합치는 것이 역시 관건인데 이 부분은 과제하면서 역시나 삽질을 많이 했고, 결론은..

오늘 아침식사를 하면서 본 클립인데 너무 좋아서 중학교 영어 교사인 친구와 아이를 키우고 있는 두 명의 친구에게 클립을 공유했다. 한편으로는 소프트웨어 교육에 대한 이야기이지만 그보다 폭넓게 평생 학습자로 살아가야 하는 현대인의 교육에 대한 이야기라고 생각한다. 키워드 : 배우는 법을 배우기, 연결 능력 필요에 맞춰 무엇을 학습해야 하는지를 알고, 학습을 위한 구체적인 계획을 세우는 능력이 너무나 중요하다. 세 달 전 무엇을 어디서부터 공부해야 할 지 몰라 막막하던 때도 있었는데, 역시 처음 허들이 가장 높다. 첫 번째 장애물만 통과하면 그 다음부터 시야가 넓어진다. 유체역학의 나비에-스토크스 방정식을 활용해 영화 에서 바다의 풍랑을 CG로 표현하는데 혁혁한 공을 세워 아카데미 기술상을 두 번이나 수상한..

우리의 친구, 우리의 벗 console.log()...! console.log()로 데이터가 잘 들어왔는지, 혹은 생성됐는지 확인하는 용도로 쓴다. 그리고 console.dir()로는 객체를 보다 생생하게 볼 수 있다. stack overflow에 따르면 기본적으로 console.log()와 console.dir()의 역할은 다음과 같다. 1. console.log() : 인자를 string으로 찍어준다. 2. console.dir() : 탐색할 수 있는 트리(navigable tree)를 보여준다. 3. console.table() : 테이블 형태로 자료를 보여주고, 탐색할 수 있는 트리를 그 아래에 출력한다. 먼저 console.log()와 console.dir()의 차이점을 살펴보자. 스택오버플로우..

함수 선언식이나 표현식에 비해 간결한 문법으로 사용할 수 있기 때문에 특히 콜백 함수가 들어갈 argument 자리에 화살표 함수를 쓰는 경우가 많다. 그래서 map(), reduce() 등 배열 내장 메소드와 함께 자주 쓰게 된다. const arr = [1, 4, 9, 16] const newArr = arr.map(x => x * 2) console.log(newArr) // [2, 8, 18, 32] 위의 예제에서 두 번째 줄 .map() 부분을 좀 더 살펴보면 다음과 같다. 중괄호를 제거하고 return 키워드를 빼고 간편하게 적을 수 있다. const newArr = arr.map(x => x * 2) // 아래는 위의 코드와 동일한 코드이다. const newArr = arr.map(x =>..

📍 구현 과제 : 데이터 객체가 배열에 담긴 더미 데이터를 끌어와서 화면에 렌더링 각자 취향대로 css 스타일링 게시판 형태로 페이지네이션 작업 새로운 데이터 입력시 기존 더미 데이터에 합쳐서 화면에 렌더링 로컬 스토리지 이용해 새로운 데이터 저장해서 새로고침 해도 화면에서 유지 github page 이용해서 배포 링크 만들기 📍 과제 구현한 웹페이지 배포 링크 : 아바타 이미지 16종을 준비해서 사용자가 새로운 질문을 등록하면 랜덤 아바타 16개 중 하나가 배정되어서 뜨게 만들었다 🤗 https://ah-ae.github.io/fe-sprint-my-agora-states/ * 과제 코드 확인해 보고 싶으신 분은 GitHub Repository로 들어가시면 됩니다. 과제하면서 배운 것들 1. 페이지네이..

들어가기에 앞서 이 포스팅은 inDepthDev의 아티클 Here is why appendChild moves a DOM node between parents를 번역한 것입니다. 번역에 오류가 있는 경우 댓글을 통해 알려주시면 신속하게 수정하도록 하겠습니다. 나는 웹의 기본 원리를 아는 것이 무엇보다 중요하다고 믿는 사람이다. 그래서 종종 웹 개발 아키텍처나 웹 플랫폼 API에 관한 흥미로운 질문들을 하곤 한다. 이러한 질문을 던짐으로써 피면접자가 자신의 일에 대해 얼마나 열정을 가지고 있는 개발자인지, 지식에 대한 열망을 가지고 얼만큼 멀리 가봤는지를 이해하는 데 도움을 받는다. 지난주 트위터에 다음과 같은 질문을 올렸다. 아래와 같은 HTML 코드와 appendChild 메소드를 사용하는 다음과 같은..

부트캠프 코스 중에서 기술면접 대비 세션이 있었다. 이제까지 한 달 동안 배운 html, css, javascript, dom 관련 주제 중에서 면접에 나올 만한 예상 질문 리스트를 추려서 주고, 그 중에 일부를 선택해서 모의 면접을 보는 식으로 진행되는 세션이었다. 💡 기술 면접 Tip : 결론은 간명하게, 설명과 사례는 구체적으로 css의 box model, 자바스크립트의 스코프, 클로저, 원시자료형과 참조자료형의 차이 등은 충분히 예상 가능한 질문이었지만 요소는 왜 요소의 자식 요소여야만 할까? 라는 질문은 이제껏 너무 당연하게 마크업을 해오면서 한 번도 생각해 보지 못한 질문이었다. 일단 html 파일을 하나 생성해서 브라우저에 띄워보기로 했다. item1 item2 item3 item4 요소로 ..

CSS에서 처음 width, height 속성을 배우면서 max-width라는 속성을 알게 되었을 때 바로 머릿속을 스쳐 지나간 것이 하나 있었다. 바로 아이메시지의 말풍선 크기! 기본적으로 메시지 입력값의 크기만큼 말풍선이 감싸지지만 일정 크기 이상 되면 그 이상으로 커지지는 않고 아랫줄로 넘어가는 것이 max-width를 적용한 레이아웃이었구나. (무릎 탁! 🧐) 그래서 바로 따라서 만들어 본 아이메시지 화면. 짠! 자막이랑 뭘로 작업했대? ㅋㅋ 앗 첫번째 구독자다 영광 ㅋㅋㅋㅋ 가족단톡방에 공유 ㅋㅋ 구독자 5명 확보 캬캬캬 Vllo? 예전에 회사서 영상 몇 개 만들때 썼는데 걍 대충 어플 뚝닥이다 한겨 오 모바일 앱인가보네 웅 ㅋㅋㅋㅋ 하 짱귀... 3번 반복 재생 들어간다 어플 편하드라고 ㅋㅋ ..

Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate.xyz 📍 immutable methods : - slice(), concat() - map(), reduce()