돌멩이 하나 53

[알고리즘] modulo 구현

앞선 포스팅에서 얘기한 것처럼 부트캠프에서 매일 하루에 한 문제씩 알고리즘 문제를 풀게 하면서 하루 일과를 시작한다. (a.k.a. Daily Coding) 이제까지 문제를 딱 보고 pseudo code를 하나도 적지 않고 바로 푼 문제도 있고, 1, 2, 3 번호를 매겨가며 pseudo code를 적은 다음 푼 문제도 있지만 어...? 하고 2초 간 얼었던 문제는 어제가 처음이었다. 나눗셈(/)과 나머지(%) 연산자를 사용하지 않고 두 수의 나머지를 구하는 함수를 작성하는 것 잠시 삼천포를 건널테니 이 포스팅을 읽는 여러분도 위의 함수를 어떻게 짤 지 한 번 생각해 보시면 좋겠다. 개인적으로 부트캠프에서 이제까지 했던 과제 중 가장 인상적인 과제를 꼽으라면 두 가지를 들 수 있겠다. (섹션이 끝날 때마..

[알고리즘] frequency counter pattern

부트캠프에서 매일 아침 알고리즘 문제를 하루에 한 문제씩 풀게 한다. 오늘의 문제는 다음과 같았다. 💡 문자열을 입력받아 아이소그램인지 여부를 리턴한다. 아이소그램(isogram)이란 각 알파벳을 한 번씩만 이용해서 만든 단어나 문구를 말한다. 처음에 문제를 보고는 별 생각 없이 다음과 같이 이중 for문으로 풀었다. function isIsogram(str) { // 빈 문자열이 들어오면 true를 출력한다는 주의사항을 반영 if (!str) return true; str = str.toLowerCase(); for (let i = 0; i < str.length; i++) { for (let j = i + 1; j < str.length; j++) { if (str[i] === str[j]) retu..

export와 import : 로컬 vs. 서버

모듈을 내보내고 가져오는 데에는 크게 두 가지 방식이 있다. 1. 유명 내보내기 (named export) : 여러 값을 내보낼 때 유용하다. 가져갈 때는 변수나 함수의 내보낸 이름과 동일한 이름을 사용해야 한다. constructor를 내보내면 메소드까지 다 같이 사용 가능하다. export { func, foo } // func 와 foo (함수 또는 변수) 내보내기 import { func, foo } from "경로" 2. 기본 내보내기 (default export) : 어떤 이름으로도 가져올 수 있다. 아래 예시에서 동일한 변수명 agoraStatesDiscussions이 아닌 다른 변수명을 지정해도 상관없다. 다만 가져오는 파일 안에서 식별자 충돌이 없어야 한다. default 내보내기는 중괄..

OPEN API와 API Key

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

돌멩이 하나 2022.12.02

'화면에 뿌려준다'는 개발자의 jargon

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

돌멩이 하나 2022.12.02

[React] map() 메소드로 여러 개의 html 엘리먼트 표시할 때 JSX key 속성과 싸운 이야기

지난주 금요일 리액트에 입문하고 리액트를 학습한지 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 : max-width 속성

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

돌멩이 하나 2022.11.13

회원가입 유효성 검사

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

Javascript Koans 과제

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

돌멩이 하나 2022.11.09