FE (프론트)
-
데이터 타입 (자료형) 원시 타입 - 변경 불가능한 값 - 값에 의한 전달 (Pass by value) - 종류: boolean, number, string, undefined, null, symbol (: let x= 'a', let a = 'a'이면 메모리에 x의 'a'생기고, a는 x의 메모리 부분의 값을 복사하여 자신(a)의 새로운 'a'값을 메모리에 할당. a와 x 비교하면 값은 동일하기에 true 그후 a = 'b'라고 하면, 'a'가 'b'로 변하는게 아니라 'b'가 추가로 쌓이고 걔를 참조함 -> -> 가비지 컬렉터) boolean false: 비어있는 문자열 "", null, undefined, 0 number 숫자, Infinity, -Infinity, NaN undefined : 선언..
[SOPT] week02 세미나 TIL - JavaScript데이터 타입 (자료형) 원시 타입 - 변경 불가능한 값 - 값에 의한 전달 (Pass by value) - 종류: boolean, number, string, undefined, null, symbol (: let x= 'a', let a = 'a'이면 메모리에 x의 'a'생기고, a는 x의 메모리 부분의 값을 복사하여 자신(a)의 새로운 'a'값을 메모리에 할당. a와 x 비교하면 값은 동일하기에 true 그후 a = 'b'라고 하면, 'a'가 'b'로 변하는게 아니라 'b'가 추가로 쌓이고 걔를 참조함 -> -> 가비지 컬렉터) boolean false: 비어있는 문자열 "", null, undefined, 0 number 숫자, Infinity, -Infinity, NaN undefined : 선언..
2023.10.14 -
과제 1 FlexBox Froggy 이런 사이트가 있다니 신기방기 flex 마스터해보자고 링크 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 맨 마지막 문제 약간 얼렁뚱땅 해결해버려서 함 남겨본다 .. 얘의 정답은 #pond { display: flex; flex-wrap:wrap-reverse; flex-direction:column-reverse; align-content:space-between; justify-content:center } 과제 2 CSS Diner css 선택자를 학습할 수 있는 게임 훔 .. 생각보다 내가 몰랐던 선택자가 많다 신기방기 https://flu..
[SOPT] 과제 회고 week01과제 1 FlexBox Froggy 이런 사이트가 있다니 신기방기 flex 마스터해보자고 링크 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 맨 마지막 문제 약간 얼렁뚱땅 해결해버려서 함 남겨본다 .. 얘의 정답은 #pond { display: flex; flex-wrap:wrap-reverse; flex-direction:column-reverse; align-content:space-between; justify-content:center } 과제 2 CSS Diner css 선택자를 학습할 수 있는 게임 훔 .. 생각보다 내가 몰랐던 선택자가 많다 신기방기 https://flu..
2023.10.10 -
JavaScript란? 인터프리터 언어 - 소스 코드를 바로! 실행하는 - 개발자가 별도의 컴파일 작업 수행 x 컴파일러 vs 인터프리터 자바스크립트 가상 머신 호환성? 동적 타입 언어 - 코딩할 때 데이터 타입을 직접적으로 선언하지 않는 언어 - js, python - 값이 '할당'되는 과정에서 자동으로 변수 타입 결정 (js 엔진의 타입 추론) - = 런타임에 타입 지정 런타임? 재할당 시 타입 달라져도 오류 안나는 이유 데이터 타입 cf) 정적 타입 언어 : c, java, typescript. 변수에 저장할 값의 종류를 사전에 타입 지정 일급 객체 (함수) - 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상 이거 꽤나 어렵네 아니네 좀 많이 어렵네 ㅎ ㅠ - 일급 객체의 조건 무명의..
[SOPT] week01 세미나 TIL - JavaScriptJavaScript란? 인터프리터 언어 - 소스 코드를 바로! 실행하는 - 개발자가 별도의 컴파일 작업 수행 x 컴파일러 vs 인터프리터 자바스크립트 가상 머신 호환성? 동적 타입 언어 - 코딩할 때 데이터 타입을 직접적으로 선언하지 않는 언어 - js, python - 값이 '할당'되는 과정에서 자동으로 변수 타입 결정 (js 엔진의 타입 추론) - = 런타임에 타입 지정 런타임? 재할당 시 타입 달라져도 오류 안나는 이유 데이터 타입 cf) 정적 타입 언어 : c, java, typescript. 변수에 저장할 값의 종류를 사전에 타입 지정 일급 객체 (함수) - 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상 이거 꽤나 어렵네 아니네 좀 많이 어렵네 ㅎ ㅠ - 일급 객체의 조건 무명의..
2023.10.07 -
Web html html tag 빈태그 -> 블록레벨 요소 vs 인라인 요소 vs 인라인-블록 요소 html5 구조 CSS CSS Box Model box-sizing : border-box로 하기 ? CSS 선택자 결합선택자 中 자손 vs 자식 형제 선택자 가상 클래스 vs 가상 요소 속성 선택자 구체성
[SOPT] week01 세미나 TIL - web, html, cssWeb html html tag 빈태그 -> 블록레벨 요소 vs 인라인 요소 vs 인라인-블록 요소 html5 구조 CSS CSS Box Model box-sizing : border-box로 하기 ? CSS 선택자 결합선택자 中 자손 vs 자식 형제 선택자 가상 클래스 vs 가상 요소 속성 선택자 구체성
2023.10.07 -
AsyncStorage 설치 npm i @react-native-async-storage/async-storage 활용 예 import AsyncStorage from "@react-native-async-storage/async-storage"; export default function Login({ navigation }) { ... const onLoginClick=async()=>{ try { const response = await axios.post("login 위한 url", { loginId: id, password:password, }, { headers: { Accept: 'application/json', "Content-Type": "application/json", } }); a..
[RN] axios로 accesstoken 받기, AsyncStorage로 로그인 상태 유지하기AsyncStorage 설치 npm i @react-native-async-storage/async-storage 활용 예 import AsyncStorage from "@react-native-async-storage/async-storage"; export default function Login({ navigation }) { ... const onLoginClick=async()=>{ try { const response = await axios.post("login 위한 url", { loginId: id, password:password, }, { headers: { Accept: 'application/json', "Content-Type": "application/json", } }); a..
2023.09.26 -
중앙정렬 (가로, 수평) alignItems: 'center' 중앙정렬 (세로, 수직) justifyContent: 'center' dropdown picker npm i react-native-dropdown-picker https://www.npmjs.com/package/react-native-dropdown-picker/v/2.1.2 react-native-dropdown-picker A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.. Latest versio..
[react native] style 요소 / dropdown picker중앙정렬 (가로, 수평) alignItems: 'center' 중앙정렬 (세로, 수직) justifyContent: 'center' dropdown picker npm i react-native-dropdown-picker https://www.npmjs.com/package/react-native-dropdown-picker/v/2.1.2 react-native-dropdown-picker A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.. Latest versio..
2023.08.06 -
View div 느낌 Text 모든 텍스트들은 Text로 감싸야함 StyleSheet css요소들을 실행해줌 const styles= StyleSheet.create({}); 이 안에 각각의 이름별 style 요소들 작성 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFFCF8', alignItems: 'center', justifyContent: 'center', }, desc:{ fontSize:30, } }); NavigationContainer theme 만들기 https://velog.io/@mementomori/NavigationContainer-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%8..
[react native] 기본 문법 - View, Text, StyleSheet, ImageView div 느낌 Text 모든 텍스트들은 Text로 감싸야함 StyleSheet css요소들을 실행해줌 const styles= StyleSheet.create({}); 이 안에 각각의 이름별 style 요소들 작성 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFFCF8', alignItems: 'center', justifyContent: 'center', }, desc:{ fontSize:30, } }); NavigationContainer theme 만들기 https://velog.io/@mementomori/NavigationContainer-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%8..
2023.07.30 -
초기 세팅 원하는 디렉토리로 이동후 npm install --global expo-cli 로 expo 설치 expo 설치후, expo init 프로젝트명 으로 프로젝트 이니셜라이징 나는 깃에 연결해논 디렉토리 안에 프로젝트를 생성하려 했더니, The directory gomaoom has files that might be overwritten: README.md Try using a new directory name, or moving these files. 이런 내용이 떴다 그래서 걍 리드미 파일 없애고 프로젝트 이니셜라이징함 template 고르라는 옵션이 뜨는데 그냥 맨위의 blank 옵션으로 엔터치기 글케 설치 완료후 vscode로 들가보면 이렇게 잘 뜹니다~ 서버 시작 npm start하면 e..
[react native] 초기 프로젝트 세팅 (expo)초기 세팅 원하는 디렉토리로 이동후 npm install --global expo-cli 로 expo 설치 expo 설치후, expo init 프로젝트명 으로 프로젝트 이니셜라이징 나는 깃에 연결해논 디렉토리 안에 프로젝트를 생성하려 했더니, The directory gomaoom has files that might be overwritten: README.md Try using a new directory name, or moving these files. 이런 내용이 떴다 그래서 걍 리드미 파일 없애고 프로젝트 이니셜라이징함 template 고르라는 옵션이 뜨는데 그냥 맨위의 blank 옵션으로 엔터치기 글케 설치 완료후 vscode로 들가보면 이렇게 잘 뜹니다~ 서버 시작 npm start하면 e..
2023.07.29