어제보다 더 나은 오늘

아직 구체적인 방법은 실습을 해봐야 알겠지만 서버에 데이터를 요청해서 받는 방법을 처음으로 알았다! API, API 하던 것이 무엇인지 이제야 어렴풋이 알 것 같다. API란 하나의 응용 프로그램이 다른 응용 프로그램에 서비스를 요청하는 방식을 일컫는다. 이걸 웹 개발에 적용하면 클라이언트와 서버가 서로 통신할 수 있게 하는 매커니즘이라고 볼 수 있겠다. 9월 말 Nomad Coder - 바닐라 JS로 크롬 앱 만들기를 수강할 때, 마지막 챕터에서 브라우저가 현재 위치 파악해서 OPEN API로 현재 날씨 정보 가져와 화면에 보여주는 걸 했었다. 이때는 코드를 따라치면서도 뭐가 뭔지 하나도 모르고 그냥 그대로 따라치니 화면에 날씨 정보가 뜨고 신기해 하기만 했다. 이걸 지금 다시 보니 모든 코드가 이해가..

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

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

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

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

부트캠프에서 회원가입 페이지의 유효성 검사를 하는 과제가 주어졌다. 요구사항은 아주 간단했다. 아이디가 4글자 이상이어야 함 비밀번호와 비밀번호 확인창의 두 값이 일치해야 함 아이디 길이와 비밀번호 일치 여부에 따른 메시지를 각각의 상황에 적합하게 화면에 출력해야 함 기본 과제는 1) 위의 두 가지 요구사항을 확인하기 위해 true, false 두 가지 boolean 값을 반환하는 함수를 각각 만들고, 2) 해당 유효성 검사 함수 통과 여부에 따라 화면에 적합한 메시지를 출력하는 핸들러 함수를 만들어서 3) 아이디 입력창과 비밀번호 확인 입력창에 2)의 핸들러가 동작하게 하는 keyup 이벤트 리스너를 달면 통과였다. 이벤트 리스너를 달지 않고 onkeyup 으로 처리해도 과제 통과가 되긴 했는데, 기본..

코드스테이츠 소프트웨어 엔지니어링 부트캠프 프론트엔드 코스 21일차. 개강 후 딱 3주가 지났다. 한국에서 가장 오래된 부트캠프답게 하루하루 잘 짜여진 커리큘럼과 여러 면에서 수강생들을 챙겨주는 운영진들의 노고에 감탄을 거듭하고 있다. 그중에서 이제까지의 과제 중 화룡점정에 해당하는 Javascript Koans 과제를 마쳤다. 처음에는 명칭만 보고 자바스크립트 과제인 건 알겠는데 뭘 하라는 거지🤔 했는데, 테스트 코드 형식으로 이제까지 배운 자바스크립트 관련 개념들(변수, 자료형, 함수, 배열, 객체, 스코프, 클로저, spread syntax, 구조 분해 할당)을 총정리하는 백과사전을 만들어놓은 거였다...! 개발자 job description을 볼 때 '테스트 코드 짜 본 경험이 있는 분 우대' 등..

계산기 기능 구현과 코플릿(알고리즘 문제) 풀이시 레퍼런스 코드랑 (누더기 같은) 내 코드를 비교해 보며 몇 가지 공통적으로 보이는 부분이 있어서 마치 오답 노트처럼 적어보는 셀프 크리틱. 1. 쉬운 길 놔두고 괜히 빙 둘러 돌아가지 말자. input으로 string이 들어오면 해당 string을 바로 순회하면서 갈 수 있는 길을 놔두고 string.split("")으로 배열을 만들어서 그 배열로 순회를 하는 그런 거, 이제 하지 말자. 물론 꼭 배열 메소드를 써야 하는 경우라면 그럴 수도 있겠지만. 2. 조건식은 true 값이 나오는 표현식이 들어가는 자리다. 너무 기본적이고 당연한 얘기지만 한 번 더 명심할 필요가 있겠다. 특히 변수가 falsy한 값(false, undefined, null, 0, ..

이번 포스팅은 지난 한 달 반 정도 수강했던 제로베이스 프론트엔드 스쿨에 대한 개인적인 인상에 대한 이야기가 될 예정이지만, 이 포스팅이 어떻게 끝날지는 나도 모른다..ㅋㅋㅋ 크게 상관은 없지만 이 포스팅은 제로베이스에 들어가기 전까지 제가 보낸 2개월 여의 시간에 관한 이야기(a.k.a. 코드스테이츠 광탈 이야기)에서 이어지는 내용으로 궁금하신 분은 이전 포스팅을 보고 오시면 좋습니다. 당시 제로베이스를 선택한 이유: 선발 과정이 없는 가장 빨리 시작할 수 있는 코스였다. 제로베이스의 장점이라고 다가왔던 부분: - 온라인 강의 커리큘럼이 비교적 상세함 - 모회사가 패스트 캠퍼스인 만큼 온라인 강의 퀄리티가 괜찮지 않을까 하는 기대감 제로베이스의 프론트엔드 스쿨의 특징: - 선불제, 정액후불제, 소득공유..

개발자(프로그래머)에게 요구되는 능력은 여러 가지겠지만 한 줄로 정의한다면 '문제를 정의하고 그 문제를 해결하는 사람'이라고 할 수 있겠다. 모든 개발자가 자사 서비스만 만드는 것은 아니기에 고객의 문제를 해결해야 할 때도 고객의 요구사항을 분석하여 문제를 정의하고 해결해야 할테니 근본적인 정의는 같을 것이다. 문제를 해결하려면 문제를 잘 정의해야 하고, 문제를 잘 정의하기 위해서는 질문을 잘 해야 한다. 그래서 요즘은 '좋은 질문'을 하는 것에 대해 자주 생각하고 있다. 질문을 잘 하려면 내가 무엇을 알고 무엇을 모르는지부터 알아야 한다. 그리하여 오늘은 지난 두 달 간 걸어온 나의 여정을 짧게 정리해보려고 한다. 내가 무엇을 알아야 하는지, 지금 무엇을 모르고 있는지도 몰랐던 8월 초가 오늘 이야기의..