개발하는 무민

Ref란? 리액트에서 DOM 요소나 클래스 컴포넌트의 인스턴스에 직접 접근하기 위한 방법을 제공. 컴포넌트 내부의 특정 DOM 요소에 직접 접근하여, 해당 요소를 조작하거나 해당 요소의 정보를 얻을 수 있다. Ref는 주로 폼 입력 처리, 포커스 관리, 애니메이션 직접 조작 등에 사용한다. 예시 코드 1. forwardRef를 사용하는 방식 컴포넌트를 생성할 때 바로 Ref를 전달할 수 있는 함수이다. props와 Ref 두개의 매개변수를 받는다. 주로 함수 컴포넌트에서 사용되며, 컴포넌트 내부에서 ref를 접근할 수 있게 해준다. → 외부에서 Ref를 통해 내부의 input 요소에 접근이 가능하다. - ref를 사용한 FancyInput 컴포넌트 예시 import React, { forwardRef }..

매직메소드란? 클래스 안에 정의된 함수를 우리는 메소드라고 부른다. 메소드 중에서 __로 시작해서 __로 끝나는 메소드들이 있는데, 이를 매직 메소드 또는 특별 메소드라고 부른다. 코드에서 실제로 사용했던 메소드 1) __init__ 클래스의 인스턴스가 생성될 때 자동으로 호출되는 초기화 메서드. → 값을 초기화 할 때 사용하는 함수 # 클래스 인스턴스 초기화 def __init__(self): self.alink = '' self.title = '' self.post_id = '' 객체를 초기화할 때 필요한 속성들을 설정하기 위해 이 메서드를 정의한다. 더보기 * 클래스와 인스턴스의 차이 클래스는 어떤 객체의 설계도나 틀이고, 인스턴스는 해당 클래스를 바탕으로 만들어진 실제 객체이다. * 컴퓨터에서의 ..

