맨땅에 헤딩

🔗 사전지식1 (figma) local style이란? local style은 피그마에서 계속 사용할 스타일값들을 특정이름으로 저장해두고 사용하는 것이다. 코드로 생각하면 변수에 자주 쓰는 스타일값을 저장해두고 불러온다고 생각하면 된다. 예를 들어 #f00이라는 값을 계속해서 사용해야 한다면 local style의 color styles에 neutral-01이라는 이름으로 저장해서 color값을 #f00으로 불러오고 싶을때 neutral-01 불러오면 된다. 이렇게 local style을 지정하면, 1. 앞으로 사용할 값들을 손쉽게 불러올 수 있고 2. 값들의 일관성을 지킬 수 있다. 수많은 폰트들이나 색상들을 위와 같이 저장함으로써 여러 명이서 공동작업을 할 때도 전체적으로 통일된 느낌을 유지하기도 편..

프론트엔드 개발자가 되기 위해서는 리액트나 자바스크립트 같은 코드의 구현도 중요하지만, 운영체제나 컴퓨터 전반적인 지식도 필요하다. 공부를 하면서 틈틈이 시간이 날때마다 운영체제나 네트워크같은 지식을 채우려고 유튜브나 서적을 읽었는데 아무래도 비전공자로서 내용이 딱딱하고 단기간에 이해가 어려웠다 🥲 은 이런 고민을 하고 있는 사람들에게 좋은 책이다. 아무래도 다른 책보다 훨씬 쉽고 빠르게 책 한권을 다 읽었는데 외국계회사 개발자이며 인스타그램 IT개그만화작가인 '아무준수'가, IT에 대해서 만화로 쉽게 설명한 책이기 때문이다. 책은 아래와 같이 어려운 부분도 만화로 쉽게 설명되어 있다. 중간중간 약간의 개그도 섞여있어서 IT에 대한 지식이 부족해도 딱딱하지 않게 읽을 수 있는 것이 장점이다. 프론트엔드를..

