1장 - 프로그래밍프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.→ 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야하는데, 이때 필요한 것이 컴퓨팅 사고(Computational thinking)이다. 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안은사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성 한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기(컴파일러, 인터프리터)를 이용하는 것이다. 프로그래밍 언어는 구문(syntax)와 의미(semantics)의 조합으로 표현된다. 문법을 잘 안다고 해서 외국어..

이 발표는 WebView와 React Native가 통신을 할 때의 문제점에 대해 설명하고,webview-bridge 라이브러리가 이 문제점들을 어떻게 해결하는지에 대한 내용이 담겨있다. https://github.com/gronxb/webview-bridge 1. 웹뷰 통신이 왜 필요할까?웹뷰 통신이 왜 필요할까? → InAppBrowser , Native Navigation, Shared Data이 요소들이 각각 무엇을 뜻하는지 AI에게 물어봤다. InAppBrowser (인앱 브라우저): 인앱 브라우저는 모바일 앱 내에서 웹 콘텐츠를 표시하는 기능입니다. 웹뷰 통신이 필요한 이유:앱 내에서 외부 웹 콘텐츠를 원활하게 통합할 수 있습니다.사용자가 앱을 벗어나지 않고도 웹 기반 기능을 이용할 수 있습니..

이 발표는 토스페이먼츠가 어떻게 ‘프론트엔드 개발 답답 3형제’를 해결했는지에 대한 내용이었다. 여기서 프론트엔드 개발 답답 3형제는디자인 프로토타입서버 API요구사항 분석이다. 프론트엔드 개발을 할 때, 해당 요소들이 완성될 때까지 기다리는 것이 보통이지만, 계속 기다리기에는 답답하다.토스페이먼츠는 어떻게 이 문제를 해결했을까?1. 디자인 프로토타입디자인 시스템을 통해서 디자인 비효율을 줄일 수 있다.디자인 시스템의 Strength재료로써 다양한 기능과 형태를 제공유연한 구조, 재사용이 쉬움하지만 단점도 있는데, 디자인 시스템의 Weakness반복되는 코드가 자주 생김작성하는 사람 마다 서로 다른 구현체를 사용 → 누구는 prop으로, 누구는 합성으로 옵션을 처리함화면을 구성하는 제품의 코드가 늘어날 ..

0. 풀페이지 스크롤 애니메이션을 구현하고 싶었다.KUIT 온보딩 페이지를 어떻게 만들까 고민을 시작했을 때, 가장 먼저 떠올랐던 것이 풀페이지 스크롤 애니메이션이었다. 스크롤 한 번 내리면 화면이 하나씩 내려가는 애니메이션을 구현하고 싶었다. PC에서 휠로 스크롤을 하거나, 모바일로 위로 스와이프를 하면 화면이 바뀌는 애니메이션을 구현하고 싶었다. fullPage.js와 같은 라이브러리를 쓰는 것을 먼저 고려해봤지만, 라이센스 비용이 있다는 말을 듣고(비영리면 무료라고 하긴 하지만) 포기했다. 그 대신 Framer-motion을 사용해서 한 번 구현해보기로 했다. 어떻게 해야할지 감은 잘 잡히진 않았지만, 내게는 Claude가 있으니까. 계속 질문하고, 수정하고. 내가 원하는 결과가 나오기까지 반복했다..

1. SSG(Static Site Generation) + Headless CMS로 제작해볼까동아리 온보딩 페이지를 제작 중이다. CSR로 제작할까, SSR로 제작할까 고민 중이었는데, SSG(Static Site Generation)을 사용하면 좋다는 의견이 있어서 Next.js로 SSG를 구현하기로 했다. 왜냐하면 동아리 온보딩 페이지는 내용이 거의 바뀌지 않으니까. 그래도 컨텐츠를 업데이트해야할 수도 있다. 그럴 때마다 코드를 수정해서 배포하면 되지 않을까 생각했는데, 코드를 수정하지 않고도 컨텐츠를 업데이트할 수 있는, 콘텐츠 관리만을 위한 서비스인 Headless CMS를 활용하면 된다! 어떤 Headless CMS를 활용할까 생각하다가, strapi가 좋다는 사람들의 의견이 많아서 strapi..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/86491 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 코드function solution(sizes) { var arr1 = []; var arr2 = []; for(let card of sizes) { if(card[0] arr1 배열과 arr2 배열을 생성한다.sizes 배열을 순회한다.가로 길이가 세로 길이보다 작다면 둘을 뒤바꾼다.arr1에 가로 길이를, arr2에 세로 길이를 push한다..

문제링크 : https://school.programmers.co.kr/learn/courses/30/lessons/42748 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 풀이function solution(array, commands) { var answer = []; for(let arr of commands) { var newArr = []; for(let i = arr[0]; i a-b); answer.push(newArr[arr[2] - 1]); } ..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/428851. 나의 풀이function solution(people, limit) { var sortedPeople = people.sort((a,b) => a-b); let cnt = 0; var i = 0; var j = sortedPeople.length - 1; while(i people 배열을 정렬한, sortedPeople 배열을 생성한다.포인터 두 개를 생성한다. (i는 0, j는 sortedPeople의 맨 끝에)i가 j보다 작거나 같을 동안 계속 순회를 하면서배열에서 가장 큰 값과 작은 값을 더한 값이 limit보다 작거나 같으면 i..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42862 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 풀이function solution(n, lost, reserve) { // 배열 정렬 lost.sort((a, b) => a - b); reserve.sort((a, b) => a - b); let lost_cnt = lost.length; for (let i = lost.length - 1; i >= 0; i--) { ..

1. react-datepicker로 달력을 구현하기로 했다.현재 진행하고 있는 프로젝트에서 달력으로 날짜를 선택하는 것을 구현해야 했다. 달력을 직접 구현하는 것은 힘들 것 같아서 ‘react-datepicker’ 라이브러리를 사용했다. 일단 달력 UI를 피그마에 맞게 커스텀하는 것에 집중했다. 달력을 커스텀하는 것은 생각보다 어려웠지만, 여러 번 시행착오를 겪으니 비슷하게 보이게 만드는데에는 성공할 수 있었다.  2. 이제 날짜 상태를 관리하자이제는 선택한 날짜를 상태로 관리해야 한다.먼저 구조를 설명하자면, SelectBox를 클릭하면 내가 만들어놓은 Dialog 컴포넌트가 나오고, Dialog 컴포넌트의 children에 Datepicker가 있고 그 밑에는 확인(confirm) 버튼과 닫기(ca..