본문 바로가기

분류 전체보기93

2022-05-25 오느르 성과 엄.. 다른 페이지들도 다 꾸미고 노션에다가 사용자경험 측면 개선사항 정리하고.. 중요도도 옆에 적고 해야댈 듯 Soft UI 이뿌다. 아 스듀하고싶다ㅏㅏㅏㅏㅏㅏㅏㅏㅏ AISM은 디자인 감이 안잡혀서... 매우 헤매는중ㅈ먿리ㅏ멎다ㅣㄻ지ㅏㄷㄹ미다르 할 게 넘 많다 HTML 삽입 미리보기할 수 없는 소스 2022. 5. 25.
[OpenEDC] 페이지 분석 🍿 Starting Page OpenEDC의 시작 페이지는 흰 배경 위의 모달로 시작한다. 굳이..? 스러운 화면 구성이라 왜 이렇게 했는지 찾아보고 큰 문제가 없다면 전체 화면을 사용하면 좋을 것 같다! 모달 안의 내용을 번역해보자면, "이 EDC(Open-Source Electronic Data Capture) 시스템을 사용하면 CDISC ODM-XML 표준에 기반한 안전한 의료 연구 스터디를 설계하고 수행할 수 있습니다. 모든 데이터는 로컬 장치에만 처리되고 저장됩니다. 선택적으로 사용자 자신의 OpenEDC 서버에 연결하여 여러 사용자 및 사이트로 리서치 스터디를 만들 수 있습니다. 빈 프로젝트의 경우 새 프로젝트를 선택합니다. 컴퓨터에 CDISC ODM-XML 파일이 있는 경우 열기를 누르십시오.. 2022. 5. 25.
[개발자 면접 질문 #1] Promise와 Callback의 차이를 설명해주세요. 자바스크립트에서 비동기를 처리할 때 사용되는 Callback과 Promise의 차이를 알아보자! 🍖 Callback을 사용한 비동기 처리 자바스크립트에는 setTimeout() 이라는 대표적인 내장 비동기 함수가 있다. setTimeout()은 두 개의 매개 변수를 받는데, 첫번째는 실행할 작업 내용을 담은 콜백 함수이고, 두 번째는 이 콜백 함수를 수행하기 전에 기다리는 밀리초 단위 시간이다. 즉, setTimeout() 함수는 두번째 인자로 들어온 시간만큼 기다린 후에 첫 번째 인자로 들어온 콜백 함수를 실행한다. function async(callback) { setTimeout(() => { callback("waited 1 sec."); }, 1000); } async(function (msg).. 2022. 5. 24.
[자바스크립트 상식 #1] AJAX 🍔 AJAX Asynchronous Javascript And XML의 약자로, 비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법을 의미한다. 🍔 동작법 사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버에는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트하는 방식이다. 🍔 사용하는 이유 단순하게 웹에서 무언가를 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다. 일반적으로 HTTP 프로토콜은 단방향 통신이므로 클라이.. 2022. 5. 24.
타입스크립트 특징, 사용하는 이유, 문법 타입스크립트란 자바스크립트에 타입을 부여한 언어! 🥨 타입스크립트의 특징 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 자바스크립트와 달리 브라우저에서 실행하려면 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환해야 한다. 이 변환 과정을 컴파일(compile)이라고 부른다. 장점 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다. 단점 : 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다. 자바스크립트 슈퍼셋(Superset) 타입스크립트는 자바.. 2022. 5. 24.
내 코드 컨벤션 🚨 Code Convention 코드 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이라고 한다. 한 파일 당 최대 300줄이 넘지 않게 작성한다. 이미지는 img 태그가 아니라 div 태그의 background-image로 나타낸다. (안 깨지게!) 대체 어디서 쭈워들은거야... img 태그가 검색 시 노출니아 웹페이지 성능 상에서 더 우월하다. img 태그를 사용하자! import는 순서를 지키며 순서 마다 개행한다. 패키지, 라이브러리 layout, api, utils container, components, 내부 폴더의 컴포넌트 나머지 (ex. 이미지, store, styled, types) 약칭을 사용하지 않는다. ( 예. idx(x) index(o) ) 이벤트 함수.. 2022. 5. 24.
Next, Next 특징, Next 설치 🥓 Next React(SPA) + SSR 원래 SPA에 SSR을 더하려면 웹서버, 웹팩, 데이터 로딩, 코드 스플리팅 등등이 필요하지만.. Next를 사용하면 그럴 필요가 없다! 🥓 Next 특징 사전 렌더링 및 서버 사이드 렌더링(SSR) Next는 빌드 시 모든 페이지를 미리 렌더링한다. 따라서 처음 페이지를 불러올 때, 미리 렌더링 해서 만들어진 HTML를 빠르게 사용자에게 제공할 수 있다! 이 특징은 검색 엔진 최적화(SEO)에도 좋다. HTML을 불러온 후에는 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 사용한다. 서버 데이터가 필요한 페이지의 경우엔 SSR로 HTML을 생성한다. Hot Code Reload 코드 변경 사항 저장 시 프로그램이 자동으로 리로드된다. 자동 코드 분할 불필.. 2021. 11. 30.
[Coding Test Practice] 신규 아이디 추천 🍞 링크 https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 🍞 접근 딱히 없음 정규식 사용해보기 🍞 코드 # 정규식 사용 import re def solution(new_id): st = new_id st = st.lower() st = re.sub('[^a-z0-9\-_.]', '', st) st = re.sub('\.+', '.', st) st = re.sub('^[.]|[.]$', '', st) s.. 2021. 10. 30.
[Coding Test Practice] 가장큰수 파이썬 🥐 링크 https://programmers.co.kr/learn/courses/30/lessons/42746 코딩테스트 연습 - 가장 큰 수 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 programmers.co.kr 🥐 접근 시간 초과가 나지 않아야 함. 스트링 형식으로 변환해 내림차순으로 정렬할 경우 "30" 이 "3" 보다 먼저 나오는 문제 해결하기 🥐 코드 def solution(numbers): numbers_str = list(map(str, numbers)) # numbers 배열의 숫자들을.. 2021. 10. 21.
[Coding Test Practice] 오픈채팅방 파이썬 🥯 링크 https://programmers.co.kr/learn/courses/30/lessons/42888 코딩테스트 연습 - 오픈채팅방 오픈채팅방 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오 programmers.co.kr 🥯 접근 고유한 [user_id]에 마지막 [user_nick]을 대입해야 한다. [user_id]와 [user_nick]을 매치해줄 수 있는 딕셔너리(Dictionary)를 이용하자. 🥯 코드 def solution(record): answer = [] # user_id : 들락날락하는 user의 id를 순서대로 담을 배열 user_id = [] # .. 2021. 10. 19.
GPT-3 실행해보기 Google Colaboratory 환경에서 GPT3 실행하기 🍟 환경 세팅하기 !git clone 혹은 레포지토리 다운로드 후 드라이브에 저장하기 https://github.com/shreyashankar/gpt3-sandbox GitHub - shreyashankar/gpt3-sandbox: The goal of this project is to enable users to create cool web demos using the newly releas The goal of this project is to enable users to create cool web demos using the newly released OpenAI GPT-3 API with just a few lines of Pyth.. 2021. 5. 17.
2021-01-20 오늘은 일기에 적을 일이 굉장히 많아서 신난다! 어제랑 그제는 쓸만한 거리도 없고 귀찮아서 안 적었는데.. 덕분에 오늘 더 알차게 쓸 수 있다고 생각하자! 오전 10시 반 쯤 일어나 부랴부랴 연구실로 향했다. 오늘은 처음으로 제대로 GPT3를 활용해보기로 한 날이라 들뜬 마음으로 Google Colaboratory 환경을 세팅했다. 구글 코랩에서 GPT3를 사용하는 법은 아래 글에 정리해뒀다! 2021.05.17 - GPT-3 실행해보기 GPT-3 실행해보기 Google Colaboratory 환경에서 GPT3 실행하기 🍟 환경 세팅하기 !git clone 혹은 레포지토리 다운로드 후 드라이브에 저장하기 https://github.com/shreyashankar/gpt3-sandbox GitHub - s.. 2021. 5. 17.

티스토리툴바