로그인 서비스 관련 개발을 하면서 JWT 토큰을 조사한 내용을 정리한다. - JWT란? JWT( Json Web Token)은 웹 표준(RFC 7519)으로 지정되어 있는 JSON 객체를 사용하여 클라이언트와 서버 간에 안전하게 정보를 전달하기 위한 방식 중 하나 - JWT 토큰을 사용하는 이유 아이디,패스워드 로그인 방식은 예전 단말기(어차피 아무나 접근할 수 없는)방식에서의 인증 방식이라 예전에는 문제가 되지 않았었다. 현재는 인터넷이라는 익명성이 있는 웹에서 사용해야 하기 때문에 인증된 통로로 들어와야한다. (아무나 받아주면 안되기 때문에) 그래서 인증된 토큰을 발행해서 해당 유저가 인증 되었음을 확인하기 위해 JWT를 사용한다. 즉, JWT : 유저를 식별하기 위한 토큰 기반 인증 방식 (Json..

슥삭은 대학생 대외활동 앱으로 알고있어서 학교다닐때 주로 사용했던 앱인데, 이번에 무료로 포트폴리오 관련 웨비나를 진행하길래 도움이 될 것 같아 듣게되었다. 온라인으로 진행되어 편하게 들을 수 있었고, 좋은 내용들이 많아 기록하고자 한다. - 포트폴리오를 위해 해야할 것들 1. 내가 쌓은 경험 모으기, 파일이나 그간 메모했던 내용 정리 수업에서 쓴 자료들도 저장해놨다면 참고하면 좋다. 팀 프로젝트 발표 했던 자료 등! 날짜를 기준으로 했던 일들 정리하기 → 날짜별, 학기별 정리 필요 현재 진행중인 프로젝트 → 언제 시작했는지 ~ “ 이런식으로 표현. 이 활동을 통해 어떤걸 배우고자 하는지 과정 설명을 덧붙여주면 좋음, 뭘 배우나가고 있는 중인지 관련 파일들을 모두 묶어서 폴더링하기 관련 자료가 있다면 오..

최근 데이터 처리에 관해 관심을 가지고 있는데 NPC에서 Elastic Search에 관한 웨비나를 진행하길래 가볍게 들으며 메모한 것을 정리한다. 비정형인 많은 데이터들을 어떻게 유용하게 처리할 수 있는지에 대한 내용들을 포함해서 소개하는 행사였다. 엘라스틱 : 정형, 비정형 데이터를 분석할 수 있는 서비스를 제공하는 회사 행사는 위와 같이 진행되었다. 매일 엄청난 양의 데이터는 쌓여가고 있으나, 현실적으로 모든 데이터를 유용하게 처리하기는 어렵다. 매일 생산되는 데이터 → 480EB 정도 비정형 데이터가 80%이고, 기업 내에서 사용되고 있는 데이터는 20% 내이다. 비정형 데이터란? 사용자들이 만들어내는 로그성 데이터.. 머신들이 생성하는 데이터.. 관계형 DB는 20년 전부터 쭉 사용중이다. 관계..

회사에서 API 를 구현하며 swagger와 API 명세서를 작성하고 있는데, 기본적인 작성 방법과 요령을 인지해두는 것이 좋을 듯 해서 카카오 테크니컬라이팅 팀에서 작성한 API 문서 톺아보기 게시글을 참고하여 정리해보고자 한다. API(Application Programming Interface) 서버와 클라이언트가 데이터를 주고 받을 수 있도록 도움을 주는 매개체 일반적으로 정해야 하는 규칙 → 메시지의 데이터 형식은 무엇이고, 글자수 제한이 있다면 몇 자인지, 어떤 방식으로 데이터가 전달되어야 하는지, 요청에 대한 결과는 어떤 형식으로 확인할 수 있는지 API는 단순 기능들을 나열한 명세서가 아니라, 어떤 동작을 하고, 어떤 목적을 위한 것인지, API 사용 전 수행할 사전 작업이 있는지 등의 충..

문자열 다루기 기본 문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. 제한 사항 s는 길이 1 이상, 길이 8 이하인 문자열입니다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있습니다. 입출력 예 s return "a234" false "1234" true 풀이 // 정규 표현식 사용하기 // /\d{6}/: 6자리 숫자 포함 // /^\d{6}/: 6자리 숫자로 시작 // /\d{6}$/: 6자리 숫자로 끝 // /^\d{6}$/: 6자리 숫자 // /^\d{6}$|^\d{4}$/: 6자리 숫자 또는 4자리 숫자 fun..

약수의 합 - 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. - 제한 사항 n은 0 이상 3000이하인 정수입니다. - 입출력 예 n return 12 28 5 6 - 입출력 예 설명 입출력 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 입출력 예 #2 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. function solution(n) { let answer = 0; //결과를 담을 변수 for (let i = 0; i

인턴 업무를 진행하던 도중 컴포넌트끼리 값을 넘기는 작업이 잘 안되어서 store 및 redux에 관련한 개념을 알아야 업무를 진행할 수 있을 것 같아 공부했던 내용의 기록을 위해 정리한다. 리액트에서는 어플리케이션을 만들 때, 기본적으로 하나의 루트 컴포넌트(App.js)에서 상태를 관리한다. 리액트에서는 부모 컴포넌트가 중간자 역할을 한다. (자식들은 부모를 통해서만 대화함) 컴포넌트 끼리 직접 소통도 가능하지만, 그렇게 하면 코드가 꼬이게 된다. (ref를 사용하면 되긴 함) 예를 들어, App에서는 input 값, 이를 변경하는 OnChange 함수, 새 아이템을 생성하는 onCreate 함수 를 props로 Form에게 전달해준다. Form은 해당 함수와 값을 받아서 화면에 보여주고, 변경 이벤..

문자열을 정수로 바꾸기 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. function solution(s) { var answer = 0; answer = Number(s); return answer; } - Number() : 입력된 str 값을 숫자로 변환하여 반환해주는 함수. 숫자가 아..