서비스를 새롭게 출시하거나, 개선하기 위해서는 사용자중심으로 생각할 수 있어야한다. 이를 위해서 사용하는 것이 바로 페르소나(persona)와 여정지도(journeyMap)이다. 페르소나와 여정지도는 모두 더블다이아몬드 process의 2번째 단계인 Develop단계에 해당되며, Define(발견)단계에서 얻은 인사이트들을 새로운 아이디어와 개념으로 시각화하는 단계이다. 📝 페르소나(persona)의 정의 1. 페르소나란? ✅ 서비스의 대표적인 타깃사용자 페르소나(Persona)는 사전적으로 '가면' 혹은 '(다른 사람들 눈에 비치는, 특히 그의 실제 성격과는 다른, 한 개인의) 모습'이다. 한 명의 개인이 타인에게 어떻게 보여지는가를 의미한다고 할 수 있다. 2. UX에서의 페르소나 UX(User Ex..

🧷 링크 문제 설명 ANIMAL_INS 테이블은 동물 보호소에 들어온 동물의 정보를 담은 테이블입니다. ANIMAL_INS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, INTAKE_CONDITION, NAME, SEX_UPON_INTAKE는 각각 동물의 아이디, 생물 종, 보호 시작일, 보호 시작 시 상태, 이름, 성별 및 중성화 여부를 나타냅니다. 동물 보호소에 가장 먼저 들어온 동물의 이름을 조회하는 SQL 문을 작성해주세요. 🙋‍♀️ 내 생각 SQL에는 상위 n개의 레코드만을 세는데 사용하는 키워드가 있다. 그래서 이 키워드를 써야겠다고 생각했다. 그런데 Oracle, SQL Server, MySQL에서 사용하는 키워드가 모두 다르다. 그래서 헷갈리지 ..

🧷링크 문제 설명 다음은 어느 의류 쇼핑몰에 가입한 회원 정보를 담은 USER_INFO 테이블입니다. USER_INFO 테이블은 아래와 같은 구조로 되어있으며 USER_ID, GENDER, AGE, JOINED는 각각 회원 ID, 성별, 나이, 가입일을 나타냅니다. GENDER 컬럼은 비어있거나 0 또는 1의 값을 가지며 0인 경우 남자를, 1인 경우는 여자를 나타냅니다. 문제 USER_INFO 테이블에서 2021년에 가입한 회원 중 나이가 20세 이상 29세 이하인 회원이 몇 명인지 출력하는 SQL문을 작성해주세요. 🙋‍♀️ 내 생각 우선, 몇명인지 수를 세어야하기 때문에 COUNT()를 사용해야겠다고 생각했다. COUNT()는 행의 수를 세기위해 사용하는 다중행 집계함수이다. 그리고 가입일이 2021..

🧷 링크 문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 🙋‍♀️ 내 생각 스택 / 큐를 공부하면서, 실제 코드로도 연습하고 싶어서 풀어본 문제이다. 프로그래머..

스택과 큐는 컴퓨터의 메모리, 자바스크립트의 런타임원리등 공부할 때 자주 등장한 개념이다. 어느정도 익숙한 개념이지만 정확하게 이해하기 위해서 공부해보았다. 스택과 큐는 자료구조를 이해하기 위한 기반이 되며, 이를 통해서 다양한 알고리즘의 구현과 데이터 저장, 관리를 할 수 있다. 따라서 매우 중요한 개념이고 이를 잘 알고 있는 것 또한 중요할 것이다. 스택과 큐의 개념을 정확하게 이해하기 위해서는 먼저 ADT와 DS의 정의에 대한 이해가 필요하다. 그래서 ADT와 DS에 대해서 먼저 알아보고, 스택과 큐에 대해서 알아보는 방식으로 공부하였다. 🧷선행학습 💡 ADT와 DS구분하기 우선 ADT는 abstract data type의 줄임말로, 말 그대로 자료형을 추상적인 개념으로만 나타내는 것이다. 따라서 ..

🧷 링크 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 🙋‍♀️ 내 생각 문제를 보고 숫자를 거꾸로 뒤집기위해서 sort()를 써야겠다고 생각했다. 매개변수 n은 숫자이다. 그런데 sort()는 배열에만 사용할 수 있는 메서드이다. 그래서 sort()를 사용하기 위해서는 형변환이 먼저 이루어져야한다. 이 문제는 sort()메서드만 안다면, 풀기 어렵지 않은 문제이다. 다만, sort()를 사용하고 다시 결괏값을 숫자로 변환하는 등의 여러번의 형변환을 거치는 과정을 잘 생각해야한다. ✅ 내 코드 function solution(n) { return ..

1-1. 데이터 타입의 종류 데이터 타입의 종류 Primitive type Reference type Number String Boolean null undefined Symbol Array Function Date RegExp Map, WeakMap Set, WeakSet 할당, 연산시 ➡️ 복제 할당, 연산시 ➡️ 참조 값이 담긴 주솟값을 바로 복제 값이 담긴 주솟값들로 이루어진 묶음을 가르키는 주솟값을 복제 불변성 엄밀히 말하면, 둘 모두 복제 기본형: 값이 담긴 주솟값을 바로 복제 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 1-2. 데이터 타입에 관한 배경지식 1-2-1 메모리와 데이터 1비트마다 0 또는 1 의 두가지 값을 표현할 수 있다. 메모리들은 매우 많은 비트로..

리액트에서 state를 사용하여 상태를 관리하는 이유를 리액트 공식문서를 기준으로 정리해보았다. 가장 큰 이유는 아래의 2가지이며, 그 외에 각 컴포넌트별로 private한 state관리라는 추가적인 특성을 아래에 +로 정리하였다. 🖥 React에서 state 사용이유 1. 지역변수는 렌더링 간에 유지되지 않아서 2. 지역변수변경은 렌더링을 발동시키지 않아서 state를 사용하지 않고 아래와 같은 방법으로 리액트에서 index라는 변수를 변화시키고자 한다면, UI에는 아무런 변화가 나타나지 않는다. import { sculptureList } from './data.js'; export default function Gallery() { let index = 0; function handleClick()..