CODE/Front-end10 Redux-toolkit으로 로그인 구현 (1) state 저장하기 나는 최근에 Next.js로 SSR 환경에서 토이 프로젝트를 개발하고 있다. 간단하게 생각하고 시작했던 프로젝트라, 상태를 다른 컴포넌트에서 쓰더라도 한 두 번 props drilling을 하고 말지라는 생각에 상태 관리 라이브러리를 도입할 생각을 하지 않았다. 하지만 프로젝트 계획을 점점 크게 키우면서 로그인/아웃 기능을 구현해야 하다보니, 전역에서 상태를 관리해야 할 필요성을 느끼게 되었다.그래서 Redux-toolkit으로 로그인 기능을 구현하기로 했다. Redux를 선택한 이유 여러 상태 관리 라이브러리가 있지만 Redux를 선택한 이유는 사실 특별하진 않았다. 우선 한국어로 된 자료가 비교적 많아서, 개발 중 어려운 일이 생겨도 대응하기 수월할 것이라고 판단했다. 실제로 취업을 준비하면서 프론.. 2022. 7. 20. 프로그래머스 Dev-Matching 2021 상반기 과제 올해 상반기 프로그래머스 Dev-Matching을 준비하면서, 지난해 상반기 과제를 풀어보았다. 과제 개요 https://programmers.co.kr/skill_check_assignments/100 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 고양이 사진과 파일 정보가 담긴 API로 일종의 사진 탐색기를 만드는 것이 과제이다. 다른 모듈을 사용하지 않고 바닐라 JavaScript로 만들어야 하며, 제한 시간은 3시간이었다. 우선 첫 화면(root)을 렌더링하는 함수를 구현했다. async/await 비동기 함수로 만들었고, 여기서 Loading은 .. 2022. 3. 12. [JS] 최적화 사용자 경험을 향상시키기 위해 최적화는 필수적이다. Make it work, Make it right, Make it fast - Kent Beck - 성능 향상 실제 사용자가 렌더링된 페이지를 보기까지 간소화시킬 수 있는 모든 과정은 최대한 간소화시키는 것이 중요하다. 우선 초기 구동 시간을 간소화하기 위해 아래의 방법을 사용할 수 있다. 다운로드해야 할 파일의 갯수를 줄이고, 용량을 작게 한다. 예컨대 이미지 스프라이트, 이미지와 폰트의 최적화 등. CSS와 JS 파일은 최소화(minifier)하여 용량을 줄여 사용한다. 프레임워크는 꼭 필요한 것만 사용한다. 반응 시간 향상 사용자의 인터랙티브 경험을 극대화하기 위해선 사용자의 행동에 브라우저가 얼마나 빠르게 렌더링 반응을 보이게 할 지에 대한 개선.. 2021. 12. 21. [JS] 로또 번호 만들기 function randomNum(min, max) { return Math.floor(Math.random()*(max-min) + min) } function LottoMake() { let numArray = [] while (numArray.length a-b) return numArray } console.log(LottoMake()) Math.random() : 0 이상 1 미만의 소수를 무작위로 보여준다 Math.floor() : 버림. 정수 자리만 남기기 위한 방법. 변수.includes() : Array 변수에 파라미터가 포함되어 있는 지 여부를 불리언으로 보여준다. 변수.push() : Array 변수에 파라미터를 추가한다. 2021. 12. 4. [JS] 함수 선언문과 함수 표현식 JavaScript에서 함수는 두 가지 방법으로 만들 수 있다. 함수의 이름을 직접 정하는 함수 선언문과 변수에 함수를 넣어 표현하는 함수 표현식이 바로 그것이다. 함수 만들기 함수 선언문 function add(x, y){ return x + y; } add라는 이름의 함수를 새롭게 선언하였다. 함수 표현식 let add = function(x, y){ return x + y; } 이번에는 add라는 변수에 함수(function)을 넣어 함수를 표현해보았다. 두 함수 모두 결과적으로 아래의 방식으로 동일하게 작동한다. add(3, 5) // 8 2021. 12. 1. [JS] 데이터 형, 연산, 조건문과 반복문 오늘은 멋쟁이사자처럼 프론트엔드스쿨에서 JavaScript의 기초를 배운 두 번째 시간이다. 데이터 형(Type) JS의 모든 값은 7개의 데이터 타입으로 나뉜다. 그 중 6개는 원시 타입(primitive type), 나머지 하나는 객체 타입(object type)으로 분류된다. 타입명 설명 number 숫자 string 문자열 boolean 참/거짓 undefined var로 선언된 변수에 할당되는 암묵적 값 null 값이 없음을 명시적으로 보여주기 위한 값 symbol - 한편 여러 이유로 값의 형 변형을 하게 되는 경우도 있다. parseInt로 string으로 된 숫자를 number로 된 숫자로 바꾼다. parseInt('123', 10) // 123 혹은 부정의 부정은 긍정인 점을 이용하여, .. 2021. 11. 30. [JS] 변수 선언 JavaScript에서 변수를 선언하는 방법은 세 가지가 있다. 1. var 우선 var은 JS 초기에 도입된 변수 선언 방식이나 현재는 쓰이지 않고 있다. 그 이유는 동일 변수를 여러번 재선언하면 그 때마다 다른 값을 출력하는 치명적인 단점을 갖고 있기 때문이다. var byunsu = '천재' console.log(byunsu) // 값 = 천재 var byunsu = '바보' console.log(byunsu) // 값 = 바보 예시에서 보듯, 먼저 byunsu='천재'로 선언했는데 바로 아래에 '바보'라고 재선언했다고 바로 값을 바꿔버린다. 선언 여부와 관계 없이 유연하게 변수 선언을 할 수 있다는 것을 장점이라 볼 수 있겠지만, 코드가 길어지면 그 다음은... (아찔) 2. let var의 치명.. 2021. 11. 27. [HTML] HTML 마크업 한 눈에 보기 말이 필요없다. div 덕지덕지 하지 말고 웹 표준 잘 지켜서 마크업해보자. 2021. 11. 4. [HTML] table 구성 익숙해지기 과거에도 HTML로 표(table)을 몇 번 만들어봤지만, 할 때마다 헷갈린다. 멋사 강사님께서 친절하고 디테일하게 알려주시긴 했지만, 결국 내가 해보지 않으면 아무런 의미가 없다. (표 만드는 것이 아니더라도, 코딩은 무조건 내가 해야 는다!) th th th th th td td td td td td td td td td Table Row = 로 한 줄을 묶어야 한다. , , , 을 활용하여 웹 접근성을 향상시킨다. (없어도 상관은 없음) 셀 병합은 가로로 합칠 땐 colspan, 세로로 합칠 땐 rowspan을 사용한다. table에서 중요하게 챙길 것은 위의 세 가지로 요약해볼 수 있겠다. 테이블 제목 구분 도서명 가격 판매량 1 Hello 1,000 1 2 Apple 2,000 2 3 Romeo.. 2021. 11. 4. [HTML] emmet 문법으로 생산성 부스트업 하기 HTML 마크업을 하다보면 비슷한 태그를 여러개 써야 하는 수고로움이 많이 생긴다. 과거에 마크업을 할 때, 나는 항상 괄호 열고 쓰고 괄호 닫고를 노가다로 반복해왔는데 참 지루하고 성가시다고 여겼다. 그런데, 멋사 프론트엔드 스쿨을 통해서 emmet 문법으로 손쉽게 여러 태그를 만들어내면서 생산성을 '향상'하는 수준이 아니라 로켓을 단 수준으로 부스트업할 수 있다는 사실을 알았다. 그동안 괄호 열고 닫고 한 시간이 너무 아깝다 ^^;;; h1 h1{hello world} hello world h1+p h1{hello}*3 hello hello hello h1#one h1.one 입력할 때, emmet 문법으로 입력하고 키보드의 Tab을 누르면 자동으로 완전한 코드로 변환된다. 예컨대 'h1'을 입력하고.. 2021. 11. 2. 이전 1 다음
